/* Digital store — storefront + admin (neutral retail + restrained accent) */
:root {
  --bg: #f1f5f9;
  --bg-deep: #e2e8f0;
  --bg-elevated: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0c3928;
  --accent-mid: #166534;
  --accent-light: #15803d;
  --accent-hover: #052e16;
  --accent-strong: #14532d;
  --accent-soft: #bbf7d0;
  --accent-soft-alpha: rgba(22, 101, 52, 0.09);
  --accent-muted: #ecfdf5;
  --accent-glow: rgba(22, 101, 52, 0.14);
  --accent-ring: rgba(22, 101, 52, 0.22);
  --gold: #b45309;
  --gold-soft: rgba(180, 83, 9, 0.12);
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --danger: #b42318;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-inner-soft: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: min(1180px, 100% - 2 * clamp(1rem, 4vw, 2.5rem));
  --admin-content-max: 1180px;
  --admin-gutter: clamp(1.15rem, 4vw, 2.25rem);
  --sidebar-w: 280px;
  --topbar-h: 3.5rem;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tap-min: 2.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Storefront: kill sub-pixel horizontal overflow (mobile “Desktop site” / wide touch) that fights vertical scroll */
html:has(body.site) {
  overflow-x: clip;
  max-width: 100%;
}

body.site {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: manipulation;
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #f8fafc 0%, var(--bg) 45%);
  line-height: 1.55;
  letter-spacing: -0.011em;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 10000;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-mid);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: top 0.15s var(--ease);
}
.skip-link:focus {
  top: max(1rem, env(safe-area-inset-top, 0px));
  outline: 2px solid #fff;
  outline-offset: 2px;
}

a {
  color: var(--accent-mid);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 2px;
}
button:focus-visible {
  outline-offset: 3px;
}

/* ——— Layout: full width sections, centered content ——— */
.container {
  width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* ——— Storefront shell: sidebar + top bar ——— */
.site-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: clip;
}

.site-sidebar__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 280;
  background: rgba(15, 22, 18, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
.site-sidebar__backdrop.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width: 900.98px) {
  .site-sidebar__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.site-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 300;
  width: var(--sidebar-w);
  max-width: min(var(--sidebar-w), 92vw);
  background: #ffffff;
  border-right: 1px solid color-mix(in srgb, var(--border-strong) 55%, var(--border));
  box-shadow: 4px 0 32px rgba(15, 23, 42, 0.04);
  transform: translateX(-100%);
  transition: transform 0.28s var(--ease-out);
  padding-top: env(safe-area-inset-top, 0);
}

/* Admin shell: sidebar sits flush with main — no hard vertical rule */
body.admin-body .site-sidebar {
  border-right: none;
  box-shadow: none;
}
@media (max-width: 900.98px) {
  body.admin-body .site-sidebar.is-open {
    box-shadow: 4px 0 28px rgba(15, 23, 42, 0.1);
  }
}
body.admin-body .site-sidebar__head {
  border-bottom: none;
}
html[data-site-theme-mode="dark"] body.admin-body .site-sidebar.is-open {
  box-shadow: 4px 0 36px rgba(0, 0, 0, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .site-sidebar,
  .site-sidebar__backdrop {
    transition: none;
  }
}

@media (min-width: 901px) {
  .site-sidebar {
    transform: translateX(0);
  }
  .site-sidebar__backdrop {
    display: none !important;
  }
}

.site-sidebar.is-open {
  transform: translateX(0);
}

.site-sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 0.95rem 1.5rem;
  gap: 0.15rem;
  -webkit-overflow-scrolling: touch;
}

.site-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.15rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.site-sidebar__logo.logo {
  min-width: 0;
}

.site-sidebar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(15, 24, 18, 0.06);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.site-sidebar__close:hover {
  background: #fff;
  border-color: var(--border);
  color: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(15, 24, 18, 0.08);
}

@media (min-width: 901px) {
  .site-sidebar__close {
    display: none;
  }
}

.site-nav__label {
  margin: 0 0 0.55rem;
  padding: 0 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.92;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  padding: 0.35rem 0 0.85rem;
}

.site-nav__group {
  padding: 0.65rem 0.45rem 0.7rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 9%, var(--border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 18px rgba(13, 24, 18, 0.04);
}
.site-nav__group .site-nav__label {
  margin-bottom: 0.45rem;
}

.site-nav__icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  opacity: 0.82;
  color: inherit;
}
.site-nav__link:hover .site-nav__icon,
.site-nav__link--current .site-nav__icon {
  opacity: 1;
}
.site-nav__link--cta .site-nav__icon {
  opacity: 1;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.75rem 0.68rem 0.8rem;
  border-radius: 11px;
  font-size: 0.9125rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.16s var(--ease),
    color 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.site-nav__link:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
  color: var(--text);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent-mid) 12%, transparent);
}
.site-nav__link:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 2px;
}
.site-nav__link--current {
  background: linear-gradient(135deg, rgba(29, 92, 66, 0.11) 0%, rgba(29, 92, 66, 0.06) 100%);
  color: var(--accent-hover);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent-mid) 18%, transparent);
  box-shadow:
    inset 3px 0 0 var(--accent-mid),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.site-nav__link--admin {
  color: var(--accent-mid);
}
.site-nav__link--cta {
  margin-top: 0.15rem;
  justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-mid) 96%, #000) 0%, var(--accent-mid) 100%);
  color: #fff !important;
  border-color: color-mix(in srgb, var(--accent-mid) 40%, #0a1f15);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(29, 92, 66, 0.28);
}
.site-nav__link--cta:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 10%, var(--accent-mid)) 0%,
    var(--accent-hover) 100%
  );
  color: #fff !important;
  border-color: color-mix(in srgb, var(--accent-mid) 28%, #0a1f12);
  box-shadow: 0 4px 16px rgba(20, 65, 45, 0.28);
}
.site-nav__link--cta.site-nav__link--current {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 6%, var(--accent-mid)) 0%,
    color-mix(in srgb, #000 8%, var(--accent-mid)) 100%
  );
  color: #fff !important;
  box-shadow:
    0 4px 16px rgba(20, 55, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border-color: color-mix(in srgb, #000 6%, var(--accent-mid));
}

.site-sidebar__wallet-card {
  align-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.6rem 0.6rem;
  margin: 0 0 0.75rem;
  border-radius: 14px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-elevated, #fff) 92%, var(--accent-muted)) 0%,
    var(--bg-elevated, #fff) 55%
  );
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-mid));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 8px 22px rgba(15, 23, 42, 0.05);
}

.site-sidebar__wallet-card--dropdown {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.site-sidebar__wallet-card--dropdown.is-wallet-open {
  z-index: 8;
}

.site-sidebar__wallet-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.15rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.site-sidebar__wallet-trigger:hover {
  background: color-mix(in srgb, var(--accent-muted) 22%, transparent);
}

.site-sidebar__wallet-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 2px;
}

.site-sidebar__wallet-trigger__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-muted) 38%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 12%, var(--border));
  color: var(--accent-hover);
}
.site-sidebar__wallet-trigger__icon svg {
  display: block;
  opacity: 0.92;
}

.site-sidebar__wallet-trigger__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.site-sidebar__wallet-trigger__amount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  width: 100%;
  min-width: 0;
}

.site-sidebar__wallet-currency-hit {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  flex-shrink: 0;
}

.site-sidebar__wallet-currency-chev {
  display: block;
  flex-shrink: 0;
  opacity: 0.72;
  transition: transform 0.2s var(--ease-out);
}

.site-sidebar__wallet-card--dropdown.is-wallet-open .site-sidebar__wallet-currency-chev {
  transform: rotate(-180deg);
}

.site-sidebar__wallet-trigger__label-row {
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.25;
}

.site-sidebar__wallet-trigger__hint {
  font-size: 0.7rem;
  line-height: 1.35;
  margin: 0;
}

.site-sidebar__wallet-trigger__guest-value {
  font-size: clamp(0.95rem, 0.82rem + 0.45vw, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.site-sidebar__wallet-currency-chip {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  background: color-mix(in srgb, #fff 88%, var(--accent-muted));
  color: var(--text);
}

.site-sidebar__wallet-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  padding: 0.55rem 0.5rem 0.6rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-mid));
  background: var(--bg-elevated, #fff);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.1),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

.site-sidebar__wallet-panel__title {
  margin: 0 0 0.45rem;
  padding: 0 0.15rem;
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.site-sidebar__wallet-footer {
  margin: 0.2rem 0 0;
  padding: 0.45rem 0.2rem 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.site-sidebar__wallet-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--accent-mid);
  text-decoration: none;
}
.site-sidebar__wallet-footer-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.site-sidebar__currency-form--picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.32rem;
}
@media (max-width: 320px) {
  .site-sidebar__currency-form--picker {
    grid-template-columns: 1fr;
  }
}

.site-sidebar__currency-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.52rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: start;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.site-sidebar__currency-option:hover {
  background: color-mix(in srgb, var(--accent-muted) 35%, #fff);
  border-color: color-mix(in srgb, var(--accent-mid) 14%, var(--border));
}

.site-sidebar__currency-option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 45%, transparent);
  outline-offset: 1px;
}

.site-sidebar__currency-option--current {
  background: color-mix(in srgb, var(--accent-muted) 52%, #fff);
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.site-sidebar__currency-option__code {
  letter-spacing: 0.04em;
}

.site-sidebar__currency-option__check {
  display: flex;
  color: var(--accent-hover);
  line-height: 0;
}

.site-sidebar__wallet-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.site-sidebar__wallet-col--balance {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  position: relative;
  z-index: 1;
}

.site-sidebar__wallet-col--currency {
  flex: 0 0 auto;
  width: min(36%, 5.5rem);
  min-width: 4.5rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  position: relative;
  z-index: 1;
}

.site-sidebar__wallet-col--currency-only {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.site-sidebar__balance-label {
  flex-shrink: 0;
  min-width: 0;
  font-size: 0.625rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  line-height: 1.3;
}
.site-sidebar__wallet-trigger__tagline {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.06rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  line-height: 1.35;
}
.site-sidebar__balance-val {
  display: block;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-size: clamp(0.95rem, 0.82rem + 0.45vw, 1.28rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  letter-spacing: -0.03em;
  line-height: 1.18;
  text-align: start;
  unicode-bidi: isolate;
  overflow: visible;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: manual;
}

@supports (container-type: inline-size) {
  .site-sidebar__wallet-card {
    container-type: inline-size;
    container-name: sidebar-wallet;
  }

  .site-sidebar__balance-val {
    /* Scales with the wallet card width (narrow sidebar), not viewport — full amount stays visible on large screens / zoom */
    font-size: clamp(0.78rem, 0.52rem + 4.25cqi, 1.35rem);
  }
}

.site-sidebar__currency-label {
  display: block;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.3;
}
.site-sidebar__currency-form {
  margin: 0;
}
.site-sidebar__currency-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: #fff;
  cursor: pointer;
}
.site-sidebar__currency-select:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
}

.site-sidebar__foot {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.site-sidebar__logout {
  margin: 0;
}
.site-sidebar__logout-btn {
  width: 100%;
  padding: 0.68rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 24, 18, 0.04);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.site-sidebar__logout-btn:hover {
  background: #fff;
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  box-shadow: 0 2px 8px rgba(13, 24, 18, 0.07);
}

.site-sidebar__hint {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  padding: 0.35rem 0.15rem 0;
  color: var(--muted);
}

.site-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  margin-left: 0;
  overflow-x: clip;
}
@media (min-width: 901px) {
  .site-canvas {
    margin-left: var(--sidebar-w);
    transition: margin-left 0.28s var(--ease-out);
  }
  .site--sidebar-collapsed .site-canvas {
    margin-left: 0;
  }
  .site--sidebar-collapsed .site-sidebar {
    transform: translateX(-100%);
  }
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 45%, var(--border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  padding-top: env(safe-area-inset-top, 0);
}

/* Sticky + full-width backdrop blur is very expensive while scrolling on mobile Safari. */
@media (max-width: 900.98px) {
  .site-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Same jank on phones/tablets using “Desktop site” / wide layout: still coarse pointer, still touch scroll */
@media (min-width: 901px) and (hover: none) {
  .site-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
}

html.site--mobile-drawer-scroll-lock {
  overflow: hidden;
  height: 100%;
}

.site-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-height: var(--topbar-h);
  padding-block: 0.5rem;
}

.site-topbar__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem 0.35rem;
  flex: 1 1 100%;
  order: 0;
  padding-top: 0;
  margin: 0;
  font-size: clamp(0.72rem, 2.8vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-topbar__quick-link {
  color: color-mix(in srgb, var(--muted) 22%, var(--text));
  text-decoration: none;
  padding: 0.12rem 0.08rem;
  border-radius: var(--radius-sm);
}
.site-topbar__quick-link:hover {
  color: var(--accent-hover);
  text-decoration: none;
}
.site-topbar__quick-link--current {
  color: var(--accent-hover);
  font-weight: 750;
}
.site-topbar__quick-sep {
  color: color-mix(in srgb, var(--border-strong) 55%, var(--muted));
  font-weight: 500;
  user-select: none;
  padding: 0 0.05rem;
}
.site-topbar__quick-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  min-width: 0;
}
.site-topbar__start {
  flex-shrink: 0;
  min-width: 0;
}
.site-topbar__center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding-inline: 0.35rem;
  order: 1;
}
.site-topbar__brand {
  display: block;
  max-width: 100%;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.025em;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
}
.site-topbar__brand:hover {
  color: var(--accent-hover);
  text-decoration: none;
}
.site-topbar__brand-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-topbar__brand img {
  display: block;
  width: auto;
  height: auto;
  max-height: 1.75rem;
  max-width: min(10rem, 46vw);
  object-fit: contain;
  margin-inline: auto;
}
/* Desktop-only header search (see @media min-width 901px) */
.site-topbar__search {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  max-width: min(34rem, 100%);
  margin: 0 auto;
  padding-inline: 0.25rem;
  order: 2;
}
.site-topbar-search__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.2rem 0.35rem 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.site-topbar-search__bar:focus-within {
  border-color: color-mix(in srgb, var(--accent-mid) 38%, var(--border));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-soft) 88%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}
.site-topbar-search__icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 88%, #fff);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: color-mix(in srgb, var(--muted) 55%, var(--accent-mid));
}
.site-topbar-search__icon {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  opacity: 0.92;
  pointer-events: none;
}
.site-topbar-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.25rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.site-topbar-search__input::-webkit-search-decoration,
.site-topbar-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.site-topbar-search__input::placeholder {
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  font-weight: 450;
}
.site-topbar-search__input:focus {
  outline: none;
}
.site-topbar-search__submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-mid) 14%, var(--surface-2));
  color: var(--accent-hover);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}
.site-topbar-search__submit:hover {
  background: color-mix(in srgb, var(--accent-mid) 22%, var(--surface-2));
  color: var(--accent-strong, #1d5c42);
}
.site-topbar-search__submit:active {
  transform: scale(0.94);
}
.site-topbar-search__submit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 45%, transparent);
  outline-offset: 2px;
}
.site-topbar-search__submit svg {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.95;
}
.site-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
  min-width: 0;
  order: 3;
  margin-left: auto;
}
.site-topbar__cta-group {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.site-topbar__end {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  min-width: 0;
}

.site-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  line-height: 0;
  box-shadow: var(--shadow-xs);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.site-menu-toggle:hover {
  background: var(--accent-muted);
  border-color: var(--accent-ring);
  color: var(--accent-hover);
}
.site-menu-toggle[aria-expanded="true"] {
  background: var(--accent-muted);
  border-color: var(--accent-mid);
  color: var(--accent-hover);
}

/* Storefront mobile: equal side columns so brand sits on true centerline (like balanced PC header) */
@media (max-width: 900.98px) {
  body:not(.admin-body) .site-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.25rem;
  }
  body:not(.admin-body) .site-topbar__quick {
    display: contents;
  }
  body:not(.admin-body) .site-topbar__menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }
  body:not(.admin-body) .site-topbar__quick-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding: 0.1rem 0 0.05rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    margin-top: 0.1rem;
  }
  body:not(.admin-body) .site-topbar__center {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: max-content;
    max-width: min(72vw, 18rem);
    min-width: 0;
    padding-inline: 0.15rem;
    text-align: center;
  }
  body:not(.admin-body) .site-topbar__brand {
    margin-inline: auto;
  }
  body:not(.admin-body) .site-topbar__brand img {
    max-height: 1.55rem;
    max-width: min(12rem, 58vw);
    margin-inline: auto;
  }
  body:not(.admin-body) .site-topbar__brand-text {
    text-align: center;
    max-width: min(70vw, 16rem);
  }
  body:not(.admin-body) .site-topbar__actions {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
    align-self: center;
  }
  body:not(.admin-body) .site-topbar__wallet-pill--header {
    max-width: max-content;
    padding: 0.26rem 0.42rem 0.26rem 0.36rem;
    gap: 0.32rem;
  }
  body:not(.admin-body) .site-topbar__wallet-pill--header .site-topbar__wallet-pill__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body:not(.admin-body) .site-topbar__wallet-pill--header .site-topbar__wallet-pill__text {
    gap: 0;
  }
}

@media (min-width: 901px) {
  .site-menu-toggle {
    display: flex;
  }
  .site-topbar__start {
    display: flex;
  }
  body:not(.admin-body) .site-topbar__inner {
    display: grid;
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    grid-template-areas: 'quick search actions';
    align-items: center;
    gap: 0.65rem 1.25rem;
    flex-wrap: nowrap;
  }
  body:not(.admin-body) .site-topbar__quick {
    display: flex;
    grid-area: quick;
    flex: unset;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    padding-top: 0;
    order: unset;
  }
  body:not(.admin-body) .site-topbar__center {
    display: none;
  }
  body:not(.admin-body) .site-topbar__search {
    grid-area: search;
    display: flex;
    width: 100%;
    max-width: min(34rem, 100%);
    margin: 0 auto;
    justify-self: center;
    order: unset;
  }
  body:not(.admin-body) .site-topbar__actions {
    grid-area: actions;
    margin-left: 0;
    justify-self: end;
    order: unset;
  }
  body:not(.admin-body) .site-topbar__cta-group {
    display: flex;
  }
}

.balance-pill--topbar {
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 16%, var(--border));
  color: var(--accent-hover);
  box-shadow: var(--shadow-xs);
}

/* Linked wallet chip in top bar (storefront) */
.site-topbar__wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  max-width: min(11.5rem, 38vw);
  padding: 0.32rem 0.55rem 0.32rem 0.42rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--accent-muted) 22%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 20%, var(--border));
  color: var(--accent-hover);
  box-shadow: var(--shadow-xs);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.site-topbar__wallet-pill:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-mid) 12%, transparent);
  text-decoration: none;
  color: var(--accent-strong, #1d5c42);
}
.site-topbar__wallet-pill:active {
  transform: scale(0.98);
}
.site-topbar__wallet-pill__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-muted) 45%, #fff);
  color: var(--accent-mid);
}
.site-topbar__wallet-pill__icon svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}
.site-topbar__wallet-pill__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.15;
}
.site-topbar__wallet-pill__label {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-topbar__wallet-pill__amt {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 400px) {
  .site-topbar__wallet-pill {
    max-width: min(9.5rem, 44vw);
    padding-inline: 0.38rem;
    gap: 0.28rem;
  }
  .site-topbar__wallet-pill__label {
    display: none;
  }
  .site-topbar__wallet-pill__text {
    flex-direction: row;
    align-items: baseline;
    gap: 0.2rem;
  }
}

@media (max-width: 900px) {
  .site-sidebar__backdrop {
    display: block;
  }
  /* Drawer open: main canvas can sit above the dim layer — disable hit-testing so taps reach the backdrop (tap outside to close). */
  .site-shell.site--sidebar-open .site-canvas {
    pointer-events: none;
  }
  /* Storefront mobile: keep hamburger (first child of .site-topbar__quick); hide inline quick links only */
  body:not(.admin-body) .site-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      'menu brand actions'
      'search search search';
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
  }
  body:not(.admin-body) .site-topbar__quick {
    grid-area: menu;
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    width: auto;
    max-width: none;
    margin: 0;
    padding-top: 0;
    order: unset;
  }
  body:not(.admin-body) .site-topbar__quick-link,
  body:not(.admin-body) .site-topbar__quick-sep {
    display: none;
  }
  body:not(.admin-body) .site-topbar__center {
    grid-area: brand;
    order: unset;
    min-width: 0;
    justify-self: center;
    justify-content: center;
    width: max-content;
    max-width: min(72vw, 18rem);
    text-align: center;
  }
  body:not(.admin-body) .site-topbar__brand {
    margin-inline: auto;
  }
  body:not(.admin-body) .site-topbar__search {
    grid-area: search;
    order: unset;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: 0;
  }
  body:not(.admin-body) .site-topbar__actions {
    grid-area: actions;
    order: unset;
    margin-left: 0;
    justify-self: end;
  }
}

/* Admin header: menu + centered page title only */
@media (min-width: 901px) {
  body.admin-body.store-premium .site-topbar__inner.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'quick title';
    align-items: center;
    gap: 0.75rem 1rem;
    flex-wrap: nowrap;
  }
  body.admin-body.store-premium .site-topbar__quick {
    grid-area: quick;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    padding-top: 0;
    order: unset;
  }
  body.admin-body.store-premium .site-topbar__center {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  body.admin-body.store-premium .site-topbar__search,
  body.admin-body.store-premium .site-topbar__actions {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body.admin-body.store-premium .site-topbar__inner.container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'quick title';
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0;
  }
  body.admin-body.store-premium .site-topbar__quick {
    grid-area: quick;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    max-width: none;
    order: unset;
    padding-top: 0;
    margin: 0;
  }
  body.admin-body.store-premium .site-topbar__center {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
    order: unset;
    min-width: 0;
    justify-self: stretch;
  }
  body.admin-body.store-premium .site-topbar__search,
  body.admin-body.store-premium .site-topbar__actions {
    display: none !important;
  }
}

.orders-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.orders-search__input {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 32rem;
}

.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 1.35rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(165deg, #fff 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-xs), var(--shadow-inner-soft);
}
.orders-toolbar__search {
  flex: 1 1 220px;
  min-width: 0;
}
.orders-toolbar__input {
  width: 100%;
  max-width: 36rem;
}
.orders-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
}
.orders-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.orders-toolbar__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.orders-toolbar__select {
  min-width: 10.5rem;
  max-width: 100%;
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}
.orders-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.store-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.store-pagination__info {
  flex: 1 1 auto;
  min-width: 0;
}
.store-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.store-pagination__sizes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.store-pagination__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.store-pagination__size:hover {
  background: var(--accent-muted);
  text-decoration: none;
}
.store-pagination__size.is-active {
  background: var(--accent);
  color: #fff;
}
.store-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.store-pagination__page {
  min-width: 3.5rem;
  text-align: center;
}
.store-pagination__disabled {
  opacity: 0.45;
  pointer-events: none;
}

.admin-list-toolbar {
  margin-bottom: 1.25rem;
}
.admin-list-toolbar.panel {
  padding: 1.05rem 1.2rem 1.15rem;
  margin-bottom: 1.35rem;
  border-color: color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  background: linear-gradient(165deg, #fff 0%, var(--surface-2) 100%);
}
.admin-list-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.admin-list-toolbar__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.admin-list-toolbar__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-list-toolbar__field--search {
  flex: 1 1 220px;
}
.admin-list-toolbar__field--product {
  flex: 1 1 180px;
  min-width: 10rem;
}
.admin-orders-bulk-bar--list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
}
.admin-orders-table__select {
  vertical-align: middle;
}
/* Select column: never use .num here — numeric column style is text-align:right and misaligns checkboxes vs header */
.admin-orders-table th.admin-orders-th-select,
.admin-orders-table td.admin-orders-td-select {
  text-align: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  width: 1%;
  white-space: nowrap;
}
.admin-orders-table th.admin-orders-th-select {
  min-width: 5.25rem;
  vertical-align: top;
}
.admin-orders-table td.admin-orders-td-select {
  vertical-align: middle;
}
.admin-orders-th-select__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.admin-orders-th-select__count {
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  max-width: 6.5rem;
}
.admin-orders-th-rollup {
  vertical-align: top;
}
.admin-orders-th-rollup__sum {
  font-weight: 600;
  margin-top: 0.2rem;
}
.admin-list-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.15rem;
}

.admin-list-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.admin-list-search__input {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 28rem;
}
.admin-list-search__clear {
  font-size: 0.875rem;
  font-weight: 600;
}
/* Payments search: toolbar + panel (form also has .admin-list-search for store-premium hooks) */
.admin-list-search.admin-list-toolbar.panel {
  display: block;
  margin-bottom: 1.35rem;
}
.admin-list-search.admin-list-toolbar .admin-list-search__input {
  flex: none;
  max-width: none;
  width: 100%;
}
.payments-page-search__row {
  align-items: flex-end;
}
.payments-page-search__field {
  flex: 1 1 min(100%, 28rem);
  max-width: 40rem;
}
.payments-page-search__input {
  min-height: 2.5rem;
}
.payments-page-search__actions .admin-list-search__clear {
  text-decoration: none;
}
@media (max-width: 919px) {
  .payments-page-search__row {
    flex-direction: column;
    align-items: stretch;
  }
  .payments-page-search__field {
    max-width: none;
  }
  .payments-page-search__actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
  }
  .payments-page-search__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.logo--text-only {
  gap: 0;
}
.logo--has-img {
  gap: 0;
}
.logo:hover {
  text-decoration: none;
  color: var(--accent-hover);
}

.logo__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent-light) 0%, var(--accent-mid) 45%, var(--accent) 100%);
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.logo__mark--footer {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
}

.nav__link {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__link:hover {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.nav__link--admin {
  color: var(--accent-mid);
  font-weight: 600;
}

.nav__link--btn {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

.nav__logout {
  margin: 0;
  display: inline;
}

.balance-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-muted);
  border: 1px solid rgba(29, 92, 66, 0.14);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Main: full-width band, centered content */
.site-main {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
  /* Lets full-bleed sections use `cqw` for width of this column (viewport minus sidebar on desktop). */
  container-type: inline-size;
  container-name: site-main;
  overflow-x: clip;
}
.site-main__inner {
  margin-left: auto;
  margin-right: auto;
}

/* Flash sits first in main: use equal top/bottom margin so gap matches (avoid main padding-top + flash margin asymmetry) */
.site-main:has(> .site-main__inner > .flash-stack:first-child) {
  padding-top: 0;
}

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block: clamp(1.25rem, 3vw, 2rem);
}

/* ——— Hero full-bleed ——— */
.hero-bleed {
  position: relative;
  /* Fallback: full viewport (mobile overlay sidebar). */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  background: linear-gradient(180deg, #fdfffe 0%, #f1f6f2 52%, #e8f0eb 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  overflow: hidden;
}

/* Bleed to `.site-main` width (content column), not `100vw`, so fixed sidebar is not covered on desktop. */
@supports (width: 100cqw) {
  .site-main .hero-bleed {
    width: 100cqw;
    max-width: 100cqw;
    left: auto;
    right: auto;
    margin-left: calc(50% - 50cqw);
    margin-right: calc(50% - 50cqw);
  }
}

/* Wide touch viewports without container query units: drop `100vw` bleed (avoids horizontal wiggle) */
@media (min-width: 901px) and (hover: none) {
  @supports not (width: 100cqw) {
    .site-main .hero-bleed {
      width: 100%;
      max-width: 100%;
      left: auto;
      right: auto;
      margin-left: 0;
      margin-right: 0;
    }
  }
}

.hero-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(29, 92, 66, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.9;
  pointer-events: none;
}

.hero-bleed__inner {
  position: relative;
  width: var(--container);
  margin: 0 auto;
  text-align: center;
  max-width: 40rem;
}

.hero-bleed__title {
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.14;
  margin: 0 0 0.65rem;
  color: var(--text);
  text-wrap: balance;
}

.hero-bleed__lede {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.65rem;
  margin: 1.15rem auto 0;
}
.hero-actions__btn {
  min-height: var(--tap-min);
  padding-inline: 1.2rem;
  font-weight: 700;
  border-radius: 999px;
}

.hero-trust {
  list-style: none;
  margin: 1.1rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.85rem;
  max-width: 28rem;
}
.hero-trust__item {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-mid);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 70%, var(--accent-muted));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 12%, var(--border));
}

.hero-search {
  margin: 1.25rem auto 0;
  max-width: 38rem;
  text-align: center;
}
.hero-search__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 92%, var(--accent-mid));
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 75%, var(--surface)) 100%);
  box-shadow:
    0 1px 2px rgba(13, 24, 18, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.hero-search__bar:focus-within {
  border-color: color-mix(in srgb, var(--accent-mid) 38%, var(--border-strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-soft) 95%, transparent),
    0 2px 8px rgba(13, 24, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.hero-search__input-wrap {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem 0 1rem;
  min-height: 3rem;
}
.hero-search__input-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  color: var(--muted);
  pointer-events: none;
  opacity: 0.88;
}
.hero-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.hero-search__input::-webkit-search-decoration,
.hero-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.hero-search__input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}
.hero-search__input:focus {
  outline: none;
}
.hero-search__actions {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.45rem 0.4rem 0;
  flex-shrink: 0;
}
.hero-search__btn {
  border-radius: 999px;
  padding-inline: 1.15rem;
  min-height: 2.65rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .hero-search__bar {
    border-radius: var(--radius-lg);
  }
  .hero-search__actions {
    flex: 1 1 100%;
    justify-content: stretch;
    padding: 0 0.5rem 0.5rem;
  }
  .hero-search__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Hero image slider (store home, admin-configured) */
.hero-bleed--has-slider {
  padding-top: 0;
}
.hero-bleed--has-slider .hero-bleed__inner {
  padding-top: clamp(2rem, 5vw, 3rem);
}

/* Match horizontal inset of .container (same as Categories / Products grids) */
.hero-bleed--has-slider .hero-slider {
  width: var(--container);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-slider {
  position: relative;
  width: 100%;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  box-shadow:
    0 4px 6px rgba(13, 24, 18, 0.04),
    0 18px 48px rgba(13, 24, 18, 0.1);
  /* Slider is button-driven; prefer vertical page scroll over accidental horizontal pan on the wide track */
  touch-action: pan-y;
}

.hero-slider__viewport {
  --hero-n: 1;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(56vh, 520px);
  background: linear-gradient(165deg, #e8eee9 0%, #dfe8e1 45%, #d4e0d8 100%);
  position: relative;
}

.hero-slider__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 24, 18, 0.07) 100%);
}

.hero-slider__track {
  display: flex;
  height: 100%;
  width: calc(var(--hero-n) * 100%);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

@media (max-width: 900.98px) {
  .hero-slider__track {
    will-change: auto;
    transition-duration: 0.32s;
  }
}

.hero-slider__slide {
  position: relative;
  flex: 0 0 calc(100% / var(--hero-n));
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #f0f4f1);
}

.hero-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--accent-hover, #145a3c);
  box-shadow: 0 2px 14px rgba(13, 24, 18, 0.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.hero-slider__btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 20px rgba(13, 24, 18, 0.18);
}
.hero-slider__btn:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 2px;
}
.hero-slider__prev {
  left: 0.75rem;
}
.hero-slider__next {
  right: 0.75rem;
}

.hero-slider__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated, #fff) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--border-strong, rgba(15, 23, 42, 0.14)) 55%, transparent);
  box-shadow: 0 4px 16px rgba(13, 24, 18, 0.1);
}

.hero-slider__dot {
  position: relative;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.hero-slider__dot:hover {
  opacity: 1;
}
.hero-slider__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-mid, #1d5c42) 32%, transparent);
  transition:
    width 0.2s ease,
    background 0.2s ease,
    border-radius 0.2s ease;
}
.hero-slider__dot.is-active::after {
  width: 1.42rem;
  border-radius: 999px;
  background: var(--accent-mid, #1d5c42);
}

@media (max-width: 900.98px) {
  .hero-slider__btn {
    width: 2.95rem;
    height: 2.95rem;
  }
  .hero-slider__prev {
    left: 0.5rem;
  }
  .hero-slider__next {
    right: 0.5rem;
  }
  .hero-slider__dots {
    bottom: 0.55rem;
    padding: 0.5rem 0.95rem;
    gap: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track {
    transition: none;
  }
}

/* ——— Store search results ——— */
.page-head--search {
  margin-bottom: 1.25rem;
}
.search-page {
  max-width: 56rem;
  margin-inline: auto;
}
.search-page__toolbar {
  margin-bottom: 1.75rem;
  padding: 1.05rem 1.2rem 1.15rem;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  box-shadow: var(--shadow-sm), var(--shadow-inner);
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
}
.search-page__form {
  margin: 0;
}
.search-page__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 92%, var(--accent-mid));
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 75%, var(--surface)) 100%);
  box-shadow:
    0 1px 2px rgba(13, 24, 18, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.search-page__bar:focus-within {
  border-color: color-mix(in srgb, var(--accent-mid) 38%, var(--border-strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-soft) 95%, transparent),
    0 2px 8px rgba(13, 24, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.search-page__input-wrap {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem 0 1rem;
  min-height: 3rem;
}
.search-page__input-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  color: var(--muted);
  pointer-events: none;
  opacity: 0.88;
}
.search-page__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.search-page__input::-webkit-search-decoration,
.search-page__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-page__input::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}
.search-page__input:focus {
  outline: none;
}
.search-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem 0.4rem 0;
  flex-shrink: 0;
}
.search-page__submit {
  border-radius: 999px;
  padding-inline: 1.15rem;
  min-height: 2.65rem;
  font-weight: 700;
}
.search-page__clear {
  border-radius: 999px;
  min-height: 2.65rem;
}
@media (max-width: 520px) {
  .search-page__bar {
    border-radius: var(--radius-lg);
  }
  .search-page__actions {
    flex: 1 1 100%;
    justify-content: stretch;
    padding: 0 0.5rem 0.5rem;
  }
  .search-page__actions .btn {
    flex: 1;
    justify-content: center;
  }
}
.search-page__stats {
  margin: 0 0 1.75rem;
  font-size: 0.9375rem;
}
.search-page__stats strong {
  color: var(--text);
  font-weight: 600;
}

.search-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-elevated) 100%);
}
.search-empty--none {
  border-style: solid;
  box-shadow: var(--shadow-xs);
}
.search-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.search-empty__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 28rem;
  margin-inline: auto;
}
.search-empty__text a {
  font-weight: 600;
  color: var(--accent-mid);
}

.search-group {
  margin-bottom: 2.5rem;
}
.search-group:last-child {
  margin-bottom: 0;
}
.search-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.search-group__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.search-group__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-muted);
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
}

.search-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    border-color 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .search-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(29, 92, 66, 0.18);
    text-decoration: none;
    color: inherit;
  }
}
.search-card__media {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.search-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .search-card:hover .search-card__media img {
    transform: scale(1.04);
  }
}
.search-card__ph {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(145deg, #e4ebe2, var(--accent-soft));
}
.search-card__body {
  padding: 0.95rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.search-card__type {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.search-card__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}
.search-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--accent-hover);
  line-height: 1.35;
  margin-top: 0.1rem;
}
.search-card__price .card__price-row {
  display: contents;
}
.search-card__price .card__price-list,
.search-card__price .card__price-amount {
  min-width: 0;
}
.search-card__price .card__price-amount {
  color: var(--accent-hover);
}
.search-card__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.search-package-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.search-package {
  display: flex;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 1rem 1.15rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
}
.search-package:hover {
  border-color: rgba(29, 92, 66, 0.22);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
}
.search-package__mark {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-hover);
  background: var(--accent-muted);
  border: 1px solid rgba(29, 92, 66, 0.12);
}
.search-package__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.search-package__label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.search-package__title {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.search-package__sub {
  font-size: 0.8125rem;
  margin-top: 0.1rem;
}
.search-package__price {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent-mid);
  font-variant-numeric: tabular-nums;
}
.search-package__arrow {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 1.1rem;
  opacity: 0.65;
  transition: transform 0.2s, opacity 0.2s;
}
.search-package:hover .search-package__arrow {
  transform: translateX(3px);
  opacity: 1;
  color: var(--accent-mid);
}

@media (max-width: 520px) {
  .search-package {
    flex-wrap: wrap;
  }
  .search-package__price {
    width: 100%;
    padding-left: calc(2.5rem + 0.85rem);
    margin-top: -0.15rem;
  }
  .search-package__arrow {
    display: none;
  }
}

.card__meta {
  margin: -0.15rem 0 0.4rem;
  font-size: 0.8125rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent-mid);
  margin: 0 0 0.85rem;
  opacity: 0.88;
}

/* Sections */
.section-block {
  margin-top: 0;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.section-block:last-child {
  margin-bottom: 0;
}

/* CMS home blocks (Appearance → Pages → Home, after products) */
.cms-home-blocks-stack {
  display: flex;
  flex-direction: column;
  /* Match .home-section.section-block vertical rhythm in premium-ui */
  gap: clamp(2.25rem, 5vw, 3.5rem);
}
.home-below-hero .cms-home-blocks-stack > .section-block.home-section {
  margin-top: 0;
  margin-bottom: 0;
}

.cms-home-block__media-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: start;
}

@media (min-width: 720px) {
  .cms-home-block--media-left .cms-home-block__media-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  }

  .cms-home-block--media-right .cms-home-block__media-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }

  .cms-home-block--media-right .cms-home-block__media {
    order: 2;
  }

  .cms-home-block--media-right .cms-home-block__copy {
    order: 1;
  }
}

.cms-home-block__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.cms-home-block__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.cms-home-block__body,
.cms-home-block__body--rich {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}

.cms-home-block__body--rich {
  color: var(--text);
}

.cms-home-block__body p,
.cms-home-block__body--rich p {
  margin: 0 0 0.85em;
}

.cms-home-block__body p:last-child,
.cms-home-block__body--rich p:last-child {
  margin-bottom: 0;
}

.cms-home-block__body ul,
.cms-home-block__body ol,
.cms-home-block__body--rich ul,
.cms-home-block__body--rich ol {
  margin: 0 0 0.85em;
  padding-left: 1.25rem;
}

.cms-home-block__body a,
.cms-home-block__body--rich a {
  font-weight: 600;
  color: var(--accent-mid);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}

.cms-home-block__body a:hover,
.cms-home-block__body--rich a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-mid);
}

.cms-home-block__body img,
.cms-home-block__body--rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.cms-home-block__body h2,
.cms-home-block__body h3,
.cms-home-block__body h4,
.cms-home-block__body--rich h2,
.cms-home-block__body--rich h3,
.cms-home-block__body--rich h4 {
  margin: 1.15em 0 0.45em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}

.cms-home-block__body h2:first-child,
.cms-home-block__body h3:first-child,
.cms-home-block__body h4:first-child,
.cms-home-block__body--rich h2:first-child,
.cms-home-block__body--rich h3:first-child,
.cms-home-block__body--rich h4:first-child {
  margin-top: 0;
}

.cms-home-block__video-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto clamp(0.85rem, 2vw, 1.15rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 88%, var(--bg));
}

.cms-home-block__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cms-home-block__body--below-video {
  margin-top: clamp(0.85rem, 2vw, 1.15rem);
}

/* CMS block layout templates (home + other storefront pages) */
.cms-home-block--tpl-card .home-section__panel {
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 94%, var(--surface)) 0%, var(--bg-elevated) 100%);
  box-shadow: var(--shadow-sm), var(--shadow-inner-soft);
}

.cms-home-block--tpl-band .home-section__panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-muted) 88%, var(--surface)) 0%, var(--surface-2) 100%);
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent-mid));
}

/* Admin: storefront page builder (preview + form) */
.admin-cms-page-builder {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  max-width: 72rem;
}

@media (min-width: 1100px) {
  .admin-cms-page-builder {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 34rem);
  }
}

.admin-cms-page-builder__iframe {
  display: block;
  width: 100%;
  min-height: 440px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* Admin: compact CMS page editor (single column, collapsible preview) */
.admin-cms-page-builder--compact {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
}
@media (min-width: 1100px) {
  .admin-cms-page-builder.admin-cms-page-builder--compact {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-cms-jump {
  margin: 0 0 0.85rem;
  padding: 0.35rem 0;
}
.admin-cms-jump a {
  font-weight: 600;
  color: var(--accent-mid, #2563eb);
  text-decoration: none;
}
.admin-cms-jump a:hover {
  text-decoration: underline;
}
.admin-cms-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}
.admin-cms-preview-details__summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.admin-cms-preview-details__summary::-webkit-details-marker {
  display: none;
}
.admin-cms-preview-details__summary::before {
  content: "▸ ";
  opacity: 0.55;
}
.admin-cms-preview-details[open] .admin-cms-preview-details__summary::before {
  content: "▾ ";
}
.admin-cms-alert {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
}
.admin-cms-alert--info {
  border-left: 4px solid var(--accent-mid, #3b82f6);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-muted, #93c5fd) 8%);
}

/* Admin: CMS tabbed editors (home / storefront) */
.admin-page-head--cms {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.admin-page-head--cms nav.crumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.admin-cms-tabs {
  margin: 0 0 1rem;
}
.admin-cms-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.2rem;
  margin: 0 auto 1rem;
  max-width: 28rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--border) 12%);
  border: 1px solid var(--border);
}
.admin-cms-tabs__btn {
  flex: 1 1 auto;
  min-width: 5rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-cms-tabs__btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.admin-cms-tabs__btn.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.admin-cms-tabs__panels {
  min-height: 8rem;
}
.admin-cms-tabs__panel.panel {
  margin: 0;
}
.admin-cms-form-actions--center {
  justify-content: center;
  margin-top: 1.25rem;
}

/* Admin: single-column CMS page editors (home / storefront tabs) */
.admin-cms-single-editor-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}
.admin-cms-single-editor-shell .admin-cms-tabbed-form {
  width: 100%;
}
.admin-cms-preview-details--flush {
  margin-top: 1.25rem;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.cms-blk-image-preview__img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  max-height: 14rem;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.cms-blk-raw-html-editor textarea.cms-blk-raw-html-ta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.cms-home-block--raw-html .cms-home-block__raw-html {
  text-align: start;
}

/* Admin: full-page HTML editor */
.admin-cms-full-html-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 0 1.5rem;
}
.admin-cms-full-html-page__head {
  text-align: center;
  margin-bottom: 1rem;
}
.admin-cms-full-html-page__title {
  margin: 0.25rem 0 0;
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.admin-cms-full-html-page__sub {
  margin: 0.35rem 0 0;
}
.admin-cms-full-html-page__sub a {
  font-weight: 600;
}
.admin-cms-full-html-page__warn {
  text-align: center;
  margin: 0 0 0.75rem;
}
.admin-cms-full-html-page__help {
  max-width: 36rem;
  margin: 0 auto 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.admin-cms-full-html-page__help summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.admin-cms-full-html-page__help summary::-webkit-details-marker {
  display: none;
}
.admin-cms-full-html-page__help-body {
  line-height: 1.5;
}
.admin-cms-full-html-page__editor-card {
  margin: 0 auto;
  padding: 1rem 1.1rem;
}
.admin-cms-full-html-page__standalone {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-cms-full-html-page__textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  min-height: 12rem;
}
.admin-cms-full-html-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.admin-cms-full-html-page__danger {
  margin: 1rem auto 0;
  padding: 0.65rem 1rem;
  text-align: center;
  max-width: 28rem;
  border-style: dashed;
}
/* Storefront: visual builder embed (inline regions) */
.site-visual-builder-embed [data-vb-region] {
  outline: 1px dashed color-mix(in srgb, var(--accent-mid) 42%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text;
}
.site-visual-builder-embed [data-vb-region]:focus {
  outline-style: solid;
  outline-width: 2px;
}

/* Admin: visual builder shell */
.admin-vb-shell {
  display: grid;
  gap: 1.15rem;
  align-items: start;
  max-width: 92rem;
}
@media (min-width: 1040px) {
  .admin-vb-shell {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}
.admin-vb-sidebar {
  margin: 0;
  position: sticky;
  top: 0.75rem;
}
.admin-vb-iframe-wrap {
  margin: 0 auto;
  width: 100%;
  transition: max-width 0.2s ease;
}
.admin-vb-iframe-wrap--desktop {
  max-width: 100%;
}
.admin-vb-iframe-wrap--tablet {
  max-width: 834px;
}
.admin-vb-iframe-wrap--phone {
  max-width: 390px;
}
.admin-vb-iframe {
  display: block;
  width: 100%;
  min-height: 72vh;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-vb-iframe-wrap--syncing .admin-vb-iframe {
  pointer-events: none;
  opacity: 0.66;
  transition: opacity 0.15s ease;
}

/* Standalone template canvas (/__vb-template-canvas) */
.vb-editor-canvas-root {
  min-height: 100vh;
  background: var(--surface);
}
.vb-editor-canvas-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.vb-editor-canvas-topbar {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-elevated) 88%, var(--accent-muted));
}
.vb-editor-canvas-topbar__title {
  margin: 0;
  font-size: 0.95rem;
}
.vb-editor-canvas-topbar__key,
.vb-editor-canvas-topbar__hint {
  margin: 0;
}
.vb-editor-canvas-main {
  flex: 1;
  padding-bottom: 2rem;
}
.vb-template-chrome {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--accent-mid) 35%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-elevated) 70%, transparent);
}
.vb-template-chrome__badge {
  margin: 0.65rem 0 0;
}
.vb-template-chrome__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.vb-template-chrome__h {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  line-height: 1.25;
}
.vb-template-chrome__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.vb-template-chrome__fakebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
}
.vb-template-chrome__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--accent);
}
.vb-template-chrome__pill {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.vb-template-chrome__hero {
  padding: 0.25rem 0 0.5rem;
}
.vb-template-chrome__product-grid {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.5rem;
}
.vb-template-chrome__ph {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--border-strong), var(--surface-elevated));
}
.vb-template-chrome__price {
  margin: 0.25rem 0;
  font-weight: 600;
  font-size: 1.1rem;
}
.vb-template-chrome__tabs {
  margin-top: 0.5rem;
}
.vb-template-chrome__crumb {
  margin: 0 0 0.5rem;
}
.vb-template-chrome__sectionhead {
  margin-bottom: 0.65rem;
}
.vb-template-chrome__cardrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vb-template-chrome__mini {
  width: 5.5rem;
  height: 4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
}
.vb-template-chrome__toolbar {
  margin-bottom: 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
}
.vb-template-chrome__tablefake {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vb-template-chrome__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto 4.5rem;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.vb-template-chrome__wallet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.65rem;
}
.vb-template-chrome__walletcard {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.vb-template-chrome__bal {
  margin: 0.15rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.vb-template-chrome__searchbar {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
}
.vb-template-chrome__steps {
  margin: 0;
  padding-left: 1.1rem;
}
.vb-template-chrome__article p {
  margin: 0.35rem 0 0;
}
.vb-template-chrome__formfake {
  max-width: 22rem;
}
.vb-template-chrome__field {
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface);
}
.vb-template-chrome__field--tall {
  min-height: 4rem;
}
.vb-template-chrome__faq {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.vb-template-chrome__faqrow {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.85rem;
}
.vb-template-chrome__codefake,
.vb-template-chrome__legal {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.82rem;
}
.vb-template-chrome__fakefooter {
  padding: 0.5rem 0;
}
@media (min-width: 720px) {
  .vb-template-chrome__ticketsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
    gap: 0.75rem;
    align-items: start;
  }
}
.vb-template-chrome__ticketsplit .vb-template-chrome__tablefake {
  margin: 0;
}
.vb-template-chrome__thread {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1.4;
}
.vb-template-chrome__thread p {
  margin: 0.35rem 0 0;
}
.vb-template-chrome__thread-title {
  margin: 0 0 0.35rem;
}
.vb-template-chrome__reply {
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
}

/* Storefront: visual builder canvas (Phase 2 blocks) */
.vb-canvas {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.vb-layout-slot--header .vb-canvas,
.vb-layout-slot--footer .vb-canvas {
  margin-bottom: 0.75rem;
}
.vb-layout-slot--header {
  width: 100%;
}
.vb-layout-slot--footer {
  padding-top: 0.25rem;
}
body.site .vb-btn--lg {
  padding: 0.75rem 1.35rem;
  font-size: 1.05rem;
}
.vb-block.vb-image img {
  max-width: 100%;
  height: auto;
  display: block;
}
.vb-canvas--empty {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.vb-block.vb-heading {
  margin: 0.35rem 0;
}
.vb-hero {
  margin-bottom: 1rem;
}
.vb-hero--left {
  text-align: left;
}
.vb-hero--center {
  text-align: center;
}
.vb-hero--right {
  text-align: right;
}
.vb-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .vb-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.site-visual-builder-embed .vb-block {
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
  position: relative;
}
.site-visual-builder-embed .vb-block:hover {
  outline-color: color-mix(in srgb, var(--accent-mid) 35%, transparent);
}
.site-visual-builder-embed .vb-block.vb-block--selected {
  outline-color: var(--accent-mid);
  outline-style: solid;
  outline-width: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-mid) 32%, transparent);
  z-index: 3;
}

.site-visual-builder-embed .vb-block__handle {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  padding: 0 0.15rem;
  font-size: 0.55rem;
  line-height: 1;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--text) 75%, var(--surface));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-muted));
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, var(--accent-mid));
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  opacity: 0.92;
}
.site-visual-builder-embed .vb-block__handle:active {
  cursor: grabbing;
}
.site-visual-builder-embed .vb-block.vb-block--selected .vb-block__handle {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-mid) 55%, var(--border-strong));
}

/* Visual builder embed: canvas drop zones + floating toolbar (Phase 4) */
.site-visual-builder-embed.vb-drop-zones-active .vb-drop-slot {
  min-height: 24px;
  margin: 5px 0;
}
.site-visual-builder-embed .vb-drop-slot {
  height: 8px;
  margin: 3px 0;
  border-radius: 4px;
  position: relative;
  z-index: 4;
  transition: background 0.12s ease, min-height 0.12s ease;
  min-height: 6px;
}
.site-visual-builder-embed .vb-drop-slot__line {
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: transparent;
}
.site-visual-builder-embed.vb-drop-zones-active .vb-drop-slot__line {
  background: color-mix(in srgb, var(--accent-mid) 55%, transparent);
  height: 3px;
  margin-top: 10px;
}
.site-visual-builder-embed .vb-drop-slot__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-mid) 70%, var(--text));
  text-align: center;
  margin-bottom: 0.15rem;
  pointer-events: none;
}
.site-visual-builder-embed.vb-drop-zones-active .vb-drop-slot--root {
  padding: 0.35rem 0.25rem 0.2rem;
}

.site-visual-builder-embed .vb-root-insert-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.35rem 0;
  padding: 0.25rem 0;
  border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 75%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-muted));
}
.site-visual-builder-embed .vb-root-insert-bar__btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 40%, var(--border-strong));
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .site-visual-builder-embed .vb-root-insert-bar__btn:hover {
    border-color: var(--accent-mid);
    background: color-mix(in srgb, var(--surface) 70%, var(--accent-muted));
  }
}
.site-visual-builder-embed .vb-drop-slot--hover,
.site-visual-builder-embed .vb-drop-slot--point {
  outline: 2px solid var(--accent-mid);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--accent-muted) 40%, transparent);
}
.site-visual-builder-embed .vb-float-toolbar {
  position: fixed;
  z-index: 99998;
  display: none;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 94%, #000);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}
.site-visual-builder-embed .vb-float-toolbar__btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.site-visual-builder-embed .vb-inline-editing {
  outline: 1px dashed color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

.admin-vb-canvas-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
  max-height: 6.5rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-muted));
}
.admin-vb-canvas-palette__chip {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: grab;
}
.admin-vb-canvas-palette__chip--pat {
  border-style: dashed;
}
.admin-vb-canvas-palette__chip--user {
  border-color: color-mix(in srgb, var(--accent-mid) 45%, var(--border-strong));
}

/* Admin: visual builder block tree */
.admin-vb-block-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 20rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.8125rem;
}
.admin-vb-block-tree__nest {
  list-style: none;
  margin: 0.15rem 0 0.25rem;
  padding: 0 0 0 0.65rem;
  border-left: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.admin-vb-block-tree__nest--root {
  margin: 0;
  padding: 0;
  border-left: 0;
}
.admin-vb-block-tree__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-vb-block-tree__drag {
  cursor: grab;
  flex: 0 0 auto;
  opacity: 0.45;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: -0.06em;
  user-select: none;
}
.admin-vb-block-tree__label {
  flex: 1;
  min-width: 0;
}
.admin-vb-block-tree__item {
  cursor: default;
  padding: 0.25rem 0.35rem 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.admin-vb-block-tree__item:hover {
  background: color-mix(in srgb, var(--accent-muted) 22%, var(--surface));
}
.admin-vb-block-tree__item--selected {
  background: color-mix(in srgb, var(--accent-muted) 50%, var(--surface));
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent-mid);
}
.admin-vb-block-tree__item--drag-over {
  outline: 1px dashed color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 1px;
}
.admin-vb-revisions,
.admin-vb-user-patterns {
  list-style: disc;
}
.admin-vb-block-props .label {
  margin-top: 0.5rem;
}

/* Admin: CMS blocks composer (redesigned palette + cards) */
.cms-block-composer-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}
.cms-block-composer-layout__sort-root {
  min-width: 0;
}
.cms-block-composer-layout--compact {
  max-width: 100%;
}
.admin-cms-block-palette {
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 92%, var(--accent-muted) 8%) 0%, var(--surface-2) 100%);
}
.admin-cms-block-palette__head {
  margin-bottom: 0.85rem;
}
.admin-cms-block-palette__title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.admin-cms-block-palette__hint {
  margin: 0;
  line-height: 1.45;
  max-width: 40rem;
}
.admin-cms-block-palette__look {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.admin-cms-block-palette__look-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
}
.cms-block-tpl-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--border) 12%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.cms-block-tpl-seg__btn {
  margin: 0;
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.cms-block-tpl-seg__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
  .cms-block-tpl-seg__btn:hover:not(.is-active) {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }
}
.admin-cms-block-palette__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 520px) {
  .admin-cms-block-palette__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cms-block-palette-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0;
  padding: 0.65rem 0.7rem;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cms-block-palette-card:hover {
    border-color: color-mix(in srgb, var(--accent-mid) 40%, var(--border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }
}
.cms-block-palette-card__title {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cms-block-palette-card__sub {
  line-height: 1.3;
  font-size: 0.72rem;
}
.cms-block-slot {
  margin: 0 0 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  isolation: isolate;
}
.cms-block-slot--empty {
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface) 35%);
}
.cms-block-slot--hidden {
  display: none !important;
}
.cms-block-slot__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  padding: 0.65rem 0.85rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.cms-block-slot__bar-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.cms-block-slot__handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: grab;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cms-block-slot__handle:active {
  cursor: grabbing;
}
@media (hover: hover) and (pointer: fine) {
  .cms-block-slot__handle:hover {
    background: color-mix(in srgb, var(--accent-muted) 40%, var(--surface-2));
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  }
}
.cms-block-slot__handle-grip {
  display: block;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    currentColor 0 2px,
    transparent 2px 5px
  );
  opacity: 0.55;
}
.cms-block-slot__title {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cms-block-slot__badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-mid, #3b82f6);
}
.cms-block-slot__bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: auto;
  position: relative;
  z-index: 25;
  flex-shrink: 0;
}
.cms-block-slot__fields {
  padding: 0.65rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cms-block-slot__type-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cms-block-slot__type-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
}
.cms-block-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cms-block-type-chip {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cms-block-type-chip.is-active {
  border-color: color-mix(in srgb, var(--accent-mid) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-muted) 35%, var(--surface));
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .cms-block-type-chip:hover:not(.is-active) {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  }
}
.cms-block-slot__type-fallback {
  margin-top: 0.35rem;
  position: relative;
  z-index: 4;
}
.cms-block-slot__type-menu-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  font-weight: 600;
}
.cms-block-slot__type-select {
  max-width: 100%;
  position: relative;
  z-index: 4;
}
.cms-block-slot__section {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.cms-block-slot__section[hidden] {
  display: none !important;
}
.cms-block-slot__section-label {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cms-block-tpl-seg--slot {
  margin-bottom: 0.35rem;
}
.cms-blk-raw-html-editor--slot {
  margin-top: 0.5rem;
  border-style: solid;
}
.cms-blk-image-preview--slot {
  margin-top: 0.45rem;
}
.cms-blk-image-preview__label {
  margin: 0 0 0.35rem;
}
.cms-block-slot--collapsed .cms-block-slot__fields {
  display: none;
}
.cms-block-slot--ghost {
  opacity: 0.55;
}
.cms-block-slot--chosen {
  box-shadow: var(--shadow-sm);
}

.section-head {
  margin-bottom: clamp(1.35rem, 2.8vw, 2rem);
  text-align: center;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.section-head__title {
  position: relative;
  display: inline-block;
  font-size: clamp(1.28rem, 2.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--text);
}
.section-head__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent-mid));
  opacity: 0.9;
}

.section-head__sub {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.section-head__sub a {
  font-weight: 600;
  color: var(--accent-mid);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}
.section-head__sub a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-mid);
}

.page-head {
  margin-bottom: 2rem;
}

.page-head--ruled {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.page-head__title {
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.35rem 0 0;
  line-height: 1.2;
}

.page-head__sub {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}

.crumb {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.crumb a {
  color: var(--muted);
  font-weight: 500;
}
.crumb a:hover {
  color: var(--accent-mid);
}
.crumb__sep {
  margin: 0 0.4rem;
  opacity: 0.45;
}

/* Order detail — professional receipt-style layout */
.order-detail-page {
  width: 100%;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.order-detail-page__head {
  margin-bottom: 1.35rem;
  text-align: left;
}
.order-detail-page__head .crumb {
  text-align: left;
}
.order-detail-page__head .page-head__title {
  text-align: left;
  margin-top: 0.35rem;
}

/* Storefront order detail — compact header + total strip (no duplicate summary grid) */
.order-detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.order-detail-hero-meta__placed {
  color: var(--muted);
  font-weight: 500;
}

.order-detail-hero-meta__sep {
  color: color-mix(in srgb, var(--muted) 55%, var(--border));
  font-weight: 300;
}

.order-detail-strip {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
}

.order-detail-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.order-detail-strip__total {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.order-detail-strip__label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-strip__value {
  margin: 0;
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--accent-hover);
  line-height: 1.15;
}

.order-detail-strip__product {
  flex: 1 1 14rem;
  min-width: 0;
  text-align: right;
}

.order-detail-strip__product-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-strip__product-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.order-detail-strip__product-link {
  color: var(--accent-mid);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}

.order-detail-strip__product-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-mid);
}

.order-detail-strip__smm {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin: 0;
}

.order-detail-strip__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.order-detail-strip__stat-k {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-strip__stat-v {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

@media (max-width: 520px) {
  .order-detail-strip__row {
    flex-direction: column;
    align-items: stretch;
  }

  .order-detail-strip__smm {
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  }

  .order-detail-strip__product {
    text-align: left;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  }
}

.order-detail-product-anchor {
  color: var(--accent-mid);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}

.order-detail-product-anchor:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-mid);
}

.order-detail-product-anchor--title {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  border-bottom-width: 2px;
}

.order-detail-product-plain-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}

@media (min-width: 768px) {
  .order-detail-product-anchor--title {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  .order-detail-product-plain-title {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}

.order-detail-card--product .order-detail-section-title {
  margin-bottom: 0.85rem;
}

@media (min-width: 768px) {
  .order-detail-dl--split-pc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.75rem;
    row-gap: 0;
    align-items: start;
  }

  .order-detail-dl--split-pc > .order-detail-dl__row--product-name {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0 1.25rem 0 0;
    border-bottom: none;
    border-right: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  }

  .order-detail-dl--split-pc > .order-detail-dl__row--package-line {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

  .order-detail-dl--split-pc > .order-detail-dl__row--stack {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  }

  .order-detail-dl--split-pc > .order-detail-dl__row--product-name dt,
  .order-detail-dl--split-pc > .order-detail-dl__row--package-line dt {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .order-detail-dl--split-pc > .order-detail-dl__row--package-line dd {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
  }
}

@media (min-width: 900px) {
  .order-detail-page {
    max-width: min(48rem, 100%);
  }
}

@media (min-width: 1100px) {
  .order-detail-page {
    max-width: min(52rem, 100%);
  }
}

@media (min-width: 720px) {
  .order-detail-strip__row {
    align-items: flex-end;
  }

  .order-detail-strip__product {
    flex: 1 1 min(22rem, 42%);
    max-width: 28rem;
  }

  .order-detail-strip__product-name {
    font-size: 1rem;
    line-height: 1.4;
  }
}

.order-detail-summary {
  margin-bottom: 1rem;
  padding: 0;
  overflow: hidden;
}
.order-detail-summary__grid {
  display: grid;
  gap: 1px;
  margin: 0;
  background: color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .order-detail-summary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .order-detail-summary__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.order-detail-summary__cell {
  padding: 1rem 1.1rem;
  min-width: 0;
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
}
.order-detail-summary__cell--product {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .order-detail-summary__cell--product {
    grid-column: auto;
  }
}
.order-detail-summary__dt {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-detail-summary__dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.order-detail-summary__dd--amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  font-size: 1.05rem;
}
.order-detail-summary__dd--muted {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.875rem;
}
.order-detail-summary__dd--status {
  word-break: normal;
}
.order-detail-summary__dd--status .order-status-badge {
  vertical-align: middle;
}
.order-detail-summary__product-link {
  color: var(--accent-mid);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}
.order-detail-summary__product-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-mid);
}

.order-detail-summary__product-link--block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: 100%;
  border-bottom: none;
}

.order-detail-summary__product-link--block:hover {
  border-bottom: none;
}

.order-detail-summary__product-name {
  font-weight: 700;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}

.order-detail-summary__product-link--block:hover .order-detail-summary__product-name {
  border-bottom-color: var(--accent-mid);
}

.order-detail-summary__product-cta {
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
}

.order-detail-section-title {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-card {
  margin-bottom: 1rem;
  text-align: left;
}
.order-detail-card--voucher .order-detail-voucher-code {
  margin: 0;
  text-align: left;
}
.order-detail-voucher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.order-detail-voucher-meta {
  margin: 0.85rem 0 0;
}

.order-detail-downloads__lead {
  margin: 0 0 1rem;
}
.order-detail-downloads {
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-detail-downloads__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.order-detail-downloads__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.order-detail-downloads__name {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}
.order-detail-downloads__btn {
  flex-shrink: 0;
}

.order-detail-dl {
  margin: 0;
}
.order-detail-dl__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) 1fr;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  font-size: 0.9375rem;
  align-items: start;
}
.order-detail-dl__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.order-detail-dl__row--stack {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
@media (min-width: 520px) {
  .order-detail-dl__row--stack {
    grid-template-columns: minmax(0, 8.5rem) 1fr;
  }
}
.order-detail-dl__row dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.order-detail-dl__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
@media (max-width: 519px) {
  .order-detail-dl__row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}
.order-detail-dl__price {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  font-size: 1.05rem;
}
.order-detail-dl__mono {
  font-size: 0.9rem;
  word-break: break-word;
  white-space: pre-wrap;
}
.order-detail-inline-link {
  color: var(--accent-mid);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}
.order-detail-inline-link:hover {
  color: var(--accent-hover);
}

.order-detail-inline-link--stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: 100%;
  border-bottom: none;
}

.order-detail-inline-link--stack:hover {
  border-bottom: none;
}

.order-detail-inline-link__name {
  font-weight: 700;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}

.order-detail-inline-link--stack:hover .order-detail-inline-link__name {
  border-bottom-color: var(--accent-mid);
}

.order-detail-inline-link__cta {
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
}

.order-detail-subhead {
  margin: 1.25rem 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-attr-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-weight: 500;
}
.order-detail-attr-list__k {
  font-weight: 700;
  color: var(--muted);
  margin-right: 0.25rem;
}

.order-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-detail-field {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%);
}
.order-detail-field__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.order-detail-field__value {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}

.order-detail-code {
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.order-detail-refunds {
  margin-bottom: 1rem;
  text-align: left;
}
.order-detail-refunds .order-detail-section-title {
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
}
.order-detail-refunds__line {
  margin: 0.35rem 0 0;
}

@media (max-width: 720px) {
  .order-detail-page {
    max-width: 100%;
    padding-inline: 0;
  }
  .order-detail-page__head {
    margin-bottom: 1rem;
  }
  .order-detail-strip {
    margin-bottom: 0.85rem;
    padding: 0.9rem 1rem;
  }
  .order-detail-summary {
    margin-bottom: 0.85rem;
    border-radius: var(--radius-lg);
  }
  .order-detail-summary__cell {
    padding: 0.85rem 1rem;
  }
  .order-detail-summary__dd {
    font-size: 0.9375rem;
  }
  .order-detail-card,
  .order-detail-refunds {
    margin-bottom: 0.85rem;
  }
  .order-detail-section-title {
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    font-size: 0.75rem;
  }
  .order-detail-field {
    padding: 0.75rem 0.9rem;
  }
  .order-detail-dl__row {
    padding: 0.55rem 0;
    gap: 0.35rem 0.65rem;
  }
  .order-detail-downloads__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .order-detail-downloads__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 639px) {
  .order-detail-summary__grid {
    grid-template-columns: 1fr;
  }
  .order-detail-summary__cell--product {
    grid-column: 1;
  }
}

.table-order-id {
  font-weight: 600;
  color: var(--accent-mid);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-order-id:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Order / Order ID columns — header + values stay on one line */
.table-col-order-id {
  white-space: nowrap;
  width: 1%;
}

/* My orders list — columns: Order ID | Product | Amount | Status | When | View */
.orders-list__id {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}
.orders-list__product {
  min-width: 0;
  max-width: min(22rem, 36vw);
}
@media (min-width: 900px) {
  .orders-list__product {
    max-width: 28rem;
  }
}
.orders-list__product-name {
  display: block;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.orders-list__product-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  word-break: break-word;
}
.orders-list__amount-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.orders-list__amount-refund {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.3;
}
.orders-list__when {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Admin orders list — align with storefront “My orders” table */
/* .table-wrap uses overflow-x: auto, which clips dropdowns; keep this wrap visible so action menus aren’t cut off */
/* Centered tab switcher (orders, products hub) — see .admin-page-tabs-wrap */
.admin-orders-type-tabs {
  margin: 0;
}

.admin-orders-table-wrap.table-wrap {
  /* Outer: no overflow clip — absolutely positioned / fixed menus are not cut off. */
  overflow: visible;
}
.admin-orders-table-horiz {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  /* IsolatePaint so .table { width: 100% } min-width for wide columns still scrolls. */
  min-width: 0;
}
.admin-orders-table-wrap {
  margin-top: 0.5rem;
}
.admin-orders-table tbody tr:has(.admin-order-actions.is-open) {
  position: relative;
  z-index: 8;
}
.admin-orders-table__user {
  max-width: min(14rem, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-order-actions {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  text-align: right;
}
.admin-order-actions__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem 0.35rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--surface-2) 88%, #fff) 100%);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.admin-order-actions__trigger:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  background: linear-gradient(180deg, #fff 0%, var(--accent-muted) 100%);
}
.admin-order-actions__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 2px;
}
.admin-order-actions.is-open .admin-order-actions__trigger {
  border-color: color-mix(in srgb, var(--accent-mid) 40%, var(--border));
  background: linear-gradient(180deg, var(--accent-muted) 0%, color-mix(in srgb, var(--accent-muted) 65%, #fff) 100%);
  box-shadow: var(--shadow-sm);
}
.admin-order-actions__chevron {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.2s var(--ease);
}
.admin-order-actions.is-open .admin-order-actions__chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.admin-order-actions__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 120;
  min-width: 16.25rem;
  max-width: min(19rem, 94vw);
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  background: linear-gradient(165deg, #fff 0%, var(--surface-2) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  border-radius: var(--radius-lg);
  box-shadow:
    0 16px 40px rgba(12, 28, 18, 0.14),
    0 4px 12px rgba(12, 28, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.admin-order-actions.is-open .admin-order-actions__menu {
  display: block;
  animation: admin-order-actions-menu-in 0.18s ease;
}
@keyframes admin-order-actions-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-order-actions.is-open .admin-order-actions__menu,
  .admin-order-actions-sub.is-open .admin-order-actions__sub-panel {
    animation: none;
  }
}
.admin-order-actions__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease;
}
.admin-order-actions__item--link:hover,
.admin-order-actions__item--link:focus-visible {
  background: color-mix(in srgb, var(--accent-muted) 42%, #fff);
  outline: none;
}
a.admin-order-actions__item--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 45%, transparent);
  outline-offset: 0;
}
.admin-order-actions__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-muted) 55%, #fff);
  color: var(--accent-hover);
}
.admin-order-actions__icon--danger {
  background: color-mix(in srgb, #fecaca 45%, #fff);
  color: #b91c1c;
}
.admin-order-actions__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-order-actions__item-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.admin-order-actions__item-hint {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.3;
}
.admin-order-actions-sub {
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.admin-order-actions__sub-trigger {
  position: relative;
}
.admin-order-actions__sub-trigger:hover {
  background: color-mix(in srgb, var(--accent-muted) 28%, #fff);
}
.admin-order-actions__sub-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 40%, transparent);
  outline-offset: 0;
}
.admin-order-actions__sub-chevron {
  flex-shrink: 0;
  margin-top: 0.2rem;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.admin-order-actions-sub.is-open .admin-order-actions__sub-chevron {
  transform: rotate(90deg);
  opacity: 0.85;
}
.admin-order-actions-sub.is-open .admin-order-actions__sub-trigger {
  background: color-mix(in srgb, var(--accent-muted) 22%, #fff);
}
.admin-order-actions__sub-panel {
  display: none;
  margin: 0 0 0.35rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 92%, #fff);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.admin-order-actions-sub.is-open .admin-order-actions__sub-panel {
  display: block;
  animation: admin-order-actions-menu-in 0.16s ease;
}
.admin-order-actions__field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-order-actions__status-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-order-actions__select {
  width: 100%;
}
.admin-order-actions__fulfillment-note {
  width: 100%;
  min-height: 3.25rem;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
}
.admin-order-actions__submit-status {
  width: 100%;
  justify-content: center;
}
.admin-order-actions__refund-form {
  margin: 0.2rem 0 0;
  padding-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.admin-order-actions__refund-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.7rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.admin-order-actions__refund-btn:hover {
  background: color-mix(in srgb, #fee2e2 62%, #fff);
}
.admin-order-actions__refund-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, #f87171 55%, transparent);
  outline-offset: 0;
}
.admin-order-actions__refund-btn .admin-order-actions__item-title {
  color: #991b1b;
}
.admin-order-actions__refund-btn .admin-order-actions__item-hint {
  color: color-mix(in srgb, #991b1b 45%, var(--muted));
}

.admin-order-view.order-detail-page {
  max-width: min(52rem, 100%);
}
.admin-order-view__strip.order-detail-strip {
  margin-bottom: 1rem;
}
.admin-order-view__strip-stats {
  flex: 1 1 auto;
  justify-content: flex-end;
}
.admin-order-view__profit--neg {
  color: #b91c1c;
}
.admin-order-view__detail-card .order-detail-section-title {
  margin-top: 0;
}
.admin-order-view__detail-dl {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.admin-order-view__order-num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.admin-order-view__ref-line {
  margin-top: 0.35rem;
}
.admin-order-view__head {
  margin-bottom: 0.25rem;
}
.admin-order-view__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}
.admin-order-view__head-row .page-head__title {
  margin: 0;
}
.admin-order-view__back {
  flex-shrink: 0;
}
.admin-order-view__note-panel {
  margin-top: 1.25rem;
}
.admin-order-view__note-panel-head {
  margin-bottom: 0.75rem;
}
.admin-order-view__note-title {
  margin: 0 0 0.35rem;
}
.admin-order-view__note-hint {
  margin: 0;
  max-width: 52rem;
  line-height: 1.45;
}
.admin-order-view__note-body {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-elevated, #fff) 88%, var(--border));
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 52rem;
}
.admin-order-view__note-empty {
  margin: 0;
  padding: 0.65rem 0 0;
}

h1 {
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.h3,
.h-packages {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 0.85rem;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 52ch;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}

.max-w-prose {
  max-width: 52ch;
}

.empty-hint {
  text-align: center;
  padding-block: 2.25rem;
  padding-inline: 1.25rem;
  margin-block: 1.35rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 80%, var(--accent-mid));
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--bg-elevated) 100%);
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 28rem;
}

/* Wrap dashed empty-hint (and similar blocks) so they sit centered in the section */
.store-empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-block: 0.5rem 1.25rem;
  box-sizing: border-box;
}

.store-empty-block > .empty-hint {
  margin-block: 0;
  width: 100%;
}

.catalog-empty {
  margin-inline: auto;
  text-align: center;
  max-width: 36rem;
  width: 100%;
  box-sizing: border-box;
}

/* Orders page: message below table — centered, equal top/bottom outer gap */
.orders-empty {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
}
.orders-empty .empty-hint {
  margin: 0;
  margin-inline: auto;
  width: 100%;
  max-width: min(28rem, 100%);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  padding-inline: clamp(1.25rem, 3vw, 1.5rem);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}
.empty-state__code {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--accent-soft);
  margin: 0 0 0.5rem;
  line-height: 1;
}

/* Grids */
.grid {
  display: grid;
  gap: 1.35rem;
}

/**
 * Product cards: same visual rhythm on all phone widths.
 * — Phones: always 2 equal columns (no jump between 1 and 2 cols when resizing).
 * — Tablet/desktop: fluid columns from a stable min track size.
 */
.grid--products {
  gap: clamp(0.65rem, 2.5vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .grid--products {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--products {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr));
  }
}

.grid--products > .card {
  min-width: 0;
}

/* Category browse: distinct from product cards — larger tiles, readable type */
.grid--categories {
  gap: clamp(0.75rem, 2.2vw, 1.15rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.grid--categories > a.category-tile,
.grid--categories > * {
  min-width: 0;
}
/* /categories: column cards; equal tile height in the row, fluid size from container */
.grid--categories--catalog {
  container-type: inline-size;
  container-name: catgrid;
}
@media (min-width: 520px) {
  .grid--categories {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.75rem), 1fr));
  }
}
@media (min-width: 900px) {
  .grid--categories {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  }
}

.category-tile--catalog {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.category-tile__thumb--catalog {
  width: 100%;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  max-height: min(10.5rem, 46cqi);
}
.category-tile__text--catalog {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.85rem 0.95rem;
  overflow: hidden;
  box-sizing: border-box;
}
.category-tile__text--catalog .category-tile__name {
  min-width: 0;
  width: 100%;
  font-size: clamp(0.85rem, 0.45rem + 1.1cqi, 1.02rem);
  -webkit-line-clamp: 2;
  color: var(--text, #0f172a);
}
.category-tile__text--catalog .category-tile__meta {
  margin-top: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.25rem + 0.85cqi, 0.8125rem);
  align-self: stretch;
}
@media (min-width: 40rem) {
  .category-tile__text--catalog {
    padding: 0.95rem 1rem 1.05rem;
  }
}

.category-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  padding: 0.85rem 0.95rem 0.85rem 0.8rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border-strong) 45%, var(--border));
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .category-tile:hover {
    border-color: color-mix(in srgb, var(--accent-mid) 24%, var(--border));
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transform: none;
  }
}

.category-tile__thumb {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}
.category-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph--category {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: linear-gradient(145deg, #e2e8f0, #f1f5f9);
}

.category-tile__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.3;
}
.category-tile__name {
  font-size: 0.96875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.32;
}
.category-tile__meta {
  font-size: 0.8125rem;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Home: horizontal category / product rails — mobile-first, wider tiles on phones */
.home-rail {
  --home-rail-gap: clamp(0.7rem, 2.2vw, 1.05rem);
  --home-rail-per: 1;
}

/* Home rails: 2 tiles per row on phones, scale gaps + columns with viewport */
.home-rail--categories {
  --home-rail-gap: clamp(0.5rem, 2.4vw, 1.2rem);
  --home-rail-per: 2;
}

.home-rail--products {
  --home-rail-gap: clamp(0.5rem, 2.2vw, 1.1rem);
  --home-rail-per: 2;
}

/* Home rails: 2 visible on small screens; 4 from 1000px; on very wide viewports, show more (smaller tiles) + cap cell width */
@media (min-width: 1000px) {
  .home-rail--categories,
  .home-rail--products {
    --home-rail-per: 4;
  }
}
@media (min-width: 1280px) {
  .home-rail--categories {
    --home-rail-per: 5;
  }
}
@media (min-width: 1600px) {
  .home-rail--categories {
    --home-rail-per: 6;
  }
}
/* Wider viewports: cap width but scale type + thumb with container so text stays legible */
@media (min-width: 1000px) {
  .home-rail--categories .home-rail__cell {
    max-width: min(12rem, 20cqi);
  }
  .home-rail--categories .home-rail__track {
    align-items: stretch;
  }
  .home-rail--categories .category-tile--rail {
    align-items: center;
  }
  .home-rail--categories .category-tile--rail .category-tile__thumb {
    width: clamp(3.35rem, 8cqi, 3.9rem);
    height: clamp(3.35rem, 8cqi, 3.9rem);
  }
  .home-rail--categories .category-tile--rail .category-tile__name {
    font-size: clamp(0.82rem, 0.2rem + 0.8cqi, 0.9375rem);
  }
  .home-rail--categories .category-tile--rail .category-tile__meta {
    font-size: clamp(0.68rem, 0.1rem + 0.6cqi, 0.78rem);
  }
}
@media (min-width: 1280px) {
  .home-rail--categories .category-tile--rail .category-tile__thumb {
    width: clamp(3.2rem, 7.5cqi, 3.75rem);
    height: clamp(3.2rem, 7.5cqi, 3.75rem);
  }
}

.home-rail__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.9rem;
}

.home-rail__toolbar--minimal {
  justify-content: flex-end;
  margin-bottom: 0.65rem;
}

@media (max-width: 639.98px) {
  .home-rail__toolbar--minimal {
    margin-bottom: 0.5rem;
  }
}

.home-rail__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.35rem clamp(0.35rem, 1.5vw, 0.75rem);
}

/* Horizontal rails without prev/next — touch / trackpad scroll only */
.home-rail--scroll-only .home-rail__stage--scroll-only,
.home-rail--scroll-only .home-rail__stage.home-rail__stage--scroll-only {
  display: block;
  width: 100%;
}

.home-rail--scroll-only .home-rail__viewport {
  width: 100%;
}

/* Narrow screens: full-width strip + nav row (avoids slim tiles beside arrows) */
@media (max-width: 639.98px) {
  .home-rail__stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "railviewport railviewport"
      "railprev railnext";
    column-gap: 1rem;
    row-gap: 0.65rem;
  }

  .home-rail__stage > .home-rail__viewport {
    grid-area: railviewport;
  }

  .home-rail__stage > .home-rail__edge-btn:first-of-type {
    grid-area: railprev;
    justify-self: center;
  }

  .home-rail__stage > .home-rail__edge-btn:last-of-type {
    grid-area: railnext;
    justify-self: center;
  }

  /* Scroll-only rails: no arrow row; single full-width strip */
  .home-rail--scroll-only .home-rail__stage.home-rail__stage--scroll-only {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    column-gap: 0;
    row-gap: 0;
  }

  .home-rail--scroll-only .home-rail__stage.home-rail__stage--scroll-only > .home-rail__viewport {
    grid-area: unset;
  }
}

.home-rail__edge-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  align-self: center;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  background: var(--bg-elevated, #fff);
  color: var(--text, #1a211c);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

@media (max-width: 639.98px) {
  .home-rail__edge-btn {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
}

.home-rail__edge-btn:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  background: var(--surface);
}

.home-rail__see-more {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-strong, #1d5c42);
  white-space: nowrap;
}

.home-rail__see-more:hover {
  text-decoration: underline;
}

.home-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  container-type: inline-size;
  container-name: homerail;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.5rem;
  outline: none;
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (max-width: 900.98px) {
  .home-rail__viewport {
    scroll-behavior: smooth;
    /* pan-x alone steals vertical gestures when the finger starts on a rail — main cause of “stuck” scroll. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.55rem;
  }
}

@media (max-width: 639.98px) {
  .home-rail__viewport {
    scroll-padding-inline: 0.55rem;
    padding-block: 0.55rem;
    padding-inline: 0.35rem;
    border-radius: var(--radius-lg);
  }
}

.home-rail__viewport:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-mid) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .home-rail__viewport {
    scroll-behavior: auto !important;
  }
}

.home-rail__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--home-rail-gap);
  padding: 0.25rem 0.15rem 0.45rem;
}

@media (max-width: 639.98px) {
  .home-rail__track {
    padding: 0.3rem 0.2rem 0.5rem;
  }
}

.home-rail__cell {
  flex: 0 0 auto;
  width: calc(
    (100cqi - (var(--home-rail-per) - 1) * var(--home-rail-gap)) / var(--home-rail-per)
  );
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 900.98px) {
  .home-rail__cell {
    scroll-snap-align: start;
  }
}

@media (max-width: 639.98px) {
  .home-rail__cell {
    scroll-snap-align: center;
  }
}

.category-tile--rail {
  width: 100%;
  min-width: 0;
}

/* Home category strip: one tile height + text/tooltip-friendly meta (never bleeds out) */
.home-rail--categories .home-rail__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-rail--categories .category-tile--rail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: clamp(4.85rem, 25cqi, 6.75rem);
  max-height: none;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.home-rail--categories .category-tile--rail .category-tile__thumb {
  width: 4.35rem;
  height: 4.35rem;
  flex-shrink: 0;
  align-self: center;
}

.home-rail--categories .category-tile__text {
  min-width: 0;
  flex: 1 1 0%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
  gap: 0.22rem;
  overflow: hidden;
}

.home-rail--categories .category-tile--rail .category-tile__name {
  min-width: 0;
  width: 100%;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text, #0f172a);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.8125rem, 0.3rem + 1.1cqi, 0.9375rem);
  word-break: break-word;
  overflow-wrap: break-word;
}

.home-rail--categories .category-tile--rail .category-tile__meta {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.12rem 0.4rem;
  line-height: 1.2;
  box-sizing: border-box;
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.6875rem, 0.2rem + 0.7cqi, 0.8125rem);
}

@media (max-width: 639.98px) {
  .home-rail--categories .category-tile--rail {
    padding: clamp(0.55rem, 2.5vw, 0.75rem) clamp(0.6rem, 2.8vw, 0.85rem);
    min-height: clamp(4.75rem, 26cqi, 5.8rem);
    gap: 0.45rem;
  }

  .home-rail--categories .category-tile--rail .category-tile__thumb {
    width: clamp(2.9rem, 20cqi, 3.4rem);
    height: clamp(2.9rem, 20cqi, 3.4rem);
  }

  .home-rail--categories .category-tile--rail .category-tile__name {
    font-size: clamp(0.8rem, 0.3rem + 1.1cqi, 0.92rem);
  }

  .home-rail--categories .category-tile--rail .category-tile__meta {
    font-size: clamp(0.7rem, 0.2rem + 0.6cqi, 0.78rem);
  }
}

@media (min-width: 900px) {
  .home-rail--categories .category-tile--rail .category-tile__thumb {
    width: clamp(4.1rem, 4cqi + 2.8rem, 4.5rem);
    height: clamp(4.1rem, 4cqi + 2.8rem, 4.5rem);
  }
}

.home-rail--products .card--rail {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Default .card uses overflow:hidden — long prices + flex min-height:0 were clipping the body */
  overflow: visible;
}

.home-rail--products .card--rail .card__media {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.home-rail--products .card--rail .card__lead {
  display: none;
}

/* Home product rails: no short description (keeps cards compact on all breakpoints) */
.home-rail--products .card--rail .card__excerpt {
  display: none !important;
}

.home-rail--products .card--rail .card__shine {
  display: none;
}

.home-rail--products .card--rail .card__body--rail-home {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: auto;
  padding: 1rem 1rem 0;
}

.home-rail--products .card--rail .card__title {
  font-size: clamp(0.8125rem, 2.8vw + 0.35rem, 1.02rem);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.home-rail--products .card--rail .card__price {
  margin-top: auto;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.62rem, 4.8cqi + 0.2rem, 0.88rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-rail--products .card--rail .card__price .card__price-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.22rem;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-rail--products .card--rail .card__price .card__price-list {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rail--products .card--rail .card__price .card__price-amount {
  flex: 0 0 auto;
  white-space: nowrap;
}

.home-rail--products .card--rail .card__body--rail-home:not(:has(.card__price)) .card__footer--rail-home {
  margin-top: auto;
}

.home-rail--products .card--rail .card__footer--rail-home {
  margin-top: 0;
  flex-shrink: 0;
  padding: 0.75rem 0 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.home-rail--products .card--rail .card__footer--rail-home .card__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-mid, #2a8f5f);
}

@media (max-width: 639.98px) {
  .home-rail--products .card--rail .card__media {
    aspect-ratio: 1 / 1;
  }

  .home-rail--products .card--rail .card__body--rail-home {
    padding: clamp(0.45rem, 2.2vw, 0.65rem) clamp(0.5rem, 2.4vw, 0.7rem) 0;
    gap: 0.2rem;
  }

  .home-rail--products .card--rail .card__title {
    font-size: clamp(0.75rem, 3.4vw, 0.88rem);
    line-height: 1.22;
    -webkit-line-clamp: 2;
  }

  .home-rail--products .card--rail .card__price {
    font-size: clamp(0.58rem, 5.2cqi + 0.16rem, 0.8rem);
  }

  .home-rail--products .card--rail .card__footer--rail-home {
    padding-top: 0.45rem;
    padding-bottom: clamp(0.5rem, 2.2vw, 0.65rem);
  }

  .home-rail--products .card--rail .card__footer--rail-home .card__cta {
    font-size: clamp(0.65rem, 2.6vw, 0.72rem);
  }

  .home-rail--products .card--rail .ph--sm {
    min-height: clamp(4.5rem, 32vw, 6.5rem);
  }

}

.home-product-rails {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Horizontal rule between each category’s product row */
.home-product-rails .home-product-by-cat:not(:first-child) {
  margin-top: clamp(1rem, 4vw, 1.65rem);
  padding-top: clamp(1rem, 4vw, 1.65rem);
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
}

@media (max-width: 639.98px) {
  .home-product-rails .home-product-by-cat:not(:first-child) {
    margin-top: clamp(0.85rem, 5vw, 1.35rem);
    padding-top: clamp(0.85rem, 5vw, 1.35rem);
  }
}

.home-product-by-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 639.98px) {
  .home-product-by-cat__head {
    margin-bottom: 0.7rem;
    gap: 0.5rem 1rem;
  }
}

.home-product-by-cat__title {
  margin: 0;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.home-product-by-cat__title a {
  color: inherit;
  text-decoration: none;
}

.home-product-by-cat__title a:hover {
  text-decoration: underline;
}

.home-product-by-cat__link {
  flex-shrink: 0;
  margin-inline-start: auto;
  font-size: 0.875rem;
  text-decoration: none;
}

.home-product-by-cat__link:hover {
  text-decoration: underline;
}

/* Cards */
.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border-strong) 42%, var(--border));
  overflow: hidden;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    border-color 0.22s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--border-strong) 70%, var(--border));
  }
}
.card--product .card__media {
  aspect-ratio: 1 / 1;
  position: relative;
}

.card__media {
  position: relative;
  background: var(--surface);
  overflow: hidden;
}

.card__oos-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  max-width: calc(100% - 0.9rem);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  background: color-mix(in srgb, #991b1b 92%, var(--text));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.card__oos-badge--search {
  font-size: 0.58rem;
  top: 0.38rem;
  right: 0.38rem;
  padding: 0.18rem 0.45rem;
}

.card--product-catalog--oos .card__media > img,
.card--product-catalog--oos .card__media > .ph {
  opacity: 0.7;
}

.search-card--oos .search-card__media > img,
.search-card--oos .search-card__media > .search-card__ph {
  opacity: 0.7;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img {
    transform: scale(1.03);
  }
}

.card__shine {
  display: none;
}

.ph {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: linear-gradient(145deg, #e2e8f0, #f1f5f9);
}
.ph--sm {
  min-height: 110px;
}
.ph--lg {
  min-height: 280px;
  border-radius: var(--radius);
}

.card__body {
  padding: 1.2rem 1.35rem 1.35rem;
}

.grid--products .card__body {
  padding: clamp(0.75rem, 2.5vw, 1.2rem) clamp(0.65rem, 2.2vw, 1.35rem) clamp(0.85rem, 2.8vw, 1.35rem);
}

.card__title {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.grid--products .card__title {
  font-size: clamp(0.875rem, 2.75vw, 1.0625rem);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.card__price {
  margin: 0.25rem 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
  min-width: 0;
}
.card__price .card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}
.card__price .card__price-list {
  font-weight: 600;
  font-size: 0.9em;
}
.card__price .card__price-amount {
  font-weight: 800;
  color: var(--accent-hover);
}
.card__excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.split {
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 880px) {
  .split--product {
    grid-template-columns: 1fr 1.05fr;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  /* Product page: left = sticky title + image; right = buy card (price + packages inside) */
  .split--product.split--product--grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0;
    align-items: stretch;
    width: 100%;
  }
  .split--product.split--product--grid2 .product-page__left-stack {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    position: sticky;
    top: calc(var(--topbar-h) + 0.65rem);
    align-self: start;
  }
  .product-page__cell--buy-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  /*
   * Viewport sticky needs ancestors without horizontal overflow clipping.
   * Shell/canvas/main use overflow-x: clip to tame sub-pixel x-scroll; that traps sticky to those boxes instead of the window.
   */
  html:has(.product-page),
  body.site:has(.product-page) {
    overflow-x: visible;
  }
  body.site:has(.product-page) .site-shell,
  body.site:has(.product-page) .site-canvas,
  body.site:has(.product-page) .site-main {
    overflow-x: visible;
  }
}

/* Product page: split row (image | buy), then full-width details */
.product-page {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
}
.product-page > .split--product {
  width: 100%;
}
@media (max-width: 879px) {
  .split--product.split--product--grid2 {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.35rem);
  }
  .split--product.split--product--grid2 .product-page__left-stack {
    position: relative;
    top: auto;
  }
}
.product-page__left-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.35rem);
  min-width: 0;
  width: 100%;
}
.product-page__cell.panel {
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.product-page__cell--identity-head {
  display: flex;
  flex-direction: column;
}
.product-page__cell--identity-head .product-identity__text {
  flex: 0 0 auto;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1rem, 2.5vw, 1.25rem) clamp(0.75rem, 2vw, 1rem);
  margin: 0;
}
.product-page__cell--identity-head .product-detail__desc:last-child {
  margin-bottom: 0;
}
.product-page__cell--identity-media.panel {
  padding: 0;
}
.product-page__cell--identity-media .product-identity__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-top: none;
}
.product-page__cell--identity-media .product-identity__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-page__cell--identity-media .product-identity__media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  display: block;
}

/* Storefront product page — clearer buy column (inspired by typical digital storefronts) */
.product-page__head {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.product-page__head.page-head--ruled {
  padding-bottom: 1rem;
}

.product-buy-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding: clamp(1.1rem, 2.8vw, 1.65rem);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  background: linear-gradient(165deg, #ffffff 0%, color-mix(in srgb, var(--surface-2) 45%, #fff) 100%);
  box-shadow:
    var(--shadow-sm),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
@media (min-width: 880px) {
  .product-page__cell--buy-body.product-buy-card {
    min-height: 100%;
    height: auto;
  }
}
@media (max-width: 879px) {
  .product-buy-card {
    height: auto;
    min-height: 0;
  }
}

.product-page__price-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  margin: 0 0 0.95rem;
  padding: 0.45rem 0 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.product-page__price-val {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  line-height: 1.12;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.product-page__price-sep {
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--muted);
  opacity: 0.75;
  line-height: 1;
  padding: 0 0.05rem;
  user-select: none;
}
.product-page__price-note {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, var(--accent-mid));
  margin: 0 0 0 0.2rem;
  line-height: 1.2;
}
/* Compact price / range at top of packages section (product page) */
.product-page__price-strip--in-packages {
  margin: 0 0 0.45rem;
  padding: 0.2rem 0 0.42rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  gap: 0.12rem 0.32rem;
}
.product-page__price-strip--in-packages .product-page__price-val {
  font-size: clamp(1rem, 2.35vw, 1.32rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
}
.product-page__price-strip--in-packages .product-page__price-sep {
  font-size: clamp(0.82rem, 1.8vw, 0.98rem);
  opacity: 0.68;
}
.product-page__price-strip--in-packages .product-page__price-note {
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  margin-left: 0.12rem;
}
.product-page__price-strip--in-packages + .product-packages-heading,
.product-page__price-strip--in-packages + .product-buy-step__head {
  margin-top: 0.15rem;
}
.product-buy-card > .product-page__price-strip:first-child {
  padding-top: 0;
}

.product-packages-heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 88%, var(--accent-mid));
  margin: 0 0 0.65rem;
}

/* Product buy column: step numbers (same visual language as variant-attr-picker) */
.product-buy-step__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.product-buy-step__num {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--border));
  border: 1.5px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}
.product-buy-step__head--complete .product-buy-step__num {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-mid) 88%, #fff), var(--accent-hover));
  border-color: color-mix(in srgb, var(--accent-hover) 45%, transparent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.product-buy-step__head-text {
  flex: 1;
  min-width: 0;
}
.product-buy-step__head-text .product-packages-heading {
  margin: 0 0 0.4rem;
}
.product-checkout-panel .product-buy-step__head {
  margin-bottom: 0;
}
.product-checkout-panel .product-buy-step__head-text .product-checkout-panel__h {
  margin: 0 0 0.35rem;
}
.product-checkout-panel .product-buy-step__head-text .product-checkout-panel__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.product-buy-card .pack-list__section {
  flex: 1 1 auto;
  margin-top: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.product-buy-card .product-checkout-flow {
  margin-top: 1.2rem;
}
.product-buy-card .product-trust-bar {
  margin-top: 1.25rem;
}
@media (min-width: 880px) {
  .product-buy-card .product-trust-bar {
    margin-top: auto;
  }
}

.product-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin-top: 1.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 10%, var(--border));
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent-muted) 35%, #fff) 0%, #fff 100%);
  box-shadow: var(--shadow-xs);
}
.product-trust-bar__item {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
}
.product-hero {
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 28rem);
  margin-inline: auto;
  background: var(--surface);
}
.product-hero--storefront {
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent-mid));
  box-shadow:
    var(--shadow),
    0 12px 40px rgba(12, 22, 16, 0.06);
}
@media (min-width: 880px) {
  .split--product .product-visual .product-hero {
    margin-inline: 0;
    max-width: 100%;
  }
}
.product-hero img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-hero--storefront img,
.product-hero--storefront .ph {
  border-radius: calc(var(--radius-lg) - 2px);
}
.product-hero .ph {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}
.product-page__long {
  width: 100%;
  padding: clamp(1.35rem, 3.2vw, 2rem) clamp(1.1rem, 4vw, 2.25rem);
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, #fff) 0%, var(--bg-elevated) 100%);
}
.product-page__long-title {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  color: var(--text);
}
.product-page__long-body {
  margin: 0;
  max-width: min(100%, 52rem);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: left;
}

/* Plain-text descriptions: preserve spaces, tabs, and line breaks */
.product-desc--plain {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  tab-size: 4;
  margin: 0;
}

.product-detail__lead-label {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, var(--accent-mid));
}

.product-page__long-body--rich p,
.product-detail__desc--rich p {
  margin: 0 0 0.65em;
}
.product-page__long-body--rich p:last-child,
.product-detail__desc--rich p:last-child {
  margin-bottom: 0;
}
.product-page__long-body--rich a,
.product-detail__desc--rich a {
  color: color-mix(in srgb, var(--accent-mid) 88%, var(--text));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-page__long-body--rich ul,
.product-detail__desc--rich ul,
.product-page__long-body--rich ol,
.product-detail__desc--rich ol {
  margin: 0.5em 0 0.65em 1.15em;
  padding: 0;
}
.product-page__long-body--rich h1,
.product-page__long-body--rich h2,
.product-page__long-body--rich h3,
.product-detail__desc--rich h1,
.product-detail__desc--rich h2,
.product-detail__desc--rich h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0.85em 0 0.45em;
  color: var(--text);
}
.product-page__long-body--rich h1,
.product-detail__desc--rich h1 {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
}
.product-page__long-body--rich h2,
.product-detail__desc--rich h2 {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
}
.product-page__long-body--rich h3,
.product-detail__desc--rich h3 {
  font-size: clamp(1rem, 1.9vw, 1.08rem);
}
.product-page__long-body--rich h4,
.product-detail__desc--rich h4 {
  font-size: 1em;
  font-weight: 700;
  margin: 0.75em 0 0.35em;
  color: var(--text);
}

.product-page__long-body--rich blockquote,
.product-detail__desc--rich blockquote {
  margin: 0.85em 0;
  padding: 0.65rem 0 0.65rem 1rem;
  border-left: 3px solid color-mix(in srgb, var(--accent-mid) 42%, var(--border));
  border-radius: 0 2px 2px 0;
  background: color-mix(in srgb, var(--accent-muted) 22%, transparent);
  color: var(--text);
}

.product-page__long-body--rich hr,
.product-detail__desc--rich hr {
  margin: 1.25rem 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
}

.product-page__long-body--rich pre,
.product-detail__desc--rich .pe-youtube-wrap {
  position: relative;
  width: 100%;
  max-width: min(100%, 52rem);
  margin: 0.85rem 0;
}
.product-detail__desc--rich .pe-youtube-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 180px;
  border: 0;
  border-radius: var(--radius-md, 10px);
}
.product-detail__desc--rich img.pe-desc-img {
  height: auto;
}
.product-detail__desc--rich pre {
  margin: 0.75em 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--surface);
  font-size: 0.875em;
  line-height: 1.55;
}

.product-page__long-body--rich code,
.product-detail__desc--rich code {
  font-size: 0.9em;
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-muted) 55%, var(--surface));
}

.product-page__long-body--rich pre code,
.product-detail__desc--rich pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Quill visual classes (allowed in sanitize as ql-*) */
.product-page__long-body--rich .ql-align-center,
.product-detail__desc--rich .ql-align-center {
  text-align: center;
}
.product-page__long-body--rich .ql-align-right,
.product-detail__desc--rich .ql-align-right {
  text-align: right;
}
.product-page__long-body--rich .ql-align-justify,
.product-detail__desc--rich .ql-align-justify {
  text-align: justify;
}

.product-page__long-body--rich .ql-indent-1:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.product-page__long-body--rich .ql-indent-2:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.product-page__long-body--rich .ql-indent-3:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.product-page__long-body--rich .ql-indent-4:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.product-page__long-body--rich .ql-indent-5:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.product-page__long-body--rich .ql-indent-6:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.product-page__long-body--rich .ql-indent-7:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.product-page__long-body--rich .ql-indent-8:not(.ql-direction-rtl),
.product-detail__desc--rich .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}

.product-page__long-body--rich .ql-size-small,
.product-detail__desc--rich .ql-size-small {
  font-size: 0.75em;
}
.product-page__long-body--rich .ql-size-large,
.product-detail__desc--rich .ql-size-large {
  font-size: 1.5em;
}
.product-page__long-body--rich .ql-size-huge,
.product-detail__desc--rich .ql-size-huge {
  font-size: 2.25em;
}

@media (max-width: 520px) {
  .product-page__long-body--rich .ql-indent-4:not(.ql-direction-rtl),
  .product-detail__desc--rich .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: min(12em, 4rem);
  }
  .product-page__long-body--rich .ql-indent-5:not(.ql-direction-rtl),
  .product-detail__desc--rich .ql-indent-5:not(.ql-direction-rtl),
  .product-page__long-body--rich .ql-indent-6:not(.ql-direction-rtl),
  .product-detail__desc--rich .ql-indent-6:not(.ql-direction-rtl),
  .product-page__long-body--rich .ql-indent-7:not(.ql-direction-rtl),
  .product-detail__desc--rich .ql-indent-7:not(.ql-direction-rtl),
  .product-page__long-body--rich .ql-indent-8:not(.ql-direction-rtl),
  .product-detail__desc--rich .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: min(24em, 5rem);
  }
}

.product-buy-card .product-detail__title,
.product-identity .product-detail__title,
.product-page__cell--identity-head .product-detail__title {
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  margin: 0 0 0.65rem;
  letter-spacing: -0.038em;
  line-height: 1.15;
  color: var(--text);
}
.product-detail__title {
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  margin: 0 0 0.75rem;
  letter-spacing: -0.035em;
}
.product-buy-card .product-detail__desc,
.product-identity .product-detail__desc,
.product-page__cell--identity-head .product-detail__desc {
  margin: 0 0 1rem;
  font-size: clamp(0.97rem, 2.2vw, 1.03rem);
  line-height: 1.68;
}
.product-detail__desc {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.product-detail__full {
  margin-top: 1.5rem;
}
.product-checkout-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  margin-top: 1.35rem;
  min-width: 0;
}
.product-checkout-flow > .product-checkout-panel.panel,
.product-checkout-flow > .product-payment-panel.panel {
  margin-top: 0;
}
.product-checkout-panel.panel {
  padding: 1.4rem 1.45rem 1.4rem;
  border-color: color-mix(in srgb, var(--accent-mid) 16%, var(--border));
  background: linear-gradient(165deg, #f9fcf9 0%, #fff 58%);
}
.product-payment-panel.panel {
  padding: 1.4rem 1.45rem 1.4rem;
  border-color: color-mix(in srgb, var(--accent-mid) 16%, var(--border));
  background: linear-gradient(165deg, #f9fcf9 0%, #fff 58%);
}

/* Mini line item above payment radios when a package is selected */
.product-payment-selection-overview {
  margin: 0 0 0.85rem;
}
.product-payment-selection-overview[hidden] {
  display: none !important;
}
.product-payment-selection-overview__inner {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
.product-payment-selection-overview__eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.product-payment-selection-overview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}
.product-payment-selection-overview__title {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-payment-selection-overview__price {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--accent-hover);
  text-align: right;
  max-width: 48%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-checkout-panel__h {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem;
}
/* Lead often lives inside .product-buy-step__head-text; keep default for edge cases */
.product-checkout-panel__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.product-checkout-panel__form.stack {
  gap: 1.1rem;
}
.product-checkout-panel__payment-card {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-checkout-panel__payment-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.product-checkout-panel__payment-card-num {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--border));
  border: 1.5px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}
.product-checkout-panel__payment-card-head--complete .product-checkout-panel__payment-card-num {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-mid) 88%, #fff), var(--accent-hover));
  border-color: color-mix(in srgb, var(--accent-hover) 45%, transparent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.product-checkout-panel__payment-card-head-text {
  flex: 1;
  min-width: 0;
}
.product-checkout-panel__payment-card-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.product-checkout-panel__payment-card-lead {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.product-checkout-panel__payment-card .product-checkout-panel__methods {
  margin: 0;
  padding: 0;
}
.product-checkout-panel__payment-card .product-checkout-panel__submit {
  margin-top: 0.1rem;
}
.product-checkout-panel__methods {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  width: 100%;
  background: transparent;
}
.product-checkout-panel__methods-title {
  padding: 0;
  margin: 0 0 0.65rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.payment-method-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

@media (min-width: 640px) {
  .payment-method-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
  }

  /* Product detail only: one payment method per row on desktop (narrow buy column) */
  .product-page .payment-method-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
}

.payment-method-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  min-width: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--border) 86%, var(--accent-mid));
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--surface-2) 88%, var(--bg-elevated)) 100%
  );
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-inner-soft);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .payment-method-card:hover {
    border-color: color-mix(in srgb, var(--accent-mid) 44%, var(--border));
  }
}
.payment-method-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-mid) 72%, var(--border));
  background: color-mix(in srgb, var(--accent-mid) 14%, var(--bg-elevated));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 22%, transparent),
    var(--shadow-xs);
}
.payment-method-card:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-mid) 38%, transparent), var(--shadow-inner-soft);
}
.payment-method-card:has(input:checked):focus-within {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 42%, transparent),
    var(--shadow-xs);
}
.payment-method-card input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin: 0.38rem 0 0;
  accent-color: var(--accent-mid);
  cursor: pointer;
}
.payment-method-card.disabled {
  opacity: 0.52;
  cursor: not-allowed;
  pointer-events: none;
}

@media (min-width: 640px) {
  .payment-method-card-list > .payment-method-card:only-child {
    grid-column: 1 / -1;
    max-width: none;
  }
}

.product-checkout-panel__submit {
  margin: 0;
  flex-shrink: 0;
}
#product-checkout-submit:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.12);
}
#product-checkout-submit:not(:disabled) {
  opacity: 1;
  filter: none;
}
.product-detail__full-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.65rem;
  color: var(--text);
}
.product-detail__full-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Product page: packages — picker + Buy */
.pack-list__section {
  margin-top: 0.35rem;
}
.pack-list__section .h-packages {
  margin-bottom: 0.5rem;
}
.pack-list__section .product-packages-heading {
  margin-top: 0;
}
.pack-list__empty {
  margin: 0.35rem 0 0;
}
.pack-list__hint-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.95rem;
  margin: 0 0 0.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 90%, var(--border));
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pack-list__hint-bar--ready {
  border-color: color-mix(in srgb, var(--accent-mid) 42%, var(--border));
  background: color-mix(in srgb, var(--accent-mid) 9%, var(--surface-2));
}
.pack-list__hint-icon {
  flex-shrink: 0;
  color: var(--accent-mid);
  margin-top: 0.06rem;
  opacity: 0.9;
}
.pack-list__hint-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.pack-list__hint-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pack-list__hint-sub {
  font-size: 0.8125rem;
}
.pack-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pack-list--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 380px) {
  .pack-list--grid:not(.pack-list--select-only) {
    grid-template-columns: 1fr;
  }
}
.pack-list__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: calc(var(--topbar-h) + 0.75rem);
  min-height: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
  cursor: pointer;
  outline: none;
}
.pack-list__item:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px color-mix(in srgb, var(--accent-mid) 50%, var(--border));
}
.pack-list__item--selected {
  border-color: color-mix(in srgb, var(--accent-mid) 65%, var(--border));
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px color-mix(in srgb, var(--accent-mid) 22%, transparent);
  transform: translateY(-1px);
}
.pack-list__item:not(.pack-list__item--unavailable):hover {
  border-color: color-mix(in srgb, var(--accent-mid) 40%, var(--border));
  box-shadow: var(--shadow-sm);
}
.pack-list__item--unavailable {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: pointer;
}
.pack-list__item--unavailable:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  transform: none;
}
.pack-list__item--unavailable.pack-list__item--selected {
  transform: none;
}
.pack-list__body {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.pack-list__pick {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  margin-top: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
  background: var(--bg-elevated);
}
.pack-list__pick::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pack-list__item--selected .pack-list__pick {
  border-color: var(--accent-mid);
  background: var(--accent-mid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-mid) 22%, transparent);
}
.pack-list__item--selected .pack-list__pick::after {
  opacity: 1;
  transform: scale(1);
  background: var(--bg-elevated);
}
.pack-list__item--unavailable .pack-list__pick {
  opacity: 0.75;
}
.pack-list__main {
  flex: 1;
  min-width: 0;
}
.pack-list__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.pack-list__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.pack-list__price {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--accent-mid);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}
.pack-list__stock {
  margin: 0.35rem 0 0;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}
.pack-list__stock-label {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.pack-list__stock-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.pack-list__action {
  margin-top: auto;
  padding-top: 0;
}
.pack-list__action[hidden] {
  display: none !important;
}
.pack-list__action-panel {
  padding-top: 0.65rem;
  margin-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.pack-list__action .pack-list__btn--buy {
  width: 100%;
  justify-content: center;
  min-height: 2.7rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: 0.65rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-mid) 22%, transparent);
}
.pack-list__action .pack-list__btn--buy:hover {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.pack-list__action .btn--ghost.btn--sm {
  width: 100%;
  justify-content: center;
}

/* Product page: simple package picker (no attributes) — 2 per row on all breakpoints */
.pack-list.pack-list--select-only.pack-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.45rem, 1.8vw, 0.85rem);
  max-width: 100%;
}
.pack-list.pack-list--select-only .pack-list__item {
  padding: clamp(0.65rem, 1.8vw, 0.85rem) clamp(0.65rem, 1.8vw, 0.85rem);
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--border) 86%, var(--accent-mid));
  background: linear-gradient(180deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--surface-2) 92%, #fff) 100%);
  box-shadow: inset 3px 0 0 transparent;
  transform: none;
  gap: 0.45rem;
}
.pack-list.pack-list--select-only .pack-list__body {
  align-items: flex-start;
  gap: 0.5rem;
}
.pack-list.pack-list--select-only .pack-list__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  gap: clamp(0.4rem, 1.2vw, 0.55rem);
  min-width: 0;
  min-height: 0;
}
.pack-list.pack-list--select-only .pack-list__name {
  font-weight: 700;
  font-size: clamp(0.74rem, 1.25vw + 0.35rem, 0.92rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pack-list.pack-list--select-only .pack-list__facts {
  display: flex;
  flex-direction: column;
  gap: clamp(0.28rem, 0.9vw, 0.42rem);
  margin-top: auto;
  padding-top: clamp(0.35rem, 1vw, 0.5rem);
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
.pack-list.pack-list--select-only .pack-list__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  min-width: 0;
  font-size: clamp(0.68rem, 0.55rem + 0.9vw, 0.8125rem);
  line-height: 1.35;
}
.pack-list.pack-list--select-only .pack-list__fact-label {
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78em;
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
}
.pack-list.pack-list--select-only .pack-list__fact-label::after {
  content: ':';
  font-weight: 600;
  margin-left: 0.06em;
}
.pack-list.pack-list--select-only .pack-list__fact-value {
  text-align: right;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.pack-list.pack-list--select-only .pack-list__fact-value.pack-list__price {
  font-weight: 800;
  font-size: clamp(0.78rem, 0.65rem + 0.85vw, 0.9375rem);
  color: var(--accent-hover);
  white-space: normal;
  overflow-wrap: anywhere;
}
.pack-list.pack-list--select-only .pack-list__fact--price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem 0.55rem;
}
.pack-list.pack-list--select-only .pack-list__fact--price .pack-list__fact-label {
  grid-column: 1;
  padding-top: 0.12rem;
}
.pack-list.pack-list--select-only .pack-list__fact--price .pack-list__fact-value {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  max-width: 100%;
}
.pack-list.pack-list--select-only .pack-list__fact-value--stock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pack-list.pack-list--select-only .pack-list__item:not(.pack-list__item--unavailable):hover {
  border-color: color-mix(in srgb, var(--accent-mid) 42%, var(--border));
  box-shadow:
    inset 3px 0 0 transparent,
    var(--shadow-xs);
  transform: none;
}
.pack-list.pack-list--select-only .pack-list__item--selected {
  border-color: color-mix(in srgb, var(--accent-mid) 72%, var(--border));
  background: color-mix(in srgb, var(--accent-mid) 16%, var(--bg-elevated));
  box-shadow:
    inset 3px 0 0 var(--accent-hover),
    var(--shadow-xs);
  transform: none;
}
.pack-list.pack-list--select-only .pack-list__item:focus-visible {
  outline: none;
  box-shadow:
    inset 3px 0 0 transparent,
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 38%, transparent);
}
.pack-list.pack-list--select-only .pack-list__item--selected:focus-visible {
  box-shadow:
    inset 3px 0 0 var(--accent-hover),
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 38%, transparent),
    var(--shadow-xs);
}
.pack-list.pack-list--select-only .pack-list__pick {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.12rem;
  border-width: 2px;
}
.pack-list.pack-list--select-only .pack-list__item--selected .pack-list__pick {
  box-shadow: none;
}
.pack-list.pack-list--select-only .pack-list__item--selected .pack-list__facts {
  border-top-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}

/* Product page: attribute options (card grid) + selection summary */
.pack-list__section > .product-options-hint,
.pack-list__section--product-buy > .product-options-hint {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--accent-muted) 28%, var(--bg-elevated));
  box-shadow: var(--shadow-inner-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  max-width: none;
}
.variant-attr-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
}
.variant-attr-picker__step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: linear-gradient(
    165deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--surface-2) 82%, var(--bg-elevated)) 100%
  );
  box-shadow: var(--shadow-xs), var(--shadow-inner-soft);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.variant-attr-picker__step--complete {
  border-color: color-mix(in srgb, var(--accent-mid) 38%, var(--border));
  box-shadow:
    var(--shadow-xs),
    0 0 0 1px color-mix(in srgb, var(--accent-mid) 14%, transparent);
}
.variant-attr-picker__step--last {
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
}
.variant-attr-picker__step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.variant-attr-picker__step-num {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--border));
  border: 1.5px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}
.variant-attr-picker__step--complete .variant-attr-picker__step-num {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-mid) 88%, #fff), var(--accent-hover));
  border-color: color-mix(in srgb, var(--accent-hover) 45%, transparent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.variant-attr-picker__step-head-text {
  flex: 1;
  min-width: 0;
}
.variant-attr-picker__label {
  margin: 0 0 0.28rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 55%, var(--accent-mid));
  line-height: 1.3;
}
.variant-attr-picker__step-progress {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.4;
}
.variant-attr-picker__step[hidden] {
  display: none !important;
}
.variant-attr-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}
@media (min-width: 520px) {
  .variant-attr-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.variant-attr-tab {
  appearance: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 0.95rem;
  text-align: left;
  font: inherit;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--border) 86%, var(--accent-mid));
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--surface-2) 88%, var(--bg-elevated)) 100%
  );
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-inner-soft);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.variant-attr-tab:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 44%, var(--border));
}
.variant-attr-tab:active {
  transform: scale(0.99);
}
.variant-attr-tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 38%, transparent),
    var(--shadow-inner-soft);
}
.variant-attr-tab--selected {
  border-color: color-mix(in srgb, var(--accent-mid) 72%, var(--border));
  background: color-mix(in srgb, var(--accent-mid) 14%, var(--bg-elevated));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-mid) 22%, transparent),
    var(--shadow-xs);
}
.variant-attr-tab--selected::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-mid) 24%, transparent);
}
.variant-attr-tab__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
  flex: 1;
}
.variant-attr-tab__main {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.variant-attr-tab__sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, #b91c1c 88%, var(--muted));
  line-height: 1.2;
  max-width: 100%;
}
.variant-attr-tab:disabled,
.variant-attr-tab[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.82;
  transform: none;
  pointer-events: none;
}
.variant-attr-tab:disabled:hover,
.variant-attr-tab[aria-disabled='true']:hover {
  border-color: color-mix(in srgb, var(--border) 86%, var(--accent-mid));
}
.variant-attr-tab--oos:disabled.variant-attr-tab--selected,
.variant-attr-tab--dead:disabled.variant-attr-tab--selected {
  box-shadow: none;
}
.variant-attr-tab--oos:disabled.variant-attr-tab--selected::after,
.variant-attr-tab--dead:disabled.variant-attr-tab--selected::after {
  opacity: 0.35;
}

.variant-attr-picker__meta {
  margin-top: 0.35rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 50%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-mid));
}
.variant-attr-picker__meta-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.variant-attr-picker__meta-body {
  min-height: 0;
}
.variant-attr-picker__selection-name {
  margin: 0 0 0.65rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}
.variant-attr-picker__selection-facts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.variant-attr-picker__selection-fact {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.variant-attr-picker__selection-fact:first-of-type {
  border-top: none;
  padding-top: 0;
}
.variant-attr-picker__selection-fact-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.variant-attr-picker__selection-fact-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}
.variant-attr-picker__selection-fact-value--price {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-hover);
}
.variant-attr-picker__selection-fact-value--stock {
  font-weight: 650;
}
.variant-attr-picker__footer-msg {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.variant-attr-picker__footer-msg--muted {
  color: var(--muted);
}
.variant-attr-picker__footer-msg--error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--danger);
}
.variant-attr-picker__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
}
.variant-attr-picker__footer--oos {
  opacity: 0.95;
}
.variant-attr-picker__footer-price {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  line-height: 1.2;
}
.variant-attr-picker__footer-stock {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.variant-attr-picker__footer-stock-label {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.variant-attr-picker__footer-stock-value {
  font-weight: 600;
  color: var(--text);
}
.variant-attr-picker__footer-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-elevated));
  color: var(--danger);
  white-space: nowrap;
}

/* Guest sign-in + OOS status injected beside inline checkout (#product-inline-purchase-actions) */
.product-inline-purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: clamp(0.65rem, 2vw, 0.95rem);
}
.product-inline-purchase-actions:empty {
  display: none;
}
.product-inline-purchase-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 2.45rem;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Storefront: confirm wallet payment before inline checkout submit */
dialog.wallet-inline-confirm-dialog:not([open]) {
  display: none;
}
dialog.wallet-inline-confirm-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(calc(100vw - 1.5rem), 22.5rem);
  max-width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  outline: none;
}
dialog.wallet-inline-confirm-dialog::backdrop {
  background: color-mix(in srgb, var(--text) 48%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.wallet-inline-confirm-dialog__card {
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--bg-elevated) 0%, var(--surface) 100%);
  box-shadow:
    0 24px 56px -18px color-mix(in srgb, var(--text) 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--border) 82%, var(--accent-mid)),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 16%, var(--border));
}
.wallet-inline-confirm-dialog__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wallet-inline-confirm-dialog__title {
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.wallet-inline-confirm-dialog__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.wallet-inline-confirm-dialog__summary {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.wallet-inline-confirm-dialog__summary[hidden] {
  display: none !important;
}
.wallet-inline-confirm-dialog__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0.85rem;
  align-items: baseline;
  padding: 0.35rem 0;
}
.wallet-inline-confirm-dialog__row + .wallet-inline-confirm-dialog__row {
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  margin-top: 0.35rem;
  padding-top: 0.65rem;
}
.wallet-inline-confirm-dialog__row-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.wallet-inline-confirm-dialog__row-value {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.wallet-inline-confirm-dialog__row-value--price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}
.wallet-inline-confirm-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 420px) {
  .wallet-inline-confirm-dialog__actions {
    flex-direction: row;
    gap: 0.55rem;
  }
  .wallet-inline-confirm-dialog__btn {
    flex: 1;
  }
}

.checkout-grid {
  display: grid;
  gap: clamp(1.15rem, 3vw, 1.75rem);
}
@media (min-width: 840px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 1.75rem;
  }
}

.wallet-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 3.2vw, 2rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.wallet-page__head-sub {
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wallet-page__balance-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.wallet-page__balance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 80% at 100% 0%,
    color-mix(in srgb, var(--accent-mid) 12%, transparent),
    transparent 55%
  );
  opacity: 0.9;
}

.wallet-page__balance-card > * {
  position: relative;
  z-index: 1;
}

.wallet-page__topup-card {
  border-radius: var(--radius-lg);
}

.wallet-page__topup-form .label {
  font-weight: 650;
}

.wallet-page__topup-form .payment-methods__legend {
  font-weight: 750;
  letter-spacing: 0.04em;
}

.wallet-page__deposit-method-head {
  gap: 0;
}

.wallet-page__topup-card.product-payment-panel.panel {
  border-color: color-mix(in srgb, var(--accent-mid) 16%, var(--border));
  background: linear-gradient(165deg, #f9fcf9 0%, #fff 58%);
}

.wallet-page__topup-form .product-checkout-panel__payment-card {
  margin-top: 0.15rem;
  margin-bottom: 0.65rem;
}

.wallet-topup__amount-block {
  margin-top: 0.15rem;
}

.wallet-topup__quick-head {
  margin: 0 0 0.35rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.wallet-topup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin: 0 0 0.65rem;
  align-items: center;
}

.wallet-topup__chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  background: color-mix(in srgb, var(--accent-muted) 42%, var(--surface-2));
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .wallet-topup__chip:hover {
    border-color: color-mix(in srgb, var(--accent-mid) 48%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2));
  }
}

.wallet-topup__chip:active {
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--border) 40%, transparent);
}

.wallet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.15rem, 3vw, 1.75rem);
}

.wallet-load-history {
  width: 100%;
}
.wallet-load-history .h-packages {
  margin-top: 0;
}
.wallet-load-history__intro {
  margin: 0.15rem 0 1rem;
  max-width: 44ch;
}
.wallet-load-history__amount {
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}
.wallet-load-history__amount--negative {
  color: #991b1b;
}
.wallet-load-history .table th.num,
.wallet-load-history .table td.num {
  text-align: right;
}

.wallet-balance-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.wallet-balance-card__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 78%, var(--accent-mid));
}

.wallet-balance-card__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-top: 0.55rem;
}

.wallet-balance-val {
  margin: 0;
  font-size: clamp(1.65rem, 4.5vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}

.wallet-balance-currency-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--accent-hover) 88%, var(--text));
  background: color-mix(in srgb, var(--accent-muted) 58%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}

.wallet-balance-card__stats {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent-mid));
}

.wallet-balance-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.wallet-balance-card__stat-label {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.wallet-balance-card__stat-value {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

/* Account profile + API keys */
.account-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}
.account-page__form-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 560px) {
  .account-page__form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.account-page__api-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.account-page__base-url {
  text-align: right;
  max-width: 100%;
}
.account-page__base-code {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  word-break: break-all;
  padding: 0.35rem 0.5rem;
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--border));
  border-radius: var(--radius-sm);
}
.account-page__new-key-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.account-page__key-reveal {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 92%, var(--border));
}
.account-page__table-wrap {
  margin-top: 0.5rem;
}
.account-page__link-list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.65;
}
.account-page__link-list li + li {
  margin-top: 0.4rem;
}

/* Public /api-docs page */
.prose-stack {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.api-docs {
  min-width: 0;
  max-width: 100%;
}
.api-docs p code,
.api-docs .muted code {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.api-docs__table-wrap {
  margin-top: 0.35rem;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.api-docs__table-wrap .table.api-docs__table {
  width: max-content;
  min-width: 100%;
}
.api-docs__table .api-docs__cell--method,
.api-docs__table .api-docs__cell--path,
.api-docs__table .api-docs__cell--auth {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
}
.api-docs__table .api-docs__cell--path code {
  white-space: nowrap;
}
.api-docs__table .api-docs__cell--notes {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: min(24rem, 75vw);
  min-width: 11rem;
  vertical-align: top;
}
.api-docs--compact .panel {
  padding: 1.15rem 1.25rem 1.35rem;
}
.api-docs__block-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.35rem 0 0.5rem;
}
.api-docs__block-title:first-child {
  margin-top: 0;
}
.api-docs--compact .api-docs__table {
  margin-top: 0.35rem;
  font-size: 0.875rem;
}
.api-docs--compact .api-docs__pre {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
.api-docs__section .api-docs__h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  font-weight: 700;
}
.api-docs__endpoint {
  margin: 0.5rem 0 1rem;
}
.api-docs__method {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-mid) 22%, transparent);
  color: var(--accent-hover);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.api-docs__pre {
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 94%, var(--border));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.api-docs__table {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .api-docs.prose-stack {
    gap: 0.85rem;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
  .api-docs--compact .panel {
    padding: 1rem 0.85rem 1.15rem;
  }
  .api-docs__block-title {
    margin-top: 1.1rem;
    line-height: 1.35;
    font-size: 0.75rem;
  }
  .api-docs--compact .api-docs__pre {
    margin-top: 0.45rem;
    padding: 0.6rem 0.65rem;
    font-size: 0.68rem;
    line-height: 1.4;
  }
  .api-docs__pre {
    font-size: 0.7rem;
    padding: 0.65rem 0.7rem;
  }
  .api-docs--compact .api-docs__table {
    font-size: 0.75rem;
  }
  .api-docs__table th,
  .api-docs__table td {
    padding: 0.5rem 0.55rem;
  }
  .api-docs__table .api-docs__cell--notes {
    max-width: min(20rem, 70vw);
    min-width: 9.5rem;
  }
}

.panel {
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.45rem 1.5rem;
  box-shadow: var(--shadow-xs), var(--shadow-inner-soft);
}
.panel--lift {
  box-shadow: var(--shadow-sm), var(--shadow-inner);
}
.panel--accent-border {
  border-color: color-mix(in srgb, var(--accent-mid) 24%, var(--border));
  background: linear-gradient(165deg, #f7fbf8 0%, #fff 58%);
}

/* Wallet balance: wins over generic .panel / .panel--accent-border */
.panel.panel--lift.panel--accent-border.wallet-page__balance-card {
  padding: clamp(1.35rem, 3.2vw, 1.65rem) clamp(1.25rem, 3vw, 1.55rem);
  border-color: color-mix(in srgb, var(--accent-mid) 24%, var(--border));
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--accent-muted) 32%, var(--bg-elevated)) 0%,
    var(--bg-elevated) 48%,
    color-mix(in srgb, var(--surface-2) 35%, var(--bg-elevated)) 100%
  );
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--border) 22%, transparent);
}

.panel__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.checkout-product {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}
.checkout-pack {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.pack-title {
  font-weight: 600;
}
.price-tag {
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--accent-mid);
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.input {
  font: inherit;
  padding: 0.72rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border-strong) 92%, var(--accent-mid));
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-inner-soft);
}
.input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-mid) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 75%, transparent), var(--shadow-inner-soft);
}

.fieldset {
  border: 1px solid color-mix(in srgb, var(--border-strong) 85%, var(--accent-mid));
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 251, 249, 0.85) 100%);
}

.fieldset--payment-methods {
  min-width: 0;
  width: 100%;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-strong) 82%, var(--accent-mid));
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--surface-2) 72%, var(--bg-elevated)) 100%
  );
  box-shadow: var(--shadow-xs), var(--shadow-inner-soft);
}
.payment-methods__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.checkout-pay-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.checkout-pay-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.checkout-pay-option__text strong {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.checkout-pay-option__text .muted {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.checkout-pay-option__subtitle {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0.01em;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.checkout-gateway-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 0.12rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 75%, var(--bg-elevated));
  box-shadow: var(--shadow-inner-soft);
  padding: 3px;
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: transform 0.15s var(--ease), box-shadow 0.2s, background 0.2s;
}
.btn--primary {
  background: var(--accent-mid);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.22);
  }
}
/* <a class="btn btn--primary">: global link `a:hover` / `a:visited` must not override button colors. */
a.btn.btn--primary,
a.btn.btn--primary:visited,
a.btn.btn--primary:hover,
a.btn.btn--primary:focus {
  color: #fff;
  text-decoration: none;
}
.btn--ghost {
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    border-color: var(--accent-mid);
    color: var(--accent-hover);
    background: var(--bg-elevated);
  }
}
.btn--sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
}
.btn--block {
  width: 100%;
}
.btn--danger {
  background: #fff;
  border: 1px solid rgba(180, 35, 24, 0.45);
  color: var(--danger);
}

.linkish {
  background: none;
  border: none;
  font: inherit;
  color: var(--accent-mid);
  cursor: pointer;
  padding: 0;
}

.inline {
  display: inline;
}

.form-narrow {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

/* Login / register: centered column, full width of container on small screens */
.auth-page {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.auth-page .auth-card {
  width: 100%;
  max-width: min(26.25rem, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 721px) {
  .auth-page {
    min-height: min(70vh, 40rem);
    justify-content: center;
    padding-block: clamp(1rem, 3vw, 2.5rem);
  }
}

.auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 2rem 2.25rem;
  box-shadow: var(--shadow-sm);
}
.auth-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.auth-card__sub {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.auth-card__remember {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
}
.auth-card__remember input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.auth-card__oauth {
  margin-bottom: 0.25rem;
}
.auth-card__oauth-or {
  position: relative;
  text-align: center;
  margin: 1rem 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.auth-card__oauth-or span {
  position: relative;
  z-index: 1;
  padding: 0 0.65rem;
  background: var(--bg-elevated);
}
.auth-card__oauth-or::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  z-index: 0;
}
.btn--oauth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 600;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.btn--oauth-google:hover {
  background: #f8f9fa;
  border-color: #d2d3d6;
  color: #202124;
}
.btn--oauth-google__icon {
  flex-shrink: 0;
}

.auth-card__optional {
  margin: 0.15rem 0 0;
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--bg-elevated));
  overflow: hidden;
}
.auth-card__optional-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  user-select: none;
}
.auth-card__optional-summary::-webkit-details-marker {
  display: none;
}
.auth-card__optional-summary-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  flex: 1;
  min-width: 0;
}
.auth-card__optional-summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.auth-card__optional[open] .auth-card__optional-summary::after {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}
.auth-card__optional-summary-text {
  min-width: 0;
}
.auth-card__optional-tag {
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.auth-card__optional-body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.auth-card__optional-field {
  margin-bottom: 0;
}

.flash {
  display: flex;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.45;
  box-shadow: var(--shadow-xs);
  border: 1px solid transparent;
}
.flash--success {
  background: linear-gradient(180deg, #f0faf3 0%, #e3f2e8 100%);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent-mid) 22%, transparent);
}
.flash--error {
  background: linear-gradient(180deg, #fff5f5 0%, #feecec 100%);
  color: #991b1b;
  border-color: rgba(220, 100, 90, 0.35);
}
.flash--info {
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f2fc 100%);
  border-color: rgba(100, 150, 200, 0.28);
  color: #1a3d5c;
}

/* `.flash { display: flex }` beats the UA `[hidden]` rule — empty live slug (and similar) must not show a red strip */
.flash[hidden] {
  display: none !important;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-sm), var(--shadow-inner);
}
.table-wrap--elevated {
  box-shadow: var(--shadow), var(--shadow-inner);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th,
.table td {
  padding: 0.78rem 1rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  vertical-align: middle;
}
.table th {
  background: linear-gradient(180deg, #f3f7f4 0%, #e5ede7 100%);
  font-weight: 800;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: color-mix(in srgb, var(--muted) 92%, var(--accent-mid));
}
/* Row hover on cells only + no transition — tr-level background + transition fights
   td painting in some browsers and causes rows to “blink” while the pointer moves. */
.table tbody td,
.table tbody th {
  background-image: none;
  background-color: transparent;
}
.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: color-mix(in srgb, var(--accent-muted) 24%, var(--surface-2, #fff));
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table th.table-actions,
.table td.table-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* Support tickets: search row + row options (storefront + admin) */
.store-tickets-search,
.admin-tickets-search {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.store-tickets-search__label,
.admin-tickets-search__label {
  margin-bottom: 0.35rem;
}
.store-tickets-search__row,
.admin-tickets-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.store-tickets-search__row .input[type="search"],
.admin-tickets-search__row .input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.tickets-table__id-link {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-decoration: none;
}
.tickets-table__id-link:hover {
  text-decoration: underline;
}

/* Ticket list row actions (replaces clipped <details> menus inside .table-wrap) */
.tickets-table__row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
}

#reply {
  scroll-margin-top: 5rem;
}

.admin-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 90%, #fff);
  border: 1px solid var(--border);
}
.admin-role-pill--admin {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent-muted) 55%, #fff);
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}
.admin-role-pill--support {
  color: color-mix(in srgb, var(--text) 88%, #2563eb);
  background: color-mix(in srgb, #dbeafe 55%, var(--surface-2));
  border-color: color-mix(in srgb, #93c5fd 35%, var(--border));
}

.badge {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface-2) 85%, var(--accent-muted));
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge--pending {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(180, 130, 40, 0.25);
}
.badge--in-progress {
  background: #dbeafe;
  color: #1e40af;
  border-color: rgba(59, 130, 200, 0.22);
}
.badge--complete {
  background: color-mix(in srgb, var(--accent-soft) 90%, #fff);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent-mid) 22%, transparent);
}
.badge--refunded {
  background: #fee2e2;
  color: #991b1b;
  border-color: rgba(200, 80, 80, 0.25);
}
.badge--partial-refund {
  background: #ffedd5;
  color: #9a3412;
  border-color: rgba(200, 120, 60, 0.22);
}
.badge--awaiting-payment {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: rgba(140, 80, 180, 0.2);
}
.badge--expired {
  background: #f3f4f6;
  color: #4b5563;
  border-color: rgba(100, 110, 120, 0.18);
}

/* Storefront order list + detail — status on one line, readable sentence case */
.order-status-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  text-transform: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.28rem 0.65rem;
}
.orders-list__status {
  white-space: nowrap;
  vertical-align: middle;
  width: 1%;
}

.inline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.stat-block__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.stat-block__value {
  font-weight: 700;
  font-size: 1.05rem;
}
.stat-block--highlight .stat-block__value {
  color: var(--accent-mid);
  font-size: 1.2rem;
}

.stat {
  font-weight: 600;
  font-size: 1.1rem;
}

.thank-panel__lead {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

/* Footer — storefront band: brand, nav columns, trust strip, legal row */
.site-footer {
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-elevated) 92%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--surface-2) 55%, var(--bg-deep)) 52%,
    color-mix(in srgb, var(--surface-2) 88%, var(--bg)) 100%
  );
  box-shadow:
    0 -1px 0 color-mix(in srgb, #fff 65%, transparent),
    0 -20px 48px -24px color-mix(in srgb, var(--text) 6%, transparent);
  padding: clamp(2rem, 4.5vw, 2.85rem) 0 0;
}

.site-footer__inner {
  padding-bottom: clamp(1.65rem, 3.2vw, 2.35rem);
}

.site-footer__grid {
  display: grid;
  gap: 1.65rem 1.5rem;
  align-items: start;
}

.site-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  max-width: min(36rem, 100%);
  padding: 0 0 1.5rem 1rem;
  border-left: 3px solid color-mix(in srgb, var(--accent-mid) 72%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.site-footer__nav-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem 3rem;
    align-items: start;
  }
  .site-footer__brand {
    grid-column: auto;
    padding: 0.15rem 0 0 1.15rem;
    border-bottom: none;
    align-self: start;
  }
  .site-footer__nav-row {
    display: contents;
  }
}

.site-footer__brand-link {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md, 8px);
  outline-offset: 3px;
}
.site-footer__brand-link:focus-visible {
  outline: 2px solid var(--accent-mid);
}

.site-footer__logo-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.site-footer__site-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text);
}
.site-footer__tagline {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
  max-width: 42ch;
  font-weight: 400;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.site-footer__trust {
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 38%, transparent);
  padding: clamp(0.85rem, 2vw, 1.1rem) 0;
}

.site-footer__trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem 1rem;
  max-width: 52rem;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  box-shadow: var(--shadow-inner-soft), 0 1px 3px color-mix(in srgb, var(--text) 4%, transparent);
}

.site-footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  letter-spacing: -0.01em;
}

.site-footer__trust-icon {
  flex-shrink: 0;
  color: var(--accent-mid);
  opacity: 0.92;
}

.site-footer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.48rem 1.05rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  border-radius: 999px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent), var(--shadow-inner-soft);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.site-footer__pill:hover {
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent-mid) 42%, var(--border));
  background: var(--bg-elevated);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-mid) 14%, transparent);
}
.site-footer__pill--wa:hover {
  border-color: color-mix(in srgb, #25d366 45%, var(--border));
  color: #128c7e;
}

.site-footer__col {
  min-width: 0;
  padding: 1rem 1rem 1.05rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 75%, transparent) inset;
}

@media (min-width: 900px) {
  .site-footer__col {
    padding: 0.2rem 0 0;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
}

.site-footer__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--muted) 85%, var(--accent-mid));
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

@media (min-width: 900px) {
  .site-footer__label {
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
  }
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.9375rem;
}
.site-footer__list li {
  margin: 0;
}
.site-footer__list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 -0.35rem;
  padding: 0.35rem 0.35rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm, 8px);
  outline-offset: 2px;
  transition: color 0.12s ease, background 0.12s ease;
}
.site-footer__list a:hover {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent-mid) 9%, transparent);
}
.site-footer__list a:focus-visible {
  outline: 2px solid var(--accent-mid);
}

@media (min-width: 900px) {
  .site-footer__list a {
    min-height: 2.2rem;
    margin: 0;
    padding: 0.18rem 0;
  }
  .site-footer__list a:hover {
    background: none;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-color: color-mix(in srgb, var(--accent-mid) 45%, transparent);
  }
}

.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  padding: 0;
  background: color-mix(in srgb, var(--surface-2) 65%, var(--bg-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.2rem 0 1.45rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (min-width: 640px) {
  .site-footer__bottom-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    gap: 0.75rem 1.75rem;
    padding: 1.2rem 0 1.5rem;
  }
}

.site-footer__copy {
  margin: 0;
  line-height: 1.45;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.site-footer__fineprint {
  margin: 0;
  max-width: min(36rem, 100%);
  font-size: 0.765rem;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.02em;
  opacity: 0.94;
}

/* Mobile: app-style bottom tab bar (storefront layout.php) */
.site-appbar {
  display: none;
}

/* ——— Admin (aligned with storefront: light shell, accent nav) ——— */
body.site.admin-body {
  /* Viewport may scroll horizontally if a wide element escapes (safety net; tables should scroll in .table-wrap). */
  overflow-x: auto;
  min-width: 0;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 120% 80% at 50% -30%, rgba(45, 138, 92, 0.07), transparent 55%);
}

/* Legacy admin sidebar (no store-premium): card-style chrome */
body.admin-body:not(.store-premium) .site-sidebar__head--admin .site-sidebar__brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
body.admin-body:not(.store-premium) .site-sidebar__head--admin .site-sidebar__logo {
  min-width: 0;
}
body.admin-body:not(.store-premium) .site-sidebar__admin-pill {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-mid);
  background: color-mix(in srgb, var(--accent-muted) 88%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 15%, var(--border));
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
}
body.admin-body:not(.store-premium) .site-sidebar__foot .site-nav__link {
  width: 100%;
  justify-content: center;
  text-align: center;
}
body.admin-body .site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Critical: default flex min-width:auto prevents shrinking below wide tables — blocks .table-wrap scroll. */
  min-width: 0;
  overflow-x: visible;
  /* Avoid inline-size containment affecting descendant overflow (admin tables). */
  container-type: normal;
  container-name: none;
}

body.admin-body .site-canvas.admin-content {
  overflow-x: visible;
}

/* Admin: premium sidebar navigation (legacy theme only; store-premium uses storefront-flat rules in admin-retail.css) */
body.admin-body:not(.store-premium) .site-sidebar {
  background:
    linear-gradient(175deg, #ffffff 0%, #f5faf6 38%, #e9f2ec 100%);
  border-right: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-mid));
  box-shadow:
    10px 0 56px rgba(10, 20, 14, 0.075),
    1px 0 0 rgba(255, 255, 255, 0.92) inset;
}
body.admin-body:not(.store-premium) .site-sidebar__inner {
  padding: 1.35rem 1rem 1.65rem;
  gap: 0.4rem;
}
body.admin-body:not(.store-premium) .site-sidebar__head--admin {
  padding-bottom: 1.2rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-mid));
}
body.admin-body:not(.store-premium) .site-nav__group {
  padding: 0.55rem 0.42rem 0.62rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 12%, var(--border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 8px 28px rgba(12, 22, 16, 0.045);
}
body.admin-body:not(.store-premium) .site-nav__link {
  border-radius: 11px;
}
body.admin-body:not(.store-premium) .site-nav__link-text {
  flex: 1;
  min-width: 0;
}
body.admin-body:not(.store-premium) .site-nav__badge {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0.1rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  border-radius: 999px;
  color: #5c1a12;
  background: linear-gradient(180deg, #fde8e4 0%, #f5cfc8 100%);
  border: 1px solid color-mix(in srgb, #c44 28%, var(--border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
body.admin-body:not(.store-premium) .site-nav__link--current .site-nav__badge {
  color: #4a150f;
  border-color: color-mix(in srgb, #a33 35%, var(--accent-mid));
}
body.admin-body:not(.store-premium) .site-nav__link--current {
  box-shadow:
    inset 3px 0 0 var(--accent-mid),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 14px rgba(26, 92, 64, 0.08);
}
body.admin-body:not(.store-premium) .site-sidebar__foot {
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  padding-top: 1.1rem;
}
body.admin-body:not(.store-premium) .site-sidebar__foot .site-nav__link--admin {
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent-mid) 16%, var(--border));
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-xs);
}
body.admin-body:not(.store-premium) .site-sidebar__foot .site-nav__link--admin:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  box-shadow: var(--shadow-sm);
}

/* Admin: top bar (legacy theme) */
body.admin-body:not(.store-premium) .site-topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 32px rgba(10, 18, 14, 0.04);
}

.admin-shell {
  flex: 1;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 920px) {
  .admin-shell {
    grid-template-columns: min(var(--sidebar-w), min(92vw, 320px)) 1fr;
  }
  .admin-backdrop,
  .admin-mobile-header {
    display: none !important;
  }
}

.admin-mobile-header {
  display: none;
}

.admin-backdrop {
  display: none;
}

.admin-nav__head {
  display: none;
}

.admin-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 0.9rem 1.25rem;
  padding-top: max(1.15rem, env(safe-area-inset-top, 0));
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 251, 249, 0.98) 42%,
    rgba(236, 244, 239, 0.95) 100%
  );
  border-right: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  box-shadow:
    6px 0 32px rgba(13, 24, 18, 0.05),
    1px 0 0 rgba(255, 255, 255, 0.65) inset;
}

.admin-nav__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.admin-nav__logo-link {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: var(--text);
}
.admin-nav__logo-link:hover {
  text-decoration: none;
  color: var(--accent-hover);
}
.admin-nav__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 2rem;
  max-width: min(11rem, 100%);
  object-fit: contain;
}
.admin-nav__logo-text {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.admin-nav__badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-mid);
  background: color-mix(in srgb, var(--accent-muted) 88%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 15%, var(--border));
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
}

.admin-nav__label {
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.15rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.92;
}

.admin-nav__label--section {
  margin-top: 0.9rem;
}

.admin-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.35rem 0.65rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 9%, var(--border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 18px rgba(13, 24, 18, 0.04);
}
.admin-links .admin-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.75rem 0.62rem 0.72rem;
  border-radius: 11px;
  font-size: 0.9125rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.16s var(--ease),
    color 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
.admin-nav__icon {
  flex-shrink: 0;
  opacity: 0.88;
}
.admin-links .admin-nav__link:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
  color: var(--text);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent-mid) 12%, transparent);
}
.admin-links .admin-nav__link:hover .admin-nav__icon {
  opacity: 1;
}
.admin-links .admin-nav__link.is-active {
  background: linear-gradient(135deg, rgba(29, 92, 66, 0.11) 0%, rgba(29, 92, 66, 0.06) 100%);
  color: var(--accent-hover);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent-mid) 18%, transparent);
  box-shadow:
    inset 3px 0 0 var(--accent-mid),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.admin-links .admin-nav__link.is-active .admin-nav__icon {
  opacity: 1;
  color: var(--accent-mid);
}

.admin-foot {
  margin-top: auto;
  padding-top: 0.85rem;
}
.admin-foot__store {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-mid);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 12%, var(--border));
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s;
}
.admin-foot__store:hover {
  background: #fff;
  border-color: var(--accent-mid);
  color: var(--accent-hover);
  text-decoration: none;
}

.admin-flash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
  width: 100%;
}

.admin-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 251, 249, 0.65) 42%, var(--bg) 100%);
  border-left: none;
}

.admin-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-block: 1.85rem 2.75rem;
  padding-inline: 0;
}

.container--admin {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--admin-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--admin-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--admin-gutter), env(safe-area-inset-right, 0px));
}

/* Admin: full-width CMS pages hub */
body.admin-body .admin-main > .container--admin:has(.admin-appearance-pages-shell) {
  max-width: none;
}
.admin-appearance-pages-shell {
  width: 100%;
}
.admin-appearance-pages-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1rem;
}
.admin-appearance-pages-body {
  max-width: none;
}
.table--wide-pages {
  width: 100%;
}

/* Admin: HTML editor textareas */
textarea.input--html-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  min-height: 12rem;
  tab-size: 2;
}

.admin-cms-full-html-page__editor-card .CodeMirror {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}

/* Storefront: CMS custom HTML slots */
.cms-page-html,
.cms-site-html {
  width: 100%;
}
.cms-page-html--top {
  margin-bottom: 0.75rem;
}
.cms-page-html--bottom {
  margin-top: 1rem;
}
.cms-site-html--header {
  margin-bottom: 0.75rem;
}
.cms-site-html--footer {
  margin-top: 1rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.1rem;
  margin-top: 1.35rem;
}
.stat-card {
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fff 0%, var(--surface-2) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  box-shadow: var(--shadow-sm), var(--shadow-inner);
}
.stat-card .stat-lg {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-mid);
}
.stat-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.stat-card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.stat-card__meta {
  display: block;
  margin-top: 0.35rem;
}
.stat-lg--money {
  font-size: 1.65rem;
}

.thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
}

.form-row {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.form-admin {
  margin-bottom: 2rem;
}

/* Admin: native <dialog> — closed state must stay hidden (do not set display on dialog without [open]) */
dialog.admin-modal:not([open]),
dialog.admin-dialog:not([open]),
dialog.api-import-dialog:not([open]) {
  display: none;
}

/* Admin: native <dialog> popups (modals + forms), open only — viewport-centered */
dialog.admin-modal[open],
dialog.admin-dialog[open] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  width: min(100vw - 1.5rem, 100%);
  max-width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(90dvh, 880px);
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  box-shadow:
    0 40px 80px -28px rgba(8, 22, 14, 0.35),
    0 0 0 1px color-mix(in srgb, var(--border) 65%, var(--accent-mid)),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  outline: none;
}
dialog.admin-modal[open].admin-modal--sm {
  max-width: min(28rem, calc(100vw - 1.5rem));
}
dialog.admin-modal[open].admin-modal--md {
  max-width: min(40rem, calc(100vw - 1.5rem));
}
dialog.admin-modal[open].admin-modal--wide {
  max-width: min(46rem, calc(100vw - 1.25rem));
}

dialog.admin-modal[open]::before,
dialog.admin-dialog[open]::before {
  content: '';
  display: block;
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--accent-mid),
    color-mix(in srgb, var(--accent-mid) 72%, #9bcbb0),
    color-mix(in srgb, var(--accent-mid) 45%, #c5e0d4)
  );
}

dialog.admin-modal::backdrop,
dialog.admin-dialog::backdrop {
  background: rgba(8, 22, 14, 0.48);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

dialog.admin-dialog[open].admin-dialog--gateway {
  max-width: min(34rem, calc(100vw - 1.5rem));
}

dialog.admin-dialog[open].admin-dialog--cf-templates {
  max-width: min(36rem, calc(100vw - 1.25rem));
}

dialog.admin-dialog--cf-templates .admin-dialog__body.admin-cf-tpl-dialog {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-dialog__floating-close {
  position: absolute;
  top: calc(3px + 0.45rem);
  right: max(0.45rem, env(safe-area-inset-right, 0px));
  z-index: 4;
}

dialog.admin-dialog form.admin-dialog__body > h2:first-child,
dialog.admin-dialog form.admin-dialog__body > .h3:first-child {
  position: relative;
  margin-top: 0;
  padding-right: 2.75rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--text);
}

dialog.admin-dialog form.admin-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.15rem 1.25rem 1.2rem;
  padding-top: 1rem;
}

dialog.admin-dialog .admin-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 0.5rem;
  padding: 1rem 0 0.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-elevated) 22%);
  border-top: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  gap: 0.55rem;
}

.admin-modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.2rem 1.35rem 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  background: linear-gradient(
    175deg,
    #fff 0%,
    color-mix(in srgb, var(--accent-muted) 22%, #fff) 55%,
    var(--surface-2) 100%
  );
}
.admin-modal__header-inner {
  min-width: 0;
  flex: 1;
  padding-top: 0.1rem;
}
.admin-modal__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: var(--text);
}
.admin-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, #fff);
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.16s var(--ease),
    color 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.admin-modal__close:hover {
  background: color-mix(in srgb, var(--accent-soft) 35%, #fff);
  border-color: color-mix(in srgb, var(--accent-mid) 18%, var(--border));
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.admin-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 2px;
}
.admin-modal__close-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.92;
}
.admin-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.35rem 1.4rem 1.3rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #fafcfb 0%, #fff 1.5rem);
}
/* Edit dialogs: single rhythm via flex gap (avoid stacking .stack gap + legacy sibling margins) */
.admin-modal__body > form.stack {
  min-height: 0;
  gap: 0.95rem;
}
.admin-modal__body .stack > * + * {
  margin-top: 0;
}
.admin-modal__subtitle {
  margin: 0 0 0.85rem;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-word;
}
dialog.admin-modal[open].admin-modal--user-edit {
  max-width: min(26rem, calc(100vw - 1.5rem));
}
dialog.admin-modal[open].admin-modal--smm-editor {
  max-width: min(52rem, calc(100vw - 1.5rem));
}
.admin-modal__body--product-editor .admin-product-editor__section:first-of-type {
  padding-top: 0;
}
.admin-modal__body .stack > * + * {
  margin-top: 0.85rem;
}
.admin-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 0.5rem;
  margin-bottom: -0.15rem;
  padding: 1.05rem 0 0.4rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 35%);
  box-shadow: 0 -12px 28px -18px color-mix(in srgb, var(--accent-mid) 18%, transparent);
}
.admin-modal__danger-zone {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 78%, var(--accent-mid));
}

@media (max-width: 520px) {
  dialog.admin-modal[open],
  dialog.admin-dialog[open] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: min(92dvh, 900px);
    border-radius: var(--radius);
  }
  .admin-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .admin-modal__actions .btn--primary {
    width: 100%;
    justify-content: center;
  }
}

.pad-top {
  padding-top: 0.85rem;
}

details {
  position: relative;
  z-index: 1;
}
details[open] {
  z-index: 40;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-mid);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0.25rem 0;
  user-select: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details[open] > *:not(summary) {
  margin-top: 0.65rem;
}
details[open] > form {
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.table td details {
  vertical-align: top;
}
select.input {
  cursor: pointer;
  appearance: auto;
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.9375rem;
  background-color: var(--bg-elevated);
}
@media (max-width: 720px) {
  select.input {
    font-size: 1rem;
    min-height: 2.75rem;
  }
}

.input--sm {
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
}

.inline form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.flex {
  display: flex;
  align-items: center;
}
.gap-sm {
  gap: 0.4rem;
}

.nowrap {
  white-space: nowrap;
}

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

/* Admin: dashboard stat groups (order management + site stats) */
.admin-dash-group {
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.35rem;
}
.admin-dash-group .stat-grid {
  margin-top: 0.85rem;
}

/* Dashboard Website stats: five cards per row on desktop */
@media (min-width: 920px) {
  .stat-grid.stat-grid--dash-site {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Admin: dashboard reports */
.admin-dash-reports {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
}
.admin-dash-reports__head {
  margin-bottom: 1rem;
}
.admin-dash-reports__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.admin-dash-reports__sub {
  margin: 0;
  max-width: 52rem;
  line-height: 1.55;
  font-size: 0.8125rem;
}
.admin-dash-reports__sub code {
  font-size: 0.85em;
}
.admin-dash-reports__table .table th.num,
.admin-dash-reports__table .table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Admin: items list */
.admin-items-page-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}
.admin-items-page-head__actions {
  flex-shrink: 0;
}
.admin-items-page-head {
  margin-bottom: 1.65rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
}
.admin-items-page-head h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
}
.admin-items-page-head__muted {
  font-weight: 600;
  color: var(--muted);
}
.admin-items-page-head__sub {
  margin: 0;
  max-width: 40rem;
  line-height: 1.55;
  font-size: 0.9375rem;
}

/* Admin: user custom discounts (/admin/users/{id}/custom-discounts) */
.admin-custom-discounts-page__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.65rem;
}
.admin-custom-discounts-page__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.admin-custom-discounts-page__add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-custom-discounts-page__add-icon {
  flex-shrink: 0;
  opacity: 0.95;
}
.admin-custom-discounts-page__rules {
  margin-top: 0.25rem;
}
.admin-custom-discounts-page__rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.admin-custom-discounts-page__rules-title {
  margin: 0;
}
.admin-custom-discounts-page__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-strong, #14532d);
  background: color-mix(in srgb, var(--accent-mid) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 35%, transparent);
}
.admin-custom-discounts-page__table .admin-custom-discounts-page__empty {
  padding: 2rem 1.25rem;
  text-align: center;
  vertical-align: middle;
}
.admin-custom-discounts-page__empty-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.admin-custom-discounts-page__empty-text {
  margin: 0 auto;
  max-width: 26rem;
}
.admin-custom-discounts-page__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-md);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-custom-discounts-page__pill--prod {
  color: #1e3a5f;
  background: color-mix(in srgb, #3b82f6 12%, #fff);
  border: 1px solid color-mix(in srgb, #3b82f6 28%, transparent);
}
.admin-custom-discounts-page__pill--pkg {
  color: #4a3d0f;
  background: color-mix(in srgb, #eab308 18%, #fff);
  border: 1px solid color-mix(in srgb, #ca8a04 30%, transparent);
}
.admin-custom-discounts-page__target-cell {
  max-width: 22rem;
  line-height: 1.45;
  word-break: break-word;
}
.admin-custom-discounts-page__value-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-custom-discounts-page__form .admin-custom-discounts-page__grid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .admin-custom-discounts-page__form .admin-custom-discounts-page__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.admin-custom-discounts-page__table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.admin-custom-discounts-page__target-combo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.admin-custom-discounts-page__target-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.admin-custom-discounts-page__target-error {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--danger, #b91c1c);
}
.admin-custom-discounts-page__target-scroll {
  max-height: min(16rem, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
  padding: 0.35rem 0.25rem;
  contain: layout;
}
.admin-custom-discounts-page__target-group-label {
  margin: 0.35rem 0.4rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}
.admin-custom-discounts-page__target-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.1rem 0.15rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.35;
}
.admin-custom-discounts-page__target-row:hover {
  background: color-mix(in srgb, var(--accent-mid) 8%, var(--surface));
}
.admin-custom-discounts-page__target-row input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.admin-custom-discounts-page__target-row-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
}
.admin-custom-discounts-page__preview {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--accent-mid));
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}
dialog.admin-modal[open].admin-modal--custom-discount-add,
dialog.admin-modal[open].admin-modal--custom-discount-edit {
  max-width: min(40rem, calc(100vw - 1.25rem));
}

/* Admin: API import modal */
dialog.api-import-dialog[open] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.api-import-dialog {
  max-width: min(52rem, 96vw);
  width: 100%;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, var(--bg));
  box-shadow: 0 24px 48px color-mix(in srgb, #000 28%, transparent);
}
.api-import-dialog::backdrop {
  background: color-mix(in srgb, #0a0c10 52%, transparent);
}
.api-import-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 44rem);
}
.api-import-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.api-import-dialog__head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.api-import-dialog__body {
  padding: 1rem 1.15rem 1.15rem;
  overflow: auto;
  flex: 1 1 auto;
}
.api-import-step {
  display: none;
}
.api-import-step.is-active {
  display: block;
}
.api-import-summary {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  margin-bottom: 1rem;
}
.api-import-summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}
.api-import-summary dt {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.api-import-summary dd {
  margin: 0;
  font-weight: 600;
}
.api-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.85rem;
}
.api-import-toolbar .label {
  flex: 1 1 12rem;
  min-width: 0;
}
.api-import-pkg-table .aim-sell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-vouchers-page {
  max-width: 72rem;
}
.admin-vouchers-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
@media (max-width: 520px) {
  .admin-vouchers-page__header {
    margin-bottom: 0.45rem;
    padding-bottom: 0.45rem;
    gap: 0.5rem 0.75rem;
  }
  .admin-vouchers-page__title {
    margin-bottom: 0.2rem;
  }
  .admin-vouchers-page__lede {
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .admin-vouchers-page__cta {
    width: 100%;
    justify-content: center;
    margin-top: 0.1rem;
  }
}
.admin-vouchers-page__headline {
  flex: 1 1 16rem;
  min-width: 0;
}
.admin-vouchers-page__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.admin-vouchers-page__lede {
  margin: 0;
  max-width: 40rem;
  line-height: 1.5;
  font-size: 0.9375rem;
}
.admin-vouchers-page__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.admin-vouchers-page__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.25rem;
  background: color-mix(in srgb, #fff 18%, transparent);
}
.admin-vouchers-page__pagination {
  margin-top: 0.75rem;
}

.admin-vouchers-surface {
  padding: 0;
  overflow: hidden;
  margin-bottom: 0.85rem;
}
.admin-vouchers-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}
.admin-vouchers-tabs--segmented {
  margin: 0;
  padding: 0.4rem;
  gap: 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--bg));
}
.admin-vouchers-tabs__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 0.45rem;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.admin-vouchers-tabs__pill:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.admin-vouchers-tabs__pill--current {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

.admin-vouchers-filters-form {
  padding: 0.85rem 1rem 1rem;
}
.admin-vouchers-filters-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
}
.admin-vouchers-filters-form .user-picker__toggle,
.admin-vouchers-import-modal .user-picker__toggle {
  min-height: 2.65rem;
  height: auto;
  white-space: normal;
}
.admin-vouchers-filters-form .user-picker__label,
.admin-vouchers-import-modal .user-picker__label {
  display: block;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  font-size: 0.8125rem;
}
.admin-vouchers-filters-form .user-picker__item,
.admin-vouchers-import-modal .user-picker__item {
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}
.admin-vouchers-filters-form__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.admin-vouchers-filters-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-vouchers-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.admin-vouchers-meta-bar__stat {
  font-weight: 600;
  color: var(--text);
}
.admin-vouchers-meta-bar__sep {
  color: var(--muted);
  user-select: none;
}

.admin-vouchers-empty {
  text-align: left;
}
.admin-vouchers-empty--soft {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-mid) 6%, var(--bg-elevated)) 0%,
    var(--bg-elevated) 48%
  );
}
.admin-vouchers-empty__inner {
  padding: 0.25rem 0.15rem;
  max-width: 36rem;
}
.admin-vouchers-empty__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.admin-vouchers-empty__text {
  margin: 0 0 1rem;
  line-height: 1.55;
}

/* Downloadable files — mirrors vouchers surface; mode + bulk below filters */
.admin-download-files-mode {
  margin-top: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}
.admin-download-files-mode__title {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-download-files-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0.65rem 0 0.35rem;
}
.admin-download-files-overview {
  margin-top: 1rem;
}
.admin-download-files-overview__lede {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.admin-vouchers-table__grid thead th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  border-bottom-width: 1px;
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.admin-vouchers-table__grid tbody td,
.admin-vouchers-table__grid tbody th {
  background-color: transparent;
}
.admin-vouchers-table__grid tbody tr:hover td,
.admin-vouchers-table__grid tbody tr:hover th {
  background-color: color-mix(in srgb, var(--accent-mid) 8%, var(--surface-2, #fff));
}
.admin-vouchers-table__col-pkg {
  width: 34%;
}
.admin-vouchers-table__col-product-id {
  width: 7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-vouchers-table__col-codes {
  width: 30%;
}
.admin-vouchers-table__col-add {
  width: 18%;
  white-space: nowrap;
}
.admin-vouchers-table__product-id {
  text-align: right;
  vertical-align: middle;
}
.admin-vouchers-table__product-id-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.875rem;
}
.admin-vouchers-table__pkg-ids {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
}
.admin-vouchers-table__add {
  vertical-align: middle;
}
.admin-vouchers-table__add-btn {
  white-space: nowrap;
}
.admin-vouchers-add-package__lede {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.admin-vouchers-import-mode {
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2) 40%, var(--bg-elevated));
}
.admin-vouchers-import-mode__legend {
  padding: 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-vouchers-import-mode__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
@media (min-width: 520px) {
  .admin-vouchers-import-mode__row {
    flex-direction: row;
    gap: 0.65rem;
    align-items: stretch;
  }
}
.admin-vouchers-import-mode__opt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.admin-vouchers-import-mode__opt:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 25%, var(--border));
}
.admin-vouchers-import-mode__opt:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-mid) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-mid) 6%, var(--bg-elevated));
  box-shadow: var(--shadow-sm);
}
.admin-vouchers-import-mode__opt input {
  margin: 0 0 0.15rem;
  align-self: flex-start;
}
.admin-vouchers-import-mode__opt-title {
  font-weight: 700;
  font-size: 0.9rem;
}
.admin-vouchers-import-mode__opt-desc {
  line-height: 1.35;
}
.admin-vouchers-import-mode__opt-desc code {
  font-size: 0.72rem;
  word-break: break-all;
}
.admin-vouchers-import-mode__opt-desc kbd {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  background: var(--bg-elevated);
}
.admin-vouchers-import-mode__hint {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}
.admin-vouchers-table__pkg {
  vertical-align: middle;
}
.admin-vouchers-table__pkg-name {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.admin-vouchers-table__pkg-meta {
  display: block;
  margin-top: 0.2rem;
}

.admin-vouchers-code-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.admin-vouchers-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  font: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 35%, transparent);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.admin-vouchers-stat:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  box-shadow: var(--shadow-sm);
}
.admin-vouchers-stat:active {
  transform: translateY(1px);
}
.admin-vouchers-stat__n {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.admin-vouchers-stat__lbl {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.admin-vouchers-stat--avail {
  border-color: color-mix(in srgb, #16a34a 28%, var(--border));
  background: color-mix(in srgb, #16a34a 7%, var(--bg-elevated));
}
.admin-vouchers-stat--avail .admin-vouchers-stat__n {
  color: #15803d;
}
.admin-vouchers-stat--sold {
  border-color: color-mix(in srgb, var(--border) 90%, var(--muted));
  background: color-mix(in srgb, var(--muted) 8%, var(--bg-elevated));
}
.admin-vouchers-stat--sold .admin-vouchers-stat__n {
  color: var(--text);
}

.admin-vouchers-codes-dialog .admin-modal__body {
  padding-top: 0.65rem;
}
.admin-vouchers-codes-dialog__header {
  align-items: flex-start;
  gap: 0.75rem;
}
.admin-vouchers-codes-dialog__head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-vouchers-codes-dialog__subtitle {
  margin: 0.2rem 0 0;
  line-height: 1.4;
  max-width: 36rem;
}

.admin-vouchers-codes-popup__loading,
.admin-vouchers-codes-popup__err,
.admin-vouchers-codes-popup__empty {
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.admin-vouchers-codes-popup__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.35rem 0.15rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.admin-vouchers-codes-popup__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.admin-vouchers-codes-popup__badge--avail {
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
  color: #166534;
  background: color-mix(in srgb, #16a34a 10%, var(--bg-elevated));
}
.admin-vouchers-codes-popup__badge--sold {
  color: var(--muted);
}
.admin-vouchers-codes-popup__badge--all {
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
}
.admin-vouchers-codes-popup__count {
  font-variant-numeric: tabular-nums;
}
.admin-vouchers-codes-popup__scroll {
  max-height: min(58vh, 26rem);
  overflow: auto;
  margin-top: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2) 35%, var(--bg-elevated));
  -webkit-overflow-scrolling: touch;
}
.admin-vouchers-codes-popup__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.admin-vouchers-codes-popup__pager-meta {
  flex: 1 1 10rem;
  min-width: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .admin-vouchers-codes-popup__pager {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-vouchers-codes-popup__pager-meta {
    text-align: left;
  }
  .admin-vouchers-codes-popup__pager .btn {
    width: 100%;
    justify-content: center;
  }
}
.admin-vouchers-codes-table {
  margin: 0;
  font-size: 0.875rem;
}
.admin-vouchers-codes-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--surface-2));
  box-shadow: 0 1px 0 var(--border);
  white-space: nowrap;
}
.admin-vouchers-codes-table--bulk {
  table-layout: fixed;
  width: 100%;
}
.admin-vouchers-codes-table__th-cb {
  width: 2.35rem;
  text-align: center;
  vertical-align: middle;
}
.admin-vouchers-codes-table__td-cb {
  width: 2.35rem;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.5rem;
}
.admin-vouchers-codes-table__th-id {
  width: 4.25rem;
}
.admin-vouchers-codes-table__th-actions {
  width: 6.5rem;
  text-align: right;
}
.admin-vouchers-codes-table__id {
  vertical-align: middle;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.admin-vouchers-codes-table__id-inner {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.admin-vouchers-codes-table__code {
  vertical-align: middle;
  min-width: 0;
}
.admin-vouchers-codes-table__actions {
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.admin-vouchers-codes-table__row--avail .admin-vouchers-codes-table__code {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.admin-vouchers-codes-table__row--sold .admin-vouchers-codes-table__code {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.admin-vouchers-codes-editline {
  margin: 0;
}
.admin-vouchers-codes-editline__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-vouchers-codes-editline__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
}
.admin-vouchers-codes-editline__save {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.admin-vouchers-codes-row__del {
  display: inline-block;
  margin: 0;
}
.admin-vouchers-codes-bulkbar {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--bg-elevated));
}
.admin-vouchers-codes-bulkbar--active {
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}
.admin-vouchers-codes-bulkbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
}
.admin-vouchers-codes-bulkbar__count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.admin-vouchers-codes-bulkbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.admin-vouchers-codes-bulkbar__panel {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
.admin-vouchers-codes-bulkbar__panel[hidden] {
  display: none !important;
}
.admin-vouchers-codes-bulkbar__label {
  margin-bottom: 0.5rem;
}
@media (max-width: 560px) {
  .admin-vouchers-codes-editline__inner {
    flex-wrap: wrap;
  }
  .admin-vouchers-codes-editline__save {
    width: 100%;
  }
}
.admin-vouchers-codes-row__sold {
  min-width: 0;
}
.admin-vouchers-codes-row__code {
  display: block;
  font-size: 0.8125rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.admin-vouchers-codes-row__meta {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}
.admin-vouchers-codes-row__meta-k {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  margin-right: 0.2rem;
}
.admin-vouchers-codes-row__meta-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

.admin-vouchers-import-form__textarea {
  min-height: 7rem;
  max-height: min(42vh, 15rem);
  overflow-y: auto;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Voucher import dialogs: cap codes textarea so modal header stays in view on small viewports */
dialog.admin-vouchers-import-modal[open] .admin-vouchers-import-form__textarea {
  min-height: 5rem;
  max-height: min(34vh, 12rem);
}

.admin-vouchers-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.admin-vouchers-filters {
  flex-wrap: wrap;
  align-items: flex-end;
}
.admin-vouchers-filters__field {
  min-width: 11rem;
}
.admin-vouchers-filters__field--grow {
  flex: 1 1 14rem;
  min-width: 10rem;
}
.admin-vouchers-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.admin-vouchers-meta {
  margin: -0.35rem 0 0.85rem;
}
.admin-vouchers-code {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.8125rem;
}

@media (max-width: 719px) {
  .admin-vouchers-page__header {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-vouchers-page__cta {
    width: 100%;
    justify-content: center;
  }
  .admin-vouchers-tabs--segmented {
    justify-content: stretch;
  }
  .admin-vouchers-tabs__pill {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .admin-vouchers-filters-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .admin-vouchers-filters-form__row .admin-vouchers-filters__field--grow {
    flex: 0 1 auto;
    min-height: 0;
  }
  .admin-vouchers-filters-form__actions {
    width: 100%;
    justify-content: stretch;
  }
  .admin-vouchers-filters-form__actions .btn {
    flex: 1 1 auto;
  }
  .admin-vouchers-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-vouchers-head .btn {
    width: 100%;
    justify-content: center;
  }
  .admin-vouchers-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .items-toolbar__row.admin-vouchers-filters {
    gap: 0.45rem;
  }
  .items-toolbar__row.admin-vouchers-filters .admin-vouchers-filters__field--grow {
    flex: 0 1 auto;
    min-height: 0;
  }
  .admin-vouchers-filters__field,
  .admin-vouchers-filters__field--grow {
    min-width: 0;
    width: 100%;
  }
  .admin-vouchers-filters__actions {
    width: 100%;
    justify-content: stretch;
  }
  .admin-vouchers-filters__actions .btn {
    flex: 1 1 auto;
  }

  .admin-vouchers-table.table-wrap {
    /* Card layout still needs a bounded scrollport for wide cells (codes, paths). */
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
  }
  .admin-vouchers-table .table {
    display: block;
    width: 100%;
  }
  .admin-vouchers-table .table thead {
    display: none;
  }
  .admin-vouchers-table .table tbody {
    display: block;
  }
  .admin-vouchers-table .table tbody tr {
    display: block;
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .admin-vouchers-table .table tbody tr:last-child {
    margin-bottom: 0;
  }
  .admin-vouchers-table .table tbody tr:last-child:not(.admin-vouchers-table__empty-row) {
    margin-bottom: 0;
  }
  .admin-vouchers-table .table tbody tr.admin-vouchers-table__empty-row {
    margin-bottom: 0;
    padding: 1.35rem 1rem;
    text-align: center;
    background: var(--bg-elevated);
  }
  .admin-vouchers-table .table tbody tr.admin-vouchers-table__empty-row td {
    display: block;
    border: none;
    padding: 0;
  }
  .admin-vouchers-table .table tbody td {
    display: block;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    font-size: 0.875rem;
  }
  .admin-vouchers-table .table tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .admin-vouchers-table .table tbody td::before {
    display: block;
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }
  .admin-vouchers-table .table tbody td:not([data-label])::before {
    display: none;
  }
  .admin-vouchers-table .table tbody td[data-label="Action"] .inline {
    display: block;
    width: 100%;
  }
  .admin-vouchers-table .table tbody td[data-label="Action"] .btn {
    width: 100%;
    justify-content: center;
  }
  .admin-vouchers-table .admin-vouchers-code {
    font-size: 0.78rem;
  }
  .admin-vouchers-table .admin-vouchers-table__add-btn {
    width: 100%;
    justify-content: center;
  }
}

.admin-items-add {
  margin-bottom: 1.5rem;
}

/* Shared “create” forms: category, product, package */
.admin-composer .admin-composer__head {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}
.admin-composer .admin-composer__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.admin-composer__head-main {
  flex: 1 1 12rem;
  min-width: 0;
}
.admin-composer__aside-btn {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.admin-composer__title {
  margin: 0 0 0.4rem;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text);
}
.admin-composer__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 40rem;
}
.admin-composer__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-composer__body > .label:first-child {
  margin-top: 0;
}
.admin-composer__optional {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.admin-composer__grid--2 {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .admin-composer__grid--2 {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}
.admin-composer__textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}
.admin-file-field .admin-file-field__input,
label.admin-file-field > input[type='file'] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--surface-2));
  cursor: pointer;
}
.admin-file-field .admin-file-field__input:focus,
label.admin-file-field > input[type='file']:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.admin-file-field__box {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}
.admin-file-field__preview-inner {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 0.45rem;
  overflow: visible;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.admin-file-field__thumb {
  display: block;
  width: 7.5rem;
  height: 5.25rem;
  max-width: min(100%, 7.5rem);
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--surface-2));
}
.admin-file-field__remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.admin-file-field__remove:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
}
.admin-file-field__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

/* Cover uploader: saved + new previews, choose-file button only (picker not on label). */
.admin-cover-field {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.admin-cover-field__label {
  display: block;
  margin: 0;
}
.admin-cover-field__existing-inner,
.admin-cover-field__new-inner {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 0.5rem;
  overflow: visible;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow) 38%, transparent);
}
.admin-cover-field__existing-img,
.admin-cover-field__new-img {
  display: block;
  width: min(100%, 14rem);
  max-width: 14rem;
  height: auto;
  max-height: 10rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--surface-2));
}
.admin-cover-field__pill-dismiss {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.12s ease, transform 0.12s ease;
}
.admin-cover-field__pill-dismiss:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
}
.admin-cover-field__pill-dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.admin-cover-field__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0;
  width: 100%;
  box-sizing: border-box;
}
.admin-cover-field__filename {
  max-width: 100%;
  word-break: break-word;
}
.admin-cover-field__removed-note {
  margin: 0.25rem 0 0;
}
.admin-cover-field__new-caption {
  margin: 0 0 0.35rem;
}
.admin-composer__footer {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.admin-composer__footer .btn--primary {
  min-width: 10rem;
}
@media (max-width: 480px) {
  .admin-composer__footer {
    justify-content: stretch;
  }
  .admin-composer__footer .btn--primary {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
}
.admin-cf-tpl-dialog__header {
  flex-shrink: 0;
}
.admin-cf-tpl-dialog__title {
  margin: 0 0 0.35rem;
  padding-right: 2.75rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--text);
}
.admin-cf-tpl-dialog__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.admin-cf-tpl-panel {
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface-2) 94%, #fff) 0%, var(--bg-elevated) 100%);
  padding: 0.85rem 1rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.admin-cf-tpl-panel--create {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--bg-elevated)) 100%);
}
.admin-cf-tpl-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.admin-cf-tpl-panel__title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-cf-tpl-panel__title--create {
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 0.72rem;
}
.admin-cf-tpl-panel--create .admin-cf-tpl-panel__title--create {
  margin-bottom: 0.65rem;
}
.admin-cf-tpl-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2));
  color: color-mix(in srgb, var(--text) 88%, var(--accent-mid));
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent-mid));
}

.admin-cf-tpl-empty {
  text-align: center;
  padding: 1.1rem 0.75rem;
  border-radius: 0.45rem;
  border: 1px dashed color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.admin-cf-tpl-empty__title {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.admin-cf-tpl-empty__hint {
  margin: 0;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.admin-cf-tpl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(38vh, 260px);
  overflow-y: auto;
  padding-right: 0.15rem;
  margin-right: -0.15rem;
}

.admin-cf-tpl-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: var(--bg-elevated);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}
.admin-cf-tpl-card:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  box-shadow: 0 2px 10px -4px rgba(12, 40, 28, 0.12);
}
.admin-cf-tpl-card__main {
  flex: 1 1 10rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-cf-tpl-card__name {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}
.admin-cf-tpl-card__summary {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-cf-tpl-card__meta {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--muted) 92%, var(--accent-mid));
}
.admin-cf-tpl-card__del {
  margin: 0;
  align-self: center;
  flex-shrink: 0;
}
.admin-cf-tpl-card__del-btn {
  white-space: nowrap;
}

.admin-cf-tpl-save-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-cf-tpl-save-form .label {
  margin: 0;
}
.admin-cf-tpl-fields {
  padding: 0.65rem 0.75rem 0.75rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 35%, var(--bg-elevated));
}
.admin-cf-tpl-fields__label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.admin-cf-tpl-fields__add-icon {
  display: inline-block;
  margin-right: 0.15rem;
  font-weight: 700;
  opacity: 0.85;
}
.admin-cf-tpl-rows {
  margin-bottom: 0.45rem;
}
.admin-cf-tpl-rows:empty {
  min-height: 2.5rem;
  border-radius: 0.4rem;
  border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.admin-cf-tpl-rows:empty::after {
  content: 'No fields yet — optional; empty template = single Player ID at checkout.';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

dialog.admin-dialog--cf-templates .admin-cf-tpl-row.admin-cf-row {
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
}

.admin-cf-tpl-save-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}
.admin-items-add__grid {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.admin-items-add__grid--r2 {
  margin-bottom: 1rem;
}
/** Two equal columns (e.g. Product | Title, Provider | Service) */
.admin-items-add__grid--pair {
  margin-bottom: 1rem;
}
/** Quantity | Markup | Panel rate */
.admin-items-add__grid--triple {
  margin-bottom: 1rem;
}
.admin-smm-panel {
  padding: 1rem 1.15rem;
  margin-bottom: 0.35rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 40%, var(--bg-elevated)) 0%, var(--bg-elevated) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@media (min-width: 640px) {
  .admin-smm-panel .admin-composer__grid--2 {
    align-items: stretch;
  }
}
.admin-smm-panel .admin-composer__grid--2 > .label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.admin-smm-panel .admin-composer__grid--2 .user-picker__box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-smm-panel .admin-smm-provider-select,
.admin-smm-panel .smm-service-picker__toggle {
  width: 100%;
  min-height: 2.875rem;
  box-sizing: border-box;
  line-height: 1.35;
  text-align: left;
}
.admin-smm-panel .admin-smm-provider-select {
  cursor: pointer;
  appearance: none;
  padding-right: 2rem;
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.65rem center, 0 0;
  background-size: 0.65rem auto, 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
}
.admin-smm-panel .smm-service-picker {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-smm-panel .label__hint {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
}
.admin-smm-panel__prices {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  margin-bottom: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.admin-smm-form-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.admin-smm-form-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.admin-smm-form-section__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.admin-smm-form-section__lead {
  margin: 0 0 0.75rem;
}
.admin-smm-service-overview {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 90%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--text));
  word-break: break-word;
  line-height: 1.45;
}
.admin-smm-sell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 7rem;
}
.admin-smm-sell-stack .input {
  margin: 0;
}
.admin-smm-buy-sub {
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 500;
}
.admin-smm-variants-table .admin-smm-v-dim-cell .input[readonly] {
  background: color-mix(in srgb, var(--surface-2) 65%, var(--bg-elevated));
}
.admin-items-add__stock-cell .label {
  margin-bottom: 0;
}
@media (min-width: 720px) {
  .admin-items-add__grid--r1 {
    grid-template-columns: 1.25fr 1fr;
    align-items: end;
  }
  .admin-items-add__grid--r1.admin-items-add__grid--r1--single {
    grid-template-columns: 1fr;
  }
  .admin-items-add__grid--r2 {
    grid-template-columns: 1.25fr 1fr 1fr;
    align-items: end;
  }
  .admin-items-add__grid--pair {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .admin-items-add__grid--triple {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
  }
}
@media (max-width: 719px) {
  .admin-items-add__grid--r1,
  .admin-items-add__grid--r2,
  .admin-items-add__grid--pair,
  .admin-items-add__grid--triple {
    grid-template-columns: 1fr;
  }
}

.admin-page-tabs-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.5rem 0 1.15rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.admin-items-type-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0.32rem 0.38rem;
  max-width: 100%;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--surface-2) 94%, var(--border));
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-mid));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(15, 23, 42, 0.06);
}
.admin-items-type-tabs--compact {
  margin: 0.5rem 0 0.75rem;
}
.admin-items-type-tabs__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.05rem;
  border-radius: 0.45rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}
.admin-items-type-tabs__btn:hover:not(.is-active) {
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  background: color-mix(in srgb, var(--bg-elevated) 45%, transparent);
}
.admin-items-type-tabs__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px color-mix(in srgb, var(--accent-mid) 45%, transparent);
}
.admin-items-type-tabs__btn.is-active {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent-soft) 55%, #fff) 0%,
    var(--bg-elevated) 100%
  );
  color: color-mix(in srgb, var(--accent-mid) 42%, var(--text));
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px -3px rgba(18, 52, 36, 0.18);
}
.admin-items-type-panel {
  margin-bottom: 1rem;
}
.admin-items-type-panel[hidden] {
  display: none !important;
}
.admin-cf-section {
  margin-top: 0.75rem;
}
.admin-cf-section__hint {
  margin: 0 0 0.5rem;
}
.admin-cf-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.admin-cf-row {
  display: grid;
  gap: 0.5rem 0.75rem;
  align-items: end;
  padding: 0.65rem 0.75rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
@media (min-width: 640px) {
  .admin-cf-row {
    grid-template-columns: 1fr 1fr auto;
  }
}
.admin-cf-row__field {
  margin: 0;
}
.admin-cf-row__remove {
  justify-self: start;
}
@media (min-width: 640px) {
  .admin-cf-row__remove {
    justify-self: end;
  }
}

.order-player-block {
  margin-top: 0.75rem;
}
.order-player-block__body {
  margin-top: 0.25rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.order-player-block__body--fields {
  white-space: normal;
}
.order-field-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.order-field-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
  line-height: 1.45;
}
.order-field-line__name {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9em;
}
.order-field-line__val {
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.order-field-line__val--solo {
  font-weight: 500;
}
td.order-table-fields {
  vertical-align: top;
  max-width: 16rem;
}

.admin-items-card {
  /* visible so nested .table-wrap can scroll horizontally on narrow viewports (overflow:hidden clips iOS scrollports) */
  overflow: visible;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent-mid));
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm), var(--shadow-inner);
}
.admin-items-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.3rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(180deg, #fafcfb 0%, #f0f4f1 100%);
}
.admin-items-card__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-items-card__title {
  margin: 0 0 0.2rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.admin-items-card__meta {
  margin: 0;
  font-size: 0.8125rem;
}
.admin-items-card .admin-items-card__table.table-wrap,
.admin-items-card .admin-items-card__table.admin-product-editor__variants-scroll {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-elevated);
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.admin-items-card__table--padded-bottom {
  padding-bottom: 1.25rem;
}
.admin-items-card__footer {
  padding: 0.65rem 1rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.admin-items-card__footer .table-pagination {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.items-toolbar {
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(180deg, #fafcfb 0%, #fff 100%);
}
.items-toolbar__form {
  margin: 0;
}
.items-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
}
.items-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.items-toolbar__field--product {
  flex: 1 1 14rem;
  max-width: 22rem;
}
.items-toolbar__field--search {
  flex: 1 1 12rem;
  min-width: 10rem;
}
.items-toolbar__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.items-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.05rem;
}
.items-toolbar__hint {
  margin: 0.85rem 0 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--accent-hover);
  background: var(--accent-muted);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(29, 92, 66, 0.12);
}
.items-toolbar__hint strong {
  font-weight: 700;
}
.items-toolbar__hint--card-pad {
  margin: 1rem 1.25rem;
}

/* Admin data tables: wide layout scrolls inside .table-wrap (not clipped by canvas/body). */
body.admin-body .table-wrap {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
body.admin-body .table-wrap > .table {
  width: max-content;
  min-width: max(100%, 34rem);
}

/* Flex column chain: constrain width so children can overflow-x scroll instead of growing the shell. */
body.admin-body .site-main > .admin-main {
  min-width: 0;
  max-width: 100%;
}

.admin-product-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
}
.admin-product-editor-layout > .admin-product-editor-page-head {
  margin-bottom: 0;
}
.admin-panel-notice.panel {
  padding: 1.1rem 1.35rem;
  text-align: center;
  margin: 0;
}
.admin-panel-notice.panel > p {
  margin: 0 auto;
  max-width: 48rem;
  line-height: 1.5;
}

.admin-api-provider-meta {
  display: grid;
  gap: 0.65rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, #fff);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  font-size: 0.875rem;
}
.admin-api-provider-meta > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
@media (max-width: 520px) {
  .admin-api-provider-meta > div {
    grid-template-columns: 1fr;
  }
}
.admin-api-provider-meta dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.admin-api-provider-meta dd {
  margin: 0;
  word-break: break-word;
}
.admin-api-provider-meta__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}

/* API product editor — "From provider" + toolbar (matches field-cluster / table patterns) */
.admin-api-provider-section__body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.admin-api-provider-section__source-grid {
  gap: 1rem 1.25rem !important;
  align-items: start;
}
.admin-api-provider-section__group-key {
  grid-column: 1 / -1;
}
.admin-api-provider-section__provider-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.admin-api-provider-section__id-pill {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-mid));
  color: var(--muted);
}
.admin-api-provider-section__mono-value {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  word-break: break-word;
}
.admin-api-provider-section__checkout-hint {
  margin: -0.2rem 0 0.7rem;
  max-width: 40rem;
  line-height: 1.45;
}
.admin-api-provider-section__checkout .admin-product-editor__cluster-label {
  margin-bottom: 0.35rem;
}
.admin-api-provider-section__empty {
  margin: 0;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 52%, var(--bg-elevated));
  text-align: center;
}
.admin-api-provider-section__empty-title {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-api-provider-section__empty-text {
  margin: 0;
  line-height: 1.5;
  max-width: 28rem;
  margin-inline: auto;
}
.admin-api-provider-section__table {
  margin-top: 0.2rem;
}
.admin-api-provider-toolbar {
  margin-top: 1rem;
  padding: 1.05rem 1.2rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  min-width: 0;
}
.admin-api-provider-toolbar__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-api-provider-toolbar__lead {
  margin: 0;
  line-height: 1.5;
  max-width: 44rem;
}
.admin-api-provider-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  width: 100%;
  padding-top: 0.2rem;
}
.admin-api-provider-toolbar__form {
  margin: 0;
  display: inline-flex;
}
.admin-api-provider-toolbar__sync {
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border-strong));
}
.admin-api-provider-toolbar__delete {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 26%, var(--border-strong));
}
@media (hover: hover) and (pointer: fine) {
  .admin-api-provider-toolbar__delete:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border-strong));
    background: color-mix(in srgb, var(--danger) 7%, var(--bg-elevated));
  }
}

.api-pe-sell-cell .input[readonly] {
  background: color-mix(in srgb, var(--surface-2) 75%, #fff);
}
.api-pe-sell-cost {
  font-variant-numeric: tabular-nums;
}

.admin-api-sync-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  vertical-align: middle;
}
.admin-api-sync-toggle__input:focus-visible + .admin-api-sync-toggle__ui {
  outline: 2px solid color-mix(in srgb, var(--accent-mid) 55%, transparent);
  outline-offset: 2px;
}
.admin-api-sync-toggle__ui {
  position: relative;
  width: 2.5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 65%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  transition: background 0.18s ease, border-color 0.18s ease;
}
.admin-api-sync-toggle__ui::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.12rem;
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 35, 24, 0.18);
  transform: translateY(-50%);
  transition: transform 0.18s ease;
}
.admin-api-sync-toggle__input:checked + .admin-api-sync-toggle__ui {
  background: color-mix(in srgb, var(--accent-mid) 42%, var(--accent-muted));
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
}
.admin-api-sync-toggle__input:checked + .admin-api-sync-toggle__ui::after {
  transform: translate(1.1rem, -50%);
}

.table-actions--categories {
  position: relative;
  text-align: right;
  white-space: nowrap;
}
.admin-cat-actions-desktop {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.admin-cat-actions-mobile {
  display: none;
}
.admin-cat-actions-mobile__summary {
  list-style: none;
}
.admin-cat-actions-mobile__summary::-webkit-details-marker {
  display: none;
}
.admin-cat-actions-mobile__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 40;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.admin-cat-actions-mobile__link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.admin-cat-actions-mobile__link:hover,
.admin-cat-actions-mobile__link:focus-visible {
  background: color-mix(in srgb, var(--accent-muted) 55%, #fff);
  color: var(--accent-hover);
}
@media (max-width: 720px) {
  .admin-cat-actions-desktop {
    display: none !important;
  }
  .admin-cat-actions-mobile {
    display: block;
  }
}

.admin-items-empty {
  text-align: center;
  padding: 2rem 1rem !important;
  color: var(--muted);
  font-size: 0.9375rem;
}
.admin-items-empty__text {
  display: inline-block;
  max-width: 22rem;
}
.admin-items-empty__cta {
  display: block;
  margin-top: 0.85rem;
}

.table-wrap--sortable .table__drag-head {
  width: 2.5rem;
}
.table__drag {
  width: 2.5rem;
  vertical-align: middle;
  cursor: grab;
}
.item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: -0.08em;
  user-select: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.item-drag-handle:hover {
  background: var(--surface);
  color: var(--accent-mid);
}
.item-row--ghost {
  opacity: 0.45;
  background: var(--accent-muted) !important;
}
.item-row--chosen {
  background: var(--surface-2);
}

code {
  font-size: 0.86em;
  background: var(--surface);
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.admin-main h1 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--text);
}

.admin-main > h1:first-child,
.admin-flash-stack + h1 {
  margin-bottom: 1.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}

.admin-main .settings-section__title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo__img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}
/* Sidebar / header: horizontal logo from admin — not forced 1:1 */
.site-sidebar__logo .logo__img--brand {
  width: auto;
  height: auto;
  max-height: 2rem;
  max-width: min(11.5rem, calc(100vw - 6rem));
  aspect-ratio: auto;
  object-fit: contain;
}
.logo__img--footer {
  width: auto;
  height: auto;
  max-height: 28px;
  max-width: min(12rem, 100%);
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  max-width: 100%;
  margin-bottom: 1.5rem;
  padding: 0.35rem;
  padding-bottom: 1rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 249, 0.88) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inner-soft), var(--shadow-xs);
}
.admin-subnav a {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}
.admin-subnav a:hover {
  color: var(--accent-mid);
  background: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.admin-subnav a.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-mid));
  box-shadow: 0 2px 8px var(--accent-glow);
  text-decoration: none;
}

.settings-section {
  margin-bottom: 2rem;
}
.settings-section__title {
  font-size: 1.15rem;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

/* Admin: Settings hub — full content width, readable forms, underline tabs */
.admin-settings {
  width: 100%;
}

.admin-settings__head {
  text-align: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}

.admin-settings__title {
  padding-bottom: 0;
  border-bottom: none;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--text);
}

.admin-main .admin-settings .admin-settings__title {
  margin: 0 0 0.45rem;
}

.admin-settings__lead {
  margin: 0 auto;
  max-width: min(42rem, 100%);
  line-height: 1.55;
  font-size: 0.9375rem;
}

.admin-settings__tabs.admin-subnav {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 0.15rem;
  margin-bottom: 1.75rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
}

.admin-settings__tabs.admin-subnav a {
  padding: 0.55rem 0.95rem;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--muted);
}

.admin-settings__tabs.admin-subnav a:hover {
  color: var(--accent-mid);
  background: color-mix(in srgb, var(--accent-muted) 14%, transparent);
  text-decoration: none;
}

.admin-settings__tabs.admin-subnav a.is-active {
  color: var(--text);
  font-weight: 700;
  background: color-mix(in srgb, #fff 70%, var(--surface-2));
  box-shadow: none;
  border-bottom-color: var(--accent-mid);
  text-decoration: none;
}

.admin-settings__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* Email tab: full-width left-aligned stack (avoid “missing” blocks / adblock #store-cron) */
.admin-settings__mail-wrap {
  width: 100%;
  max-width: min(44rem, 100%);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  text-align: left;
  align-items: stretch;
}
.admin-settings .settings-mail-tab .settings-mail-tab__help {
  text-align: left;
  line-height: 1.5;
}
.admin-settings .settings-minute-job-section .label,
.admin-settings .settings-minute-job-section .input {
  text-align: left;
}

.admin-settings__body .settings-section {
  margin-bottom: 0;
}

.admin-settings .settings-section.panel {
  max-width: min(44rem, 100%);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.admin-settings .settings-section.panel .settings-section__title {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.admin-settings .settings-section__form {
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.admin-settings .settings-section__form--narrow {
  max-width: min(34rem, 100%);
}

.admin-settings .settings-section__form-group-title {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-settings .settings-section__form-group-title:first-child {
  margin-top: 0;
}

.admin-settings .admin-settings-cron-copy {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}

.admin-settings .settings-section__intro {
  margin: 0 auto 1rem;
  max-width: min(40rem, 100%);
  text-align: center;
  line-height: 1.55;
}

.admin-settings .settings-section__intro--wide {
  max-width: min(48rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.admin-settings .settings-section--wide {
  max-width: min(56rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.admin-settings .settings-section__lead {
  margin: 0 auto 1rem;
  max-width: min(40rem, 100%);
  text-align: center;
  line-height: 1.55;
}

.settings-code-inline {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  font-size: 0.8125rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--border));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.admin-settings .settings-oauth-help {
  margin: 0 auto 1.15rem;
  max-width: min(40rem, 100%);
  padding: 0.9rem 1rem 0.95rem;
  text-align: left;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--border));
  border: 1px solid var(--border);
}
.admin-settings .settings-oauth-help__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-settings .settings-oauth-help__list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.55;
}
.admin-settings .settings-oauth-help__list li {
  margin-bottom: 0.55rem;
}
.admin-settings .settings-oauth-help__list li:last-child {
  margin-bottom: 0;
}
.admin-settings .settings-oauth-callback {
  margin: 0 auto 1rem;
  max-width: min(40rem, 100%);
  text-align: left;
  line-height: 1.55;
}

/* Settings: enable / option rows + grouped panels + mail transport cards */
.admin-settings .settings-enable-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--surface-2) 88%, #fff) 100%);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
}
.admin-settings .settings-enable-row:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}
.admin-settings .settings-enable-row input[type='checkbox'] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent-mid);
  cursor: pointer;
}
.admin-settings .settings-enable-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.admin-settings .settings-enable-row__title {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-settings .settings-enable-row__hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
}

.admin-settings .settings-subpanel {
  margin: 0 0 1.15rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 35%, #fff);
  text-align: left;
}
.admin-settings .settings-subpanel__title {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-settings .settings-subpanel .label:last-child {
  margin-bottom: 0;
}

.admin-settings .settings-transport-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.35rem 0 0;
}
@media (max-width: 520px) {
  .admin-settings .settings-transport-cards {
    grid-template-columns: 1fr;
  }
}
.admin-settings .settings-transport-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md, 12px);
  border: 2px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.admin-settings .settings-transport-card:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  box-shadow: var(--shadow-xs);
}
.admin-settings .settings-transport-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-mid) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-muted) 18%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-mid) 25%, transparent),
    var(--shadow-xs);
}
.admin-settings .settings-transport-card input[type='radio'] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--accent-mid);
  cursor: pointer;
}
.admin-settings .settings-transport-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.admin-settings .settings-transport-card__title {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.admin-settings .settings-transport-card__desc {
  margin: 0;
  line-height: 1.4;
}

.admin-settings .settings-mail-transport {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.admin-settings .settings-mail-transport__legend {
  margin-bottom: 0.35rem;
}

.admin-settings .settings-toggle-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.45;
}
.admin-settings .settings-toggle-inline:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.admin-settings .settings-toggle-inline input[type='checkbox'] {
  margin-top: 0.12rem;
  flex-shrink: 0;
  accent-color: var(--accent-mid);
  cursor: pointer;
}

.admin-settings .settings-mail-smtp[hidden],
.admin-settings #settings-mail-web-from[hidden] {
  display: none !important;
}

.admin-settings .settings-mail-alias-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
}
.admin-settings .settings-mail-alias-inline__local {
  max-width: min(14rem, 100%);
  flex: 0 1 auto;
}
.admin-settings .settings-mail-alias-inline__domain {
  font-weight: 600;
  font-size: 0.95rem;
  user-select: all;
  white-space: nowrap;
}

.admin-settings .settings-section__form > .btn {
  align-self: center;
}

/* Settings image uploads: preview + × (deselect / remove on save) */
.admin-settings-file-preview {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.admin-settings-file-preview__existing {
  min-width: 0;
}
.admin-settings-file-preview__thumb-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg-elevated));
  box-shadow: var(--shadow-xs);
}
.admin-settings-file-preview__img {
  display: block;
  width: auto;
  max-width: min(100%, 20rem);
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  vertical-align: middle;
}
.admin-settings-file-preview__dismiss {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: color-mix(in srgb, var(--shadow) 55%, #1f2937);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}
.admin-settings-file-preview__dismiss:hover {
  background: color-mix(in srgb, var(--danger) 88%, #1f2937);
  transform: scale(1.05);
}
.admin-settings-file-preview__dismiss:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 2px;
}
.admin-settings-file-preview__removed-note {
  margin: 0.35rem 0 0;
}
.admin-settings-file-preview__pending .admin-settings-file-preview__filename {
  margin: 0.25rem 0 0;
}
.admin-settings-file-preview__file-label {
  margin-bottom: 0;
}

.settings-hero__slide-title {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.settings-hero__slide {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .admin-settings__tabs.admin-subnav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 1.5rem;
    gap: 0.2rem;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
  }
  .admin-settings__tabs.admin-subnav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .admin-settings__head {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
  }
}

/* ——— Affiliate program ——— */
.affiliate-page {
  max-width: 56rem;
  margin-inline: auto;
}
.affiliate-page__pct {
  color: var(--accent-hover);
  font-weight: 700;
}
.affiliate-page__grid {
  margin-bottom: 2rem;
}
@media (min-width: 840px) {
  .affiliate-page__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.affiliate-panel__hint {
  margin: 0 0 1rem;
  line-height: 1.55;
  max-width: 36rem;
}
.affiliate-panel__foot {
  margin: 1rem 0 0;
  line-height: 1.5;
}

.affiliate-code-wrap {
  margin-bottom: 1.1rem;
}
.affiliate-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  background: var(--accent-muted);
  color: var(--accent-hover);
  border: 1px solid rgba(29, 92, 66, 0.15);
}

.affiliate-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
  margin-top: 0.35rem;
}
.affiliate-copy-row__input {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.9rem;
}
.affiliate-copy-row__btn {
  flex-shrink: 0;
}

.affiliate-earn-hero {
  margin: 0.35rem 0 1rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--border);
}
.affiliate-earn-hero__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.affiliate-earn-hero__value {
  display: block;
  font-size: clamp(1.65rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.affiliate-earn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}
.affiliate-earn-meta__val {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.affiliate-payout-form {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.affiliate-payout-form__note {
  margin: 0.65rem 0 0;
  text-align: center;
}

.affiliate-commissions {
  padding-top: 1.35rem;
  padding-bottom: 1.5rem;
}
.affiliate-commissions__head {
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.affiliate-commissions__title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.affiliate-commissions__sub {
  margin: 0;
  font-size: 0.875rem;
}
.affiliate-commissions__table {
  margin-top: 0;
}
.affiliate-order-id {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.affiliate-amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-mid);
}

.affiliate-empty {
  text-align: center;
  padding: 2.5rem 1.25rem 2rem;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-elevated) 100%);
  margin-inline: auto;
  max-width: min(36rem, 100%);
  width: 100%;
  box-sizing: border-box;
}
.affiliate-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.affiliate-empty__text {
  margin: 0 auto;
  max-width: 28rem;
  line-height: 1.55;
  font-size: 0.9375rem;
}

.affiliate-disabled {
  max-width: 28rem;
  margin-inline: auto;
  text-align: center;
  padding: 2.25rem 1.5rem 2rem;
}
.affiliate-disabled__icon {
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.affiliate-disabled__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.affiliate-disabled__text {
  margin: 0 0 1.25rem;
  line-height: 1.55;
  font-size: 0.9375rem;
}

.float-actions {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 320;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .float-btn:hover {
    transform: scale(1.06);
    text-decoration: none;
    color: #fff;
  }
}
.float-btn__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.float-btn--telegram {
  background: #229ed9;
}
.float-btn--whatsapp {
  background: #25d366;
}

/* Admin: paginated tables */
.table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.table-pagination__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.table-pagination__meta {
  display: inline-block;
}
.table-pagination__size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  font-size: 0.875rem;
}
.table-pagination__size a {
  font-weight: 600;
  color: var(--accent-mid);
  text-decoration: none;
}
.table-pagination__size a:hover {
  text-decoration: underline;
}
.table-pagination__size-active {
  font-weight: 700;
  color: var(--text);
}
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.payments-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.payments-page__title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  letter-spacing: -0.03em;
}
.payments-page__add-btn {
  flex-shrink: 0;
}

.payments-page__tabs {
  margin-top: 0.35rem;
  margin-bottom: 1rem;
}

.admin-balance-direction {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.admin-balance-direction > .label {
  margin-bottom: 0.45rem;
}
.admin-balance-direction__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-balance-direction__opt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 88%, #fff);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease),
    color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.admin-balance-direction__opt:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}
.admin-balance-direction__opt:has(:checked) {
  border-color: color-mix(in srgb, var(--accent-mid) 38%, var(--border));
  background: color-mix(in srgb, var(--accent-muted) 58%, #fff);
  color: var(--accent-hover);
}
.admin-balance-direction__opt:has([value="remove"]:checked) {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 9%, #fff);
  color: var(--danger);
}
.admin-balance-direction__opt input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent-mid);
}
.admin-balance-direction__opt:has([value="remove"]:checked) input {
  accent-color: var(--danger);
}

.gateway-order-form {
  margin: 0;
  padding: 0;
  border: none;
}

.gateway-admin-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gateway-admin-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 1rem 1.15rem;
  margin: 0;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.gateway-admin-list__item.is-dragging {
  opacity: 0.85;
  box-shadow: var(--shadow);
}
.gateway-admin-list__item.is-drag-over {
  border-color: color-mix(in srgb, var(--accent-mid) 45%, var(--border));
}
.gateway-admin-list__drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--muted);
  cursor: grab;
  border-radius: 10px;
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--accent-mid));
  touch-action: none;
}
.gateway-admin-list__drag:active {
  cursor: grabbing;
}
.gateway-admin-list__main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.gateway-admin-list__text {
  min-width: 0;
}
.gateway-admin-list__logo-wrap {
  flex-shrink: 0;
}
.gateway-admin-list__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.gateway-admin-list__logo-ph {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface), var(--border));
  opacity: 0.55;
}
.gateway-admin-list__name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gateway-admin-list__subtitle {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  max-width: 44ch;
}
.gateway-admin-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.35rem;
}
.gateway-admin-list__pill {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.gateway-admin-list__pill--on {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent-mid) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.gateway-admin-list__pill--off {
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
}
.gateway-admin-list__id {
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  color: var(--muted);
}
.gateway-admin-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
}
.gateway-admin-list__toggle-form {
  margin: 0;
  display: inline;
}
@media (max-width: 640px) {
  .gateway-admin-list__item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .gateway-admin-list__drag {
    grid-row: 1 / span 2;
  }
  .gateway-admin-list__actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .gateway-admin-list__actions .btn {
    flex: 1;
  }
}

.admin-secret-box {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2, #f7f9f7);
  border: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.admin-secret-box .input {
  width: 100%;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}
.input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
}

.admin-product-editor__slug-live-wrap .admin-slug-live-msg {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.user-picker__box {
  position: relative;
}
.user-picker__toggle {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
}
.user-picker__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  padding: 0.5rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 16rem;
  overflow: auto;
}
.user-picker__dropdown[hidden] {
  display: none !important;
}
.user-picker__search {
  width: 100%;
  margin-bottom: 0.5rem;
}
.user-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.user-picker__item {
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.user-picker__item:hover {
  background: var(--accent-soft);
}
.user-picker__empty {
  padding: 0.35rem 0.25rem;
}

/* Rich product/CMS long description: image dialog + YouTube embed preview in admin */
.pe-rich-media-dialog {
  max-width: min(100vw - 2rem, 28rem);
  border: none;
  border-radius: var(--radius-md, 10px);
  padding: 0;
}
.pe-rich-media-dialog::backdrop {
  background: color-mix(in srgb, #000 45%, transparent);
}
.pe-rich-img-widths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pe-rich-img-widths .admin-balance-direction__opt {
  margin: 0;
}
.pe-youtube-wrap {
  margin: 0.65rem 0;
}
.pe-youtube-wrap iframe {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-md, 8px);
}

.admin-page-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  letter-spacing: -0.03em;
}
.admin-page-lead {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  max-width: 42rem;
  line-height: 1.55;
}

/* ——— Storefront: bottom tab bar (tablet + phone; quick links hidden in top bar ≤900px) ——— */
@media (max-width: 900.98px) {
  body.site:not(.admin-body) .site-appbar {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 280;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    min-height: calc(3.45rem + env(safe-area-inset-bottom, 0px));
    padding: 0.3rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 28px rgba(13, 18, 15, 0.09);
  }
  body.site:not(.admin-body) .site-appbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    max-width: 8rem;
    margin: 0 auto;
    padding: 0.3rem 0.2rem;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    transition:
      color 0.16s ease,
      background 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    body.site:not(.admin-body) .site-appbar__item:hover {
      color: var(--accent-mid);
      background: color-mix(in srgb, var(--accent-mid) 7%, #fff);
      border-color: color-mix(in srgb, var(--accent-mid) 18%, transparent);
    }
  }
  body.site:not(.admin-body) .site-appbar__item:active {
    opacity: 0.94;
  }
  body.site:not(.admin-body) .site-appbar__item--current {
    color: var(--accent-hover);
    font-weight: 800;
    background: color-mix(in srgb, var(--accent-mid) 10%, #fff);
    border-color: color-mix(in srgb, var(--accent-mid) 22%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  }
  body.site:not(.admin-body) .site-appbar__icon {
    flex-shrink: 0;
    opacity: 0.88;
  }
  body.site:not(.admin-body) .site-appbar__item--current .site-appbar__icon {
    opacity: 1;
    color: var(--accent-strong);
  }
  body.site:not(.admin-body) .site-appbar__label {
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  /* Register: reads as a CTA on the tab bar */
  body.site:not(.admin-body) .site-appbar__item--guest-cta {
    color: var(--accent-mid);
    font-weight: 800;
    background: color-mix(in srgb, var(--accent-muted) 28%, #fff);
    border-color: color-mix(in srgb, var(--accent-mid) 18%, var(--border));
  }
  @media (hover: hover) and (pointer: fine) {
    body.site:not(.admin-body) .site-appbar__item--guest-cta:hover {
      color: #fff;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, #fff 6%, var(--accent-mid)) 0%,
        var(--accent-hover) 100%
      );
      border-color: color-mix(in srgb, var(--accent-mid) 32%, #000);
      box-shadow: 0 2px 10px rgba(22, 80, 52, 0.2);
    }
  }
  body.site:not(.admin-body) .site-appbar__item--guest-cta .site-appbar__icon {
    color: var(--accent-mid);
  }
  @media (hover: hover) and (pointer: fine) {
    body.site:not(.admin-body) .site-appbar__item--guest-cta:hover .site-appbar__icon {
      color: #fff;
    }
  }
  body.site:not(.admin-body) .site-appbar__item--guest-cta.site-appbar__item--current {
    color: #fff;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #fff 4%, var(--accent-mid)) 0%,
      color-mix(in srgb, #000 10%, var(--accent-mid)) 100%
    );
    border-color: color-mix(in srgb, #000 8%, var(--accent-mid));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 2px 10px rgba(20, 55, 40, 0.22);
  }
  body.site:not(.admin-body)
    .site-appbar__item--guest-cta.site-appbar__item--current
    .site-appbar__icon {
    color: #fff;
  }
  @media (hover: hover) and (pointer: fine) {
    body.site:not(.admin-body) .site-appbar__item--guest-cta.site-appbar__item--current:hover {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, #fff 8%, var(--accent-mid)) 0%,
        color-mix(in srgb, #000 6%, var(--accent-hover)) 100%
      );
      color: #fff;
    }
  }
  body.site:not(.admin-body) .site-canvas {
    padding-bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px));
  }
  body.site:not(.admin-body) .float-actions {
    right: max(1rem, env(safe-area-inset-right, 0));
    bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px) + 0.65rem);
  }
}

/* ——— Mobile & touch polish ——— */
@media (max-width: 720px) {
  .input,
  textarea.input {
    font-size: 1rem;
  }
  .btn {
    min-height: var(--tap-min);
    padding: 0.72rem 1.2rem;
  }
  .btn--sm {
    min-height: 2.5rem;
    padding: 0.5rem 0.95rem;
  }
  .btn--block {
    min-height: 3rem;
  }
  .site-main {
    padding-top: clamp(1.25rem, 3.5vw, 2rem);
    padding-bottom: clamp(2.25rem, 5vw, 4rem);
  }
  .page-head {
    margin-bottom: 1.35rem;
  }
  .panel {
    padding: 1.25rem 1.2rem;
  }
  .auth-page {
    padding-inline-start: max(0px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(0px, env(safe-area-inset-right, 0px));
  }
  .auth-page .auth-card {
    max-width: 100%;
  }
  .auth-card {
    padding: 1.65rem 1.35rem 1.85rem;
  }
  .checkout-grid {
    gap: 1.15rem;
  }
  .pack-list__item {
    padding: 0.9rem 0.85rem 0.85rem;
  }
  .pack-list--grid {
    gap: 0.65rem;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table th,
  .table td {
    padding: 0.7rem 0.75rem;
    font-size: 0.875rem;
  }
  .inline-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .site-footer__bottom-inner {
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0));
  }
  .hero-bleed {
    padding-left: max(0px, env(safe-area-inset-left, 0));
    padding-right: max(0px, env(safe-area-inset-right, 0));
  }
  .orders-search {
    flex-direction: column;
    align-items: stretch;
  }
  .orders-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .orders-search .input,
  .orders-toolbar__search {
    max-width: none;
  }
  /* Prevent flex-grow on column axis — was stretching search and leaving a huge gap above filters */
  .orders-toolbar__search {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Admin list search: keep a compact row like desktop (avoid full-width column + stretch). */
  .admin-list-search {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .admin-list-search__input {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: min(28rem, 100%);
  }
  .orders-toolbar__filters {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .orders-toolbar__field {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .orders-toolbar__select {
    width: 100%;
  }
  .orders-toolbar__actions {
    width: 100%;
    justify-content: stretch;
  }
  .orders-toolbar__actions .btn {
    flex: 1;
  }
}

@media (max-width: 919px) {
  :root {
    --admin-gutter: clamp(0.9rem, 4.5vw, 1.35rem);
  }

  .admin-content {
    border-left: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, var(--bg) 100%);
  }

  .admin-main {
    padding-top: 1.25rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
  }

  .admin-main .stat-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .admin-main .admin-dash-group .admin-dash-reports__head {
    text-align: center;
  }

  /* Dashboard mobile: regular order management — 2 per row, compact, centered */
  .admin-main .stat-grid.stat-grid--dash-orders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.5rem;
    justify-items: stretch;
  }
  .admin-main .stat-grid.stat-grid--dash-orders .stat-card {
    padding: 0.65rem 0.55rem;
    text-align: center;
  }
  .admin-main .stat-grid.stat-grid--dash-orders .stat-card .muted.small {
    display: block;
    font-size: 0.65rem;
    line-height: 1.25;
  }
  .admin-main .stat-grid.stat-grid--dash-orders .stat-lg {
    font-size: 1.25rem;
    margin-top: 0.15rem;
  }

  /* Dashboard mobile: website stats — 3 per row, centered, compact */
  .admin-main .stat-grid.stat-grid--dash-site {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: stretch;
    gap: 0.5rem 0.45rem;
  }
  .admin-main .stat-grid.stat-grid--dash-site > .stat-card--link {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 0.9rem) / 3);
    max-width: calc((100% - 0.9rem) / 3);
    min-width: 0;
    padding: 0.6rem 0.4rem;
    text-align: center;
  }
  .admin-main .stat-grid.stat-grid--dash-site .stat-card .muted.small {
    display: block;
    font-size: 0.62rem;
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .admin-main .stat-grid.stat-grid--dash-site .stat-lg {
    font-size: 1.15rem;
    margin-top: 0.12rem;
  }
  .admin-main .stat-grid.stat-grid--dash-site .stat-lg--money {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }
  .admin-main .stat-grid.stat-grid--dash-site .stat-card__meta {
    font-size: 0.58rem;
    margin-top: 0.2rem;
  }

  body.admin-nav-open {
    overflow: hidden;
  }

  .admin-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(15, 45, 32, 0.38);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.22s var(--ease),
      visibility 0.22s var(--ease);
  }
  .admin-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .admin-mobile-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 35;
    padding: 0.5rem 0.85rem;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    min-height: calc(2.85rem + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
    box-shadow: 0 4px 22px rgba(13, 24, 18, 0.07);
  }
  .admin-mobile-header__title {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }
  .admin-menu-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent-mid) 14%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-muted) 55%, #fff);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-menu-btn:hover {
    background: color-mix(in srgb, var(--accent-soft) 45%, #fff);
    border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  }
  .admin-menu-btn__icon {
    display: block;
  }
  .admin-mobile-header__store {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent-mid);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
  }
  .admin-mobile-header__store:hover {
    background: color-mix(in srgb, var(--accent-muted) 60%, #fff);
    border-color: color-mix(in srgb, var(--accent-mid) 12%, var(--border));
    color: var(--accent-hover);
    text-decoration: none;
  }

  .admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, min(88vw, 20rem));
    max-width: 100%;
    z-index: 50;
    margin: 0;
    transform: translateX(-100%);
    transition: transform 0.24s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0.85rem 1.25rem;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    border-right: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
    border-bottom: none;
    box-shadow: 8px 0 36px rgba(13, 24, 18, 0.14);
  }
  .admin-nav.is-open {
    transform: translateX(0);
  }

  .admin-nav__head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: -0.35rem 0 0.5rem;
  }
  .admin-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 90%, #fff);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-nav__close:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  /* Admin shell uses in-flow .site-topbar — no extra top padding (legacy was for fixed .admin-mobile-header). */

  .admin-links {
    flex-direction: column;
    overflow: visible;
  }
  .admin-links .admin-nav__link {
    min-height: 2.65rem;
  }

  .admin-foot {
    margin-top: auto;
    padding-top: 0.85rem;
    width: 100%;
  }
  .admin-main .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--radius);
  }
  .admin-main .table th,
  .admin-main .table td {
    padding: 0.65rem 0.7rem;
    font-size: 0.8125rem;
  }
  .admin-main .table th {
    font-size: 0.65rem;
  }
}

.voucher-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 0.65rem;
  padding: 0.75rem 1rem;
  background: var(--surface-2, #f4f6f4);
  border-radius: 8px;
  border: 1px solid var(--border, #dbe3dd);
}

/* —— Store product editor (merged product + packages) */
.admin-product-editor-page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}
.admin-product-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 0;
  transition: color 0.15s ease;
}
.admin-product-editor-back:hover {
  color: var(--accent);
}
.admin-product-editor-page-head__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  padding: 1.15rem 1.35rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--surface-2) 55%, var(--bg-elevated)) 0%,
    var(--bg-elevated) 55%
  );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.admin-product-editor-page-head__main .admin-product-editor__eyebrow {
  margin: 0 0 0.45rem;
}
.admin-product-editor__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, var(--accent-mid));
}
.admin-product-editor-page-head__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.admin-product-editor-page-head__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.35rem;
  width: 100%;
}
.admin-product-editor-page-head__sub {
  margin: 0;
  max-width: 38rem;
  line-height: 1.55;
  font-size: 0.9375rem;
}
.admin-product-editor-page-head__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.95rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  font-size: 0.8125rem;
  line-height: 1.45;
}
.admin-product-editor-page-head__fact {
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.admin-product-editor-page-head__fact-sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 0.1rem;
  vertical-align: middle;
  background: color-mix(in srgb, var(--border) 92%, transparent);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .admin-product-editor-page-head__main {
    padding: 1rem 1rem 1.1rem;
    max-width: 100%;
  }
  .admin-product-editor-page-head__facts {
    padding-inline: 0.65rem;
  }
}
.admin-product-editor__badge {
  display: inline-flex;
  align-items: center;
  height: 1.65rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--border));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
}
.admin-product-editor__badge--new {
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--bg-elevated));
  color: color-mix(in srgb, var(--accent-mid) 55%, var(--text));
  border-color: color-mix(in srgb, var(--accent-mid) 22%, var(--border));
}
.admin-product-editor--pro {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.15rem, 2.5vw, 1.65rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-elevated) 97%, var(--accent-soft)) 0%,
    var(--bg-elevated) 48%
  );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--bg-elevated) 40%, transparent),
    0 18px 40px -24px color-mix(in srgb, var(--shadow) 28%, transparent);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.admin-product-editor__section {
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.2rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--border) 94%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--surface-2));
  min-width: 0;
  max-width: 100%;
}
.admin-product-editor__section-body {
  min-width: 0;
  max-width: 100%;
}
.admin-product-editor__section:last-of-type {
  margin-bottom: 0;
}
.admin-product-editor__section-body > .pe-desc-field:first-child {
  margin-top: 0.15rem;
}
.admin-product-editor__section-body > .admin-file-field,
.admin-product-editor__section-body > .admin-cover-field {
  margin-top: 1.1rem;
  margin-bottom: 0;
  padding: 1.15rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.admin-product-editor__stacked-rows-actions > .admin-cf-rows {
  margin-bottom: 0;
}
.admin-product-editor__section-head-main {
  display: flex;
  gap: 0.85rem 1rem;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 12rem;
}
.admin-product-editor__step {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: 0.1rem;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent-mid) 72%, var(--text));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 18%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-elevated) 50%, transparent);
}
.admin-product-editor__h {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 0.35rem;
  color: var(--text);
}
.admin-product-editor__section-lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
  max-width: 42rem;
}
.admin-product-editor__hint {
  margin: 0 0 0.75rem;
}
.admin-product-editor__field-cluster {
  margin-bottom: 1.35rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: var(--radius-md, 10px);
  border: 1px dashed color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 55%, var(--bg-elevated));
}
.admin-product-editor__field-cluster--basics {
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-style: solid;
  border-color: color-mix(in srgb, var(--border) 72%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 50%, var(--bg-elevated));
  box-shadow: var(--shadow-xs);
}
.admin-product-editor__field-cluster--basics .admin-product-editor__cluster-label {
  margin-bottom: 0.85rem;
}
.admin-product-editor__basics-grid {
  gap: 0.9rem 1.25rem !important;
}
@media (min-width: 640px) {
  .admin-product-editor__basics-grid {
    align-items: start;
  }
}
.admin-product-editor__cluster-label {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 90%, var(--accent-mid));
}

/* Read-only catalog metadata (not an input — avoids looking editable) */
.admin-readonly-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.05rem;
}
.admin-readonly-field__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 88%, var(--accent-mid));
}
.admin-readonly-field__value {
  margin: 0;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}
.admin-readonly-field__hint {
  margin: 0.15rem 0 0;
  line-height: 1.45;
  max-width: 22rem;
}
.admin-product-editor__section-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
}
.admin-product-editor__section-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-left: auto;
  justify-content: flex-end;
}
.admin-product-editor__section-head-actions .admin-active-switch-wrap {
  margin-left: 0;
}
.admin-product-editor__section-head--details {
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.admin-product-editor__section-head--details .admin-product-editor__h {
  margin-bottom: 0.35rem;
}
.admin-active-switch-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.35rem 0.65rem 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
}
.admin-product-editor__switch-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-active-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  user-select: none;
}
.admin-active-switch__track {
  display: inline-block;
  width: 2.875rem;
  height: 1.5625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 85%, var(--text));
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.admin-active-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-active-switch__input:checked ~ .admin-active-switch .admin-active-switch__track {
  background: color-mix(in srgb, var(--accent-mid) 52%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-mid) 28%, transparent);
}
.admin-active-switch__input:checked ~ .admin-active-switch .admin-active-switch__thumb {
  transform: translateX(1.2rem);
}
.admin-active-switch__input:focus-visible ~ .admin-active-switch .admin-active-switch__track {
  box-shadow:
    0 0 0 2px var(--bg-elevated),
    0 0 0 4px color-mix(in srgb, var(--accent-mid) 42%, transparent);
}
.admin-active-switch__on {
  display: none;
  color: var(--accent-mid);
}
.admin-active-switch__off {
  display: inline;
  color: var(--muted);
}
.admin-active-switch__input:checked ~ .admin-active-switch .admin-active-switch__on {
  display: inline;
}
.admin-active-switch__input:checked ~ .admin-active-switch .admin-active-switch__off {
  display: none;
}
.label .label__hint {
  display: block;
  font-weight: 400;
  margin: 0.15rem 0 0.4rem;
  line-height: 1.4;
}
.pe-desc-field {
  margin-bottom: 1rem;
}
.pe-desc-field--long {
  margin-bottom: 0;
}
.pe-desc-field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.25rem;
}
.pe-desc-field__head .label {
  margin-bottom: 0;
}
.pe-desc-field__rich-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.pe-desc-field__rich-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent-mid);
}
.pe-desc-tabs {
  display: inline-flex;
  gap: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.pe-desc-tab {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border: none;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.pe-desc-tab--active {
  background: color-mix(in srgb, var(--accent-mid) 12%, var(--bg-elevated));
  color: var(--text);
}
.pe-desc-tab + .pe-desc-tab {
  border-left: 1px solid var(--border);
}
.pe-desc-rich-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
  /* Default editor scroll viewport; JS cycles --pe-quill-viewport-max on the same node. */
  --pe-quill-viewport-max: 14rem;
}
.pe-desc-field--long .pe-desc-rich-wrap {
  --pe-quill-viewport-max: 22rem;
}
.pe-quill-resize-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.4rem 0.15rem 0.15rem;
  margin-top: 0.15rem;
}
.pe-quill-resize-bar__hint {
  margin: 0;
  line-height: 1.35;
}
.pe-quill-resize-bar__cycle {
  align-self: flex-start;
}
.pe-desc-rich-wrap--visual-locked .pe-quill-resize-bar__hint {
  display: block;
}
/* [hidden] must win over .pe-desc-panel { display:flex } or both Visual+HTML show */
.pe-desc-panel[hidden] {
  display: none !important;
}
.pe-desc-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
}
.pe-quill-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Visual + HTML: scroll long copy inside the box; height presets via --pe-quill-viewport-max on .pe-desc-rich-wrap */
.pe-desc-panel--short > .pe-quill-wrap {
  min-height: 0;
}
.pe-desc-panel--long > .pe-quill-wrap {
  min-height: 0;
}
.pe-desc-rich-wrap .pe-quill-wrap--short .pe-quill-editor {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pe-desc-rich-wrap .pe-quill-wrap--long .pe-quill-editor {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pe-desc-rich-wrap .pe-quill-wrap .ql-container.ql-snow {
  flex: 1 1 auto;
  min-height: 5.5rem;
  max-height: var(--pe-quill-viewport-max, 14rem);
  overflow-y: auto;
  overflow-x: hidden;
}
.pe-desc-rich-wrap .pe-desc-html-panel .pe-desc-html-src {
  max-height: var(--pe-quill-viewport-max, 14rem);
  overflow-y: auto;
  resize: none;
}
.pe-desc-html-panel.pe-quill-wrap {
  flex: 1 1 auto;
}
.pe-desc-html-panel .pe-desc-html-src {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 7.5rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
}
.pe-desc-panel--long > .pe-desc-html-panel .pe-desc-html-src.admin-composer__textarea--long {
  min-height: 16rem;
}
.pe-quill-wrap .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pe-quill-wrap .ql-container.ql-snow {
  border: none;
  font-size: 0.95rem;
}
.admin-composer__textarea--long {
  min-height: 14rem;
  line-height: 1.5;
}
.admin-product-editor__variant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.2rem 0.35rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 65%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent-mid));
}
.admin-product-editor__stacked-rows-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
.admin-product-editor-attr-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-product-editor-attr-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.65rem 1rem;
  align-items: end;
}
@media (max-width: 720px) {
  .admin-product-editor-attr-row {
    grid-template-columns: 1fr;
  }
}
/* Wide packages table: scroll inside this box (not the page). `min-width:0` on section chain prevents flex/grid from blocking overflow. */
.admin-product-editor__variants-scroll,
.admin-product-editor__table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent-mid));
  background: var(--bg-elevated);
}
.admin-product-editor__variants-scroll > .table,
.admin-product-editor__table-wrap > .table {
  margin: 0;
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
  table-layout: auto;
}
.admin-product-editor__variants-scroll > .table thead th,
.admin-product-editor__table-wrap > .table thead th {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--muted) 95%, var(--text));
  background: color-mix(in srgb, var(--surface-2) 88%, var(--bg-elevated));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  padding: 0.55rem 0.65rem;
}
.admin-product-editor__variants-scroll > .table tbody td,
.admin-product-editor__table-wrap > .table tbody td {
  padding: 0.5rem 0.55rem;
  vertical-align: middle;
}
.admin-product-editor-variants-table .input {
  min-width: 5rem;
}
.admin-product-editor-variants-table .pe-v-title {
  min-width: 10rem;
}
.admin-product-editor-variants-table select.input.pe-v-attr {
  min-width: 7.5rem;
  max-width: 16rem;
  width: 100%;
}
.admin-product-editor-cf-details {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}
.admin-product-editor-cf-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.admin-product-editor__cf-note {
  margin-top: 0.75rem;
}
.admin-product-editor__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
}
.admin-product-editor__footer-hint {
  margin: 0;
  flex: 1 1 14rem;
  max-width: 26rem;
  line-height: 1.45;
}
.admin-product-editor__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.admin-product-editor__submit {
  min-height: 2.65rem;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 10px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-elevated) 35%, transparent);
}
@media (max-width: 640px) {
  .admin-product-editor-page-head__title-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .admin-product-editor__section-head--split .admin-product-editor__section-head-main {
    width: 100%;
  }
  .admin-product-editor__section-head--split .admin-product-editor__section-head-actions {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .admin-product-editor__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .admin-product-editor__footer-actions {
    justify-content: stretch;
  }
  .admin-product-editor__footer-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.btn--linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.btn--linklike:hover {
  color: var(--accent-hover);
}
.admin-product-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.admin-inline-form {
  display: inline;
  margin: 0;
}
.admin-table-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  vertical-align: middle;
}
.admin-list-col-actions {
  white-space: nowrap;
}

/* Admin products list (/admin/products*) — long titles clamp to 2 lines; table stays scannable */
.admin-products-table th.admin-products-table__th-name,
.admin-products-table td.admin-products-table__name {
  min-width: 9rem;
  max-width: min(24rem, 42vw);
  vertical-align: middle;
}
.admin-products-table .admin-products-table__name-inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.38;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.admin-status-pill--on {
  background: color-mix(in srgb, var(--accent-mid) 16%, transparent);
  color: color-mix(in srgb, var(--accent-mid) 92%, var(--text));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 42%, var(--border));
}
.admin-status-pill--off {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--bg));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--text));
}

/* Loading skeletons (cards, lists) */
@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 80%, var(--border));
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: skeleton-shimmer 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ——— Guided order flow (/buy) ——— */
.buy-flow__head {
  margin-bottom: 0.25rem;
}

.buy-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.85rem);
}

.buy-stepper {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 48%, var(--bg-elevated));
}

.buy-stepper__step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.buy-stepper__step--current {
  color: var(--accent-hover);
}

.buy-stepper__step--done {
  color: var(--text);
}

.buy-stepper__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent-muted) 62%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 18%, var(--border));
}

.buy-stepper__step--current .buy-stepper__n {
  background: var(--accent-mid);
  color: #fff;
  border-color: transparent;
}

.buy-stepper__link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.buy-stepper__link:hover {
  text-decoration: underline;
}

.buy-flow__section {
  min-width: 0;
}

.buy-flow__h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.buy-flow__h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}

.buy-flow__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.buy-flow__desc--long {
  margin-top: 0.35rem;
}

.buy-flow__desc--plain {
  white-space: pre-wrap;
}

.buy-flow__skip {
  margin: 1rem 0 0;
}

.buy-flow__lead {
  margin: 0 0 1rem;
}

.buy-flow__toolbar {
  margin-bottom: 1rem;
}

.buy-pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.buy-pack-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-strong) 38%, var(--border));
  background: var(--bg-elevated, #fff);
}

.buy-pack-list__item--out {
  opacity: 0.72;
}

.buy-pack-list__title {
  font-size: 0.95rem;
  font-weight: 600;
}

.buy-pack-list__meta {
  font-size: 0.8125rem;
  margin-top: 0.2rem;
}

.buy-pack-list__sep {
  margin: 0 0.25rem;
}

.buy-flow__alt {
  margin: 1rem 0 0;
}

.buy-flow__pay-hint {
  margin-bottom: 0;
}

.buy-flow--single .buy-single__grid {
  max-width: 32rem;
}

.buy-flow--single.buy-single {
  width: 100%;
  max-width: min(52rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* /buy single: viewport sticky needs ancestors without overflow-x clipping (same idea as .product-page). */
html:has(.catalog-page.buy-flow--single.buy-single),
body.site:has(.catalog-page.buy-flow--single.buy-single) {
  overflow-x: visible;
}
body.site:has(.catalog-page.buy-flow--single.buy-single) .site-shell,
body.site:has(.catalog-page.buy-flow--single.buy-single) .site-canvas,
body.site:has(.catalog-page.buy-flow--single.buy-single) .site-main {
  overflow-x: visible;
}

.buy-single__page-head .page-head__title {
  letter-spacing: -0.03em;
}

.buy-single__lede {
  max-width: 36rem;
  line-height: 1.55;
}

.buy-single__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.35rem);
}

/* /buy stepper: full width with card-aligned padding; sticky below topbar */
.buy-single__stepper {
  --buy-stepper-pad-x: clamp(1.05rem, 2.5vw, 1.35rem);
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  padding: 0.65rem var(--buy-stepper-pad-x) 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  background: color-mix(in srgb, var(--bg-elevated) 96%, var(--surface-2));
  box-shadow:
    var(--shadow-inner-soft),
    0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
    0 10px 28px -8px color-mix(in srgb, var(--text) 11%, transparent),
    0 22px 56px -18px color-mix(in srgb, var(--text) 9%, transparent);
  position: sticky;
  top: calc(var(--topbar-h) + 0.5rem);
  z-index: 35;
  margin-bottom: clamp(0.35rem, 1.2vw, 0.55rem);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

@media (max-width: 900.98px) {
  .buy-single__stepper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-elevated);
  }
}

@media (min-width: 901px) and (hover: none) {
  .buy-single__stepper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-elevated);
  }
}

.buy-single__progress {
  width: 100%;
  padding: 0;
}

.buy-single__progress-track {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, var(--surface-2));
  overflow: hidden;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}

.buy-single__progress-fill {
  height: 100%;
  width: 18%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent-mid),
    color-mix(in srgb, var(--accent-light, var(--accent-mid)) 88%, var(--accent-mid))
  );
  transition: width 0.38s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.buy-single__steps {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0.05rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  border: none;
  box-shadow: none;
  background: transparent;
  max-width: none;
}

.buy-single__step {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.38rem;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.2;
  background: transparent;
  transition: color 0.2s var(--ease);
}

.buy-single__step-n {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--muted);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.buy-single__step--active {
  color: var(--text);
}

.buy-single__step--active .buy-single__step-n {
  background: var(--accent-mid);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-mid) 38%, transparent);
}

.buy-single__step-text {
  display: block;
  max-width: 6.75rem;
  margin: 0 auto;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.25;
}

.buy-single__step--active .buy-single__step-text {
  color: var(--text);
  font-weight: 750;
}

.buy-single__step--done {
  color: color-mix(in srgb, var(--muted) 75%, var(--text));
}
.buy-single__step--done .buy-single__step-n {
  background: color-mix(in srgb, var(--accent-muted) 45%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent-mid) 28%, var(--border));
  color: var(--accent-mid);
  box-shadow: none;
}
.buy-single__step--done .buy-single__step-text {
  font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
  .buy-single__progress-fill,
  .buy-single__step,
  .buy-single__step-n {
    transition: none;
  }
}

.buy-single #buy-section-catalog,
.buy-single #buy-description-section,
.buy-single #buy-packages-section,
.buy-single #product-checkout {
  scroll-margin-top: calc(var(--topbar-h) + clamp(5.25rem, 14vh, 7.25rem));
}

/* Cards */
.buy-single__card {
  padding: clamp(1.1rem, 2.8vw, 1.45rem) clamp(1.05rem, 2.5vw, 1.35rem);
}

.buy-single__card-head {
  margin-bottom: clamp(0.85rem, 2vw, 1.1rem);
}

.buy-single__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, var(--accent-mid));
}

.buy-single__card-title {
  margin: 0;
}

.buy-single__card .buy-flow__h2 {
  margin: 0;
}

/* Category then product — always stacked (one field per row) */
.buy-single__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.1rem);
  align-items: stretch;
}

.buy-single__field {
  margin: 0;
  min-width: 0;
}

.buy-single__field-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.buy-single__select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
}

/* /buy catalog pickers — FA icon in thumb as placeholder “logo”; after pick: image or monogram; list unchanged */
.buy-flow .buy-catalog-picker {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.buy-flow .buy-catalog-picker .user-picker__box {
  position: relative;
  max-width: 100%;
  min-width: 0;
}
.buy-flow .buy-catalog-picker .buy-catalog-picker__toggle {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.buy-flow .buy-catalog-picker--disabled .buy-catalog-picker__toggle {
  cursor: not-allowed;
  opacity: 0.72;
}
.buy-flow .buy-catalog-picker__toggle-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.buy-flow .buy-catalog-picker__thumb--toggle {
  position: relative;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: var(--surface-2);
}
.buy-flow .buy-catalog-picker__thumb-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: color-mix(in srgb, var(--muted) 70%, var(--accent-mid));
}
.buy-flow .buy-catalog-picker__thumb-placeholder[hidden] {
  display: none !important;
}
.buy-flow .buy-catalog-picker__thumb-placeholder i {
  font-size: 0.95rem;
  line-height: 1;
}
.buy-flow .buy-catalog-picker__thumb-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buy-flow .buy-catalog-picker__thumb-img[hidden] {
  display: none !important;
}
.buy-flow .buy-catalog-picker__thumb--toggle .buy-catalog-picker__toggle-ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 88%, var(--accent-mid));
  line-height: 1;
  user-select: none;
  background: var(--surface-2);
}
.buy-flow .buy-catalog-picker__thumb--toggle .buy-catalog-picker__toggle-ph:not([hidden]) {
  display: flex;
}
.buy-flow .buy-catalog-picker__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--text);
}
/* Closed picker: keep label inside the button (mobile); truncated — full name not required */
.buy-flow .buy-catalog-picker__label [data-buy-label-text] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.32;
  white-space: normal;
}
.buy-flow .buy-catalog-picker .user-picker__dropdown {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: min(18rem, 52vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  z-index: 40;
}
.buy-flow .buy-catalog-picker .user-picker__dropdown[hidden] {
  display: none !important;
}
.buy-flow .buy-catalog-picker .user-picker__search {
  flex: 0 0 auto;
  margin-bottom: 0.45rem;
}
.buy-flow .buy-catalog-picker .user-picker__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.buy-flow .buy-catalog-picker__item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.5rem;
}
.buy-flow .buy-catalog-picker__item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 0.32rem;
  line-height: 1.3;
}
.buy-flow .buy-catalog-picker__item-main {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}
.buy-flow .buy-catalog-picker__pill {
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--accent-hover) 92%, var(--text));
  background: color-mix(in srgb, var(--accent-muted) 55%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent-mid) 22%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 35%, transparent);
}
.buy-flow .buy-catalog-picker__pill--products-count {
  white-space: nowrap;
  max-width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.64rem;
  font-weight: 800;
}
.buy-flow .buy-catalog-picker__tag--oos {
  display: inline-flex;
  align-items: center;
  margin-top: 0.08rem;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--danger) 92%, var(--text));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
}
.buy-flow .buy-catalog-picker__item-media {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.buy-flow .buy-catalog-picker__list-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buy-flow .buy-catalog-picker__list-ph {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.buy-flow .buy-catalog-picker__item-text {
  min-width: 0;
  width: 100%;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* /buy pickers: consistent pointer + theme-aware hover (dark themes were mixing toward #fff) */
.buy-flow .buy-catalog-picker .user-picker__item.buy-catalog-picker__item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--radius-sm);
  transition:
    background-color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}
.buy-flow .buy-catalog-picker .user-picker__item.buy-catalog-picker__item * {
  cursor: inherit;
}
.buy-flow .buy-catalog-picker .user-picker__item.buy-catalog-picker__item:hover,
.buy-flow .buy-catalog-picker .user-picker__item.buy-catalog-picker__item:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-mid) 24%, transparent);
  outline: none;
}
.buy-flow .buy-catalog-picker .user-picker__item.buy-catalog-picker__item:active {
  background: color-mix(in srgb, var(--accent-mid) 14%, var(--surface-2));
}
.buy-flow .buy-catalog-picker .user-picker__search {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.buy-flow .buy-catalog-picker .user-picker__search::placeholder {
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}
.buy-flow .buy-catalog-picker .user-picker__search:focus {
  border-color: color-mix(in srgb, var(--accent-mid) 42%, var(--border));
  box-shadow: 0 0 0 2px var(--accent-ring);
  outline: none;
}
.buy-flow .buy-catalog-picker .user-picker__list {
  scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent;
}
html[data-site-theme-mode="dark"] .buy-flow .buy-catalog-picker .user-picker__dropdown {
  z-index: 60;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--border) 75%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--border) 32%, transparent);
}

.buy-flow .buy-catalog-picker__empty {
  padding: 0.5rem 0.35rem;
  cursor: default;
}

/* Selected product title */
.buy-single__product-name {
  margin: 0 0 0.65rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--accent-hover);
  line-height: 1.25;
}

.buy-single__short {
  margin-top: 0;
}

.buy-single__long-wrap {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.buy-single__long {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 48%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* Empty / loading strip */
.buy-single__placeholder-wrap {
  min-width: 0;
}

.buy-single__placeholder {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem 1rem;
  padding: clamp(1rem, 2.5vw, 1.25rem);
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--border) 72%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface-2) 32%, var(--bg-elevated));
}

.buy-single__placeholder-icon {
  flex-shrink: 0;
  display: flex;
  color: color-mix(in srgb, var(--muted) 70%, var(--accent-mid));
  opacity: 0.9;
}

.buy-single__placeholder-text {
  font-size: 0.9rem;
  line-height: 1.5;
  padding-top: 0.15rem;
}

.buy-single__placeholder-status {
  margin: 0;
  padding: clamp(0.85rem, 2vw, 1rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface-2) 38%, var(--bg-elevated));
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}

/* Nested buy card: avoid double frame inside checkout panel */
.buy-single__card--checkout .buy-single__packages.product-buy-card {
  margin-top: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.buy-flow__section--loading {
  opacity: 0.72;
  pointer-events: none;
}

.buy-single__toggle-long {
  margin-top: 0;
}

.buy-single__packages {
  margin-top: 0;
}

/* --- Admin: Appearance → Theme --- */
.admin-theme-page-head {
  margin-bottom: 1.25rem;
  max-width: 56rem;
}
.admin-theme-page-head__title {
  margin: 0.35rem 0 0.25rem;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.admin-theme-page-head__lede {
  margin: 0;
  max-width: 44rem;
  line-height: 1.55;
}
.admin-theme-layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  max-width: 72rem;
}
@media (min-width: 900px) {
  .admin-theme-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}
.admin-theme-layout__main {
  min-width: 0;
}
.admin-theme-layout__aside {
  position: sticky;
  top: 1rem;
  min-width: 0;
}
.admin-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.65rem;
}
.admin-theme-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.6rem;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent-mid));
  background: var(--bg-elevated);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
  font: inherit;
  color: inherit;
}
.admin-theme-card:hover {
  border-color: color-mix(in srgb, var(--accent-mid) 35%, var(--border));
  box-shadow: var(--shadow-sm);
}
.admin-theme-card--current {
  border-color: color-mix(in srgb, var(--accent-mid) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-mid) 22%, transparent);
}
.admin-theme-card--dark .admin-theme-card__label {
  color: var(--text);
}
.admin-theme-card__swatches {
  display: flex;
  gap: 3px;
  border-radius: 6px;
  overflow: hidden;
  height: 1.35rem;
}
.admin-theme-card__sw {
  flex: 1;
  min-width: 0;
  border-radius: 0;
}
.admin-theme-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}
.admin-theme-card__hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.3;
}
.admin-theme-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
}
.admin-theme-preview__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}
.admin-theme-preview__hint {
  margin: 0 0 0.65rem;
}
.admin-theme-preview {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.admin-theme-preview__canvas {
  --font: Inter, system-ui, sans-serif;
  --bg: #f1f5f9;
  --bg-deep: #e2e8f0;
  --bg-elevated: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0c3928;
  --accent-mid: #166534;
  --accent-light: #15803d;
  --accent-hover: #052e16;
  --accent-strong: #14532d;
  --accent-soft: #bbf7d0;
  --accent-muted: #ecfdf5;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  font-family: var(--font);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: inherit;
}
.admin-theme-preview__topbar-shell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-muted)) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border);
}
.admin-theme-preview__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}
.admin-theme-preview__logo-ph {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
}
.admin-theme-preview__brand-name {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.admin-theme-preview__search-pill {
  flex: 1 1 120px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent-mid));
  background: color-mix(in srgb, var(--surface) 75%, var(--bg-deep));
  box-shadow: var(--shadow-inner-soft), 0 1px 0 color-mix(in srgb, var(--border) 25%, transparent) inset;
  font-size: 0.58rem;
  color: var(--muted);
}
.admin-theme-preview__search-ic {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-top-color: transparent;
  opacity: 0.85;
}
.admin-theme-preview__search-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-theme-preview__balance-pill {
  flex-shrink: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: linear-gradient(145deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--accent-muted) 55%, var(--surface)) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.admin-theme-preview__hero-bleed {
  padding: 0.75rem 0.75rem 0.85rem;
  background: linear-gradient(165deg, var(--accent-muted) 0%, color-mix(in srgb, var(--surface) 72%, var(--bg-deep)) 52%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
}
.admin-theme-preview__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}
.admin-theme-preview__tag {
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.admin-theme-preview__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid);
}
.admin-theme-preview__h {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.admin-theme-preview__sub {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.4;
}
.admin-theme-preview__search-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0.55rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent-mid));
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
}
.admin-theme-preview__search-card-media {
  flex: 0 0 32%;
  max-width: 5.5rem;
  min-height: 3.35rem;
  background: var(--surface);
}
.admin-theme-preview__search-card-media .admin-theme-preview__ph {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 3.35rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2)) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 45%, transparent);
}
.admin-theme-preview__search-card-body {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.55rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  justify-content: center;
}
.admin-theme-preview__sc-type {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-theme-preview__sc-name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}
.admin-theme-preview__sc-price {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent-mid);
  font-variant-numeric: tabular-nums;
}
.admin-theme-preview__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-theme-preview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
}
.admin-theme-preview__btn--primary {
  background: var(--accent-mid);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.admin-theme-preview__btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-xs);
}
.admin-theme-preview__below {
  padding: 0.6rem 0.65rem 0.7rem;
  background: linear-gradient(165deg, var(--bg-elevated) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
}
.admin-theme-preview__section-label {
  margin: 0 0 0.45rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-theme-preview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.admin-theme-preview__product {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-elevated) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-xs), var(--shadow-inner-soft), 0 1px 0 color-mix(in srgb, var(--border) 30%, transparent) inset;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-theme-preview__product-media {
  aspect-ratio: 1 / 1;
  position: relative;
  background: var(--surface);
}
.admin-theme-preview__product-media .admin-theme-preview__ph {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: linear-gradient(145deg, var(--surface-2) 0%, color-mix(in srgb, var(--accent-muted) 65%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent);
}
.admin-theme-preview__product-body {
  padding: 0.4rem 0.48rem 0.48rem;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  flex: 1;
  min-width: 0;
}
.admin-theme-preview__ptype {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-theme-preview__pname {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.admin-theme-preview__prow {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.admin-theme-preview__pprice {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent-mid);
  font-variant-numeric: tabular-nums;
}
.admin-theme-preview__mini-btn {
  flex-shrink: 0;
  padding: 0.14rem 0.38rem;
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent-mid);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}