:root {
  --ink: #0f2744;
  --ink-soft: #163250;
  --paper: #f6f3ec;
  --canvas: #eef1f4;
  --surface: #ffffff;
  --fg: #152033;
  --muted: #5b6677;
  --subtle: #8a93a3;
  --line: #e2e6ec;
  --accent: #2b5c8a;
  --good: #1f7a4d;
  --danger: #b42318;
  --radius: 16px;
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Plus Jakarta Sans", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --side: 232px;
  --gold: #d4af37;
  --gold-ink: #8a6a12;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
html:has(body.app-body),
body.app-body {
  height: 100%;
  overflow: hidden;
}
body.auth-body {
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
[type="submit"] {
  font: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font: inherit;
  width: 100%;
}
img {
  max-width: 100%;
}

.app-body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--canvas);
}
.app-header {
  z-index: 30;
  flex-shrink: 0;
  height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #1a3352;
  color: #f6f3ec;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-header .brand {
  color: #f6f3ec;
  display: inline-flex;
}
.app-header .brand img {
  width: 28px;
  height: 28px;
}
.app-row {
  display: flex;
  flex: 1;
  min-height: 0;
}
.sidebar {
  width: var(--side);
  flex-shrink: 0;
  background: #12243c;
  color: var(--paper);
  display: none;
  flex-direction: column;
  padding: 16px 12px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: auto;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-nav a {
  color: rgba(246, 243, 236, 0.72);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-nav a i {
  width: 18px;
  text-align: center;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.side-nav a:hover,
.side-nav a.on {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.app-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  z-index: 20;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.topbar .store-chip {
  display: none;
}
.topbar .brand {
  display: inline-flex;
}
.app-header .account-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #f6f3ec;
  border-color: rgba(255, 255, 255, 0.16);
}
.app-header .account-name {
  color: #f6f3ec;
}
.app-header .account-btn i {
  color: #f6f3ec;
}
.app-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.app-scroll > main.wrap {
  box-sizing: border-box;
  flex: 1 0 auto;
  min-height: 0;
}
.app-scroll > .site-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  flex-shrink: 0;
}
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  width: 100%;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.page-head .preview-head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.page-head .preview-label {
  margin: 0;
}
.page-head .preview-tools {
  margin: 0;
}
h1,
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
}
h1 {
  font-size: 28px;
}
h2 {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}
.muted {
  color: var(--muted);
}
.subtle {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.brand img {
  width: 28px;
  height: 28px;
}

.account {
  position: relative;
}
.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  background: var(--canvas);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 14px;
}
.account-av {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.account-btn i {
  font-size: 11px;
  opacity: 0.7;
}
.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  background: var(--surface);
  color: var(--fg);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(15, 39, 68, 0.16);
  z-index: 40;
  border: 1px solid var(--line);
}
.account-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
}
.account-menu a:hover {
  background: var(--paper);
  text-decoration: none;
}
.account-out {
  color: var(--danger) !important;
}
.account-mail {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-weight: 650;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.btn > i {
  flex: 0 0 auto;
}
.btn:hover {
  background: #2b5c8a;
  color: #fff;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid #c5d4e6;
  outline-offset: 2px;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.link-btn:hover {
  text-decoration: underline;
}
.btn.ghost {
  background: #eef2f6;
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn.ghost:hover {
  background: #e0e7ef;
  color: #0f2744;
  border-color: #b8c5d4;
  text-decoration: none;
}
.btn.danger {
  background: var(--danger);
  color: #fff;
  border: 0;
}
.btn.danger:hover {
  background: #8a1a14;
  color: #fff;
  text-decoration: none;
}
.btn.sm {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}
.list-row-actions .btn,
.actions .btn,
.data-table .row-actions .btn {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}

.admin-search-pop {
  margin: -8px 0 18px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.admin-search-pop[hidden] {
  display: none !important;
}
.page-head #admin-search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.admin-search label.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.admin-search input {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  margin: 0;
}
.admin-search .btn {
  margin: 0;
  flex: 0 0 auto;
}
.admin-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}
.admin-settings > .card {
  margin: 0;
}
.admin-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-card-title i {
  width: 16px;
  text-align: center;
  color: var(--accent);
  font-size: 13px;
}
.field-pair {
  display: grid;
  gap: 16px 20px;
  margin: 0 0 22px;
}
.field-pair:last-child {
  margin-bottom: 0;
}
.field-pair .field {
  margin: 0;
}
.field .field-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.admin-settings .form-actions {
  margin-top: 6px;
}
@media (min-width: 720px) {
  .field-pair {
    grid-template-columns: 1fr 1fr;
  }
}
.grid3 {
  display: grid;
  gap: 24px 28px;
  align-items: stretch;
  margin-bottom: 24px;
}
.grid2 {
  display: grid;
  gap: 24px 28px;
  align-items: stretch;
  margin-bottom: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
  border: 1px solid var(--line);
  min-height: 0;
}
.grid3 > .card,
.grid2 > .card,
.home-steps > .card {
  margin-top: 0;
  height: 100%;
  min-width: 0;
}
.wrap > .card {
  margin-bottom: 24px;
}
.card + .card {
  margin-top: 0;
}
.stat {
  min-height: 148px;
  display: flex;
  flex-direction: column;
}
.stat .val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  margin-top: 8px;
}
.stat .muted {
  margin-top: auto;
  padding-top: 8px;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.list li:first-child {
  border-top: 0;
  padding-top: 0;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 10px;
  color: var(--fg);
}
.field {
  margin: 0 0 22px;
}
.field:last-child {
  margin-bottom: 0;
}
input,
textarea,
select {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 1.7rem;
}
.select-fa {
  position: relative;
  display: inline-grid;
  align-items: stretch;
  max-width: 100%;
  vertical-align: middle;
}
.select-fa > select {
  width: 100%;
  padding-right: 1.7rem;
  background-image: none !important;
}
.select-fa > .fa-chevron-down {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted, #5b6677);
}
.select-fa-compact {
  width: max-content;
  max-width: 100%;
}
.select-fa-compact > .fa-chevron-down {
  right: 0.45rem;
  font-size: 0.85rem;
}
.actions select,
select.compact,
.data-table .row-actions select.compact,
.select-fa-compact > select.compact {
  width: max-content;
  width: fit-content;
  min-width: 0;
  max-width: max-content;
  field-sizing: content;
  height: 30px;
  min-height: 30px;
  padding: 0 20px 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  line-height: 30px;
  background-image: none;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #c5d4e6;
  border-color: var(--accent);
}
html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}
html.kb-open,
html.kb-open body.app-body {
  height: 100%;
  min-height: 100lvh;
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  margin: 0;
  accent-color: #0f2744;
  flex-shrink: 0;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: #e8eef4;
}
input[type="file"] {
  padding: 8px;
}
.pw {
  position: relative;
}
.pw input {
  padding-right: 44px;
}
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px;
}
.check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.check input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
}
.hint-line {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}
.store-url-preview {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--fg);
}
.store-url-preview.is-placeholder {
  color: var(--muted);
}
.contact-options {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}
.contact-option {
  display: grid;
  gap: 4px;
}
.contact-option .check {
  margin: 0;
}
.contact-option .hint-line {
  margin: 0;
}
.contact-option.is-disabled {
  opacity: 0.55;
}
.contact-option.is-disabled .check {
  cursor: not-allowed;
  color: var(--muted);
}
.contact-option.is-disabled .check input {
  cursor: not-allowed;
}
.contact-option.is-disabled .hint-line {
  opacity: 0.95;
}
.sticky-label-field {
  margin-top: 14px;
}
.editor .field-gap {
  margin-top: 14px;
}
.empty-secret {
  color: var(--danger);
}
.secret-saved {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}
.secret-saved input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  background: #f3f5f7;
}
.err,
.ok:not(.tag) {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0 0 12px;
  font-size: 13px;
}
.err {
  background: #fff1f1;
  color: #8a1f1f;
}

.auth-wrap .err,
.auth-wrap .ok:not(.tag) {
  font-size: 12px;
  line-height: 1.35;
}
.ok {
  background: #eef8f0;
  color: #1b5e2a;
}
.plan .ok,
.plan-badge {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #d9f0df;
  color: #145c28;
  border: 1px solid #b7dfc2;
  font-weight: 700;
  font-size: 13px;
}

.auth-body {
  background: var(--paper);
}
.auth-wrap {
  max-width: 460px;
  margin: 24px auto 64px;
  padding: 0 16px;
}
.auth-card {
  background: #f6f7f8;
  border-radius: 16px;
  padding: 36px 32px 28px;
}
.auth-card label {
  margin-top: 20px;
}
.auth-card .pw {
  margin-bottom: 4px;
}
.auth-card h1 {
  margin-bottom: 8px;
}
.auth-card .logo-lg {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 14px;
  border-radius: 12px;
}
.auth-card [type="submit"] {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
}
.auth-card [type="submit"]:hover {
  background: #1558c0;
}
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #98a2b3;
  font-size: 13px;
}
.or:before,
.or:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e7ec;
}
.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
}
.hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
  text-align: center;
}
.row-links {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 13px;
}

.bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 20;
}
.bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
}
.bottom a.on {
  color: var(--accent);
}

.plan-grid {
  display: grid;
  gap: 24px 28px;
  margin-bottom: 24px;
  align-items: stretch;
}
.plan {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.plan.on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.plan-body {
  flex: 1 1 auto;
}
.plan-actions {
  margin-top: auto;
  padding-top: 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.plan-actions .btn {
  width: 100%;
}
.plan-actions > form {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
}
.btn.btn-current {
  background: #d9f0df;
  color: #145c28;
  border: 1px solid #b7dfc2;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.btn.btn-current:hover {
  background: #d9f0df;
  color: #145c28;
}
.btn.btn-plan-ghost {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}
.btn.btn-plan-ghost:hover {
  background: var(--surface);
  color: var(--muted);
}

.theme-btn,
.menu-theme {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.menu-theme {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-theme:hover {
  background: var(--paper);
}
.account-menu button {
  cursor: pointer;
}

.site {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
.site > .site-footer {
  margin-top: auto;
}
.public-top {
  position: relative;
  z-index: 40;
  height: auto;
  min-height: 56px;
  padding: 12px 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
}
.public-top .brand {
  display: inline-flex !important;
  color: var(--ink);
  flex: 0 0 auto;
}
.public-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle:hover {
  background: var(--paper);
}
.nav-toggle:focus-visible {
  outline: 2px solid #c5d4e6;
  outline-offset: 2px;
}
.public-nav {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.public-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.public-nav a:hover {
  color: var(--ink);
  background: rgba(43, 92, 138, 0.12);
  text-decoration: none;
}
.public-nav a.on,
.public-nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(15, 39, 68, 0.1);
  font-weight: 700;
}
html[data-theme="dark"] .public-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .public-nav a.on,
html[data-theme="dark"] .public-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .nav-toggle {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line);
}
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  flex: 1;
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
.legal-wrap .card,
.legal-wrap form {
  max-width: 100%;
  min-width: 0;
}
.legal-wrap h1 {
  margin-bottom: 16px;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.2rem);
  line-height: 1.15;
  text-wrap: balance;
}
.legal-wrap h2 {
  margin: 24px 0 8px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.legal-wrap p,
.legal-wrap li {
  color: var(--muted);
}

.site-footer {
  background: #0c1726;
  color: var(--paper);
  padding: 14px 20px;
  margin-top: 24px;
  text-align: center;
  flex-shrink: 0;
  max-width: 100%;
  overflow-x: clip;
}
.foot-row,
.foot-links,
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0 auto;
  padding: 0;
}
.site-footer a {
  display: inline;
  color: rgba(246, 243, 236, 0.75);
  text-decoration: none;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.foot-sep {
  color: rgba(246, 243, 236, 0.35);
  user-select: none;
  font-size: 12px;
}
.foot-copy {
  margin: 0;
  font-size: 12px;
  color: rgba(246, 243, 236, 0.45);
}

.acct-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 4px;
}
.acct-sep {
  color: var(--subtle);
  opacity: 0.85;
  padding: 0 0.15rem;
  user-select: none;
}

.home-steps {
  width: 100%;
  max-width: 1080px;
  margin: 8px auto 28px;
  padding: 0 24px;
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.home-steps > .card {
  margin-bottom: 0;
}
.home-includes,
.site > section.home-includes {
  box-sizing: border-box;
  width: min(1032px, calc(100% - 48px));
  max-width: 1032px;
  margin: 4px auto 64px;
  padding: 26px 28px 24px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.home-includes h2,
.home-includes h2.display {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d5dbe3;
  line-height: 1.15;
  text-align: center;
}
.home-includes ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
  max-width: 920px;
}
.home-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.45;
}
.home-includes li .fa-check {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin-top: 3px;
  border-radius: 0;
  display: inline;
  background: none;
  color: var(--accent);
  font-size: 13px;
}
@media (min-width: 760px) {
  .home-includes ul {
    grid-template-columns: 1fr 1fr;
  }
}
html[data-theme="dark"] .home-includes,
html[data-theme="dark"] .site > section.home-includes {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line);
}
html[data-theme="dark"] .home-includes h2,
html[data-theme="dark"] .home-includes h2.display,
html[data-theme="dark"] .home-includes li {
  color: var(--fg);
  background: transparent;
  border: 0;
}
html[data-theme="dark"] .home-includes h2,
html[data-theme="dark"] .home-includes h2.display {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .home-includes li .fa-check {
  color: #d4af37;
  background: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: #efe9dc;
  color: #0f2744;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}
.tag.bad {
  background: #fff1f1;
  color: #b42318;
}
.tag.ok {
  background: #d9f0df;
  color: #145c28;
}
.tag.muted-tag {
  background: #e8ecf1;
  color: #5b6677;
}
.tag.rating {
  background: var(--gold, #d4af37);
  color: #1a1408;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  padding-top: 4px;
}
.form-actions .btn {
  min-width: 7rem;
}

/* Structured list rows (admin, dashboard, pages, orders, reviews) */
.list-structured > .list-row {
  display: grid;
  gap: 10px 16px;
  align-items: center;
  padding: 16px 0;
}
.list-row-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.list-row-titleline {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.list-row-titleline strong,
.list-row-titleline a.list-row-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row-titleline a.list-row-title {
  color: inherit;
  text-decoration: none;
}
.list-row-titleline a.list-row-title:hover {
  text-decoration: underline;
}
.list-row-submeta .meta-url {
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.list-row-submeta .meta-ext {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
  vertical-align: middle;
}
.list-row-submeta .meta-ext:hover {
  color: var(--fg);
}
.list-row-titleline .tag {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}
.list-row-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.list-row-id strong {
  font-weight: 700;
}
.list-row-sub {
  font-size: 13px;
  overflow-wrap: break-word;
  color: var(--muted);
}
.list-row-submeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.list-row-submeta > span {
  min-width: 0;
}
.list-row-submeta .meta-price {
  white-space: nowrap;
}
.list-row-submeta .meta-sep {
  opacity: 0.45;
  user-select: none;
}
.list-row-badges,
.list-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.list-row-actions {
  margin-top: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.list-row-actions form {
  display: inline-flex;
  margin: 0;
  align-items: center;
}
.list-row-note {
  margin: 4px 0 0;
  grid-column: 1 / -1;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}
.meta-cell {
  font-size: 13px;
  color: var(--fg);
}
.meta-cell.muted,
.muted.meta-cell {
  color: var(--muted);
}
.action-note {
  font-size: 13px;
  align-self: center;
}

/* Data tables */
.data-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 -4px;
  padding: 0 4px;
}
.card:has(.data-table-wrap) {
  overflow: visible;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th,
.data-table td {
  text-align: left;
  vertical-align: middle;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.data-table td .tag {
  vertical-align: middle;
  position: relative;
  top: 0;
}
.data-table td.cell-strong {
  line-height: 1.25;
}
.data-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  background: transparent;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  padding-top: 4px;
  padding-bottom: 10px;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table td {
  color: var(--fg);
}
.data-table .cell-muted {
  color: var(--muted);
  font-size: 13px;
}
.data-table .cell-strong {
  font-weight: 650;
}
.phone-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table td.cell-when {
  white-space: nowrap;
}

/* Dashboard Your pages + Live updates */
.grid2.u-mt-16 {
  margin-top: 20px !important;
}
.grid2 > .card > .subtle {
  margin-bottom: 10px;
}
.grid2 .data-table-wrap {
  max-width: 100%;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.grid2 .data-table td[data-label="Page"] {
  overflow-wrap: break-word;
}
.grid2 .list-structured > .list-row:last-child {
  padding-bottom: 0;
}
.grid2 .list-structured + p {
  margin: 14px 0 0;
}

/* Live updates: card-style rows when grid2 is side-by-side (tight columns) */
@media (min-width: 900px) and (max-width: 1199px) {
  .grid2 .data-table thead {
    display: none;
  }
  .grid2 .data-table,
  .grid2 .data-table tbody,
  .grid2 .data-table tr,
  .grid2 .data-table td {
    display: block;
    width: 100%;
  }
  .grid2 .data-table tr {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .grid2 .data-table tr:last-child {
    border-bottom: 0;
  }
  .grid2 .data-table td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border: 0;
    white-space: normal;
  }
  .grid2 .data-table td > .tag {
    justify-self: start;
    align-self: start;
    width: auto;
    max-width: 100%;
  }
  .grid2 .data-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--subtle);
  }
  .grid2 .data-table td.cell-when {
    white-space: normal;
  }
}
.data-table .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.data-table .row-actions form {
  display: inline-flex;
  margin: 0;
  align-items: center;
}
.data-table th.col-role,
.data-table td.cell-role {
  white-space: nowrap;
  min-width: 7.5rem;
}
.data-table td.cell-role .tag {
  white-space: nowrap;
}

/* Column header row for non-table grids */
.data-cols-head {
  display: grid;
  gap: 10px 16px;
  align-items: center;
  padding: 0 0 10px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}
.data-cols-head span {
  min-width: 0;
}

.dash-page-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.pages-row {
  /* Title column keeps room so status badge never wraps alone; actions may wrap */
  grid-template-columns: minmax(12rem, 1fr) minmax(0, max-content);
  align-items: center;
}
.pages-row .list-row-actions {
  justify-content: flex-end;
  max-width: 100%;
}

.reviews-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
}
.reviews-toolbar label {
  margin: 0;
  font-weight: 600;
}
.reviews-toolbar .select-fa {
  min-width: min(100%, 280px);
  flex: 1 1 220px;
}
.reviews-group {
  margin: 0 0 22px;
}
.reviews-group:last-of-type {
  margin-bottom: 8px;
}
.reviews-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.28));
}
.reviews-group-head h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.reviews-group-head a {
  font-size: 13px;
  text-decoration: underline;
}
.review-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.review-row .list-row-meta {
  justify-content: flex-end;
  gap: 10px;
}
.review-row .list-row-note {
  margin-top: 8px;
}
.review-row .list-row-titleline {
  flex-wrap: wrap;
  gap: 6px 8px;
}
@media (max-width: 820px) {
  .reviews-toolbar {
    align-items: stretch;
  }
  .reviews-toolbar .select-fa {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
}

.admin-status-filter,
.pages-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.admin-status-filter .btn,
.pages-status-filter .btn {
  margin: 0;
}
.admin-acct-row {
  grid-template-columns: minmax(0, 1.3fr) auto minmax(220px, 1fr);
  align-items: center;
}
.admin-acct-row .list-row-actions {
  justify-content: flex-end;
}
.admin-page-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.admin-page-row .list-row-actions {
  justify-content: flex-end;
}

.wrap:has(.data-table),
.wrap:has(.admin-acct-row) {
  max-width: 1080px;
}

@media (max-width: 820px) {
  .review-row,
  .admin-acct-row,
  .admin-page-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-acct-row .list-row-actions,
  .admin-page-row .list-row-actions,
  .review-row .list-row-meta {
    justify-content: flex-start;
  }
  .data-cols-head {
    display: none;
  }
  .data-table thead {
    display: none;
  }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }
  .data-table tr {
    position: relative;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .data-table tr:has(.row-menu) {
    padding-right: 48px;
  }
  .data-table tr:last-child {
    border-bottom: 0;
  }
  .data-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border: 0;
  }
  /* A tag that is the cell's own content stays a compact pill sized to its text, left-aligned like on
     desktop (a grid item would otherwise stretch across the whole value column). */
  .data-table td > .tag {
    justify-self: start;
    align-self: start;
    width: auto;
    max-width: 100%;
  }
  .data-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--subtle);
  }
  /* Hide empty Actions cells (orders with no menu) */
  .data-table
    td.row-actions-cell:not(:has(.row-menu)):not(:has(select)):not(
      :has(.select-fa)
    ):not(:has(.btn)) {
    display: none;
  }
  /* Orders: menu-only Actions cell -> absolute top-right of card */
  .data-table
    td.row-actions-cell:has(.row-menu):not(:has(select)):not(:has(.select-fa)) {
    position: absolute;
    top: 10px;
    right: 0;
    width: auto;
    padding: 0;
    margin: 0;
    z-index: 2;
  }
  .data-table
    td.row-actions-cell:has(.row-menu):not(:has(select)):not(
      :has(.select-fa)
    )::before {
    display: none;
  }
  /* Admin Accounts: plan select stays as labeled Actions row */
  .data-table td.row-actions-cell:has(select),
  .data-table td.row-actions-cell:has(.select-fa) {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
  }
  .data-table td.row-actions-cell:has(select)::before,
  .data-table td.row-actions-cell:has(.select-fa)::before {
    display: block;
  }
  /* Dedicated menu column (admin accounts) -> absolute top-right */
  .data-table td.row-menu-cell {
    position: absolute;
    top: 10px;
    right: 0;
    width: auto;
    padding: 0;
    margin: 0;
    text-align: right;
    z-index: 2;
  }
  .data-table td.row-menu-cell::before {
    display: none;
  }
  .data-table td.row-menu-cell .row-menu {
    justify-content: flex-end;
  }
  .data-table .row-actions {
    justify-content: flex-start;
  }
  .data-table
    td.row-actions-cell:has(.row-menu):not(:has(select)):not(:has(.select-fa))
    .row-actions {
    justify-content: flex-end;
  }
  .data-table td.row-open-cell {
    display: block;
    padding-top: 8px;
    text-align: left;
  }
  .data-table td.row-open-cell::before {
    display: none;
  }
}

.app-scroll:has(.editor) .wrap {
  max-width: 1180px;
}
.page-edit-layout {
  min-width: 0;
}
.editor {
  display: grid;
  gap: 20px;
  min-width: 0;
}
/* Page editor: the cards sit inside the form, so space them here (one card gap; hidden cards are skipped). */
#page-form > .card:not([hidden]) ~ .card:not([hidden]) {
  margin-top: 24px;
}
.preview-col .subtle {
  margin-bottom: 8px;
}
.preview-col .preview-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
.preview-tools {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.pv-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}
.pv-btn.on,
.pv-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.preview-frame {
  position: relative;
  overflow: hidden;
  background: #111;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  max-width: 100%;
}
.preview-frame.is-phone {
  width: min(100%, 410px);
  height: 700px;
  margin: 0 auto;
  border: 10px solid #1b1b1b;
  border-radius: 28px;
}
.preview-frame.is-desktop {
  width: 100%;
  max-width: 100%;
  height: 640px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 16px 40px rgba(0, 0, 0, 0.2);
  position: relative;
}
.preview-frame.is-desktop::before {
  content: none;
  display: none;
}
.preview-col.is-desktop-mode {
  min-width: 0;
}

/* The preview shows the real landing page in an iframe at phone (390px) or desktop (1280px) width, scaled to fit. */
.pv-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.pv-iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: 0 0;
  background: #fff;
}
.pv-iframe.is-back {
  visibility: hidden;
  pointer-events: none;
}
.preview-frame.is-thanks .pv-stage {
  display: none;
}
.phone {
  border: 10px solid #1b1b1b;
  border-radius: 28px;
  height: 680px;
  overflow: auto;
  background: #111;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.phone .sale {
  min-height: 100%;
}
.phone .s-sticky {
  display: none;
}

html[data-theme="dark"] {
  --ink: #f2f5f8;
  --paper: #121820;
  --canvas: #0c1117;
  --surface: #171e27;
  --fg: #ffffff;
  --muted: #d5dde6;
  --subtle: #c5cdd6;
  --line: #2a3440;
  --accent: #9ec4e4;
  --good: #7ed0a3;
  --danger: #ff8a82;
  --btn-ghost-bg: #2a3440;
  --btn-ghost-border: #3d4a5a;
  --btn-ghost-hover: #364354;
  --field-bg: #111820;
  --field-border: #3d4a5a;
}
html[data-theme="dark"] .app-header {
  background: #0f1620;
  border-bottom-color: #2a3440;
}
html[data-theme="dark"] .sidebar {
  background: #121820;
}
html[data-theme="dark"] .store-chip,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .side-nav a,
html[data-theme="dark"] .account-name {
  color: #fff;
}
html[data-theme="dark"] .card > h2 {
  color: #fff;
}
html[data-theme="dark"] .editor .card > h2 {
  color: var(--gold-ink, #8a6a12);
}
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .plan {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line);
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--field-border);
}
html[data-theme="dark"] select {
  background-image: none;
}
html[data-theme="dark"] .select-fa > .fa-chevron-down {
  color: var(--muted, #c5cdd6);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  outline: 2px solid #4a6a88;
  border-color: var(--accent);
}
html[data-theme="dark"] .actions select,
html[data-theme="dark"] select.compact,
html[data-theme="dark"] .data-table .row-actions select.compact,
html[data-theme="dark"] .select-fa-compact > select.compact {
  background-image: none;
}
html[data-theme="dark"] .btn {
  background: #e8eef4;
  color: #0c1117;
  border: 0;
}
html[data-theme="dark"] .btn:hover {
  background: #ffffff;
  color: #0c1117;
}
html[data-theme="dark"] .btn.ghost {
  background: var(--btn-ghost-bg);
  color: #f2f5f8;
  border: 1px solid var(--btn-ghost-border);
}
html[data-theme="dark"] .btn.ghost:hover {
  background: var(--btn-ghost-hover);
  color: #fff;
  border-color: #5a6b7c;
}
html[data-theme="dark"] .btn.danger {
  background: #ff8a82;
  color: #1a0a08;
  border: 0;
}
html[data-theme="dark"] .btn.danger:hover {
  background: #ff6b63;
  color: #1a0a08;
}
html[data-theme="dark"] .tag {
  background: #efe9dc;
  color: #0f2744;
}
html[data-theme="dark"] .tag.ok {
  background: #1e3d28;
  color: #b7efc5;
}
html[data-theme="dark"] .tag.bad {
  background: #3a1c1c;
  color: #ffb4ae;
}
html[data-theme="dark"] .tag.muted-tag {
  background: #243040;
  color: #c5cdd6;
}
html[data-theme="dark"] .tag.rating {
  background: var(--gold, #d4af37);
  color: #1a1408;
}
html[data-theme="dark"] .site-footer {
  background: #070b10;
}
html[data-theme="dark"] .err {
  background: #3a1c1c;
  color: #ffb4ae;
}
html[data-theme="dark"] .ok:not(.tag) {
  background: #163326;
  color: #b6ebc8;
}
html[data-theme="dark"] .plan .ok,
html[data-theme="dark"] .plan-badge {
  background: #1a3d2a;
  color: #b6ebc8;
  border-color: #2f6b4a;
}
html[data-theme="dark"] .secret-saved input {
  background: #0c1117;
  color: #fff;
  border-color: var(--field-border);
}
html[data-theme="dark"] .btn.btn-current {
  background: #1a3d2a;
  color: #b6ebc8;
  border-color: #2f6b4a;
}
html[data-theme="dark"] .btn.btn-plan-ghost {
  background: var(--btn-ghost-bg);
  color: var(--muted);
  border-color: var(--btn-ghost-border);
}
html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .data-cols-head {
  color: #aeb8c4;
}
html[data-theme="dark"] .form-actions {
  gap: 12px;
}

@media (min-width: 900px) {
  .app-scroll > main.wrap {
    min-height: 0;
  }

  .sidebar {
    display: flex;
  }
  .bottom {
    display: none;
  }
  .account-menu a.account-mobile-only {
    display: none;
  }
  .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .public-top .brand {
    display: inline-flex !important;
  }
}
/* Wide page-edit: page + header scroll together. Preview stays in view. */
@media (min-width: 1100px) {
  .app-scroll.is-page-edit {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .app-col:has(.wrap-page-edit) > .bottom {
    display: none;
  }
  .wrap-page-edit {
    max-width: 1180px;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 20px 20px 48px;
    display: block;
    overflow: visible;
  }
  .wrap-page-edit > .page-head {
    margin-bottom: 16px;
    align-items: center;
  }
  .wrap-page-edit > .page-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "editor preview";
    column-gap: 24px; /* plus the editor's 4px right padding: 28px between the cards and the preview */
    align-items: start;
    min-width: 0;
    width: 100%;
  }
  .wrap-page-edit .editor {
    grid-area: editor;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding-right: 4px;
  }
  .wrap-page-edit .preview-col {
    grid-area: preview;
    position: sticky;
    top: 12px;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100svh - 120px);
    overflow: visible;
  }
  .wrap-page-edit .preview-frame.is-phone {
    width: min(100%, 410px);
    height: 700px;
    max-height: calc(100svh - 88px);
  }
  .wrap-page-edit .preview-frame.is-desktop {
    width: 100%;
    /* fill the viewport under the 64px app header (sticky top 12px + bottom breathing room); frame scrolls on its own */
    height: calc(100svh - 96px);
    min-height: 480px;
    max-height: none;
  }
  .wrap-page-edit:has(.editor.is-desktop-mode) > .page-edit-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  }
}
@media (max-width: 899px) {
  .account-name {
    display: none;
  }
  .sidebar {
    display: none;
  }
  .home-steps {
    grid-template-columns: 1fr;
  }
}
/* Page builder responsive */
.page-edit-actions {
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}
.page-edit-actions .btn,
.page-edit-actions a.btn {
  min-height: 40px;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 10px;
}
@media (max-width: 1099px) {
  .page-edit-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .page-edit-layout > .editor {
    order: 2;
  }
  .page-edit-layout > .preview-col {
    order: 1;
    position: static;
    max-width: 100%;
  }
  .editor {
    grid-template-columns: 1fr;
  }
  .preview-frame.is-phone {
    width: min(100%, 410px);
    height: calc(100lvh - 168px);
    min-height: 520px;
    max-height: none;
  }
  .preview-frame.is-desktop {
    height: calc(100svh - 188px);
    min-height: 64svh;
    max-height: none;
  }
  .editor.is-desktop-mode {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 899px) {
  .editor .card,
  .editor input,
  .editor textarea,
  .editor select {
    max-width: 100%;
  }
  .editor .field {
    min-width: 0;
  }
  .preview-tools {
    flex-wrap: wrap;
  }
  .app-scroll:has(.editor) .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 480px) {
  .preview-frame.is-phone {
    border-width: 8px;
    border-radius: 22px;
    width: 100%;
    height: calc(100lvh - 148px);
    min-height: 520px;
    max-height: none;
  }
}

/* Page-edit: keep scroll, hide the bars */
.page-edit-layout .editor,
.page-edit-layout .preview-col,
.preview-frame {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.page-edit-layout .editor::-webkit-scrollbar,
.page-edit-layout .preview-col::-webkit-scrollbar,
.preview-frame::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Public marketing header: hamburger under 900px */
@media (max-width: 899px) {
  .public-top {
    padding: 10px 14px;
    max-width: 100vw;
  }
  .public-tools {
    margin-left: auto;
  }
  .nav-toggle {
    display: grid;
  }
  .public-nav {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 12px;
    right: 12px;
    flex: none;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 39, 68, 0.14);
  }
  .public-top.is-nav-open .public-nav,
  .public-nav.is-open {
    display: flex;
  }
  .public-nav a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
  }
  .public-nav .btn {
    justify-content: center;
    margin-top: 4px;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
  html[data-theme="dark"] .public-nav {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
}

@media (min-width: 900px) {
  .public-tools {
    margin-left: 0;
  }
  .nav-toggle {
    display: none !important;
  }
  .public-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
  }
}

/* Public marketing narrow content */
@media (max-width: 640px) {
  .home-steps {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }
  .home-includes ul {
    grid-template-columns: 1fr;
  }
  .site > section.home-includes,
  .home-includes {
    width: auto !important;
    max-width: none !important;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 48px;
    padding: 22px 18px !important;
  }
  .home-includes h2,
  .home-includes h2.display {
    font-size: 24px !important;
  }
  .home-steps > .card {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .legal-wrap {
    padding-left: 14px;
    padding-right: 14px;
    max-width: 100%;
  }
  .site > section {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-wrap: break-word;
  }
  .site > section h1.display,
  .site > section .display {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem) !important;
    overflow-wrap: break-word;
  }
  .site > section .muted {
    font-size: 15px !important;
    overflow-wrap: break-word;
  }
}

/* Page-edit media remove UI */
.media-existing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.media-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line, #d0d5dd);
  border-radius: 12px;
  background: var(--card, #fff);
  cursor: pointer;
}
.media-thumb img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #111;
}
.media-thumb.is-removing {
  opacity: 0.45;
  outline: 2px solid #c0392b;
}
.media-remove-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Page editor section titles */
.editor .card > h2 {
  color: var(--gold-ink, #8a6a12);
  font-family: var(--display, "DM Sans", system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}

.editor .sell-gap-before {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e2e6ec);
}

.editor .close-kicker-gap {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

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

.media-thumb {
  position: relative;
}
.media-thumb .media-x {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.media-thumb .media-x:hover {
  background: #a93226;
}
.media-thumb.is-removing {
  display: none;
}

.wa-message-field {
  margin-top: 16px;
}

.vm-btn[hidden],
.vm-btn.is-hidden,
[hidden] {
  display: none !important;
}

/* Compact list pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 16px;
  padding-top: 4px;
}
.pagination-meta {
  margin: 12px 0 0;
  font-size: 13px;
}
.pagination .btn.sm {
  min-width: 2rem;
}
.pagination .pagination-current {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: default;
}
.pagination .btn.disabled,
.pagination .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}
html[data-theme="dark"] .pagination .pagination-current {
  background: #e8eef4;
  color: #0c1117;
}
html[data-theme="dark"] .pagination .btn.ghost.disabled,
html[data-theme="dark"] .pagination .btn.ghost[aria-disabled="true"] {
  opacity: 0.4;
}

/* FAQ accordion (public) */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.faq-item {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.35;
  user-select: none;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.15em;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.2em;
}
.faq-item > summary:hover {
  background: rgba(43, 92, 138, 0.06);
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.faq-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.faq-body > :first-child {
  margin-top: 12px;
}
.faq-body > :last-child {
  margin-bottom: 0;
}
.faq-body p,
.faq-body li {
  color: var(--muted);
}
.faq-body ol,
.faq-body ul {
  margin: 8px 0;
  padding-left: 1.25rem;
}
.faq-body li {
  margin: 4px 0;
}
.faq-body code {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--canvas);
  color: var(--fg);
}
html[data-theme="dark"] .faq-item > summary:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .faq-body code {
  background: rgba(255, 255, 255, 0.08);
}
/* Profile + nav avatar */
.account-av.account-av-img {
  padding: 0;
  overflow: hidden;
  background: var(--line);
}
.account-av.account-av-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}
.account-head {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.account-head-name {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-head-store {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-card h2 {
  margin-top: 0;
}
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 36px;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}
.profile-photo-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.profile-avatar-actions .btn,
.profile-photo-btns .btn {
  width: fit-content;
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: middle;
}
.profile-photo-name {
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.profile-photo-hint {
  margin: 0;
}
.profile-remove-form {
  display: none;
}
@media (max-width: 420px) {
  .profile-photo-btns {
    flex-wrap: wrap;
  }
}
.profile-geo {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.profile-form .profile-geo {
  margin-bottom: 0;
}
.profile-form .profile-geo .field {
  margin-bottom: 0;
}
.profile-form-actions {
  margin-top: 28px;
}
.btn:disabled,
.btn[inert] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}
.feat-block {
  margin-bottom: 18px;
}
.feat-block:last-child {
  margin-bottom: 0;
}
.feat-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.feat-icon-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.feat-icon-pick label.feat-icon-opt,
.feat-icon-pick button.feat-icon-opt {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 16px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
}
.feat-icon-pick label.feat-icon-opt:hover,
.feat-icon-pick button.feat-icon-opt:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.feat-icon-pick label.feat-icon-opt.is-on,
.feat-icon-pick button.feat-icon-opt.is-on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.feat-icon-pick button.feat-icon-opt i {
  font-size: 16px;
  color: inherit;
}
.feat-icon-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.fa-solid,
.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.fa-regular,
.far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
.feat-title-field {
  margin-bottom: 8px;
}
.feat-body-field {
  margin-bottom: 0;
}
#live-error:not([hidden]) {
  display: block;
}

/* Page-edit: consistent vertical gaps between help text and the next field */
.editor .card > p.hint-line {
  margin: 0 0 18px;
  line-height: 1.45;
}
.editor .card > h2 + p.hint-line {
  margin-top: 0;
  margin-bottom: 18px;
}
.editor .card > p.hint-line + .field,
.editor .card > p.hint-line + .feat-block,
.editor .card > p.hint-line + .contact-options,
.editor .card > p.hint-line + .media-existing,
.editor .card > p.hint-line + .check {
  margin-top: 0;
}
.editor .field > .hint-line {
  margin: 8px 0 0;
}
.editor .card > .check + p.hint-line {
  margin: -10px 0 18px;
}
.editor .close-kicker-gap {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.editor .card {
  padding: 22px 22px 24px;
}
.editor .card > .field:first-of-type {
  margin-top: 0;
}

/* Click-to-edit flash when focusing a field from live preview */
.od-edit-flash {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
  transition:
    outline-color 0.2s,
    box-shadow 0.2s;
}
#preview-frame [data-edit] {
  cursor: text;
}
#preview-frame [data-edit]:hover {
  outline: 1px dashed rgba(212, 175, 55, 0.55);
  outline-offset: 2px;
}

/* Shared row three-dot actions (Pages, Orders, Admin, ...) */
.pages-row {
  overflow: visible;
}
.pages-row .list-row-actions,
.pages-row .actions {
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
}
.row-menu,
.page-menu {
  position: relative;
  display: inline-block;
}
.row-menu-btn,
.page-menu-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}
.row-menu-btn:hover,
.page-menu-btn:hover {
  background: var(--paper);
}
.row-menu-list,
.page-menu-list {
  display: none;
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  min-width: 188px;
  max-width: min(240px, calc(100vw - 24px));
  z-index: 60;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 39, 68, 0.16);
  padding: 6px;
  box-sizing: border-box;
}
/* Pages row menu sits on the right edge, so open leftward */
.pages-row .row-menu-list,
.pages-row .page-menu-list,
.page-menu-list {
  left: auto;
  right: 0;
}
.row-menu.is-open .row-menu-list,
.page-menu.is-open .page-menu-list,
.row-menu-list:not([hidden]),
.page-menu-list:not([hidden]) {
  display: block;
}
.row-menu-list[hidden],
.page-menu-list[hidden] {
  display: none !important;
}
.row-menu-list form,
.page-menu-list form {
  margin: 0;
  display: block;
  width: 100%;
}
.row-menu-item,
.page-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
a.row-menu-item,
a.page-menu-item {
  color: var(--fg);
}
.row-menu-item:hover,
.page-menu-item:hover {
  background: var(--paper);
  text-decoration: none;
  color: var(--fg);
}
.row-menu-item.is-danger,
.page-menu-item.is-danger {
  color: var(--danger);
}
.od-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f2744;
  color: #f6f3ec;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(15, 39, 68, 0.24);
}
html[data-theme="dark"] .od-toast {
  background: #f6f3ec;
  color: #0f2744;
}
html[data-theme="dark"] .row-menu-btn,
html[data-theme="dark"] .page-menu-btn {
  background: var(--surface);
}
/* Orders status cell */
.data-table .status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}
.data-table .status-cell .status-text {
  min-width: 0;
}
.data-table .status-cell .status-when {
  display: block;
  margin-top: 0;
}
.data-table .status-cell .status-text.is-cancelled {
  color: var(--danger);
}
.data-table td[data-label="Status"] {
  overflow: visible;
}
.data-table .row-actions-cell {
  overflow: visible;
  vertical-align: middle;
}
.data-table th.col-actions {
  width: 1%;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
.data-table .row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  justify-content: flex-end;
}
.data-table td.row-actions-cell .row-actions {
  justify-content: flex-end;
}
/* Fixed overlay menus escape table/card overflow (placed by layout.js) */
.row-menu-list.is-fixed-menu,
.page-menu-list.is-fixed-menu {
  position: fixed !important;
  left: auto;
  right: auto;
  z-index: 200 !important;
}
.row-open-link {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
}
.row-open-link:hover {
  background: var(--paper);
  text-decoration: none;
  color: var(--fg);
}
html[data-theme="dark"] .row-open-link {
  background: var(--surface);
}
.row-open-link.is-disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
  background: transparent;
}
.status-open-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.data-table th.col-open {
  width: 1%;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}
.data-table td.row-open-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
  overflow: visible;
}
.data-table td.row-open-cell .row-open-link {
  vertical-align: middle;
}
.data-table th.col-menu {
  width: 1%;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}
.data-table td.row-menu-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
  overflow: visible;
}
.data-table td.row-menu-cell .row-menu {
  display: inline-flex;
  justify-content: flex-end;
}
.pages-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}
.pages-row .list-row-actions.actions {
  margin-top: 0 !important;
  justify-content: flex-end;
  align-self: start;
}
@media (max-width: 820px) {
  .pages-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    padding-right: 44px;
  }
  .pages-row .list-row-main {
    min-width: 0;
    padding-right: 0;
  }
  .pages-row .list-row-actions,
  .pages-row .list-row-actions.actions {
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0 !important;
    justify-content: flex-end !important;
    align-self: start;
    z-index: 2;
  }
}
.pages-row .list-row-titleline {
  flex-wrap: wrap;
  align-items: center;
}
.pages-row .list-row-titleline strong,
.pages-row .list-row-titleline a.list-row-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Editor-only thank-you preview: fill the phone/desktop frame and center the card */
.preview-frame > .ty.ty--preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
}
.preview-frame > .ty.ty--preview[hidden] {
  display: none !important;
}
.preview-frame > .ty.ty--preview .ty-card {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 0 auto;
  flex-shrink: 0;
}
#preview-frame a.ty-back,
.preview-frame a.ty-back,
.preview-frame .ty a.ty-back,
.preview-frame .ty a.ty-back:link,
.preview-frame .ty a.ty-back:visited {
  text-decoration: none !important;
}
#preview-frame a.ty-back span,
.preview-frame .ty a.ty-back span {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
#preview-frame [data-edit],
.preview-frame [data-edit] {
  cursor: text;
  pointer-events: auto !important;
}
.preview-frame .ty.ty--preview,
.preview-frame .ty.ty--preview::-webkit-scrollbar {
  scrollbar-width: none;
}
.preview-frame .ty.ty--preview::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.contact-option .contact-dep {
  margin: 8px 0 4px;
}
#contact-copy-fields {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.editor [hidden] {
  display: none !important;
}
.editor .page-edit-actions .btn,
.editor .page-edit-actions a.btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* ===== 20261006d ===== */
/* Spacing utilities (replace one-off inline styles) */
.u-mb-16 {
  margin-bottom: 16px !important;
}
.u-mt-16 {
  margin-top: 16px !important;
}

/* Settings: store logo */
.store-logo-card h2 {
  margin-top: 0;
}
.store-logo-card > .muted {
  margin: 0 0 16px;
}
.store-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.store-logo-preview {
  width: 220px;
  max-width: 100%;
  height: 96px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: repeating-conic-gradient(
      rgba(127, 127, 127, 0.12) 0 25%,
      transparent 0 50%
    )
    0 0 / 16px 16px;
}
.store-logo-preview.has-logo {
  border-style: solid;
}
.store-logo-preview img {
  display: block;
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.store-logo-empty {
  color: var(--muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.store-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
}
.store-logo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.store-logo-form label.btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
}
.store-logo-form .btn {
  margin: 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.store-logo-name {
  color: var(--muted);
  font-size: 13px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-logo-actions .hint-line {
  margin: 0;
}

/* Page editor: paired fields and grouped sub-sections, sized by the card (not the window) */
.editor .card {
  container-type: inline-size;
}
.editor .editor-pair {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
  margin: 0;
}
.editor .editor-pair .field {
  margin: 0 0 22px;
}
@container (min-width: 440px) {
  .editor .editor-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editor .editor-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.editor .editor-subhead {
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.editor .trust-hint {
  margin: -8px 0 0;
}
.editor .editor-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
}
.editor .editor-field-grid .field {
  margin: 0 0 18px;
}
.editor .editor-field-grid .field[hidden] {
  display: none !important;
}
.editor .logo-toggle-field .check {
  margin-bottom: 0;
}
.editor .logo-toggle-field .hint-line i {
  margin-right: 4px;
}

/* ===== 20261006f ===== */

/* Three-dot menus: body-portaled overlay must never clip */
body > .row-menu-list.is-fixed-menu,
body > .page-menu-list.is-fixed-menu {
  position: fixed !important;
  z-index: 400 !important;
  max-width: min(240px, calc(100vw - 24px));
}
.card:has(.row-menu),
.card:has(.page-menu),
section.card:has(.row-menu),
.admin-settings > .card:has(.row-menu) {
  overflow: visible;
}
.data-table-wrap:has(.row-menu.is-open),
.data-table-wrap:has(.page-menu.is-open) {
  overflow: visible;
}
.tag.repeat-tag {
  background: #e8f0fe;
  color: #1a4b8c;
  border: 1px solid #c5d7f5;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.tag.watch-tag {
  background: #fff3e0;
  color: #9a4d0a;
  border: 1px solid #f0d0a0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}
html[data-theme="dark"] .tag.repeat-tag {
  background: #1a3352;
  color: #9ec1ff;
  border-color: #2a4a72;
}
html[data-theme="dark"] .tag.watch-tag {
  background: #3a2a12;
  color: #ffc978;
  border-color: #5a4020;
}
.buyer-flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.utm-table td,
.utm-table th {
  font-size: 13px;
}
.team-locked {
  opacity: 0.85;
}
.sold-out-banner {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #3a1212;
  color: #ffb4b4;
  font-weight: 700;
  font-size: 13px;
}

/* ===== 20261007g mobile row-menu corner ===== */

/* ===== 20261007m ===== */
/* Homepage hero: the site sans (DM Sans) instead of the serif display face */
.site h1.display.home-hero-title {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Dashboard Live updates: date on one line, time below, so Buyer / Page / Phone get the width */
.data-table td.cell-when .when-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}
.data-table td.cell-when .when-date,
.data-table td.cell-when .when-time {
  white-space: nowrap;
}
.data-table td.cell-when .when-time {
  font-size: 12px;
  color: var(--subtle);
}

/* Settings: icons beside contact field labels */
label.label-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bg-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bg-color-row input[type="color"] {
  width: 44px;
  height: 40px;
  min-width: 44px;
  flex: 0 0 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.bg-color-row #bg_color {
  flex: 0 0 auto;
  width: auto;
  field-sizing: content;
  min-width: 9ch;
  max-width: 100%;
}
/* Font style picker (page editor): a dropdown whose options show in their own font */
.fs-pick {
  position: relative;
}
.fs-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.fs-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.fs-trigger:focus-visible,
.fs-pick.is-open .fs-trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.fs-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.3;
}
.fs-tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}
.fs-trigger > i {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.fs-pick.is-open .fs-trigger > i {
  transform: rotate(180deg);
}
.fs-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(340px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
  outline: none;
}
.fs-pick.opens-up .fs-list {
  top: auto;
  bottom: calc(100% + 6px);
}
.fs-group {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: 0 -6px;
  padding: 8px 14px 4px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fs-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--fg);
  cursor: pointer;
}
.fs-opt.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.fs-opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.fs-opt[aria-selected="true"]::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  font-size: 12px;
  margin-left: auto;
  color: var(--accent);
}
.fs-opt.fs-reset {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-height: 40px;
}
.fs-opt.fs-reset i {
  font-size: 12px;
}
@media (hover: hover) {
  .fs-opt:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}

/* Team: cards stack with one card gap (Invite staff, Team members, Pending invites). */
.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.team-layout > .card {
  margin: 0;
  min-width: 0;
}
/* Phones (tables shown as stacked rows): long email addresses wrap inside the card instead of being cut off. */
@media (max-width: 820px) {
  .team-layout .data-table td[data-label="Email"] {
    overflow-wrap: anywhere;
  }
}
/* Wider screens (real tables): a very long email is shortened with "..." (full address on hover),
   so the Remove and Revoke buttons stay inside the card. Normal emails show in full. */
@media (min-width: 821px) {
  .team-layout .data-table td[data-label="Email"] {
    width: 100%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-layout .data-table td[data-label="Expires"] {
    min-width: 150px;
  }
}
/* Team: wide desktop layout with the invite form beside the lists. The invite card spans both rows;
   the second row takes any extra height, so the two lists keep the same gap as the columns.
   Below 1200px the cards stack, so the lists get the full width. */
@media (min-width: 1200px) {
  .wrap:has(.team-layout) {
    max-width: 1080px;
  }
  .team-layout {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    row-gap: 28px;
    align-items: start;
  }
  .team-layout > .team-invite {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 16px;
  }
  .team-layout > .team-members,
  .team-layout > .team-pending {
    grid-column: 2;
  }
}
label.label-icon > i {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* Settings: Change logo and Remove on one line */
.store-logo-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.store-logo-btns > .store-logo-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Admin Accounts: status badge sits next to the store name on phones */
.admin-accounts-table .acct-status-inline {
  display: none;
}
@media (max-width: 820px) {
  .admin-accounts-table td {
    overflow-wrap: break-word;
  }
  .admin-accounts-table td > .tag {
    justify-self: start;
    width: auto;
    max-width: 100%;
  }
  .admin-accounts-table td.cell-role {
    min-width: 0;
    white-space: normal;
  }
  .admin-accounts-table td.cell-status {
    display: none;
  }
  .admin-accounts-table .acct-store-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
  }
  .admin-accounts-table .acct-store-name {
    min-width: 0;
  }
  .admin-accounts-table .acct-status-inline {
    display: inline-flex;
  }
  /* Plan select sits right after the Actions label, not pushed to the far edge */
  .admin-accounts-table td.row-actions-cell .row-actions {
    justify-content: flex-start;
  }
  /* Three-dot menu: top-right corner of the card, flush with the content edge (no sideways scroll) */
  .admin-accounts-table tr:has(.row-menu) {
    padding-right: 48px;
  }
  .data-table td.row-menu-cell {
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    width: auto;
    white-space: normal;
    padding: 0;
    line-height: 0;
  }
  .data-table td.row-menu-cell .row-menu-list {
    left: auto;
    right: 0;
  }
}

/* ===== 20261007n ===== */
/* Seller Orders on phones: no sideways scroll; long values (When, status date, email, note) wrap inside the card */
@media (max-width: 820px) {
  .orders-table td {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .orders-table td:not(.row-actions-cell) > * {
    min-width: 0;
    max-width: 100%;
  }
  .orders-table td.cell-when,
  .orders-table .phone-num,
  .orders-table .status-cell .status-when {
    white-space: normal;
  }
}

/* ===== 20261007o ===== */
/* Admin Accounts filter pills: all four on one line on small phones (360px and up) */
@media (max-width: 480px) {
  .admin-status-filter {
    gap: 5px;
  }
  .admin-status-filter .btn.sm {
    min-height: 32px;
    height: 32px;
    padding: 0 7px;
    font-size: 12px;
  }
}

/* ===== 20261007p ===== */
/* Seller Orders: Customer column (Old / New) replaces the Repeat tag beside the buyer name */
.orders-table .tag.customer-tag {
  margin-left: 0;
  white-space: nowrap;
  justify-self: start;
  width: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

/* ===== 20261007q ===== */
/* Seller Orders on desktop: fit inside the card with no inner horizontal scroll (1024px and up with the sidebar) */
@media (min-width: 821px) {
  .orders-table th,
  .orders-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .orders-table td[data-label="Email"] {
    overflow-wrap: break-word;
    max-width: 180px;
  }
}
@media (min-width: 821px) and (max-width: 1199px) {
  .orders-table th,
  .orders-table td {
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media (min-width: 821px) and (max-width: 1079px) {
  .orders-table td[data-label="Phone"] {
    min-width: 72px;
  }
  .orders-table td[data-label="Phone"] .phone-num {
    white-space: normal;
    overflow-wrap: break-word;
  }
}
@media (min-width: 1280px) {
  .orders-table td[data-label="Email"] {
    min-width: 150px;
  }
}

/* ===== 20261007r ===== */
/* Seller Orders: each order (with its buyer note) is one unit; Customer shows Old / New as plain text, Watch tag beside Old */
.orders-table .customer-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.orders-table .customer-cell .tag.watch-tag {
  margin-left: 0;
}
.orders-table td.order-note {
  overflow-wrap: break-word;
}
.orders-table .order-note-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
@media (min-width: 821px) {
  .orders-table tbody.order-group tr:last-child td {
    border-bottom: 1px solid var(--line);
  }
  .orders-table tbody.order-group:last-child tr:last-child td {
    border-bottom: 0;
  }
  .orders-table tbody.has-note tr:first-child td {
    border-bottom: 0;
    padding-bottom: 6px;
  }
  .orders-table td.order-note {
    padding-top: 0;
    padding-bottom: 14px;
    padding-left: 22px;
  }
}
@media (max-width: 820px) {
  .card:has(.orders-table) {
    padding-left: 12px;
    padding-right: 12px;
  }
  .orders-table tbody.order-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2px 12px;
    margin-bottom: 12px;
  }
  .orders-table tbody.order-group:last-child {
    margin-bottom: 0;
  }
  .orders-table tbody.order-group tr {
    border-bottom: 0;
  }
  .orders-table tbody.has-note tr:first-child {
    padding-bottom: 4px;
  }
  .orders-table tr.order-note-row {
    padding-top: 0;
    padding-bottom: 12px;
  }
  .orders-table .order-note-label {
    display: none;
  }
}

/* ===== 20261007s ===== */
/* Page editor, Order form: per-field wording, quantity options and pay-on-delivery answers */
.editor .of-intro {
  margin: -4px 0 14px;
}
.editor .of-fields {
  display: grid;
  gap: 12px;
}
.editor .of-field {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px 0;
  min-width: 0;
}
.editor .of-field[hidden] {
  display: none !important;
}
.editor .of-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.editor .of-field-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.editor .of-field-head select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.editor .of-field-body[hidden] {
  display: none;
}
.editor .of-field-body .field,
.editor .of-field-body .editor-pair .field {
  margin: 0 0 14px;
}
.editor .of-field-body .field[hidden] {
  display: none;
}
.editor .of-field-body .editor-pair[hidden] {
  display: none;
}
.editor .of-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.editor .of-choice-label {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 650;
  color: var(--fg);
}
.editor .of-choice .check {
  margin: 0;
}
.editor .of-tight {
  margin: -6px 0 14px;
}
.editor .hint-line.is-warn {
  color: var(--danger);
}
.editor .of-total {
  margin: 16px 0 0;
}

/* Seller Orders: buyer's pay-on-delivery answer under Payment */
.orders-table .pay-cell {
  display: block;
}
.orders-table .pay-ready {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* ===== 20261007t ===== */
/* Row three-dot menus: text wraps before the button instead of running under it */
.data-table th.col-menu,
.data-table th.col-open {
  position: relative;
}
@media (max-width: 820px) {
  /* Pages: reserve the button width (36px) plus a 12px gap on every line of the row */
  .list-structured > .list-row.pages-row {
    padding-right: 48px;
  }
  /* Orders: the button sits 8px in from the card edge, so reserve 8px + 36px + 8px gap */
  .orders-table tbody.order-group tr:has(.row-menu) {
    padding-right: 52px;
  }
}
@media (min-width: 821px) {
  /* Admin Accounts: a very long email wraps inside its column; min-width keeps ordinary emails on one line */
  .admin-accounts-table td.cell-email {
    overflow-wrap: break-word;
    min-width: 160px;
  }
}

/* ===== 20261007u ===== */
/* Pages and Dashboard: the live/draft pill flows inline right after the page title and wraps with it
   (the space in the markup plus a 4px margin gives the same gap as before).
   Words move whole to the next line; only a single word longer than the line breaks. */
.pages-row .list-row-titleline,
.dash-page-row .list-row-titleline {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.pages-row .list-row-titleline a.list-row-title,
.dash-page-row .list-row-titleline a.list-row-title {
  display: inline;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.pages-row .list-row-titleline .tag,
.dash-page-row .list-row-titleline .tag {
  display: inline-flex;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0 0 0 4px;
}
/* Seller Orders: Buyer, Page and City wrap at spaces only (no mid-word breaks); a single word longer than the line may break */
.orders-table td[data-label="Buyer"],
.orders-table td[data-label="Page"],
.orders-table td[data-label="City"] {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ===== 20261007v ===== */
/* Dashboard Live updates, Admin Pages and Admin Orders: words move whole to the next line; only a single word
   longer than the line breaks (very long words also get break points from h_wrap) */
.grid2 .data-table td[data-label="Buyer"],
.grid2 .data-table td[data-label="Page"],
.admin-pages-table td[data-label="Title"],
.admin-pages-table td[data-label="Store"],
.admin-orders-table td[data-label="Buyer"],
.admin-orders-table td[data-label="Page"] {
  overflow-wrap: break-word;
  word-break: normal;
}
/* Admin Orders: a long status (e.g. "Payment completed · Delivered") wraps onto two lines inside its pill
   instead of sticking out; padding trimmed by 1px so a one-line pill keeps its height */
.admin-orders-table td[data-label="Status"] .tag {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  padding-top: 4px;
  padding-bottom: 4px;
  max-width: 100%;
}
/* Admin Accounts and Admin Orders between 821px and 1199px: tighter cell padding so the table (and the three-dot
   menu) fits the card. Admin Accounts also: Joined shows the date above the time (the box is 9ch wide, so the
   line breaks only at the space, never inside the date), the Role pill may wrap onto two lines instead of
   reserving a fixed width, and Email reserves a little less while still keeping ordinary emails on one line */
@media (min-width: 821px) and (max-width: 1199px) {
  .admin-accounts-table th,
  .admin-accounts-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .admin-orders-table th,
  .admin-orders-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .admin-accounts-table td.cell-when {
    white-space: normal;
  }
  .admin-accounts-table td.cell-when .od-time {
    display: inline-block;
    width: 9ch;
    vertical-align: middle;
  }
  .admin-accounts-table th.col-role,
  .admin-accounts-table td.cell-role {
    min-width: 0;
    white-space: normal;
  }
  .admin-accounts-table td.cell-role .tag {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .admin-accounts-table td.cell-email {
    min-width: 142px;
  }
}
/* Seller Orders and Dashboard Live updates from 1200px: slightly tighter cells so long whole words fit without inner scroll */
@media (min-width: 1200px) {
  .orders-table th,
  .orders-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .grid2 .data-table th,
  .grid2 .data-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 1280px) {
  .orders-table td[data-label="Email"] {
    min-width: 140px;
  }
}
/* Seller Orders on phones: the buyer name wraps like normal text, so a single word wider than the column
   (e.g. a long surname at 360px) breaks instead of running toward the three-dot button */
@media (max-width: 820px) {
  .orders-table td[data-label="Buyer"] .buyer-flags {
    display: block;
  }
}

/* ===== 20261007w ===== */
/* Seller Orders between 821px and 1199px: eleven columns share very little width, so here a word may break inside
   when it is wider than its column (scrolling inside the card would be worse). Breaks still happen at spaces first,
   emails break at their @ and dots first (h_email), and the minimum widths keep ordinary words such as
   "Smart Blender" or "Kofi Owusu" whole. */
@media (min-width: 821px) and (max-width: 1199px) {
  .orders-table td[data-label="Buyer"],
  .orders-table td[data-label="Page"],
  .orders-table td[data-label="City"],
  .orders-table td[data-label="Email"],
  .orders-table td[data-label="Phone"] .phone-num {
    overflow-wrap: anywhere;
  }
  /* 4px side padding (was 5px) leaves room for the minimum widths below */
  .orders-table th,
  .orders-table td {
    padding-left: 4px;
    padding-right: 4px;
  }
  .orders-table td[data-label="Buyer"] {
    min-width: 58px;
  }
  .orders-table td[data-label="Page"],
  .orders-table td[data-label="City"] {
    min-width: 63px;
  }
  /* The When date may wrap at its spaces (7 Oct / 2026), which leaves room for an ordinary email to break only at
     its @ and dots */
  .orders-table td.cell-when .when-date {
    white-space: normal;
  }
  .orders-table td[data-label="Email"] {
    min-width: 74px;
  }
}
/* Where the card is wide enough (no sidebar below 900px; 1056px and up beside it), a ten-digit phone number stays
   whole; between 900px and 1055px it may break, as before */
@media (min-width: 821px) and (max-width: 899px),
  (min-width: 1056px) and (max-width: 1079px) {
  .orders-table td[data-label="Phone"] {
    min-width: 96px;
  }
}

/* ===== 20261010a arrow inset, smaller boxes and circles ===== */
.select-fa {
  width: max-content;
  max-width: 100%;
}
.select-fa > select,
.editor .of-field-head select,
.editor .of-field-head .select-fa > select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  field-sizing: content;
  padding-right: 1.9rem;
}
.select-fa > .fa-chevron-down,
.select-fa-compact > .fa-chevron-down {
  right: 0.7rem;
  font-size: 0.85rem;
}
input[type="checkbox"],
input[type="radio"],
.check input,
.editor .check input,
.editor .of-choice .check input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  margin: 0;
  transform: none;
}
.check,
.editor .check,
.editor .of-choice .check {
  gap: 6px;
}

/* Admin error log: readable in light and dark */
.admin-error-log {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--canvas);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
html[data-theme="dark"] .admin-error-log {
  background: #12161c;
  color: #e8eef4;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Compact plan select: field-sizing ignored the padding, so the arrow sat on the word */
.select-fa-compact > select.compact {
  field-sizing: fixed;
  width: auto;
  min-width: 72px;
  padding: 0 26px 0 10px;
}
.select-fa-compact > .fa-chevron-down {
  right: 8px;
  top: 50%;
}

/* Checkboxes and radios: drawn by us (not the phone's native control) so they are
   the same 14px on every device, with a 6px gap from their label text. */
input[type="checkbox"],
input[type="radio"],
.check input[type="checkbox"],
.check input[type="radio"],
.editor .check input,
.editor .of-choice .check input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  min-width: 14px;
  max-width: 14px;
  min-height: 14px;
  max-height: 14px;
  flex: 0 0 14px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  zoom: 1;
  transform: none;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  border: 1.5px solid #8794a5;
  border-radius: 4px;
  background: #fff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}
input[type="radio"],
.editor .of-choice .check input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:checked {
  background-color: #0f2744;
  border-color: #0f2744;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 10px 10px;
}
input[type="radio"]:checked {
  border-color: #0f2744;
  background-image: radial-gradient(circle, #0f2744 0 3px, transparent 3.5px);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #c5d4e6;
  outline-offset: 2px;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  background-color: #0c1117;
  border-color: #7d8a99;
}
html[data-theme="dark"] input[type="checkbox"]:checked {
  background-color: #e8eef4;
  border-color: #e8eef4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230f2744' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
html[data-theme="dark"] input[type="radio"]:checked {
  border-color: #e8eef4;
  background-image: radial-gradient(circle, #e8eef4 0 3px, transparent 3.5px);
}
.check,
.editor .check,
.editor .of-choice .check {
  gap: 6px;
}

/* Settings, profile, billing, pages and reviews: use the desktop width with a tidy grid. */
@media (min-width: 1000px) {
  .wrap:has(#store-settings-form),
  .wrap:has(.profile-form),
  .wrap:has(.plan-grid),
  .wrap:has(.pages-status-filter),
  .wrap:has(.reviews-toolbar),
  .wrap:has(.pricing-grid) {
    max-width: 1080px;
  }
  #store-settings-form,
  .profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    align-items: start;
  }
  #store-settings-form > .field {
    margin-bottom: 22px;
  }
  #store-settings-form > .form-actions,
  .profile-form > .profile-avatar-row,
  .profile-form > .profile-geo,
  .profile-form > .form-actions,
  .profile-form > .field:has(#address_line) {
    grid-column: 1 / -1;
  }
}

/* Keep the selected tick and dot visible even where a more specific rule resets the background. */
input[type="radio"]:checked {
  background-image: radial-gradient(
    circle,
    #0f2744 0 3px,
    transparent 3.5px
  ) !important;
  border-color: #0f2744 !important;
}
html[data-theme="dark"] input[type="radio"]:checked {
  background-image: radial-gradient(
    circle,
    #e8eef4 0 3px,
    transparent 3.5px
  ) !important;
  border-color: #e8eef4 !important;
}
/* Dark mode: keep the radio fill dark (a more specific light rule sets #fff) so the light selected dot stays visible. */
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] .editor .of-choice .check input[type="radio"] {
  background-color: #0c1117 !important;
}

/* Pricing: wide like Billing on any screen wider than a phone. */
.legal-wrap:has(.pricing-grid) {
  max-width: 1080px;
}
/* ===== 20261014k Homepage showcase: sample pages in phone frames (pure HTML/CSS, demo products) ===== */
.home-showcase {
  width: 100%;
  max-width: 1120px;
  margin: 8px auto 40px;
  padding: 0 24px;
  box-sizing: border-box;
}
.hs-head {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}
.hs-head h2.display {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.15;
  margin: 10px 0 10px;
}
.hs-head .muted {
  font-size: 16px;
  margin: 0;
}
.hs-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.hs-item {
  margin: 0;
  min-width: 0;
}
.hs-item:nth-child(2),
.hs-item:nth-child(4) {
  margin-top: 36px;
}
.hs-phone {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  aspect-ratio: 9 / 18.5;
  background: #0d0f13;
  border-radius: 34px;
  padding: 9px;
  box-sizing: border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 28px 50px -22px rgba(15, 39, 68, 0.55),
    0 10px 22px -12px rgba(15, 39, 68, 0.35);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.hs-item:hover .hs-phone {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 36px 60px -24px rgba(15, 39, 68, 0.6),
    0 12px 24px -12px rgba(15, 39, 68, 0.35);
}
.hs-notch {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 30%;
  height: 16px;
  transform: translateX(-50%);
  background: #0d0f13;
  border-radius: 999px;
  z-index: 2;
}
.hs-screen {
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--hs-bg);
  color: var(--hs-fg);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
}
.hs-banner {
  padding: 30px 10px 7px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--hs-accent);
  color: var(--hs-accent-ink);
}
.hs-body {
  flex: 1;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  min-height: 0;
}
.hs-pill {
  align-self: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--hs-accent);
  color: var(--hs-accent2);
}
.hs-title {
  margin: 0;
  font-family: var(--hs-display);
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
  color: var(--hs-fg);
}
.hs-title span {
  display: block;
  color: var(--hs-accent2);
}
.hs-tag {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--hs-muted);
}
.hs-art {
  flex: 1 1 auto;
  min-height: 64px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--hs-art);
  font-size: 38px;
  color: var(--hs-art-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hs-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
.hs-price b {
  font-size: 19px;
  font-weight: 800;
  color: var(--hs-fg);
}
.hs-price s {
  font-size: 10px;
  color: var(--hs-muted);
}
.hs-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  text-align: left;
}
.hs-feats li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  padding: 6px 8px;
  border-radius: 9px;
  background: var(--hs-card);
  color: var(--hs-fg);
  border: 1px solid var(--hs-line);
}
.hs-feats i {
  color: var(--hs-accent2);
  width: 12px;
  text-align: center;
}
.hs-form {
  display: grid;
  gap: 5px;
}
.hs-form span {
  display: block;
  height: 18px;
  border-radius: 7px;
  background: var(--hs-card);
  border: 1px solid var(--hs-line);
}
.hs-btn {
  display: block;
  padding: 9px 8px;
  border-radius: var(--hs-btn-radius, 10px);
  background: var(--hs-accent);
  color: var(--hs-accent-ink);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 16px -10px var(--hs-accent);
}
.hs-item figcaption {
  margin-top: 16px;
  text-align: center;
  display: grid;
  gap: 2px;
}
.hs-item figcaption b {
  font-size: 15px;
  color: var(--fg);
}
.hs-item figcaption span {
  font-size: 13px;
  color: var(--muted);
}
.hs-gold {
  --hs-bg: linear-gradient(180deg, #16130d, #0d0b08);
  --hs-fg: #f7f1e3;
  --hs-muted: #cfc4ad;
  --hs-accent: #d9b44a;
  --hs-accent2: #e8c766;
  --hs-accent-ink: #1a1408;
  --hs-card: rgba(255, 255, 255, 0.05);
  --hs-line: rgba(217, 180, 74, 0.28);
  --hs-art: radial-gradient(circle at 50% 40%, #5a4618 0, #231b0b 70%);
  --hs-art-ink: #f1d27a;
  --hs-display: Georgia, "Times New Roman", serif;
  --hs-btn-radius: 999px;
}
.hs-blush {
  --hs-bg: linear-gradient(180deg, #fff4f6, #fde4ea);
  --hs-fg: #4a1f30;
  --hs-muted: #8a5a6b;
  --hs-accent: #c2477a;
  --hs-accent2: #b23b6c;
  --hs-accent-ink: #fff;
  --hs-card: #ffffff;
  --hs-line: #f6cbd8;
  --hs-art: radial-gradient(circle at 50% 35%, #ffd3e0 0, #f4a6c0 75%);
  --hs-art-ink: #fff;
  --hs-display: Georgia, "Times New Roman", serif;
  --hs-btn-radius: 999px;
}
.hs-volt {
  --hs-bg: linear-gradient(180deg, #0a0f1a, #05070c);
  --hs-fg: #eaf6ff;
  --hs-muted: #9fb2c6;
  --hs-accent: #39e58c;
  --hs-accent2: #4ff0a0;
  --hs-accent-ink: #04140b;
  --hs-card: rgba(57, 229, 140, 0.06);
  --hs-line: rgba(57, 229, 140, 0.25);
  --hs-art: linear-gradient(135deg, #0f2a3f 0, #123d2f 100%);
  --hs-art-ink: #4ff0a0;
  --hs-display: var(--font);
  --hs-btn-radius: 8px;
}
.hs-fresh {
  --hs-bg: linear-gradient(180deg, #fbf7ec, #f3ecd9);
  --hs-fg: #23361f;
  --hs-muted: #5f6f55;
  --hs-accent: #2f7d3b;
  --hs-accent2: #2f7d3b;
  --hs-accent-ink: #fff;
  --hs-card: #ffffff;
  --hs-line: #e2d8bd;
  --hs-art: radial-gradient(circle at 50% 40%, #e4efd3 0, #b9d29a 80%);
  --hs-art-ink: #2f5d2a;
  --hs-display: Georgia, "Times New Roman", serif;
  --hs-btn-radius: 12px;
}
.hs-volt .hs-title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hs-cta {
  margin-top: 34px;
  text-align: center;
}
.hs-cta .btn {
  gap: 8px;
}
.hs-cta .muted {
  margin: 12px 0 0;
  font-size: 14px;
}
html[data-theme="dark"] .hs-phone {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 50px -22px rgba(0, 0, 0, 0.8);
}
@media (max-width: 899px) {
  .hs-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  .hs-item:nth-child(4) {
    margin-top: 0;
  }
  .hs-item:nth-child(3) {
    margin-top: -36px;
  }
}
@media (max-width: 599px) {
  .home-showcase {
    padding: 0;
  }
  .hs-head {
    padding: 0 16px;
  }
  .hs-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 6px 16px 18px;
    scrollbar-width: none;
  }
  .hs-row::-webkit-scrollbar {
    display: none;
  }
  .hs-item,
  .hs-item:nth-child(n) {
    flex: 0 0 68%;
    margin-top: 0;
    scroll-snap-align: center;
  }
  .hs-cta {
    margin-top: 18px;
    padding: 0 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-phone {
    transition: none;
  }
  .hs-item:hover .hs-phone {
    transform: none;
  }
}
/* r31: Pages list stock and page editor FAQ rows. */
.list-row-submeta .meta-stock {
  white-space: nowrap;
  max-width: 100%;
}
.list-row-submeta .meta-stock-val {
  white-space: normal;
  overflow-wrap: anywhere;
}
.list-row-submeta .meta-stock-val.is-out {
  color: #b42318;
  font-weight: 600;
}
.list-row-submeta .meta-stock-val.is-low {
  color: #b45309;
  font-weight: 600;
}
.list-row-submeta .meta-stock-val.is-unl {
  color: #15803d;
  font-weight: 600;
}
html[data-theme="dark"] .list-row-submeta .meta-stock-val.is-out {
  color: #f87171;
}
html[data-theme="dark"] .list-row-submeta .meta-stock-val.is-low {
  color: #fbbf24;
}
html[data-theme="dark"] .list-row-submeta .meta-stock-val.is-unl {
  color: #4ade80;
}
.faq-edit-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.faq-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.faq-edit-num {
  font-weight: 600;
}
.faq-edit-btns {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.faq-edit-btns .btn:disabled {
  opacity: 0.4;
  cursor: default;
}
#faq-add[hidden] {
  display: none;
}
.faq-edit-item .od-grow {
  resize: none;
  overflow: hidden;
  display: block;
}
.faq-edit-item .faq-q {
  min-height: 46px;
}
.faq-edit-item .faq-a {
  min-height: 6.5em;
}
/* 20261016f Account settings: Change password card. A readable width on wide screens, full width on phones. */
.password-card .password-form {
  max-width: 520px;
}
.password-card > .muted {
  margin: 0;
}
/* Page editor: payment settings shown read-only to staff. */
.checkout-locked select:disabled,
.checkout-locked input[readonly] {
  opacity: 0.65;
  cursor: not-allowed;
}
/* 20261019a Select chevron: 16px from the right edge, with room so the text never runs under it. */
.select-fa:not(.select-fa-compact) > .fa-chevron-down {
  right: 16px;
}
.select-fa:not(.select-fa-compact) > select,
.editor .of-field-head .select-fa:not(.select-fa-compact) > select {
  padding-right: 40px;
}
/* 20261022a Select option list: side padding so option text never touches the popup border. */
select option {
  padding: 4px 16px 4px 10px;
}
/* 20261022b Select popup room: Chrome on Windows ignores option padding and opens the list only as wide as
   the closed select or the widest option text. field-sizing: content sized the select to the chosen option,
   so a longer option ran into the popup edge. Size to the widest option instead (compact selects unchanged). */
.select-fa:not(.select-fa-compact) > select,
.editor .of-field-head .select-fa:not(.select-fa-compact) > select {
  field-sizing: fixed;
}
/* 20261022e Admin Accounts plan select: one width (fits Starter), left under the Actions header, room before the
   chevron, chevron level with the text. The shared .data-table .row-actions select.compact rule otherwise wins. */
.admin-accounts-table td.row-actions-cell .row-actions {
  justify-content: flex-start;
}
.admin-accounts-table td.row-actions-cell .select-fa-compact > select.compact {
  field-sizing: fixed;
  width: auto;
  padding: 0 28px 0 10px;
}
.admin-accounts-table td.row-actions-cell .select-fa-compact > .fa-chevron-down {
  top: calc(50% + 1px);
}
@media (min-width: 821px) {
  .admin-accounts-table td.row-actions-cell {
    padding-left: 8px;
  }
}
/* 20261019a Store settings on desktop: even rows. Contact numbers pair up, the WhatsApp greeting gets its own
   full-width row, then tracking IDs. Visual order only; phones keep the single column in page order. */
@media (min-width: 1000px) {
  #store-settings-form > .store-slug-field {
    order: 1;
  }
  #store-settings-form > .field:has(#notify_email) {
    order: 2;
  }
  #store-settings-form > .field:has(#whatsapp) {
    order: 3;
  }
  #store-settings-form > .field:has(#telegram) {
    order: 4;
  }
  #store-settings-form > .field:has(#call_phone) {
    order: 5;
  }
  #store-settings-form > .field:has(#payment_link) {
    order: 6;
  }
  #store-settings-form > .field:has(#wa_message) {
    order: 7;
    grid-column: 1 / -1;
  }
  #store-settings-form > .field:has(#meta_pixel) {
    order: 8;
  }
  #store-settings-form > .field:has(#tiktok_pixel) {
    order: 9;
  }
  #store-settings-form > .field:has(#google_tag) {
    order: 10;
  }
  #store-settings-form > .field:has(#custom_domain) {
    order: 11;
  }
  #store-settings-form > .form-actions {
    order: 12;
  }
}
/* 20261019a Page editor, Price card: when the fields sit side by side, Old price goes under Price
   (Price label | Old price). One column keeps Old price straight after Price. */
@container (min-width: 440px) {
  .editor .editor-pair:has(#old_price) > .field:has(#price_label) {
    order: -1;
  }
}

.public-nav a.btn,
.public-nav a.btn:visited {
  color: #ffffff;
  font-weight: 650;
}
.public-nav a.btn:hover,
.public-nav a.btn:focus-visible {
  background: #2b5c8a;
  color: #ffffff;
}
.public-nav a.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme="dark"] .public-nav a.btn,
html[data-theme="dark"] .public-nav a.btn:visited {
  background: #e8eef4;
  color: #0c1117;
}
html[data-theme="dark"] .public-nav a.btn:hover,
html[data-theme="dark"] .public-nav a.btn:focus-visible {
  background: #ffffff;
  color: #0c1117;
}
html[data-theme="dark"] .public-nav a.btn:focus-visible {
  outline-color: #9ec4e4;
}

[data-theme-toggle] .ico-sun,
[data-theme-toggle] .txt-sun {
  display: none;
}
html[data-theme="dark"] [data-theme-toggle] .ico-moon,
html[data-theme="dark"] [data-theme-toggle] .txt-moon {
  display: none;
}
html[data-theme="dark"] [data-theme-toggle] .ico-sun {
  display: inline-block;
}
html[data-theme="dark"] [data-theme-toggle] .txt-sun {
  display: inline;
}