/* GENERATED by tools/css/bundle.py from pages/marketplace.src.css -- do not edit.
   Edit the module under pages/marketplace/ and re-run the script. */

/* ---- pages/marketplace/theme.css ---- */
/* ── A creator's own look ────────────────────────────────────────────────────
 *
 * The page carries its palette in eight custom properties, written onto
 * `.mkt-page` by the template from the resolved `theme.colors` the server sent.
 * Everything below is plumbing: those eight are mapped onto the platform's
 * `--md-*` names *inside the creator's page only*, so the six hundred lines of
 * block CSS that already existed pick up a creator's palette without being
 * rewritten, and nothing outside `.mkt-page` is affected.
 *
 * That is also why a creator page can be black while the rest of NEBians is
 * white, and why a dark page stays dark for a visitor whose app is in light
 * mode: the palette belongs to the page, not to the reader.
 *
 * Source of truth for the values: `api/creator_themes.py`.
 */

.mkt-page {
  /* fallbacks only -- the template writes the real values inline */
  --creator-accent: var(--md-primary);
  --creator-on-accent: #fff;
  --creator-bg: transparent;
  --creator-surface: var(--md-surface-container-lowest);
  --creator-ink: var(--md-on-surface);
  --creator-muted: var(--md-on-surface-variant);
  --creator-line: var(--md-outline-variant);
  --creator-soft: var(--md-surface-container);

  --md-primary: var(--creator-accent);
  --md-on-surface: var(--creator-ink);
  --md-on-surface-variant: var(--creator-muted);
  --md-outline-variant: var(--creator-line);
  --md-outline: var(--creator-line);
  --md-surface-container-lowest: var(--creator-surface);
  --md-surface-container: var(--creator-soft);
  --md-surface-container-high: var(--creator-soft);
  --md-surface-container-highest: var(--creator-soft);

  color: var(--creator-ink);
  background: var(--creator-bg);
  font-family: var(--creator-font, var(--md-font));
  border-radius: var(--md-radius-lg);
  /* The palette is the page's, so it has to reach the edges of the page and no
     further. `isolation` keeps the pattern layer's blend inside it. */
  isolation: isolate;
  position: relative;
  padding: 4px 0 28px;
}

/* A dark page inside a light app needs its own selection and scrollbar colours,
   or the browser picks them from the app and they vanish against the page. */
.mkt-scheme-dark ::selection { background: var(--creator-accent); color: var(--creator-on-accent); }
.mkt-scheme-dark { color-scheme: dark; }

/* ── Type ──────────────────────────────────────────────────────────────────
 * Five personalities, all from stacks already on the machine. A creator page
 * must never wait on a webfont to become readable -- a tutor in Kanchanpur on
 * 3G would be looking at nothing for two seconds.
 */
.mkt-font-sans    { --creator-font: var(--md-font); --creator-display-font: var(--md-font); --creator-title-tracking: -0.015em; }
.mkt-font-serif   { --creator-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
                    --creator-display-font: inherit; --creator-title-tracking: -0.005em; }
.mkt-font-display { --creator-font: var(--md-font); --creator-display-font: var(--md-font);
                    --creator-title-tracking: -0.04em; --creator-title-weight: 800; }
.mkt-font-mono    { --creator-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
                    --creator-display-font: inherit; --creator-title-tracking: -0.02em; }
.mkt-font-rounded { --creator-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, var(--md-font);
                    --creator-display-font: inherit; --creator-title-tracking: 0; }

.mkt-page h1, .mkt-page h2, .mkt-page h3, .mkt-page .mkt-block-head {
  font-family: var(--creator-display-font, inherit);
  letter-spacing: var(--creator-title-tracking, -0.01em);
  font-weight: var(--creator-title-weight, 700);
}
.mkt-font-display .mkt-hero-name { text-transform: none; line-height: 1.02; }
.mkt-font-mono .mkt-hero-kind,
.mkt-font-mono .mkt-block-sub { letter-spacing: 0.04em; }

/* ── Measure ───────────────────────────────────────────────────────────────
 * `narrow` is the reading width a long about-page wants; `wide` is what an
 * institute's grid of nine courses wants. Both are max-widths, so neither
 * changes anything on a phone -- the phone is already narrower than both.
 */
.mkt-width-narrow  { max-width: 42rem; margin-inline: auto; }
.mkt-width-standard { max-width: 60rem; margin-inline: auto; }
.mkt-width-wide    { max-width: 76rem; margin-inline: auto; }

/* ── Section surfaces ──────────────────────────────────────────────────────
 * How a section reads as an object. `flat` is the editorial default -- rules
 * between sections and no boxes at all.
 */
/* A section that has become a card needs inner padding and air around it; a
   section that is still just a run of the page does not. That is the whole
   difference between `flat` and the other three. */
.mkt-card-elevated .mkt-block,
.mkt-card-outlined .mkt-block,
.mkt-card-glass .mkt-block {
  padding: clamp(20px, 3.5vw, 30px) clamp(18px, 3vw, 26px);
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border-bottom: none;
}
.mkt-card-elevated .mkt-block + .mkt-block,
.mkt-card-outlined .mkt-block + .mkt-block,
.mkt-card-glass .mkt-block + .mkt-block { margin-top: 12px; }

.mkt-card-elevated .mkt-block,
.mkt-card-elevated .mkt-hero {
  background: var(--creator-surface);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .18);
}
.mkt-card-outlined .mkt-block,
.mkt-card-outlined .mkt-hero {
  background: var(--creator-surface);
  border: 1px solid var(--creator-line);
  box-shadow: none;
}
.mkt-card-flat .mkt-block,
.mkt-card-flat .mkt-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.mkt-card-flat .mkt-block + .mkt-block { border-top: 1px solid var(--creator-line); }
.mkt-card-glass .mkt-block,
.mkt-card-glass .mkt-hero {
  background: color-mix(in srgb, var(--creator-surface) 64%, transparent);
  border: 1px solid color-mix(in srgb, var(--creator-line) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* ── Corners ───────────────────────────────────────────────────────────────
 * `pill` is for the link-hub look, where every row is a lozenge.
 */
.mkt-radius-soft  { --mkt-block-radius: 6px; }
.mkt-radius-round { --mkt-block-radius: 20px; }
.mkt-radius-sharp { --mkt-block-radius: 2px; }
.mkt-radius-pill  { --mkt-block-radius: 28px; }
.mkt-radius-pill .md-btn,
.mkt-radius-pill .mkt-link-row { border-radius: 999px; }

/* ── Density ───────────────────────────────────────────────────────────────*/
.mkt-density-airy .mkt-block { padding: clamp(28px, 6vw, 56px) clamp(20px, 4vw, 40px); }
.mkt-density-airy .mkt-block + .mkt-block { margin-top: 18px; }

/* ── Texture ───────────────────────────────────────────────────────────────
 * Drawn with gradients, so there is nothing to download and nothing to wait
 * for. The layer is behind everything and never takes a pointer event.
 */
.mkt-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.mkt-page > * { position: relative; z-index: 1; }

.mkt-pattern-dots::before {
  background-image: radial-gradient(color-mix(in srgb, var(--creator-ink) 14%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .6;
}
.mkt-pattern-grid::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--creator-ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--creator-ink) 8%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.mkt-pattern-rays::before {
  background: repeating-conic-gradient(
    from 12deg at 80% -10%,
    color-mix(in srgb, var(--creator-accent) 10%, transparent) 0deg 6deg,
    transparent 6deg 18deg);
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
.mkt-pattern-waves::before {
  background-image: repeating-radial-gradient(
    circle at 50% 120%,
    transparent 0 38px,
    color-mix(in srgb, var(--creator-accent) 12%, transparent) 38px 40px);
  mask-image: linear-gradient(to bottom, #000, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 60%);
}
.mkt-pattern-glow::before {
  background:
    radial-gradient(60% 40% at 15% 0%, color-mix(in srgb, var(--creator-accent) 26%, transparent), transparent 70%),
    radial-gradient(50% 36% at 92% 8%, color-mix(in srgb, var(--creator-accent) 16%, transparent), transparent 72%);
}
.mkt-pattern-mesh::before {
  background:
    radial-gradient(42% 32% at 8% 4%, color-mix(in srgb, var(--creator-accent) 22%, transparent), transparent 68%),
    radial-gradient(38% 28% at 96% 18%, color-mix(in srgb, var(--creator-ink) 10%, transparent), transparent 70%),
    radial-gradient(46% 30% at 50% 100%, color-mix(in srgb, var(--creator-accent) 14%, transparent), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .mkt-pattern-glow::before,
  .mkt-pattern-mesh::before { transition: opacity .4s var(--md-motion-effects, ease); }
}

/* ── Per-section overrides ─────────────────────────────────────────────────
 * The three controls that give a page its rhythm: where a section sits, how
 * loud it is, how wide it runs.
 */
.mkt-align-center { text-align: center; }
.mkt-align-center .mkt-block-head,
.mkt-align-center .mkt-block-headrow { justify-content: center; text-align: center; }
.mkt-align-center .mkt-stat-grid,
.mkt-align-center .mkt-steps,
.mkt-align-center .mkt-links { justify-items: center; }
.mkt-align-center .mkt-block-body { margin-inline: auto; }

.mkt-tone-soft {
  background: var(--creator-soft) !important;
  border-color: transparent !important;
}
.mkt-tone-accent {
  background: var(--creator-accent) !important;
  color: var(--creator-on-accent) !important;
  border-color: transparent !important;
}
.mkt-tone-accent .mkt-block-head,
.mkt-tone-accent .mkt-block-sub,
.mkt-tone-accent .mkt-block-body,
.mkt-tone-accent p, .mkt-tone-accent h2, .mkt-tone-accent h3 { color: var(--creator-on-accent) !important; }
.mkt-tone-accent .md-btn-filled {
  background: var(--creator-on-accent);
  color: var(--creator-accent);
}
.mkt-tone-contrast {
  background: var(--creator-ink) !important;
  color: var(--creator-surface) !important;
  border-color: transparent !important;
}
.mkt-tone-contrast .mkt-block-head,
.mkt-tone-contrast .mkt-block-sub,
.mkt-tone-contrast .mkt-stat-value,
.mkt-tone-contrast .mkt-stat-label,
.mkt-tone-contrast p, .mkt-tone-contrast h2, .mkt-tone-contrast h3 { color: var(--creator-surface) !important; }

.mkt-bwidth-wide { margin-inline: clamp(-24px, -3vw, 0px); }
.mkt-bwidth-full {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  border-radius: 0 !important;
}

/* ---- pages/marketplace/price.css ---- */
/* ── The price setter ─────────────────────────────────────────────────────── */
.neb-price {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container-lowest);
  margin: 16px 0;
}

.neb-price-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.neb-price-icon {
  font-size: 22px;
  color: var(--md-on-surface-variant);
}

.neb-price-title {
  font-weight: 600;
  color: var(--md-on-surface);
}

.neb-price-sub,
.neb-price-hint,
.mkt-field-hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--md-on-surface-variant);
}

.neb-price-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container);
}

.neb-price-mode {
  cursor: pointer;
  border-radius: var(--md-radius-md);
}

.neb-price-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.neb-price-mode-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--md-radius-md);
  border: 1px solid transparent;
  transition: background var(--md-motion-effects), border-color var(--md-motion-effects);
}

.neb-price-mode-label .material-symbols-outlined {
  font-size: 20px;
  color: var(--md-on-surface-variant);
}

.neb-price-mode-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.neb-price-mode-text strong {
  font-size: 0.875rem;
  color: var(--md-on-surface);
}

.neb-price-mode-text small {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.neb-price-mode input:checked + .neb-price-mode-label {
  background: var(--md-surface-container-lowest);
  border-color: var(--md-outline-variant);
}

.neb-price-mode input:checked + .neb-price-mode-label .material-symbols-outlined,
.neb-price-mode input:checked + .neb-price-mode-label strong {
  color: var(--md-primary);
}

.neb-price-mode input:focus-visible + .neb-price-mode-label {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.neb-price-amount[hidden] {
  display: none;
}

.neb-price-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.neb-price-currency {
  font-weight: 600;
  color: var(--md-on-surface-variant);
}

.neb-price-input-field {
  flex: 1;
}

.neb-price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.neb-price-preset {
  font-variant-numeric: tabular-nums;
}

.neb-price-preset.is-chosen {
  border-color: var(--md-primary);
  color: var(--md-primary);
}

.neb-price-earnings {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.neb-price-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.neb-price-hint .material-symbols-outlined {
  font-size: 16px;
  margin-top: 1px;
}

.neb-price.is-unset .neb-price-earnings::after {
  content: 'Enter a price above Rs. 0';
  font-weight: 500;
  color: var(--md-on-surface-variant);
}

/* ---- pages/marketplace/furniture.css ---- */
/* ── Shared marketplace furniture ─────────────────────────────────────────── */
.mkt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}

.mkt-head-sub {
  margin: 6px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

.mkt-section {
  margin: 26px 0;
}

.mkt-section-head,
.mkt-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mkt-section-head h2,
.mkt-block-title {
  margin: 0;
}

.mkt-section-count,
.mkt-block-sub {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-section-link,
.mkt-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--md-primary);
  text-decoration: none;
}

.mkt-more {
  margin-top: 14px;
}

.mkt-section-link .material-symbols-outlined,
.mkt-more .material-symbols-outlined {
  font-size: 18px;
}

.mkt-subhead {
  margin: 20px 0 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
}

.mkt-quiet {
  margin: 8px 0;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

.mkt-chip-quiet {
  background: var(--md-surface-container);
  border-color: transparent;
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

.mkt-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--md-radius-full);
  background: var(--creator-accent, var(--md-primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.mkt-danger {
  color: var(--md-error) !important;
}

.mkt-toast {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-size: 0.8125rem;
}

.mkt-toast[hidden] {
  display: none;
}

.mkt-toast.is-error {
  background: var(--md-error-container);
  color: var(--md-on-error-container, var(--md-on-surface));
}

/* ---- pages/marketplace/shelf.css ---- */
/* ── The marketplace shelf inside the library ────────────────────────────── */
.mkt-shelf-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 6px;
}

.mkt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-full);
  background: var(--md-surface-container-lowest);
}

.mkt-search .material-symbols-outlined {
  font-size: 20px;
  color: var(--md-on-surface-variant);
}

.mkt-search input[type='search'] {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: 0.875rem;
  padding: 8px 0;
  min-width: 0;
}

.mkt-search input[type='search']:focus {
  outline: none;
}

.mkt-search-go {
  flex-shrink: 0;
}

.mkt-owner-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 14px 0 6px;
  border: 1px solid var(--md-outline-variant);
  border-left: 3px solid var(--creator-accent, var(--md-primary));
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container-lowest);
  flex-wrap: wrap;
}

.mkt-owner-icon {
  font-size: 26px;
  color: var(--creator-accent, var(--md-primary));
}

.mkt-owner-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  line-height: 1.4;
}

.mkt-owner-text strong {
  color: var(--md-on-surface);
}

.mkt-owner-text span {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

/* ---- pages/marketplace/cards.css ---- */
/* ── Creator cards ───────────────────────────────────────────────────────── */
.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.creator-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container-lowest);
  transition: border-color var(--md-motion-effects), transform var(--md-motion-spatial-fast);
}

.creator-card:hover {
  border-color: var(--creator-accent, var(--md-primary));
  text-decoration: none;
}

.creator-card:active {
  transform: scale(0.985);
}

.creator-card-cover {
  position: relative;
  height: 92px;
  background: var(--md-surface-container);
  overflow: hidden;
}

.creator-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-card-cover-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--creator-accent, var(--md-primary)), transparent 70%);
  opacity: 0.35;
}

.creator-card-kind,
.creator-card-featured {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--md-radius-full);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.creator-card-featured {
  left: auto;
  right: 10px;
  background: var(--creator-accent, var(--md-primary));
}

.creator-card-featured .material-symbols-outlined {
  font-size: 13px;
}

.creator-card-body {
  position: relative;
  padding: 26px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.creator-card-avatar {
  position: absolute;
  top: -26px;
  left: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--md-surface-container-lowest);
  background: var(--creator-accent, var(--md-primary));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.creator-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-card-avatar-letter {
  font-weight: 700;
  color: #fff;
  font-size: 1.25rem;
}

.creator-card-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--md-on-surface);
}

.creator-card-verified {
  font-size: 16px;
  color: var(--creator-accent, var(--md-primary));
}

.creator-card-tagline {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creator-card-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.creator-card-subject {
  padding: 2px 9px;
  border-radius: var(--md-radius-full);
  background: var(--md-surface-container);
  font-size: 0.6875rem;
  color: var(--md-on-surface-variant);
}

.creator-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.creator-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.creator-card-meta .material-symbols-outlined {
  font-size: 15px;
}

/* ── Course cards ────────────────────────────────────────────────────────── */
.mkt-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
}

.mkt-course {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container-lowest);
  transition: border-color var(--md-motion-effects);
}

.mkt-course:hover {
  border-color: var(--creator-accent, var(--md-primary));
  text-decoration: none;
}

.mkt-course-art {
  position: relative;
  height: 118px;
  overflow: hidden;
  background: var(--md-surface-container);
}

.mkt-course-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-course-price,
.mkt-course-draft {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: var(--md-radius-full);
  background: var(--creator-accent, var(--md-primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.mkt-course-free .mkt-course-price {
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
}

.mkt-course-draft {
  top: auto;
  bottom: 10px;
  left: 10px;
  right: auto;
  background: rgba(0, 0, 0, 0.6);
}

.mkt-course-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1;
}

.mkt-course-creator {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.mkt-course-title {
  font-weight: 600;
  color: var(--md-on-surface);
}

.mkt-course-summary {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mkt-course-tag {
  padding: 2px 9px;
  font-size: 0.6875rem;
  color: var(--md-on-surface-variant);
}

.mkt-course-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-course-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mkt-course-stat .material-symbols-outlined {
  font-size: 15px;
}

.mkt-course-owned {
  margin-left: auto;
  color: var(--creator-accent, var(--md-primary));
  font-weight: 600;
}

/* ---- pages/marketplace/blocks.css ---- */
/* ── Storefront blocks ─────────────────────────────────────────────────────
 * Layout and structure only. Colour, type, corner radius, density and texture
 * all arrive from theme.css via the creator's palette -- the rules here name
 * `--md-*` tokens and get re-pointed at the page owner's colours for free.
 */
.mkt-page {
  display: flex;
  flex-direction: column;
}

.mkt-page.mkt-density-compact .mkt-block { padding: 18px 0; }

.mkt-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  margin-bottom: 8px;
}

.mkt-hero-art {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.mkt-hero-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* The page carries the creator's hero choice as `mkt-hero-mode-*` rather than
   `mkt-hero-*`: the latter collided with `.mkt-hero-art` and `.mkt-hero-cover`
   below, so a page on the default "art" hero was itself getting
   `position: absolute; inset: 0; opacity: 0.5`. */
.mkt-hero-mode-plain .mkt-hero-art,
.mkt-hero-mode-plain .mkt-hero-cover {
  display: none;
}

/* "cover" means the creator's own picture instead of the generated drawing,
   not on top of it. */
.mkt-hero-mode-cover .mkt-hero-art {
  display: none;
}

.mkt-hero-inner {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-end;
  padding: 30px 24px 24px;
  flex-wrap: wrap;
}

.mkt-hero-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--creator-accent);
  border: 3px solid var(--md-surface-container-lowest);
  flex-shrink: 0;
}

.mkt-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-hero-avatar-letter {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
}

.mkt-hero-copy {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-hero-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creator-accent);
}

.mkt-hero-name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mkt-verified {
  font-size: 20px;
  color: var(--creator-accent);
}

.mkt-hero-tagline {
  margin: 0;
  max-width: 62ch;
  color: var(--md-on-surface-variant);
  line-height: 1.6;
}

.mkt-hero-meta,
.mkt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mkt-hero-place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-hero-place .material-symbols-outlined {
  font-size: 16px;
}

.mkt-hero-actions {
  margin-top: 6px;
}

.mkt-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
}

.mkt-hero-stats b {
  font-size: 1.0625rem;
  color: var(--creator-accent);
}

.mkt-hero-stats span {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  margin-left: 4px;
}

.mkt-block {
  padding: 26px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

.mkt-block:last-child {
  border-bottom: none;
}

.mkt-prose {
  max-width: 70ch;
  color: var(--md-on-surface);
  line-height: 1.7;
}

.mkt-prose p {
  margin: 0 0 10px;
}

.mkt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.mkt-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
}

.mkt-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-on-surface);
}

.mkt-stat-label {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.mkt-resource {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  text-decoration: none;
  color: inherit;
}

.mkt-resource:hover {
  border-color: var(--creator-accent);
  text-decoration: none;
}

.mkt-resource-title {
  font-weight: 600;
  color: var(--md-on-surface);
}

.mkt-resource-meta {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-resource-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}

.mkt-resource-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-resource-views .material-symbols-outlined {
  font-size: 14px;
}

.mkt-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mkt-post {
  padding: 16px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.mkt-post-pinned {
  border-left: 3px solid var(--creator-accent);
}

.mkt-post-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--creator-accent);
}

.mkt-post-pin .material-symbols-outlined {
  font-size: 14px;
}

.mkt-post-title {
  margin: 6px 0;
  font-size: 1rem;
}

.mkt-post-media {
  width: 100%;
  border-radius: var(--mkt-block-radius, var(--md-radius-md));
  margin-top: 10px;
}

.mkt-post-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--md-primary);
  text-decoration: none;
}

.mkt-post-link .material-symbols-outlined {
  font-size: 16px;
}

.mkt-post-time {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.mkt-showcase-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.mkt-showcase-item img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: var(--md-radius-md);
  margin-bottom: 6px;
}

.mkt-showcase-badge {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--md-radius-full);
  background: var(--creator-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
}

.mkt-showcase-title {
  font-weight: 600;
}

.mkt-showcase-sub {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-gallery {
  display: grid;
  grid-template-columns: repeat(var(--mkt-gallery-cols, 3), 1fr);
  gap: 10px;
}

.mkt-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--mkt-block-radius, var(--md-radius-md));
}

.mkt-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.mkt-quote {
  margin: 0;
  padding: 16px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.mkt-quote p {
  margin: 0 0 12px;
  line-height: 1.65;
}

.mkt-quote footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mkt-quote footer img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.mkt-quote footer span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mkt-quote footer small {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

.mkt-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-faq-item {
  padding: 12px 16px;
  border-radius: var(--mkt-block-radius, var(--md-radius-md));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.mkt-faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.mkt-schedule {
  display: flex;
  flex-direction: column;
}

.mkt-schedule-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: 0.875rem;
}

.mkt-schedule-when {
  color: var(--md-on-surface-variant);
}

.mkt-schedule-what {
  font-weight: 600;
  color: var(--md-on-surface);
}

.mkt-schedule-note {
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
}

.mkt-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--mkt-block-radius, var(--md-radius-md));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  text-decoration: none;
  color: inherit;
}

.mkt-link:hover {
  border-color: var(--creator-accent);
  text-decoration: none;
}

.mkt-link-go {
  margin-left: auto;
  font-size: 16px;
  color: var(--md-on-surface-variant);
}

.mkt-cta .mkt-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--creator-accent);
  background: var(--md-surface-container-lowest);
}

.mkt-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.mkt-contact-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--md-on-surface);
  text-decoration: none;
}

.mkt-contact-row .material-symbols-outlined {
  font-size: 18px;
  color: var(--creator-accent);
}

/* Label then value, the way the app's contact rows read -- a row that said only
   "Telegram" made the visitor click to find out the handle. */
.mkt-contact-label {
  min-width: 78px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--creator-accent);
}

.mkt-contact-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-layout-spotlight .mkt-hero-inner {
  padding: 46px 26px 30px;
}

.mkt-layout-grid .mkt-block {
  border-bottom: none;
}

.mkt-layout-grid .mkt-resource-grid,
.mkt-layout-grid .mkt-course-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ---- pages/marketplace/sections.css ---- */
/* ── Hero shapes ───────────────────────────────────────────────────────────
 *
 * Seven arrangements of the same four things: a picture, a name, a line of
 * copy, two buttons. The old page had one, and its generated artwork sat
 * *behind the text at half opacity*, which is why the name was hard to read on
 * a phone. Every shape below either scrims the art or keeps it out of the
 * text's way.
 */

/* A scrim under the copy, always. Text over an arbitrary creator-uploaded
   photo is unreadable often enough that "usually fine" is not good enough. */
.mkt-hero-mode-art .mkt-hero-inner::before,
.mkt-hero-mode-cover .mkt-hero-inner::before,
.mkt-hero-mode-banner .mkt-hero-inner::before,
.mkt-hero-mode-gradient .mkt-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--creator-surface) 96%, transparent) 0%,
    color-mix(in srgb, var(--creator-surface) 88%, transparent) 46%,
    color-mix(in srgb, var(--creator-surface) 52%, transparent) 100%);
}
.mkt-hero-inner > * { position: relative; z-index: 1; }

/* Plain: no picture at all, just the accent hairline at the top. */
.mkt-hero-mode-plain .mkt-hero {
  border-top: 3px solid var(--creator-accent);
}

/* Gradient: the accent washing out of the corner. No image to load. */
.mkt-hero-mode-gradient .mkt-hero-art,
.mkt-hero-mode-gradient .mkt-hero-cover { display: none; }
.mkt-hero-mode-gradient .mkt-hero {
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--creator-accent) 30%, transparent), transparent 62%),
    radial-gradient(70% 90% at 100% 0%, var(--creator-soft), transparent 70%),
    var(--creator-surface);
}

/* Centred: the link-in-bio shape. Avatar on top, everything stacked under it.
   This is the one that reads best on a phone, and it is the same on a laptop. */
.mkt-hero-mode-center .mkt-hero-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px 30px;
}
.mkt-hero-mode-center .mkt-hero-copy { align-items: center; min-width: 0; }
.mkt-hero-mode-center .mkt-hero-meta,
.mkt-hero-mode-center .mkt-hero-actions,
.mkt-hero-mode-center .mkt-hero-stats { justify-content: center; }
.mkt-hero-mode-center .mkt-hero-tagline { max-width: 48ch; }
.mkt-hero-mode-center .mkt-hero-avatar { width: 104px; height: 104px; }

/* Split: copy on the left, picture as a real column on the right rather than a
   wash behind the words. Collapses to stacked below 720px. */
.mkt-hero-mode-split .mkt-hero-art,
.mkt-hero-mode-split .mkt-hero-cover {
  position: static;
  inset: auto;
  opacity: 1;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: var(--mkt-block-radius, 20px);
}
.mkt-hero-mode-split .mkt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px;
  align-items: center;
  padding: 22px;
}
.mkt-hero-mode-split .mkt-hero-inner {
  order: -1;
  padding: 8px 0;
  flex-direction: column;
  align-items: flex-start;
}
.mkt-hero-mode-split .mkt-hero-avatar { width: 64px; height: 64px; }
.mkt-hero-mode-split .mkt-hero-art { grid-column: 2; }

/* Banner: a wide strip of picture, then the identity below it. The shape an
   institute wants -- the building photo is the point, and nothing sits on it. */
.mkt-hero-mode-banner .mkt-hero {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.mkt-hero-mode-banner .mkt-hero-art,
.mkt-hero-mode-banner .mkt-hero-cover {
  position: static;
  inset: auto;
  opacity: 1;
  width: 100%;
  height: clamp(120px, 26vw, 220px);
  border-radius: 0;
}
.mkt-hero-mode-banner .mkt-hero-inner::before { display: none; }
.mkt-hero-mode-banner .mkt-hero-inner { align-items: flex-end; padding: 0 24px 24px; }
/* The avatar laps onto the banner, the way a profile header does. */
.mkt-hero-mode-banner .mkt-hero-avatar { margin-top: -44px; }

@media (max-width: 720px) {
  .mkt-hero-mode-split .mkt-hero { grid-template-columns: 1fr; padding: 16px; }
  .mkt-hero-mode-split .mkt-hero-art,
  .mkt-hero-mode-split .mkt-hero-cover { grid-column: 1; min-height: 160px; }
  .mkt-hero-inner { padding: 22px 16px 20px; }
  .mkt-hero-avatar { width: 68px; height: 68px; }
  .mkt-hero-avatar-letter { font-size: 1.75rem; }
  .mkt-hero-mode-center .mkt-hero-avatar { width: 84px; height: 84px; }
  .mkt-hero-mode-banner .mkt-hero-inner { padding: 0 16px 18px; }
  .mkt-hero-mode-banner .mkt-hero-avatar { margin-top: -30px; }
  /* Full-width buttons in the hero: they are the page's one job on a phone. */
  .mkt-hero-actions { width: 100%; }
  .mkt-hero-actions .md-btn { flex: 1 1 140px; justify-content: center; }
}

/* ── Section headings ──────────────────────────────────────────────────────
 * Heading and its subtitle on one row when there is room, stacked when there
 * is not. Previously they were two siblings with no rule between them, so the
 * subtitle ran into the heading's baseline.
 */
.mkt-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.mkt-block-title { margin: 0; }
.mkt-block-sub {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  line-height: 1.5;
}
.mkt-block > .mkt-block-title { margin-bottom: 14px; }

/* An anchor target must not land under a sticky header. */
.mkt-block[id] { scroll-margin-top: 84px; }

/* ── Pricing ───────────────────────────────────────────────────────────────
 * The section a tutor actually needs and did not have: fee plans, side by
 * side, one of them marked. Features are one per line in the editor, so they
 * render as a list without the creator learning any syntax.
 */
.mkt-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  align-items: stretch;
}
.mkt-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}
/* One plan carries a badge; it is the one the creator wants picked. */
.mkt-plan-featured {
  border-color: var(--creator-accent);
  box-shadow: 0 0 0 1px var(--creator-accent) inset;
}
.mkt-plan-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--md-radius-full);
  background: var(--creator-accent);
  color: var(--creator-on-accent, #fff);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mkt-plan-name { font-weight: 700; font-size: 1.0625rem; }
.mkt-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.mkt-plan-amount {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--md-on-surface);
  line-height: 1.1;
}
.mkt-plan-period { font-size: 0.8125rem; color: var(--md-on-surface-variant); }
.mkt-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mkt-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
}
.mkt-plan-features .material-symbols-outlined {
  font-size: 18px;
  color: var(--creator-accent);
  flex-shrink: 0;
}
.mkt-plan .md-btn { margin-top: auto; justify-content: center; }

/* ── Video ─────────────────────────────────────────────────────────────────
 * An intro clip, held at 16:9 so the page does not jump when it loads. The
 * server turns a YouTube watch URL into an embed URL; anything else renders as
 * a link rather than an iframe we cannot vouch for.
 */
.mkt-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
}
.mkt-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Team ──────────────────────────────────────────────────────────────────*/
.mkt-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 14px;
}
.mkt-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 14px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}
.mkt-member-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--creator-soft);
}
.mkt-member-initial {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--creator-soft);
  color: var(--creator-accent);
  font-size: 1.5rem;
  font-weight: 700;
}
.mkt-member-name { font-weight: 650; }
.mkt-member-role { font-size: 0.8125rem; color: var(--creator-accent); font-weight: 600; }
.mkt-member-note { font-size: 0.8125rem; color: var(--md-on-surface-variant); line-height: 1.5; }

/* ── Logos ─────────────────────────────────────────────────────────────────
 * Schools taught at, boards affiliated with. Greyed until hovered, so a row of
 * mismatched logos does not shout over the creator's own colours.
 */
.mkt-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.mkt-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--md-on-surface-variant);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
}
.mkt-logo:hover { opacity: 1; filter: none; text-decoration: none; }
.mkt-logo img { height: 34px; width: auto; max-width: 140px; object-fit: contain; }

/* ── Timeline ──────────────────────────────────────────────────────────────
 * Milestones down a rule. Works for "since 2074" as well as for a course plan.
 */
.mkt-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 4px;
}
.mkt-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 4px 16px;
  padding: 0 0 22px 20px;
  border-left: 2px solid var(--md-outline-variant);
}
.mkt-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.mkt-tl-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--creator-accent);
  box-shadow: 0 0 0 3px var(--creator-surface);
}
.mkt-tl-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--creator-accent);
  letter-spacing: 0.02em;
}
.mkt-tl-title { font-weight: 650; }
.mkt-tl-note {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
  line-height: 1.55;
}

/* ── Steps ─────────────────────────────────────────────────────────────────
 * "How to join", numbered. The number is generated, so a creator reordering
 * steps never has to renumber anything.
 */
.mkt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
  counter-reset: mkt-step;
}
.mkt-step {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  counter-increment: mkt-step;
}
.mkt-step::before {
  content: counter(mkt-step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--creator-soft);
  color: var(--creator-accent);
  font-weight: 800;
  font-size: 0.9375rem;
}
.mkt-step-title { font-weight: 650; }
.mkt-step-note { font-size: 0.875rem; color: var(--md-on-surface-variant); line-height: 1.55; }

/* ── Pull quote ────────────────────────────────────────────────────────────
 * One line, big. A page needs somewhere for its best sentence to breathe.
 */
.mkt-pullquote {
  margin: 0;
  padding: 8px 0 8px 20px;
  border-left: 3px solid var(--creator-accent);
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--md-on-surface);
}
.mkt-pullquote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  font-style: normal;
  color: var(--md-on-surface-variant);
}
.mkt-align-center .mkt-pullquote {
  border-left: 0;
  padding-left: 0;
  max-width: 34ch;
}

/* ── Banner strip ──────────────────────────────────────────────────────────
 * The full-width announcement: admissions open, last date, one button.
 */
.mkt-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding: 22px clamp(18px, 4vw, 32px);
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  background: var(--creator-accent);
  color: var(--creator-on-accent, #fff);
}
.mkt-banner-copy { display: flex; flex-direction: column; gap: 4px; min-width: min(100%, 220px); }
.mkt-banner-title { margin: 0; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.mkt-banner-sub { margin: 0; opacity: 0.88; font-size: 0.9375rem; line-height: 1.5; }
.mkt-banner .md-btn {
  background: var(--creator-on-accent, #fff);
  color: var(--creator-accent);
  border: 0;
  flex-shrink: 0;
}

/* ── Rich text ─────────────────────────────────────────────────────────────
 * Prose with an optional picture beside it. The workhorse: any section a
 * creator can imagine that we did not build a type for.
 */
.mkt-rich {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.mkt-rich-media {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  object-fit: cover;
}
.mkt-rich:has(.mkt-rich-media) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
@media (max-width: 720px) {
  .mkt-rich:has(.mkt-rich-media) { grid-template-columns: minmax(0, 1fr); }
  .mkt-rich-media { grid-column: 1; grid-row: auto; }
}

/* ── Divider ───────────────────────────────────────────────────────────────*/
.mkt-block-divider {
  padding: 0;
  border-bottom: none;
}
.mkt-divider-rule {
  height: 1px;
  margin: 18px 0;
  border: 0;
  background: linear-gradient(to right, transparent, var(--md-outline-variant) 22%, var(--md-outline-variant) 78%, transparent);
}

/* ── Per-section column override ───────────────────────────────────────────
 * When a creator sets a column count on a section, it wins -- but only above
 * the phone breakpoint. Three columns on a 360px screen is not a layout.
 */
@media (min-width: 721px) {
  .mkt-cols-1 .mkt-pricing, .mkt-cols-1 .mkt-team, .mkt-cols-1 .mkt-steps,
  .mkt-cols-1 .mkt-showcase, .mkt-cols-1 .mkt-resource-grid,
  .mkt-cols-1 .mkt-testimonials, .mkt-cols-1 .mkt-course-grid { grid-template-columns: minmax(0, 1fr); }
  .mkt-cols-2 .mkt-pricing, .mkt-cols-2 .mkt-team, .mkt-cols-2 .mkt-steps,
  .mkt-cols-2 .mkt-showcase, .mkt-cols-2 .mkt-resource-grid,
  .mkt-cols-2 .mkt-testimonials, .mkt-cols-2 .mkt-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-cols-3 .mkt-pricing, .mkt-cols-3 .mkt-team, .mkt-cols-3 .mkt-steps,
  .mkt-cols-3 .mkt-showcase, .mkt-cols-3 .mkt-resource-grid,
  .mkt-cols-3 .mkt-testimonials, .mkt-cols-3 .mkt-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkt-cols-4 .mkt-pricing, .mkt-cols-4 .mkt-team, .mkt-cols-4 .mkt-steps,
  .mkt-cols-4 .mkt-showcase, .mkt-cols-4 .mkt-resource-grid,
  .mkt-cols-4 .mkt-testimonials, .mkt-cols-4 .mkt-course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A toned or full-bleed section needs its own inner padding -- the default
   sections have none because they sit directly on the page. */
.mkt-tone-soft, .mkt-tone-accent, .mkt-tone-contrast,
.mkt-bwidth-full {
  padding: clamp(20px, 4vw, 32px) clamp(18px, 4vw, 28px);
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  border-bottom: none;
}
.mkt-bwidth-full > * { max-width: 60rem; margin-inline: auto; }

/* ── Phone ─────────────────────────────────────────────────────────────────
 * Every grid on this page is `auto-fit`/`minmax`, so most of them already
 * collapse. What is left is the handful with fixed tracks.
 */
@media (max-width: 600px) {
  .mkt-gallery { grid-template-columns: repeat(min(var(--mkt-gallery-cols, 3), 2), 1fr); }
  .mkt-schedule-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .mkt-tl-item { grid-template-columns: 1fr; padding-left: 16px; }
  .mkt-tl-note { grid-column: 1; }
  .mkt-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .mkt-banner .md-btn { justify-content: center; }
  .mkt-block { padding: 20px 0; }
  .mkt-page.mkt-density-airy .mkt-block { padding: 26px 18px; }
}

/* ── Anchor aliases ────────────────────────────────────────────────────────
 * `#offerings` and `#contact` were the anchors before sections had ids of
 * their own, and they are baked into every hero button a creator has already
 * saved. A zero-size marker keeps them working without constraining what a
 * section may now be called.
 */
.mkt-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 84px;
}

/* A section whose content is already a self-contained card -- the banner strip
   -- must not be given a second box around it by the card style. */
.mkt-block-bare,
.mkt-card-elevated .mkt-block-bare,
.mkt-card-outlined .mkt-block-bare,
.mkt-card-glass .mkt-block-bare {
  padding: 14px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ---- pages/marketplace/course.css ---- */
/* ── Course page ─────────────────────────────────────────────────────────── */
.mkt-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0;
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-crumbs a {
  color: var(--md-on-surface-variant);
  text-decoration: none;
}

.mkt-crumbs a:hover {
  color: var(--md-on-surface);
}

.mkt-crumbs .material-symbols-outlined {
  font-size: 16px;
}

.mkt-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}

@media (max-width: 780px) {
  .mkt-course-hero {
    grid-template-columns: 1fr;
  }
}

.mkt-course-hero-art {
  position: relative;
  height: 220px;
  border-radius: var(--mkt-block-radius, var(--md-radius-lg));
  overflow: hidden;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
}

.mkt-course-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-course-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-course-lead {
  margin: 0;
  color: var(--md-on-surface-variant);
  line-height: 1.6;
}

.mkt-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mkt-course-teacher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--md-radius-full);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
}

.mkt-course-teacher:hover {
  border-color: var(--creator-accent);
  text-decoration: none;
}

.mkt-course-teacher-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--creator-accent);
  color: #fff;
  font-weight: 700;
}

.mkt-course-teacher span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mkt-course-teacher small {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-course-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .mkt-course-body-grid {
    grid-template-columns: 1fr;
  }
}

.mkt-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mkt-includes .material-symbols-outlined {
  font-size: 18px;
  color: var(--creator-accent);
}

.mkt-buy {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.mkt-buy-price {
  display: flex;
  flex-direction: column;
}

.mkt-buy-price strong {
  font-size: 1.75rem;
}

.mkt-buy-price small {
  color: var(--md-on-surface-variant);
}

.mkt-buy-state {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container);
}

.mkt-buy-state-ok {
  border: 1px solid var(--creator-accent);
}

.mkt-buy-state-bad {
  background: var(--md-error-container);
}

.mkt-buy-state span {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.mkt-buy-state small {
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
}

.mkt-buy-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

.mkt-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: var(--md-radius-md);
  background: #fff;
}

.mkt-qr img {
  width: 168px;
  height: 168px;
  object-fit: contain;
}

.mkt-qr span {
  font-size: 0.75rem;
  color: #333;
}

.mkt-buy-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mkt-buy-submit {
  margin-top: 10px;
}

.mkt-buy-fine {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-buy-fine .material-symbols-outlined {
  font-size: 15px;
}

.mkt-buy-help {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-buy-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--md-on-surface);
}

/* ---- pages/marketplace/studio.css ---- */
/* ── Studio ──────────────────────────────────────────────────────────────── */
.mkt-studio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 16px;
  flex-wrap: wrap;
}

.mkt-studio-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creator-accent);
}

.mkt-studio-head h1 {
  margin: 4px 0;
}

.mkt-studio-sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

.mkt-studio-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mkt-studio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.mkt-studio-stat {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: var(--md-radius-md);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.mkt-studio-stat strong {
  font-size: 1.125rem;
}

.mkt-studio-stat span {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-studio-rail {
  margin-bottom: 16px;
}

.mkt-tab-panel[hidden] {
  display: none;
}

.mkt-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 960px) {
  .mkt-studio-grid {
    grid-template-columns: 1fr;
  }
}

.mkt-studio-grid-courses {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.mkt-studio-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.mkt-card {
  padding: 18px;
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mkt-card h2 {
  margin: 0 0 6px;
}

.mkt-card .md-label {
  margin-top: 10px;
}

.mkt-card .md-input {
  width: 100%;
}

.mkt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 620px) {
  .mkt-grid-2 {
    grid-template-columns: 1fr;
  }
}

.mkt-slug-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mkt-slug-prefix {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.mkt-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mkt-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.875rem;
  cursor: pointer;
}

.mkt-accent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mkt-accent-row input[type='color'] {
  width: 46px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-sm);
  background: none;
}

.mkt-accent-row .md-input {
  flex: 1;
  min-width: 110px;
}

.mkt-accent-swatches {
  display: flex;
  gap: 6px;
}

.mkt-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--md-outline-variant);
  background: var(--s);
  cursor: pointer;
}

.mkt-save {
  margin-top: 16px;
  align-self: flex-start;
}

.mkt-block-builder-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.mkt-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-block-item {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container);
  overflow: hidden;
}

.mkt-block-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.mkt-block-item-head .md-btn {
  min-height: 30px;
  padding: 2px 8px;
}

.mkt-block-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
  background: var(--md-surface-container-lowest);
}

.mkt-block-item-body textarea {
  min-height: 74px;
}

.mkt-block-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mkt-block-list-row .mkt-list-remove {
  grid-column: 2;
  justify-self: end;
}

.mkt-block-item.is-collapsed .mkt-block-item-body {
  display: none;
}

/* A hidden section still edits normally; it just says, at a glance, that
   visitors are not seeing it. */
.mkt-block-item.is-hidden {
  border-style: dashed;
}

.mkt-add-block {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

.mkt-add-block .md-input {
  flex: 1;
}

.mkt-course-list,
.mkt-post-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.mkt-course-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container);
}

.mkt-course-row-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.mkt-course-row-main span {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-course-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.mkt-resource-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
}

.mkt-resource-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.mkt-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.mkt-earn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .mkt-earn-grid {
    grid-template-columns: 1fr;
  }
}

.mkt-wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.mkt-wallet > div {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container);
}

.mkt-wallet span {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-withdraw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--md-outline-variant);
}

.mkt-withdraw .md-btn {
  align-self: flex-start;
  margin-top: 10px;
}

.mkt-sales {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-sale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container);
}

.mkt-sale-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}

.mkt-sale-main span {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.mkt-sale-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}

.mkt-sale-amount small {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

.mkt-sale-status {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.mkt-sale-approved {
  color: #166534;
}

.mkt-sale-pending {
  color: #B45309;
}

.mkt-sale-rejected {
  color: var(--md-error);
}

@media (prefers-reduced-motion: reduce) {
  .creator-card,
  .mkt-course,
  .neb-price-mode-label {
    transition: none;
  }
}

/* ══ The rebuilt studio ══════════════════════════════════════════════════════
 * Template gallery, Look tab, live preview, section picker and the section
 * rows. Everything below is built phone-first: controls are at least 44px
 * tall, nothing depends on hover to be discoverable, and every grid is an
 * `auto-fit` so there is no breakpoint to forget.
 */

.mkt-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.mkt-card-head .mkt-seg {
  margin-top: 8px;
}

/* ── Template gallery ─────────────────────────────────────────────────────── */
.mkt-template-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 12px;
}

.mkt-template {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  text-align: left;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-lowest);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mkt-template:hover,
.mkt-template:focus-visible {
  border-color: var(--md-primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.mkt-template:disabled {
  opacity: 0.5;
  cursor: progress;
}

.mkt-template-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--md-on-surface);
}

.mkt-template-summary {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--md-on-surface-variant);
}

.mkt-template-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-on-surface-variant);
  opacity: 0.8;
}

/* A miniature of the page rather than a screenshot: it is painted from the
   template's own resolved palette, so it can never drift out of date, and it
   costs no image request. */
.mkt-template-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--md-radius-sm);
  overflow: hidden;
  margin-bottom: 7px;
  background: var(--t-bg, var(--t-surface));
  border: 1px solid var(--t-line);
  padding: 0 9px;
}

.mkt-tt-bar {
  display: block;
  height: 34%;
  margin: 0 -9px 7px;
  background: linear-gradient(135deg, var(--t-accent), color-mix(in srgb, var(--t-accent) 45%, var(--t-surface)));
}

.mkt-tt-dot {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--t-surface);
  border: 2px solid var(--t-bg, var(--t-surface));
  margin: -17px 0 6px;
  position: relative;
}

.mkt-tt-line {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--t-ink);
  opacity: 0.8;
  margin-bottom: 4px;
}

.mkt-tt-line-short {
  width: 56%;
  background: var(--t-muted);
  opacity: 0.55;
}

.mkt-tt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 7px;
}

.mkt-tt-grid i {
  display: block;
  height: 19px;
  border-radius: 3px;
  background: var(--t-soft);
  border: 1px solid var(--t-line);
}

/* Hero styles change the shape of the miniature, because the shape of the top
   of the page is most of what a creator is picking between. */
.mkt-tt-center { text-align: center; }
.mkt-tt-center .mkt-tt-dot { margin-left: auto; margin-right: auto; }
.mkt-tt-center .mkt-tt-line { margin-left: auto; margin-right: auto; width: 72%; }
.mkt-tt-center .mkt-tt-line-short { width: 44%; }

.mkt-tt-plain .mkt-tt-bar {
  height: 5px;
  margin-bottom: 14px;
  background: var(--t-accent);
}
.mkt-tt-plain .mkt-tt-dot { display: none; }

.mkt-tt-gradient .mkt-tt-bar {
  background: radial-gradient(120% 140% at 20% 0%, var(--t-accent) 0%, var(--t-surface) 72%);
}
.mkt-tt-gradient .mkt-tt-dot { display: none; }

.mkt-tt-split .mkt-tt-bar {
  height: 40%;
  margin: 0 -9px 8px 46%;
}
.mkt-tt-split .mkt-tt-dot { display: none; }
.mkt-tt-split .mkt-tt-line { margin-top: -22%; width: 40%; }
.mkt-tt-split .mkt-tt-line-short { width: 28%; }

.mkt-tt-banner .mkt-tt-bar { height: 42%; }

.mkt-tt-outlined .mkt-tt-grid i { background: transparent; }
.mkt-tt-flat .mkt-tt-grid i { border-color: transparent; }
.mkt-tt-glass .mkt-tt-grid i { opacity: 0.68; }

.mkt-template-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.mkt-radio {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  cursor: pointer;
}

.mkt-radio:has(input:checked) {
  border-color: var(--md-primary);
  background: var(--md-surface-container);
}

.mkt-radio input {
  margin-top: 3px;
  accent-color: var(--md-primary);
}

.mkt-radio span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mkt-radio strong {
  font-size: 0.8125rem;
  color: var(--md-on-surface);
}

.mkt-radio small {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--md-on-surface-variant);
}

/* ── Palette swatches ─────────────────────────────────────────────────────── */
.mkt-palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.mkt-palette {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-lowest);
  cursor: pointer;
  text-align: left;
}

.mkt-palette.is-on {
  border-color: var(--p-accent);
  box-shadow: inset 0 0 0 1px var(--p-accent);
}

.mkt-palette-chip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-accent) 0 52%, var(--p-soft) 52% 100%);
  border: 1px solid rgba(15, 23, 42, 0.14);
}

.mkt-palette-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Segmented controls ───────────────────────────────────────────────────── */
.mkt-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--md-radius-full, 999px);
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  margin-bottom: 4px;
}

.mkt-seg-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--md-radius-full, 999px);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.mkt-seg-item.is-on {
  background: var(--md-surface-container-lowest);
  color: var(--md-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Seven hero styles will not sit on one line of a phone, and squeezing them
   there is how labels end up one character wide. They wrap instead. */
.mkt-seg-wrap {
  flex-wrap: wrap;
  border-radius: var(--md-radius-md);
}

.mkt-seg-wrap .mkt-seg-item {
  flex: 1 1 auto;
  border-radius: var(--md-radius-sm);
}

/* ── Image fields ─────────────────────────────────────────────────────────── */
.mkt-image-fields {
  display: grid;
  gap: 12px;
}

.mkt-image-field {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mkt-image-field-body {
  flex: 1;
  min-width: 0;
}

.mkt-image-preview {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-variant);
}

.mkt-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-image-preview-round {
  border-radius: 50%;
}

.mkt-image-preview-wide {
  width: 96px;
  height: 58px;
}

.mkt-image-preview.is-broken {
  border-color: var(--md-error);
  color: var(--md-error);
}

/* ── Live preview ─────────────────────────────────────────────────────────── */
.mkt-preview-card {
  position: sticky;
  top: 14px;
}

.mkt-preview-sizes {
  max-width: 320px;
}

.mkt-preview-frame {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  overflow: hidden;
  background: var(--md-surface-container-high);
  margin-inline: auto;
  transition: max-width 0.22s ease;
}

.mkt-preview-frame[data-size="phone"] { max-width: 390px; }
.mkt-preview-frame[data-size="tablet"] { max-width: 768px; }
.mkt-preview-frame[data-size="desktop"] { max-width: 100%; }

.mkt-preview-frame iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  background: #fff;
}

.mkt-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

/* ── Section picker ───────────────────────────────────────────────────────── */
.mkt-add-section-open {
  width: 100%;
  margin-top: 14px;
}

/* On a phone this is a bottom sheet, because a picker that pushes the list it
   belongs to off the screen loses the context you are adding to. Above 720px
   it is an ordinary panel — there is room for both. */
.mkt-add-sheet {
  margin-top: 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  background: var(--md-surface-container-lowest);
  overflow: hidden;
}

.mkt-add-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
}

.mkt-add-sheet-body {
  padding: 12px 14px 16px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mkt-add-group {
  margin: 12px 0 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.mkt-add-group:first-child {
  margin-top: 0;
}

.mkt-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.mkt-add-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-lowest);
  cursor: pointer;
}

.mkt-add-option:hover,
.mkt-add-option:focus-visible {
  border-color: var(--md-primary);
  background: var(--md-surface-container);
}

.mkt-add-option-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.mkt-add-option-hint {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--md-on-surface-variant);
}

@media (max-width: 720px) {
  .mkt-add-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    margin: 0;
    border-radius: var(--md-radius-lg) var(--md-radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.26);
  }

  .mkt-add-sheet-body {
    max-height: 56vh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .mkt-preview-card {
    position: static;
  }
}

/* ── Section rows ─────────────────────────────────────────────────────────── */
.mkt-icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.mkt-icon-btn:hover,
.mkt-icon-btn:focus-visible {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.mkt-block-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 38px;
  color: var(--md-on-surface-variant);
  cursor: grab;
  touch-action: pan-y;
}

.mkt-block-handle:active {
  cursor: grabbing;
}

/* The title is the row's big target: tapping anywhere on the name or the kind
   opens the section. */
.mkt-block-item-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.mkt-block-item-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mkt-block-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-block-item-kind {
  font-size: 0.6875rem;
  color: var(--md-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-block-chevron {
  flex: none;
  color: var(--md-on-surface-variant);
  transition: transform 0.16s ease;
}

.mkt-block-item:not(.is-collapsed) .mkt-block-chevron {
  transform: rotate(180deg);
}

.mkt-block-item.is-hidden .mkt-block-item-name {
  opacity: 0.55;
  text-decoration: line-through;
}

.mkt-block-menu-wrap {
  position: relative;
  flex: none;
}

.mkt-block-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-lowest);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.mkt-block-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--md-radius-sm);
  background: transparent;
  font-size: 0.8125rem;
  color: var(--md-on-surface);
  text-align: left;
  cursor: pointer;
}

.mkt-block-menu-item:hover:not(:disabled),
.mkt-block-menu-item:focus-visible {
  background: var(--md-surface-container-high);
}

.mkt-block-menu-item:disabled {
  opacity: 0.4;
  cursor: default;
}

.mkt-block-menu-item .material-symbols-outlined {
  font-size: 19px;
}

.mkt-block-item.is-dragging {
  opacity: 0.45;
}

/* The drop rule is drawn on the row you are over, on the edge you are nearest,
   so where the section is about to land is visible before you let go. */
.mkt-block-item.is-drop-before {
  box-shadow: inset 0 3px 0 0 var(--md-primary);
}

.mkt-block-item.is-drop-after {
  box-shadow: inset 0 -3px 0 0 var(--md-primary);
}

.mkt-block-settings {
  margin-top: 8px;
  border-top: 1px solid var(--md-outline-variant);
  padding-top: 8px;
}

.mkt-block-settings summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  list-style: none;
}

.mkt-block-settings summary::-webkit-details-marker {
  display: none;
}

.mkt-block-settings summary .material-symbols-outlined {
  font-size: 18px;
}

.mkt-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  padding: 6px 0 2px;
}

.mkt-settings-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-template,
  .mkt-preview-frame,
  .mkt-block-chevron,
  .mkt-seg-item {
    transition: none;
  }
}