@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --bg: #faf7ff;
  --surface: #ffffff;
  --surface-soft: #f8f4ff;
  /** Matches .site-header — reuse for mobile header chrome (hamburger, dash, DM, bell) */
  --site-header-bg: rgba(254, 250, 254, 0.96);
  --line: #e8e0f5;
  /** Very soft lavender edge on mobile header buttons (slightly darker than header, barely visible) */
  --site-header-chrome-outline: rgba(232, 224, 245, 0.52);
  --text: #222222;
  --muted: #6b6b6b;
  --accent: #6366f1;
  --shadow: 0 10px 30px rgba(34, 34, 34, 0.08);
  --radius-lg: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /** Reserve the vertical-scrollbar gutter on every page (whether the page is
   *  long enough to need a scrollbar or not). Without this, short pages have a
   *  viewport ~15-17px wider than long pages, and every centered element in
   *  `.container` (header / footer / page hero) shifts horizontally on page
   *  transitions — that's the residual "header vibration" perception even
   *  after the grid + slot-width fixes. `scrollbar-gutter: stable` is the
   *  modern way; the `overflow-y: scroll` fallback covers Safari ≤ 17.4. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  letter-spacing: 0.012em;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(1280px, calc(100% - 36px));
  margin: 0 auto;
}

.site-header {
  background: var(--site-header-bg);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  display: grid;
  /** Desktop default keeps center links balanced; desktop media below nudges links slightly left. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: 82px;
}
.site-nav > .brand { justify-self: start; }
.site-nav > .nav-actions { justify-self: end; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0;
}

.brand > span {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  /* Single knob: scales “The DropMuse” + tagline together (tagline = 52.5% of title). */
  font-size: clamp(20px, 2.35vw, 25px);
  transform: translateY(-3px);
}

/* Title row only: keep “The DropMuse” on one line (not stacked by column above). */
.brand > span.brand-title {
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: min-content;
}

/* “The” medium · Drop bold · M dropped + italic · Muse regular — Playfair Display */
.brand-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1em;
  line-height: 1.12;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.brand-title-the {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #666;
}

.brand > .brand-title .brand-title-the:not(.brand-title-the--landing) {
  font-size: 0.76em;
}

.brand-drop {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-m-wrap {
  display: inline-block;
  line-height: 1;
}

.brand-m-letter {
  display: inline-block;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  transform: translateY(0.14em) scale(1.06);
  transform-origin: center top;
}

.brand-muse-tail {
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Site header — DropMuse wordmark layout (“The” / split “use”). Motion only on body.page-home. */
.site-header .brand .brand-m-letter {
  transform-origin: center top;
}

body:not(.page-home) .site-header .brand .brand-m-letter {
  transform: translateY(0.2em) scale(1.06);
  opacity: 1;
}

body.page-home .site-header .brand .brand-m-letter {
  animation: brand-landing-m-soft-rise 1.08s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.site-header .brand .brand-title.brand-title--landing {
  align-items: flex-start;
}

.site-header .brand .footer-brand-dropmuse.brand-landing-main {
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.brand-landing-the-bridge {
  position: relative;
  width: 0;
  flex-shrink: 0;
  align-self: flex-start;
  pointer-events: none;
}

.site-header .brand .brand-title-the--landing {
  position: absolute;
  left: 0;
  top: 0;
  /* Tiny “The” above p–M */
  transform: translate(-36%, calc(-72% + 3px)) scale(1.16, 0.68);
  transform-origin: 50% 100%;
  font-size: max(13.5px, 0.225em);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: none;
  color: #666;
  white-space: nowrap;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* “use”: u / s / e — staggered rise on home only */
.site-header .brand .brand-muse-tail--split {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  transform: none;
  animation: none;
}

.site-header .brand .brand-muse-tail--split .brand-muse-u,
.site-header .brand .brand-muse-tail--split .brand-muse-s,
.site-header .brand .brand-muse-tail--split .brand-muse-e {
  display: inline-block;
}

body:not(.page-home) .site-header .brand .brand-muse-tail--split .brand-muse-u {
  transform: translateY(0.05em);
  opacity: 1;
}

body:not(.page-home) .site-header .brand .brand-muse-tail--split .brand-muse-s {
  transform: translateY(-0.085em);
  opacity: 1;
}

body:not(.page-home) .site-header .brand .brand-muse-tail--split .brand-muse-e {
  transform: translateY(-0.17em);
  opacity: 1;
}

body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-u {
  animation: brand-landing-u-soft-rise 1.08s cubic-bezier(0.33, 0, 0.2, 1) 45ms forwards;
}

body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-s {
  animation: brand-landing-muse-s-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-e {
  animation: brand-landing-muse-e-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes brand-landing-m-soft-rise {
  from {
    transform: translateY(0.242em) scale(1.052);
    opacity: 0.94;
  }
  to {
    transform: translateY(0.2em) scale(1.06);
    opacity: 1;
  }
}

@keyframes brand-landing-u-soft-rise {
  from {
    transform: translateY(0.095em);
    opacity: 0.94;
  }
  to {
    transform: translateY(0.05em);
    opacity: 1;
  }
}

@keyframes brand-landing-muse-e-rise {
  from {
    transform: translateY(0.34em);
    opacity: 0.82;
  }
  to {
    transform: translateY(-0.17em);
    opacity: 1;
  }
}

@keyframes brand-landing-muse-s-rise {
  from {
    transform: translateY(0.2em);
    opacity: 0.88;
  }
  to {
    transform: translateY(-0.085em);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .site-header .brand .brand-m-letter {
    animation: none;
    transform: translateY(0.2em) scale(1.06);
    opacity: 1;
  }

  body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-u {
    animation: none;
    transform: translateY(0.05em);
    opacity: 1;
  }

  body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-s,
  body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-e {
    animation: none;
    opacity: 1;
  }

  body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-s {
    transform: translateY(-0.085em);
  }

  body.page-home .site-header .brand .brand-muse-tail--split .brand-muse-e {
    transform: translateY(-0.17em);
  }
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.525em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: white;
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);
}

/* ── 로고 후보 1 (현재 텍스트 전용) ─────────────────────────────
   HTML:
   <span class="brand-title footer-brand-title">
     <span class="brand-title-the">The </span>
     <span class="footer-brand-dropmuse">
       <span class="brand-drop">Drop</span>
       <span class="brand-m-wrap"><span class="brand-m-letter">M</span></span>
       <span class="brand-muse-tail">use</span>
     </span>
   </span>
   → 되돌리려면: .dm-icon span 제거, 위 HTML 그대로 유지
──────────────────────────────────────────────────────────────── */

/* ── 로고 후보 2 (dm-icon 뱃지 + 텍스트) ──────────────────────── */
.dm-icon {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -0.04em;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;

  position: relative;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--text);
  user-select: none;
}

.dm-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 60%;
  background: rgba(0,0,0,0.25);
  transform: translateX(2px);
}

/* ── dm-wordmark (brand system v2) ──────────────────────────────
   되돌리기: index.html 헤더 <span class="dm-wordmark"> →
   <span class="brand-title footer-brand-title">...</span> 으로 교체
──────────────────────────────────────────────────────────────── */
.dm-wordmark {
  display: inline-flex;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  line-height: 1.1;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.dm-wordmark__the {
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.74em;
  margin-right: 0.15em;
  color: var(--muted);
}

.dm-wordmark__drop {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.dm-wordmark__m {
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  display: inline-block;
  transform: translateY(0.13em) scale(1.06);
  transform-origin: center top;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.dm-wordmark__use {
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* M 브리딩 — hover 시 살짝 위로, 루프 없음 */
.dm-wordmark:hover .dm-wordmark__m {
  transform: translateY(0.07em) scale(1.065);
}

/* .brand 컨텍스트: font-size는 .brand > span에서 상속, row 방향 강제 */
.brand > .dm-wordmark {
  flex-direction: row;
  min-width: min-content;
}

/* Site logo image (e.g. code/logo/logo9.png — see logo/README.txt) */
.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(34, 34, 34, 0.08);
  display: block;
}

/* Landing header: logo sits left of wordmark; match .brand > span nudge */
body.page-home .site-header .brand > .brand-logo {
  transform: translateY(-3px);
}

.nav-links,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-actions {
  min-height: 40px;
}
.nav-actions:not(.nav-actions--ready) {
  visibility: hidden;
}
@media (min-width: 821px) {
  /** Header desktop tuning:
   * - split fr columns so Explore / Artists / Resell sit a bit further left (narrower brand column),
   * - keep nav actions in one row even under browser zoom. */
  .site-nav {
    grid-template-columns: 0.78fr auto 1.22fr;
  }
  .nav-links,
  .nav-actions {
    gap: 18px;
  }
  .nav-actions {
    min-width: 0;
    justify-content: flex-end;
  }
  /** Reserve a fixed slot per nav link so the font-weight: 400 → 700 jump on
   *  `.active` (and the related Inter glyph-width difference) doesn't cause a
   *  micro-shift when navigating between Explore / Artists / Resell.
   *  Text is centered inside the slot so both regular and bold render in the
   *  exact same horizontal box. With `* { box-sizing: border-box }` the
   *  min-width includes any padding/border, so Resell's divider padding fits
   *  in the same slot as Explore / Artists. */
  .nav-links a {
    min-width: 78px;
    text-align: center;
  }
  .nav-links a.nav-link--market[href$="resell.html"] {
    min-width: 102px; /* 78 + 24px padding-left to keep visual slot equal */
  }
}

.nav-links a,
.nav-actions a {
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.nav-links a:hover,
.nav-actions a:hover {
  color: var(--accent);
}

/* CTA in header: .nav-actions a would override .button’s white text; match home Search ( .search-button ) at 13px */
.nav-actions a.button {
  color: white;
  font-size: 13px;
  min-height: 34px;
  padding: 0 14px;
  line-height: 1.15;
}
.nav-actions a.button:hover {
  color: white;
  filter: brightness(0.96);
}

/* Logged-in header rail: DM + bell (+ optional dash). Visual order: bell → messages → dash (flex order). */
.nav-actions-rail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-actions-rail .nav-notif-wrap {
  order: 1;
}
.nav-actions-rail .nav-dm-wrap {
  order: 2;
}
.nav-actions-rail > .nav-dash-compact {
  order: 3;
}
.nav-actions.nav-actions--split > .nav-slot--name.nav-user-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text) !important;
  text-decoration: none;
}
.nav-actions.nav-actions--split > .nav-slot--name.nav-user-name::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Dashboard only: user icon uses the same lavender accent tone as active nav links. */
.nav-actions.nav-actions--split > .nav-slot--name.nav-user-name--dashboard::before,
.site-nav-drawer .nav-slot--name.nav-user-name--dashboard::before {
  background-color: var(--accent);
  opacity: 1;
}
/**
 * Profile page: treat the header user icon like an "active" nav link on its
 *   own page — same lavender accent tone as Explore/Resell/etc. — and scale it
 *   up a touch so it visibly stands out as the current page.
 */
body.page-profile .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name::before,
body.page-profile .site-nav-drawer .nav-slot--name.nav-user-name::before {
  background-color: var(--accent);
  opacity: 1;
  width: 19px;
  height: 19px;
}
/** Artist bio field: ~2× the default empty textarea height (global .form-group textarea is height:auto). */
body.page-profile #bio-artist {
  min-height: 9.5rem;
  resize: vertical;
}
.nav-dash-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-dash-compact:hover {
  background: var(--surface-soft);
}
.nav-dash-compact svg {
  display: block;
}

/**
 * Desktop only: keep legacy visual order — Admin, name, messages & notices, Dashboard —
 * while split markup uses rail-first DOM order (matches mobile drawer / dashboard).
 */
@media (min-width: 821px) {
  .nav-actions.nav-actions--split {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
  }
  .nav-actions.nav-actions--split > .nav-slot--admin,
  .nav-actions.nav-actions--split > span.nav-slot--admin {
    order: 1;
  }
  .nav-actions.nav-actions--split > .nav-slot--name {
    order: 2;
    min-width: 0;
  }
  .nav-actions.nav-actions--split > .nav-actions-rail {
    order: 3;
    flex-shrink: 0;
  }
  .nav-actions.nav-actions--split > .nav-slot--dash,
  .nav-actions.nav-actions--split > a.button[href='dashboard.html'],
  .nav-actions.nav-actions--split > .nav-slot--signout {
    order: 4;
  }
  /** Lock Dashboard / Sign out CTA to identical box dimensions so navigating
   *  between dashboard (Sign out) and other pages (Dashboard) doesn't change
   *  the right column's width and shake the header. Text is centered so the
   *  shorter "Sign out" sits in the same visual slot. */
  .nav-actions.nav-actions--split > .nav-slot--dash,
  .nav-actions.nav-actions--split > a.button.nav-dashboard-cta,
  .nav-actions.nav-actions--split > .nav-slot--signout,
  /** Logged-out home: lone Sign in matches logged-in Dashboard CTA box. */
  body.page-home .nav-actions:not(.nav-actions--split) > a.button.nav-home-signin-desktop,
  .nav-actions:not(.nav-actions--split) > a.button.nav-loggedout-signin {
    box-sizing: border-box;
    width: 104px;
    min-width: 104px;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
  }
  /** Home logged-out: mobile keeps text Sign in + Sell Art; desktop shows Dashboard-style Sign in only. */
  body.page-home .nav-actions:not(.nav-actions--split) > a.nav-home-signin-mobile,
  body.page-home .nav-actions:not(.nav-actions--split) > a.nav-home-sell-art {
    display: none !important;
  }
  .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name {
    max-width: 170px;
    /* Reserve space for the profile glyph (::before) so it is never clipped when
     * the right column is squeezed (long admin/name + rail + dashboard CTA).
     * Username text can still shrink/ellipsis — but the icon stays clickable so
     * users keep a path to profile / edit. Like Messages / Notice icons, the
     * profile icon now has its own guaranteed slot. */
    min-width: 36px;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
  }
  /* Hover: same as main nav — color only (name + currentColor mask glyph). */
  .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name:hover {
    color: var(--accent) !important;
  }
  .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name:hover::before {
    opacity: 1;
  }
  /* Glyph: one desktop size everywhere (same as former “on profile” size — no grow on profile.html). */
  .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name::before,
  body.page-profile .nav-actions.nav-actions--split > .nav-slot--name.nav-user-name::before {
    width: 22px;
    height: 22px;
    transform-origin: center center;
    transform: translateY(1px);
    transition: opacity 0.15s ease, color 0.15s ease;
  }
}

/* Shop (Explore…) vs marketplace (Resell) — divider before Resell */
.nav-links a.nav-link--market[href$="resell.html"] {
  margin-left: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
@media (max-width: 820px) {
  .nav-links a.nav-link--market[href$="resell.html"] {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    flex-basis: 100%;
  }
  /** Home logged-out: drawer keeps plain Sign in + Sell Art; hide desktop-only pill duplicate. */
  body.page-home .nav-actions:not(.nav-actions--split) > a.nav-home-signin-desktop {
    display: none !important;
  }
}

.menu-toggle {
  display: none;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

/* Mobile header chrome (injected after .menu-toggle); must not affect desktop layout */
.site-nav-mobile-inline {
  display: none;
}

/** Mobile-only dashboard glyph; hidden on desktop (was inside display:none .site-nav-mobile-inline) */
.site-nav-mobile-dash {
  display: none;
}

/* Wraps .nav-links + .nav-actions; invisible on desktop so grid children unchanged */
.site-nav-drawer {
  display: contents;
}

/* Injected by app.js when mobile nav exists; desktop never shown */
.site-nav-backdrop {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  background-origin: border-box;
  color: white;
  font-weight: 600;
}

.search-button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

/* Landing hero: desktop keeps “Search” label; icon used on mobile (mobile.css) */
#home-search-btn .home-search-btn-icon {
  display: none;
}

/* Explore / Resell / Artists browse bar: desktop shows “Search” text; icon on mobile (explore.css). */
.explore-search-submit .explore-search-btn-icon {
  display: none;
}

.home-hero {
  padding: 10px 0 8px;
}

.home-hero-shell {
  padding: 4px 0 0;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.home-hero-shell h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.home-hero-shell p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.search-card {
  margin-top: 0;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (min-width: 821px) {
  /* Desktop home search box: slightly shorter visual height. */
  body.page-home .search-card {
    padding: 14px;
  }
  body.page-home .search-input {
    min-height: 48px;
  }
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

/* Policy / legal links on auth & forms — accent, clearly tappable */
.policy-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-link:hover {
  color: var(--text);
}

.search-input {
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: 0;
  background: white;
  color: var(--text);
}

.home-hero .search-input::placeholder,
#home-search::placeholder {
  font-family: inherit;
  font-style: italic;
  font-weight: 300;
  color: color-mix(in srgb, var(--muted) 78%, white);
}

.section {
  padding: 28px 0;
}

/* Home section spacing: keep groups a bit closer */
.home-section {
  padding: 10px 0;
}

/* `[hidden]` alone can lose to other author rules; keep optional landing strips fully collapsed */
#home-section-best-artists[hidden],
#home-section-today-resell[hidden] {
  display: none !important;
}

/* Today's Arts cards → “Freshly dropped” / New Arrivals: tighter strip */
.home-section:has(#grid-today) {
  padding-bottom: 4px;
}
/* New Arrivals: tight to Today’s above; tight to Best Artists below */
.home-section:has(#grid-new) {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Best Artists (“Most Loved”): tight under New Arrivals */
.home-section:has(#grid-best) {
  padding-top: 4px;
  padding-bottom: 0;
}

/* Emerging → Trending (“Hot right now”); Trending → Today’s Resell (“Insightful Collector”) */
.home-section:has(#grid-emerging) {
  padding-bottom: 4px;
}
.home-section:has(#grid-trending) {
  padding-top: 4px;
  padding-bottom: 4px;
}
.home-section:has(#grid-today-resell) {
  padding-top: 4px;
}

/* Desktop: Emerging (“On the rise”) — align vertical rhythm with New Arrivals / Best Artists strips (mobile already tightens in max-width:820px block) */
@media (min-width: 821px) {
  .home-section:has(#grid-emerging) {
    padding-top: 4px;
    padding-bottom: 2px;
  }
  #home-section-emerging .section-head {
    margin-bottom: 14px;
  }
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/** Artist profile portfolio: mobile = title → filters → work count; desktop grid keeps title | count on one row */
.artist-portfolio-toolbar--loading .artist-portfolio-title-skeleton {
  display: block;
  width: min(280px, 62vw);
  height: 1.15em;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--line);
}
@media (min-width: 821px) {
  .artist-portfolio-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
    margin-bottom: 20px;
  }
  .artist-portfolio-toolbar .artist-portfolio-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .artist-portfolio-toolbar .artist-portfolio-work-count {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    padding-bottom: 2px;
  }
  .artist-portfolio-toolbar .artist-portfolio-filters {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 0 !important;
  }
}

@media (max-width: 820px) {
  .artist-portfolio-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
  }
  .artist-portfolio-toolbar .artist-portfolio-head {
    margin-bottom: 0;
  }
  .artist-portfolio-toolbar .artist-portfolio-filters {
    margin: 0 !important;
  }
}

.section-head h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Landing section titles — slightly smaller than header wordmark for hierarchy */
.home-section .section-head h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.home-section .section-head .eyebrow {
  font-size: 11px;
  margin-bottom: 3px;
}

.home-section .section-head .section-link {
  font-size: 12px;
}

.section-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.section-link:hover {
  color: var(--accent);
}

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

/* Best Artists: same container width as Today's Arts — 6-column track, each card spans 2 (3-up) */
.home-best-artists-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.home-best-artists-grid .artist-card {
  grid-column: span 2;
  min-width: 0;
}

/* Slightly denser cards on shop-style grids */
.home-product-grid .product-thumb {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
}

/* Masonry layout — Explore only */
.home-product-grid--masonry {
  display: block;
  columns: 5;
  column-gap: 14px;
  transform: translateZ(0);
}
.home-product-grid--masonry .product-card {
  break-inside: avoid;
  margin-bottom: 14px;
}

/* Empty state: masonry uses CSS columns — a lone <p> otherwise flows into 2+ columns ("split" blocks). */
.home-product-grid--masonry > .dm-browse-empty-wrap {
  column-span: all;
  -webkit-column-span: all;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  break-inside: avoid;
}
.home-product-grid:not(.home-product-grid--masonry) > .dm-browse-empty-wrap {
  grid-column: 1 / -1;
}
.dm-browse-empty-wrap .dm-browse-empty-msg {
  color: var(--muted);
  padding: 28px 16px;
  line-height: 1.55;
  text-align: center;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.dm-browse-empty-wrap .dm-browse-empty-msg a {
  color: var(--accent);
  font-weight: 600;
}
.artist-grid > .dm-browse-empty-wrap {
  grid-column: 1 / -1;
}
.home-product-grid .product-card {
  background: var(--bg);
}
.home-product-grid .product-card:hover {
  background-color: #ffffff;
}
.home-product-grid--masonry .product-thumb {
  aspect-ratio: unset;
  width: 100%;
  height: auto;
}
.home-product-grid--masonry--4col { columns: 4; }
@media (max-width: 900px) {
  .home-product-grid--masonry { columns: 4; }
  .home-product-grid--masonry--4col { columns: 3; }
}
@media (max-width: 600px) {
  .home-product-grid--masonry { columns: 2; }
  .home-product-grid--masonry--4col { columns: 2; }
}

.home-product-grid .product-info {
  padding: 4px 2px 0;
}

.home-product-grid .product-info h3 {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Masonry pages (explore/resell/artist-profile): wrap freely, no truncation */
.home-product-grid--masonry .product-card .product-info h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: break-word;
}

.home-product-grid .product-shop {
  font-size: 12px;
}

.home-product-grid .product-rating {
  font-size: 12px;
  margin-top: 2px;
}

.home-product-grid .product-meta {
  font-size: 12px;
  margin-top: 0;
}

.home-product-grid .like-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.home-product-grid .thumb-wrap {
  border-radius: 14px;
}

/* One slot in the same 6-column grid as landing — card width matches landing strips */
.home-product-grid--product-preview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-width: none;
}
.home-product-grid--product-preview > .product-card:only-child {
  grid-column: 1 / 2;
  min-width: 0;
}

/* Explore / landing shop grids: no review score line on preview cards */
.home-product-grid:not(.home-product-grid--resell) .product-rating {
  display: none;
}

/*
 * Product / collector detail — “More from …” grids (narrow viewports only): title lives in h3 > a;
 * grid items default to min-width:auto so long titles overflow; force single-line ellipsis like landing cards.
 * Scoped to #product-main / #collector-main so Explore masonry & desktop are unaffected.
 */
@media (max-width: 820px) {
  #product-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-card,
  #collector-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-card {
    min-width: 0;
  }
  #product-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info,
  #collector-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info {
    min-width: 0;
  }
  #product-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info h3,
  #collector-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info h3 {
    min-width: 0;
  }
  #product-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info h3 a,
  #collector-main .product-section.home-section .home-product-grid:not(.home-product-grid--masonry) .product-info h3 a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Landing only: hide cosmetic chips (Trending, New, etc.) but keep listing-state badges (Sold, Delisted, Sale pending) */
.home-section .home-product-grid .thumb-wrap .status-badge:not(.status-badge--state),
.home-section .home-product-grid .thumb-wrap .time-badge,
.home-section .home-product-grid .thumb-wrap .rank-badge,
.home-section .home-product-grid .thumb-wrap .thumb-badge-row {
  display: none !important;
}

/* Landing: home strips 6 cols; Today's = one row (≤6 cards) or 2×6 when 12 from API — no horizontal slider */
@media (min-width: 821px) {
  .home-section .home-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  #grid-today.home-product-grid--today-one-row,
  #grid-today.home-product-grid--today-two-rows {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Resell SSR cards: match Explore typography */
.home-product-grid--resell .product-info h3 {
  font-size: 14px;
  line-height: 1.35;
}

.home-product-grid--resell .product-shop {
  font-size: 12px;
  /* Match Explore product cards: keeps tier emoji vertically centered with artist/collector text */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.home-product-grid--resell .product-shop > span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;
}

/* Resell cards: Artist / Collector / Condition — same inline “Label: value” flow as Explore (.product-shop) */
.home-product-grid--resell .product-info > .product-shop + .product-shop {
  margin-top: 3px;
}

/* Resell browse · Collector row (markup from resaleListingCard) */
.home-product-grid--resell .resell-collector-line > .resell-collector-tier-wrap {
  vertical-align: middle;
}

.home-product-grid--resell .resell-collector-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px 4px;
  min-width: 0;
}

@media (max-width: 820px) {
  /* Resell browse + collector-item resale cards: keep collector id + tier icon on one line */
  body.page-resell .home-product-grid--resell .product-shop .resell-collector-line,
  #collector-main .home-product-grid--resell .product-shop .resell-collector-line {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 4px;
    min-width: 0;
    white-space: nowrap;
  }
  body.page-resell .home-product-grid--resell .resell-collector-tier-wrap--emerging,
  #collector-main .home-product-grid--resell .resell-collector-tier-wrap--emerging {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 1px;
    transform: translateX(2px);
  }
  body.page-resell .home-product-grid--resell .resell-collector-tier-wrap--emerging .artist-tier-inline,
  #collector-main .home-product-grid--resell .resell-collector-tier-wrap--emerging .artist-tier-inline {
    margin-left: 0;
  }
  body.page-resell .home-product-grid--resell .resell-collector-tier-wrap--emerging .artist-tier-emoji,
  #collector-main .home-product-grid--resell .resell-collector-tier-wrap--emerging .artist-tier-emoji {
    font-size: 0.72em;
    line-height: 1;
  }
}

.home-product-grid--resell .product-meta {
  font-size: 12px;
  margin-top: 0;
}

/* Resell browse cards: tighter type, smaller save */
.home-product-grid--resell .resell-collector-code {
  font-size: 11px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.02em;
}

.home-product-grid--resell .product-card-meta-line {
  font-size: 11px;
}

.home-product-grid--resell .resell-condition-score {
  color: #111;
  font-weight: 700;
}

/* Override .home-product-grid .like-btn min-height:30px — keep a true circle like Explore */
.home-product-grid--resell .product-meta .like-btn.like-btn--icon {
  min-width: 26px;
  width: 26px;
  min-height: 26px;
  max-height: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
  margin-right: 5px;
}

.product-card {
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
  border: 1.5px solid var(--line);
  padding: 6px;
  transition: background-color 0.18s ease, filter 0.18s ease;
}
.product-card:hover {
  background-color: #ffffff;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.13));
}

.thumb-and-heart {
  position: relative;
}

.like-btn.like-btn--card-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  min-height: unset;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 16px;
  line-height: 1;
  color: rgba(100, 100, 100, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
.like-btn.like-btn--card-overlay:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: scale(1.1);
}
/* Saved: softer halo than before save-hover (0.92), but still clearer than unsaved (0.12) */
.like-btn.like-btn--card-overlay.liked {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.44);
}
.like-btn.like-btn--card-overlay.liked:hover {
  background: rgba(255, 255, 255, 0.58);
  transform: scale(1.1);
}

/** Saved heart: prefer text glyph so accent color wins on mobile (pairs with U+FE0E in JS). */
@media (max-width: 820px) {
  .like-btn.like-btn--card-overlay.liked,
  .fav-btn.liked .fav-btn-heart {
    font-variant-emoji: text;
  }
}

.product-card-link:hover { cursor: pointer; }
.product-card:hover::after {
  opacity: 1;
}

.product-thumb {
  aspect-ratio: 3 / 4.2;
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
}

/* Listing artwork: reduce drag-to-save / accidental selection (see api-config.js contextmenu + dragstart) */
.home-product-grid .product-thumb,
.product-card .product-thumb,
.browse-section .product-thumb,
.gallery-main-img,
.gallery-thumb {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

.product-info {
  padding: 12px 4px 0;
}

.product-card .product-info {
  padding-top: 6px;
}

.product-card .product-info h3 {
  margin: 0 0 3px;
}

.product-card .product-shop {
  margin-top: 0;
  margin-bottom: 0;
}

.product-card .product-rating {
  margin-top: 2px;
}

.product-card .product-meta {
  margin-top: 0;
}

/** Primary / resale detail pages — under gallery (use with .product-layout__copyright on product / collector-item) */
.detail-artwork-attribution {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  margin: 0;
  padding: 0 2px 0;
  max-width: 100%;
}

.product-layout__copyright.detail-artwork-attribution {
  margin-top: 2px;
}

.product-info h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.product-shop,
.ai-meta,
.product-rating,
.product-size {
  color: var(--muted);
}

.product-shop {
  font-size: 13px;
}

/* Artist / Collector names in product preview cards */
.product-profile-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.product-profile-link:hover {
  text-decoration: underline;
}

.ai-meta {
  margin-top: 6px;
  font-size: 12px;
}

.product-meta,
.product-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
}

.product-meta--split {
  align-items: center;
  flex-wrap: wrap;
}

.product-meta-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  flex: 1;
}

.product-card-meta-line {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.product-card-meta-label,
.product-card-meta-sep {
  color: var(--muted);
  font-weight: 400;
}

.product-card-meta-value {
  color: var(--text);
  font-weight: 500;
}

.like-btn.like-btn--icon {
  flex-shrink: 0;
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-product-grid .like-btn.like-btn--icon {
  min-width: 26px;
  width: 26px;
  height: 26px;
  font-size: 13px;
}

/* Preview cards: tuck heart in from the rounded frame edge */
.product-card .product-meta .like-btn.like-btn--icon {
  margin-right: 6px;
}

/* Public profile: short accent line under name */
.profile-teaser-line {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  margin: 6px 0 4px;
  max-width: 42rem;
}
.artist-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
}
.artist-tier-badge .artist-tier-icon {
  flex-shrink: 0;
  display: block;
  color: var(--accent);
}
.artist-tier-badge .artist-tier-emoji,
.artist-tier-emoji-wrap .artist-tier-emoji {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
}
.artist-tier-badge .artist-tier-label {
  line-height: 1.2;
}

/* Small tier icon next to artist name (cards, product rows, profile hero) */
.artist-tier-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 3px;
  line-height: 1;
}
.artist-tier-inline .artist-tier-emoji {
  font-size: 0.85em;
}
.artist-name-with-tier {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0 0 2px;
}
.artist-name-with-tier .artist-tier-inline {
  font-size: 13px;
}
.product-shop .artist-tier-inline {
  margin-left: 3px;
  font-size: 11px;
}
.artist-hero-name .artist-tier-inline {
  margin-left: 6px;
  font-size: clamp(15px, 2.1vw, 24px);
  vertical-align: middle;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.collector-hero.artist-hero--plain .artist-hero-name .artist-tier-inline {
  filter: none;
}

/* Resell filters: keep chip/select text normal size (avoid huge IDs / inheritance bugs) */
.explore-filters-wrap--resell .filter-chip,
.explore-filters-wrap--resell .sort-select,
.explore-filters-wrap--resell .artist-search-input {
  font-size: 13px;
}

.explore-filters-wrap--resell .filter-chip {
  font-weight: 500;
}

.product-actions {
  margin-top: 12px;
}

.like-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-size: 13px;
}

.footer {
  margin-top: 10px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  background: #faf3fb;
}
.footer-copy {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  text-align: center;
}
.footer-copy p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
  gap: 24px 20px;
  padding-bottom: 32px;
  align-items: start;
}
.footer-brand {
  max-width: 360px;
}
.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}

/* Match header “The DropMuse” typography (Playfair + Drop/M/use); enlarge “DropMuse” vs “The ” */
.footer-brand-mark .brand-title.footer-brand-title {
  font-size: 1em;
}

.footer-brand-mark .footer-brand-dropmuse {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  font-size: 1.12em;
}

/* ── 되돌리기 메모 ────────────────────────────────────────────────
   이전: <img class="footer-brand-logo" src="../logo/logo9.png" width="28" height="28" alt="" decoding="async">
   현재: <span class="dm-icon dm-icon--footer">...</span>
   → 되돌리려면 span을 img로 교체, 아래 CSS도 원복
──────────────────────────────────────────────────────────────── */
.footer-brand .brand-title-the {
  color: #000;
}

.footer-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(34, 34, 34, 0.08);
}

/* DM 모노그램 — 푸터 전용 */
.dm-icon--footer {
  --dm-size: 28px;
  border-radius: 5px;
  font-size: 10.5px;
  flex-shrink: 0;
}
.footer-nav-cluster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  column-gap: clamp(10px, 2vw, 18px);
  justify-self: stretch;
  width: 100%;
  max-width: none;
}
.footer-nav-cluster > div:first-child {
  margin-left: 0;
}
@media (max-width: 820px) {
  .footer-nav-cluster {
    justify-self: stretch;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }
  .footer-nav-cluster > div:first-child {
    margin-left: 0;
  }

  /* Footer — same mobile treatment as landing (mobile.css), site-wide */
  .footer {
    padding: 28px 0 24px;
  }
  .footer-grid {
    gap: 12px 16px;
  }
  .footer-brand p {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 0;
  }
  .footer-grid h4 {
    font-size: 13.5px;
    margin-bottom: 6px;
  }
  .footer-grid a,
  .footer-grid p {
    font-size: 13px;
    line-height: 1.7;
  }
}

.footer-grid h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.footer-grid h4.footer-brand-mark {
  font-size: 16px;
}

.footer-grid p,
.footer-grid a {
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}

.footer-link-desc {
  margin: 2px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Safari CSS columns + translateY = first-row misalignment; masonry cards fade-in only */
.home-product-grid--masonry .reveal {
  transform: none;
}
.home-product-grid--masonry .reveal.visible {
  transform: none;
}

@media (max-width: 820px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /**
   * Mobile header row: [ ☰ | centered wordmark | dashboard ▦ ] — balanced 1fr columns.
   */
  .site-nav {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    justify-content: stretch;
    align-items: center;
    min-height: 60px;
    padding: 8px 0;
    box-sizing: border-box;
  }

  /* Same footprint as .site-nav-mobile-dash (40×36); stay above the slide drawer so ☰ toggles open/closed */
  .site-nav > .menu-toggle {
    position: relative;
    z-index: 105;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    min-height: 36px;
    height: 36px;
    min-width: 40px;
    width: 40px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 12px;
    border: 1px solid var(--site-header-chrome-outline);
    background: var(--site-header-bg);
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
  }

  .site-nav > .menu-toggle::before {
    content: '';
    display: block;
    width: 17px;
    height: 2px;
    margin: 0 auto;
    background: var(--text);
    box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text);
  }

  .site-nav > .brand {
    position: relative;
    z-index: 105;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  .site-nav > .site-nav-mobile-inline {
    position: relative;
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .site-nav-mobile-search {
    display: none !important;
  }

  .site-nav-mobile-dash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: 1px solid var(--site-header-chrome-outline);
    border-radius: 12px;
    background: var(--site-header-bg);
    color: var(--text);
    text-decoration: none;
    box-sizing: border-box;
  }

  .site-nav-mobile-dash svg {
    stroke: currentColor;
  }

  .site-header {
    position: relative;
    z-index: 102;
  }

  .site-header .brand > span {
    font-size: clamp(26px, 6.6vw, 36px);
    transform: translateY(-1px);
  }

  /** Dim page behind drawer (mobile only) */
  .site-nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(17, 17, 17, 0.38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /**
   * Slide-in panel: starts below the header row (Explore… first line), not under ☰ — no empty white band above links.
   * --dm-drawer-y matches the former inner padding offset (header row + notch safe area).
   */
  .site-nav-drawer {
    --dm-drawer-y: calc(52px + env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: var(--dm-drawer-y);
    bottom: auto;
    height: auto;
    max-height: calc(100dvh - var(--dm-drawer-y) - env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: min(320px, 88vw);
    min-width: min(200px, 88vw);
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    margin: 0;
    background: var(--surface);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.14);
    border-right: 1px solid var(--line);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 101;
    transform: translate3d(-105%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.open .site-nav-drawer {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    visibility: visible;
  }

  .site-nav-drawer .nav-links,
  .site-nav-drawer .nav-actions {
    display: none;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    gap: 0;
    border: none;
  }

  .site-nav.open .site-nav-drawer .nav-links,
  .site-nav.open .site-nav-drawer .nav-actions {
    display: flex !important;
  }

  /** Only top-level nav rows — not icons inside .nav-actions-rail */
  .site-nav-drawer .nav-links a,
  .site-nav-drawer .nav-actions > a,
  .site-nav-drawer .nav-actions .nav-slot--admin a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    min-height: 46px;
    padding: 10px 8px 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
  }

  /** Messages + bell row (same idea as dashboard split rail) */
  .site-nav-drawer .nav-actions-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
    min-height: 46px;
    padding: 10px 8px 10px 0;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
  }
  .site-nav-drawer .nav-actions-rail .nav-dm-wrap,
  .site-nav-drawer .nav-actions-rail .nav-notif-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }
  .site-nav-drawer .nav-actions-rail .nav-dm-link,
  .site-nav-drawer .nav-actions-rail .nav-notif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    line-height: 1;
  }
  .site-nav-drawer .nav-actions-rail .nav-dm-icon {
    display: block;
    font-size: 20px;
    line-height: 1;
  }
  .site-nav-drawer .nav-actions-rail .nav-notif-icon {
    width: 20px;
    height: 20px;
    display: block;
  }
  .site-nav-drawer .nav-slot--name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 8px 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    color: var(--muted);
  }
  .site-nav-drawer .nav-slot--name::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    opacity: 0.72;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
  .site-nav-drawer .nav-slot--name.nav-user-name {
    color: var(--text);
  }
  /** Mobile drawer only: for admin accounts, place Admin switch below the account-name row. */
  .site-nav-drawer .nav-actions.nav-actions--split > .nav-actions-rail {
    order: 1;
  }
  .site-nav-drawer .nav-actions.nav-actions--split > .nav-slot--name {
    order: 2;
  }
  .site-nav-drawer .nav-actions.nav-actions--split > .nav-slot--admin,
  .site-nav-drawer .nav-actions.nav-actions--split > span.nav-slot--admin {
    order: 3;
  }
  .site-nav-drawer .nav-actions.nav-actions--split > .nav-slot--dash,
  .site-nav-drawer .nav-actions.nav-actions--split > .nav-slot--signout,
  .site-nav-drawer .nav-actions.nav-actions--split > a.button.nav-dashboard-cta,
  .site-nav-drawer .nav-actions.nav-actions--split > button.nav-slot--signout {
    order: 4;
  }
  .site-nav-drawer .nav-actions > button.nav-slot--signout,
  .site-nav-drawer .nav-actions > button.btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
  }

  /** Single rule under Resell: .nav-links a already has border-bottom — skip extra border-top here */
  .site-nav-drawer .nav-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .site-nav-drawer .nav-actions a.button {
    justify-content: center;
    border-radius: 999px;
    margin-top: 8px;
    min-height: 44px;
    border-bottom: none;
    padding-left: 14px;
    padding-right: 14px;
  }

  /** Hide duplicate dashboard CTAs in drawer; keep account name link visible */
  .site-nav-drawer .nav-actions a.button[href='dashboard.html'],
  .site-nav-drawer .nav-actions a.nav-slot--dash[href='dashboard.html'],
  .site-nav-drawer .nav-actions .nav-dash-compact {
    display: none !important;
  }

  /**
   * Mobile header: ☰ + dashboard live in authored DOM order (no JS move — avoids flash on load).
   * nav-shell-mobile.js only moves the messages+notifications rail into .site-nav-mobile-inline.
   */
  .site-nav > .site-nav-mobile-dash {
    position: relative;
    z-index: 105;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    /** Sits immediately right of the 40px ☰ button (.site-nav has gap:10px on the grid, so 48px = 40 + 8 keeps a tight visual pair) */
    margin-left: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: 1px solid var(--site-header-chrome-outline);
    border-radius: 12px;
    background: var(--site-header-bg);
    color: var(--text);
    text-decoration: none;
    box-sizing: border-box;
  }
  .site-nav > .site-nav-mobile-dash svg {
    stroke: currentColor;
  }

  /**
   * Static mobile rail (DM + bell) lives inside .site-nav-mobile-inline so it paints with the rest
   * of the header on first frame. The desktop rail injected into .nav-actions is hidden on mobile
   * because .site-nav-drawer slides offscreen — we also explicitly hide it here so it never shows
   * inside the open drawer.
   */
  .site-nav-drawer .nav-actions > .nav-actions-rail {
    display: none !important;
  }

  .site-nav-mobile-inline > .nav-actions-rail {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    flex-wrap: nowrap;
  }
  .site-nav-mobile-inline > .nav-actions-rail .nav-dm-wrap,
  .site-nav-mobile-inline > .nav-actions-rail .nav-notif-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
  }
  .site-nav-mobile-inline > .nav-actions-rail .nav-dm-link,
  .site-nav-mobile-inline > .nav-actions-rail .nav-notif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 36px;
    min-width: 40px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--site-header-chrome-outline);
    border-radius: 12px;
    background: var(--site-header-bg);
    color: var(--text);
    line-height: 1;
  }
  /** Messages / notice history: accent icon in top rail + drawer (overrides `color: var(--text)` above). Desktop untouched — rule lives only in this max-width block. */
  body.page-messages .site-nav-mobile-inline > .nav-actions-rail .nav-dm-link,
  body.page-messages .site-nav-drawer .nav-actions-rail .nav-dm-link {
    color: var(--accent);
  }
  body.page-notice .site-nav-mobile-inline > .nav-actions-rail .nav-notif-btn,
  body.page-notice .site-nav-drawer .nav-actions-rail .nav-notif-btn {
    color: var(--accent);
  }
  body.page-dashboard .site-nav > .site-nav-mobile-dash {
    color: var(--accent);
  }
  .site-nav-mobile-inline > .nav-actions-rail .nav-dm-icon {
    display: block;
    font-size: 18px;
    line-height: 1;
  }
  .site-nav-mobile-inline > .nav-actions-rail .nav-notif-icon {
    width: 18px;
    height: 18px;
    display: block;
  }
  /** Compact dashboard icon never shows in the mobile rail — column 1 already has the dash icon */
  .site-nav-mobile-inline > .nav-actions-rail .nav-dash-compact {
    display: none !important;
  }
  /** Notification preview panel anchors to the rail wrap; reposition under the right-side icons */
  .site-nav-mobile-inline > .nav-actions-rail .nav-notif-panel {
    right: 0;
    left: auto;
  }

  .site-nav-drawer .nav-links a.nav-link--market[href$="resell.html"] {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0;
    padding-top: 10px;
    border-top: none;
  }

  .section-head {
    align-items: start;
    flex-direction: column;
  }

  /** Emerging (“On the rise”): align top spacing with other landing strips (was looser from default .home-section padding) */
  .home-section:has(#grid-emerging) {
    padding-top: 4px;
  }

  .home-section .home-product-grid:not(#grid-today) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-best-artists-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-best-artists-grid .artist-card {
    grid-column: auto;
  }
  #grid-today.home-product-grid--today-one-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  #grid-today.home-product-grid--today-two-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: min(1280px, calc(100% - 20px));
  }

  .site-header .brand > span {
    font-size: clamp(23px, 5.8vw, 32px);
  }

  .search-form,
  .home-section .home-product-grid:not(#grid-today) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-best-artists-grid {
    grid-template-columns: 1fr;
  }
  #grid-today.home-product-grid--today-one-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #grid-today.home-product-grid--today-two-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* 2×2: About | Shop, then Terms & Policies | Help */
  .footer-nav-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    max-width: none;
    justify-self: stretch;
  }
}

/* ─── ACTIVE NAV LINK ────────────────────────────────── */
.nav-links a.active {
  color: var(--accent);
  font-weight: 700;
}

/* Header rail: same accent as .nav-links a.active when on Messages / notice history */
body.page-messages .nav-dm-link {
  color: var(--accent);
}
body.page-messages .nav-dm-link:hover {
  color: var(--accent);
  background: var(--surface-soft);
}
body.page-notice .nav-notif-btn {
  color: var(--accent);
}
body.page-notice .nav-notif-btn:hover {
  color: var(--accent);
  background: var(--surface-soft);
}

/* ─── PAGE HERO ──────────────────────────────────────── */
.page-hero {
  padding: 52px 0 40px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--bg) 100%);
}

.page-hero-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.page-hero p {
  margin: 0 0 16px;
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-hero-count {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* ─── FILTER BAR ─────────────────────────────────────── */
.explore-filters-wrap .filter-chips {
  flex-wrap: wrap;
}
.fil-time-custom-row input[type="date"] {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}

.filter-bar {
  margin-top: 0;
  padding: 8px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(34, 34, 34, 0.04);
}

.filter-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-chip.active {
  background: var(--surface-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.sort-select {
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

/* ─── BROWSE SECTION ─────────────────────────────────── */
.browse-section {
  padding: 28px 0 52px;
}

.results-meta {
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--muted);
}

/* ─── ARTIST PORTFOLIO FILTER BAR ────────────────────── */
#artist-portfolio-section {
  padding-top: 0;
}
.artist-portfolio-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(34,34,34,0.04);
  padding: 12px 0;
  margin-bottom: 24px;
}
.artist-portfolio-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Desktop: selects first (order:1), search cluster second (order:2) */
.artist-portfolio-selects-panel {
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.artist-portfolio-search-cluster {
  order: 2;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.artist-portfolio-search-cluster #artist-portfolio-search {
  flex: 1;
  min-width: 0;
}
#artist-portfolio-filter-toggle { display: none; }
#artist-portfolio-search-btn .explore-search-btn-text { display: inline; }
#artist-portfolio-search-btn .explore-search-btn-icon { display: none; }

@media (max-width: 820px) {
  .artist-portfolio-bar { padding: 8px 0; margin-bottom: 16px; }
  .artist-portfolio-bar-inner { flex-direction: column; gap: 8px; }
  /* Mobile: search on top (order:1), selects below (order:2) */
  .artist-portfolio-search-cluster {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    box-sizing: border-box;
  }
  #artist-portfolio-search {
    min-width: 0;
    width: 100%;
    max-width: none !important;
    min-height: 36px;
    height: 36px;
    font-size: 14px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  #artist-portfolio-search-btn.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    flex-shrink: 0;
  }
  #artist-portfolio-search-btn .explore-search-btn-text { display: none; }
  #artist-portfolio-search-btn .explore-search-btn-icon { display: block; width: 20px; height: 20px; }
  #artist-portfolio-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
  }
  #artist-portfolio-filter-toggle:hover { border-color: var(--accent); color: var(--accent); }
  #artist-portfolio-filter-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--surface-soft); }
  .artist-portfolio-selects-panel {
    order: 2;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
  }
  .artist-portfolio-selects-panel.explore-filters-collapsible--closed { display: none !important; }
  .artist-portfolio-selects-panel .sort-select { flex: 1; min-width: 0; width: auto; max-width: none !important; }
}

/* ─── THUMB WRAP (badge positioning) ─────────────────── */
.thumb-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.concept-visual-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 4px 8px;
  backdrop-filter: blur(1px);
  pointer-events: none;
  user-select: none;
}

.thumb-wrap .product-thumb {
  border-radius: 0;
}

/* Dashboard — Saved Works: remove from saved (thumb top-right) */
.dash-saved-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 8;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background 0.15s ease, transform 0.12s ease;
}
.dash-saved-remove:hover {
  background: rgba(192, 57, 43, 0.92);
  transform: scale(1.06);
}
.dash-saved-remove:focus-visible {
  outline: 2px solid var(--accent, #111);
  outline-offset: 2px;
}
.dash-saved-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dash-container .home-product-grid .thumb-wrap > a {
  display: block;
  line-height: 0;
}

/**
 * Dashboard → Saved Works only: `.dash-saved-remove` sits top-right; keep listing-state
 * pills (Sold, Unlisted, Pending, …) on the top-left so they never overlap the × control.
 * Scoped with :has(.dash-saved-remove) so Explore / product / landing cards are untouched.
 */
body.page-dashboard .dash-container .thumb-wrap:has(.dash-saved-remove) .status-badge {
  left: 10px;
  right: auto;
}
body.page-dashboard .dash-container .thumb-wrap:has(.dash-saved-remove) .thumb-badge-row {
  left: 10px;
  right: 10px;
  justify-content: flex-start;
}
body.page-dashboard .dash-container .thumb-wrap:has(.dash-saved-remove) .thumb-badge-row .status-badge {
  left: auto;
  right: auto;
}

/* Dashboard — Artists you follow (avatar + name + unfollow) */
.dash-follow-artist-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92px;
  flex-shrink: 0;
}
.dash-follow-artist-name {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.dash-follow-artist-tile {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.dash-follow-artist-link {
  display: block;
  border-radius: 999px;
  overflow: hidden;
  width: 54px;
  height: 54px;
  border: 2px solid var(--line);
  background: var(--surface-soft);
  line-height: 0;
}
.dash-follow-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 8;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 700;
  transition: background 0.15s ease;
}
.dash-follow-remove:hover {
  background: rgba(192, 57, 43, 0.92);
}
.dash-follow-remove:focus-visible {
  outline: 2px solid var(--accent, #111);
  outline-offset: 2px;
}
.dash-follow-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.rank-badge.gold { background: #c9921a; }
.rank-badge.silver { background: #8c9aab; }
.rank-badge.bronze { background: #a0643a; }

.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 22px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Best Sellers: metric + “Not for sale” side by side (no overlap) */
.thumb-badge-row {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}
.thumb-badge-row .status-badge {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  pointer-events: auto;
}

.time-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  color: white;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── PAGINATION ─────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/** No pager content (0 results / cleared): hide rule + spacing */
nav.pagination:empty {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/** Explore / Artists / Resell: keep original 6px between desktop page buttons (inner .dash-pager--desktop). */
.pagination .dash-pager--desktop {
  gap: 6px;
}

.pg-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pg-btn:hover:not(.pg-active) {
  border-color: var(--accent);
  color: var(--accent);
}

.pg-btn.pg-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 700;
}

@media (min-width: 821px) {
  /* Desktop pagination (Explore / Artists / Artist profile / Resell): compact controls. */
  .pagination {
    gap: 4px;
    margin-top: 34px;
    padding-top: 18px;
  }
  .pagination .dash-pager--desktop {
    gap: 4px;
  }
  .pagination .pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 12px;
  }
  /* Desktop active page fill: match header Explore active lavender tone. */
  .pagination .pg-btn.pg-active {
    background: color-mix(in srgb, var(--accent) 90%, white);
    border-color: color-mix(in srgb, var(--accent) 90%, white);
    color: #fff;
  }
}

/** Collector-item resale — Reviews on reseller: Explore/Resell-style pager, slightly compact (desktop only) */
@media (min-width: 821px) {
  #reseller-reviews-controls.reseller-reviews-dash-block .dash-pager--desktop {
    gap: 6px;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block .pg-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    font-size: 12px;
    border-radius: 7px;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block .reseller-reviews-pagesize {
    font-size: 12px !important;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block select.browse-pager-page-size-select {
    font-size: 12px;
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ─── ARTIST SEARCH BAR ──────────────────────────────── */
.artist-search-bar {
  padding: 20px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.artist-search-form {
  display: flex;
  gap: 12px;
  align-items: center;
}

.artist-search-input {
  flex: 1;
  max-width: 360px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  font-size: 14px;
  outline: none;
  color: var(--text);
}

.artist-search-input:focus {
  border-color: var(--accent);
}

.filter-tab-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.filter-tab {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-tab.active {
  background: var(--surface-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ─── ARTIST GRID & CARD ─────────────────────────────── */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.artist-card {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.artist-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(34, 34, 34, 0.10);
}

/* Banner: full-width image strip (profile opens via banner link) */
.artist-card-banner {
  position: relative;
  width: 100%;
}

.artist-card-banner-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Directory / preview card: number centered over column width; labels left-aligned on same edge as Works/Sold/… */
.artist-stat-num-wrap,
.artist-stat-followers-text {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}
.artist-stat-num-wrap > strong {
  text-align: center;
  line-height: 1.4;
}
.artist-stat--followers .artist-stat-num-wrap strong {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.artist-stat-lbl,
.artist-stat-followers-caption {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
  text-align: left;
}

.artist-stat-followers-inline {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.artist-stat--followers .artist-follow-btn--icon,
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 9px;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.artist-stat--followers .artist-follow-btn--icon {
  margin: 0;
}

.artist-stat--followers .artist-follow-btn--icon[data-following="1"],
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon[data-following="1"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.artist-stat--followers .artist-follow-btn--icon:hover,
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.artist-stat--followers .artist-follow-btn--icon[data-following="1"]:hover,
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon[data-following="1"]:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.artist-stat--followers .artist-follow-icon,
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn .artist-follow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 0;
}
.artist-follow-icon-svg {
  display: block;
  flex-shrink: 0;
}
.artist-stat--followers .artist-follow-icon-svg {
  width: 18px;
  height: 18px;
}

.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn .artist-follow-icon-svg {
  width: 18px;
  height: 18px;
}

/* Artist directory cards (`artist-card`): compact follow chip; white fill, gray border, black icon; accent on hover */
.artist-card .artist-stat--followers .artist-follow-btn--icon {
  width: 72px;
  height: 38px;
  border-radius: 11px;
  margin-left: 10px;
  flex-shrink: 0;
  background: #fff;
  color: #666;
  border: 1px solid var(--line);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.artist-card .artist-stat--followers .artist-follow-btn--icon[data-following='1'] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.artist-card .artist-stat--followers .artist-follow-btn--icon:hover,
.artist-card .artist-stat--followers .artist-follow-btn--icon[data-following='0']:hover {
  background: #fff;
  color: #444;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.artist-card .artist-stat--followers .artist-follow-btn--icon[data-following='1']:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.artist-card .artist-stat--followers .artist-follow-icon-svg {
  width: 22px;
  height: 22px;
}

/* Full-width banner row (Collector list cards still use direct link if any) */
.artist-card > a:first-of-type:not(.follow-btn):not(.artist-card-banner-link) {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.artist-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  height: 136px;
  background: var(--line);
}

.artist-thumbs img {
  width: 100%;
  height: 136px;
  object-fit: cover;
}

.artist-thumbs-custom {
  display: block;
  grid-template-columns: none;
}
.artist-thumbs-custom img {
  width: 100%;
  height: 136px;
  object-fit: cover;
  display: block;
}

.artist-body {
  padding: 16px 18px 20px;
}

/* Artist directory card: avatar + name row; Follow is inline by follower count */
.artist-card-main-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.artist-card-main-row .artist-avatar-row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.artist-card .artist-stats {
  margin: 10px 0 0;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 14px;
  align-items: flex-start;
}

.artist-card .artist-stats > .artist-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.artist-avatar-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: -22px;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
}

.artist-avatar-link {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 50%;
}

/* Opaque disc behind avatar so banner never shows through transparent PNGs */
.artist-avatar-ring {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.artist-avatar-ring .artist-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.artist-name {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 2px;
}

.artist-specialty {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.artist-stats {
  display: flex;
  gap: 18px;
  margin: 14px 0 16px;
}

.artist-stat {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.artist-stat strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
}

.follow-btn {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.follow-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.follow-btn.following {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ─── RESPONSIVE — new additions ────────────────────── */
@media (max-width: 1100px) {
  .artist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .filter-bar-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .filter-tab-row {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .artist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero {
    padding: 36px 0 28px;
  }

  /** Artists directory cards: stats + Follow on one row without wrapping on narrow viewports. */
  body.page-artists .artist-card .artist-stats {
    flex-wrap: nowrap;
    row-gap: 0;
    column-gap: 7px;
    align-items: flex-start;
  }
  body.page-artists .artist-card .artist-stat {
    flex: 0 1 auto;
    min-width: 0;
  }
  body.page-artists .artist-card .artist-stat--followers {
    flex: 0 0 auto;
  }
  body.page-artists .artist-card .artist-stat--followers .artist-follow-btn--icon {
    width: 50px;
    min-width: 50px;
    height: 36px;
    margin-left: 6px;
    border-radius: 10px;
  }
  body.page-artists .artist-card .artist-stat-followers-inline {
    gap: 6px;
  }
  body.page-artists .artist-card .artist-stat--followers .artist-follow-icon-svg {
    width: 20px;
    height: 20px;
  }

  /**
   * Landing “Best Artists” uses the same `artist-card` markup as artists.html but `body.page-home`
   * misses the directory rules — stats + Follow wrapped to two lines on narrow cards. Mirror artists
   * mobile row here only (desktop / other pages unchanged).
   */
  body.page-home .home-best-artists-grid .artist-card .artist-stats {
    flex-wrap: nowrap;
    row-gap: 0;
    column-gap: 7px;
    align-items: flex-start;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat {
    flex: 0 1 auto;
    min-width: 0;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat--followers {
    flex: 0 0 auto;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat--followers .artist-follow-btn--icon {
    width: 50px;
    min-width: 50px;
    height: 36px;
    margin-left: 6px;
    border-radius: 10px;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat-followers-inline {
    gap: 6px;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat--followers .artist-follow-icon-svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 640px) {
  .artist-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /** Single-column cards: more horizontal room — widen Follow chip toward desktop proportions */
  body.page-artists .artist-card .artist-stat--followers .artist-follow-btn--icon {
    width: 62px;
    min-width: 62px;
    height: 38px;
    margin-left: 8px;
    border-radius: 11px;
  }
  body.page-artists .artist-card .artist-stat--followers .artist-follow-icon-svg {
    width: 22px;
    height: 22px;
  }

  body.page-home .home-best-artists-grid .artist-card .artist-stat--followers .artist-follow-btn--icon {
    width: 62px;
    min-width: 62px;
    height: 38px;
    margin-left: 8px;
    border-radius: 11px;
  }
  body.page-home .home-best-artists-grid .artist-card .artist-stat--followers .artist-follow-icon-svg {
    width: 22px;
    height: 22px;
  }

  .filter-tab-row {
    flex-wrap: wrap;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* 2×2: About | Shop, then Terms & Policies | Help */
  .footer-nav-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    max-width: none;
    justify-self: stretch;
  }
}

/* ─── SKELETON LOADING ─────────────────────────────────── */
.skeleton-card {
  aspect-ratio: 3 / 4.8;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--line) 25%, var(--surface-soft) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── AUTH PAGES ───────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.auth-title { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.03em; }
.auth-sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.auth-error {
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: #fff0ee;
  border: 1px solid #fbc4bb;
  color: #c0392b;
  font-size: 14px;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  background-origin: border-box;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.28);
}
.google-btn:hover {
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.38);
  filter: brightness(1.03);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
/* Soft callout under auth fields — short lines read better than one long paragraph */
.auth-field-hint {
  margin-top: 8px;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
  letter-spacing: 0.01em;
}
.auth-field-hint p {
  margin: 0 0 0.65em;
}
.auth-field-hint p:last-child {
  margin-bottom: 0;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 14px; font-weight: 600; color: var(--text); }
.form-group label small { font-weight: 400; color: var(--muted); }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group select,
.form-group textarea {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: white;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
}
.form-group textarea { height: auto; padding: 12px 14px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.checkbox-label input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
/* Legal checkbox: flowing paragraph so “I agree to the” stays with links; natural word wrap */
.checkbox-label--legal {
  align-items: flex-start;
}
.checkbox-label--legal .legal-inline {
  flex: 1;
  min-width: 0;
  line-height: 1.55;
  color: var(--text);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.checkbox-label--legal .legal-inline .policy-link {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .checkbox-label--legal .legal-inline .policy-link { white-space: normal; }
}
/* Order modal: three acknowledgment rows (flat white cards, light border) */
.order-ack-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
label.order-ack-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
}
label.order-ack-check input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  min-width: 1.05em;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.auth-submit { margin-top: 4px; width: 100%; font-size: 15px; }
.auth-switch { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.auth-switch a { color: var(--accent); font-weight: 600; }

/* ─── PRODUCT DETAIL PAGE ──────────────────────────────── */
.product-layout {
  display: grid;
  /* Artwork column capped (~smaller than old 50/50); info column gets remaining width */
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 48px;
  row-gap: 4px;
  padding: 40px 0 22px;
  align-items: start;
}
.product-gallery-col {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}
.product-info-col {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
/** Copyright sits row 2 col 1 so it does not stretch the main row vs. the info column (avoids pushing full-width sections down). */
.product-layout__copyright {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  align-self: start;
}
.product-gallery { position: sticky; top: 20px; width: 100%; }
.gallery-main-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 2px 3px #b0b0b0);
}
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; opacity: 0.7;
  transition: border-color 0.15s, opacity 0.15s;
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--accent); opacity: 1; }

/** product.html — tuck Selling History closer under the hero grid */
.product-selling-history-after-hero {
  margin-top: -14px;
}

.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

.product-page-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.product-seller-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 12px; text-decoration: none; }
.product-seller-link:hover { text-decoration: underline; color: var(--accent); }
/** “Artist:” only — muted label; name + tier keep link emphasis */
.product-seller-link .product-detail-field-label {
  color: var(--muted);
  font-weight: 400;
}
.seller-mini-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.product-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.stars-display { color: var(--accent); font-size: 16px; letter-spacing: 2px; }
.rating-text { font-size: 14px; color: var(--muted); }
.sold-count { font-size: 13px; color: var(--muted); margin-left: auto; }

.product-price-display { font-size: 32px; font-weight: 700; color: var(--text); margin-bottom: 18px; letter-spacing: -0.015em; }

/* Product detail: two columns below description, same content width as description block */
.product-meta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
}
.product-meta-grid.product-meta-grid--split-col {
  margin-bottom: 0;
  min-width: 0;
}
/* Keep label + gap on one line; wrap only inside the value (word boundaries). */
.product-meta-split .meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
}
.product-meta-split .meta-label {
  flex-shrink: 0;
}
.product-meta-split .meta-row > :not(.meta-label) {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 640px) {
  .product-meta-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.product-meta-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.meta-row { display: flex; gap: 12px; font-size: 14px; }
.meta-label { color: var(--muted); min-width: 100px; }
.meta-row.meta-row--tags {
  align-items: flex-start;
}
.meta-row--tags .tag-row--meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  line-height: 1.4;
  min-width: 0;
}
.product-price-meta .product-price-value {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  color: var(--text);
}
.stock-low { color: #c0392b; font-weight: 600; }

.product-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
/* Product detail: Purchase (left column, full cell width) | DM, Save, Report (right column, full cell width) */
.product-cta-icon {
  flex-shrink: 0;
  display: block;
}
.product-cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  /* Top-align columns so long Purchase-side copy does not stretch DM / Save / Report row height */
  align-items: start;
  width: 100%;
  margin-top: 28px;
  margin-bottom: 24px;
}
.product-cta-split .product-cta-row {
  margin-bottom: 0;
}
.product-cta-split__col {
  min-width: 0;
  width: 100%;
  display: flex;
}
.product-cta-split__col--primary .product-cta-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.product-cta-split__col--primary .product-cta-row > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.product-cta-split__col--primary .product-cta-row > .product-buy-btn,
.product-cta-split__col--primary .product-cta-row > a.product-buy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}
/* Purchase: same white pill look as DM / Report (not solid accent) */
.product-cta-split__col--primary .product-cta-row > .button.product-buy-btn:not(:disabled),
.product-cta-split__col--primary .product-cta-row > a.button.product-buy-btn {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 400;
}
.product-cta-split__col--primary .product-cta-row > .button.product-buy-btn:not(:disabled):hover,
.product-cta-split__col--primary .product-cta-row > a.button.product-buy-btn:hover {
  border-color: var(--muted);
  background: var(--surface-soft);
}
.product-cta-split__col--primary .product-cta-row > .button.product-buy-btn:disabled {
  background: #fff;
  color: var(--muted);
  border-color: var(--line);
}
.product-cta-split__col--secondary .product-cta-row {
  width: 100%;
  display: grid;
  /* DM = natural width; Save & Report share the rest of the right half (narrower, single line) */
  grid-template-columns: auto minmax(52px, 1fr) minmax(52px, 1fr);
  gap: 8px;
  /* Each control keeps its own height; no vertical stretch to match siblings */
  align-items: center;
  margin-top: 0;
}
/* Single block (e.g. banned copy, or Sign in for DM only): span full right column */
.product-cta-split__col--secondary .product-cta-row > :only-child {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: none;
}
/* DM / Save / Report row */
.product-cta-split__col--secondary .product-cta-row > button.btn-ghost:not(.report-btn),
.product-cta-split__col--secondary .product-cta-row > a.btn-ghost,
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon,
.product-cta-split__col--secondary .product-cta-row > .report-btn {
  min-width: 0;
  min-height: 40px;
  height: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.product-cta-split__col--secondary .product-cta-row > button.btn-ghost:not(.report-btn),
.product-cta-split__col--secondary .product-cta-row > a.btn-ghost {
  justify-self: start;
  width: max-content;
  max-width: 100%;
}
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon,
.product-cta-split__col--secondary .product-cta-row > .report-btn {
  width: 100%;
  min-width: 0;
}
.product-cta-split__col--secondary .product-cta-row > button.btn-ghost:not(.report-btn):hover,
.product-cta-split__col--secondary .product-cta-row > a.btn-ghost:hover,
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon:hover,
.product-cta-split__col--secondary .product-cta-row > .report-btn:hover {
  border-color: var(--muted);
  background: var(--surface-soft);
}
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon.liked:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
}
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 400;
  flex-direction: row;
}
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon .fav-btn-heart {
  font-size: 22px;
  line-height: 1;
}
.product-cta-split__col--secondary .product-cta-row > .fav-btn.like-btn--icon .fav-btn-text {
  font-size: 14px;
  font-weight: 400;
}
/* Sole control in the right column (e.g. Sign in for DM): full width of the half */
.product-cta-split__col--secondary .product-cta-row > a.btn-ghost:only-child,
.product-cta-split__col--secondary .product-cta-row > button.btn-ghost:only-child {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}
@media (max-width: 640px) {
  .product-cta-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.product-buy-btn { min-height: 50px; padding: 0 28px; font-size: 15px; }
/* Shorter pills on product detail CTA row (overrides .product-buy-btn defaults above) */
.product-cta-split .product-buy-btn {
  min-height: 40px;
  font-size: 14px;
}
.fav-btn { min-height: 50px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 14px; font-weight: 600; cursor: pointer; }
.fav-btn.liked { color: var(--accent); border-color: var(--accent); }
.fav-btn.like-btn--icon {
  min-width: 50px;
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: white; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.report-btn { font-size: 13px; }
.btn-link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

.product-section { margin-bottom: 24px; }
.section-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 10px; }
.product-desc-text { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; }
.process-prompt { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill { padding: 4px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); }

.price-history-list { display: flex; flex-direction: column; gap: 6px; }
.price-history-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.price-history-row.price-history-row--selling {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 14px;
  line-height: 1.55;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.price-history-row.price-history-row--selling .selling-history-main {
  min-width: 0;
  flex: 1 1 12rem;
}
.price-history-row.price-history-row--selling .selling-history-row__date.review-date {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.price-history-row.price-history-row--selling .selling-history-sep {
  color: var(--muted);
  font-weight: 400;
}
.price-history-row.price-history-row--selling .price-history-val { font-weight: 700; }
a.selling-history-listing-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
a.selling-history-listing-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
span.selling-history-listing-link--muted {
  color: var(--muted);
  font-weight: 400;
}
.price-history-date { color: var(--muted); }
.price-history-val { font-weight: 700; }
.selling-history-collector {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: none;
  font-family: ui-monospace, monospace;
}

@media (max-width: 820px) {
  /** Selling History: first line = date (left), second line = parties · listing · price */
  .price-history-row.price-history-row--selling {
    flex-direction: column;
    align-items: stretch;
    gap: 5px 0;
  }
  .price-history-row.price-history-row--selling .selling-history-main {
    flex: none;
    width: 100%;
    order: 2;
  }
  .price-history-row.price-history-row--selling .selling-history-row__date.review-date {
    order: 1;
    margin-left: 0;
    align-self: stretch;
    text-align: left;
    white-space: nowrap;
  }
  /** Match “Reviews on reseller” Listing link (11px) */
  .price-history-row.price-history-row--selling a.selling-history-listing-link {
    font-size: 11px;
    font-weight: 600;
    text-underline-offset: 2px;
  }
}

.price-history-more-wrap { margin-top: 8px; }
.price-history-toggle {
  margin-top: 12px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--accent);
  background: none; border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
}
.price-history-toggle:hover { background: rgba(0,0,0,0.04); }

/* Reviews */
.reviews-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.review-card { display: flex; gap: 14px; }
.reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.reviewer-initials { display: grid; place-items: center; background: var(--accent); color: white; font-weight: 700; font-size: 16px; }
.review-body { flex: 1; min-width: 0; }
.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.review-stars { color: var(--accent); font-size: 14px; }
.review-date { font-size: 12px; color: var(--muted); margin-left: auto; }
.review-comment { font-size: 14px; color: var(--text); margin: 0; line-height: 1.6; }
/* No avatar: public id + stars + date on one row (date right), comment below */
.review-card.review-card--text-only { display: block; }
.review-card.review-card--text-only .review-body { width: 100%; }
.review-card.review-card--text-only .review-top { width: 100%; margin-bottom: 8px; flex-wrap: nowrap; }
.review-card.review-card--text-only .review-top .review-stars { flex-shrink: 0; }
.review-card.review-card--text-only .review-top .review-date { flex-shrink: 0; white-space: nowrap; }
.review-card.review-card--text-only .reviewer-id { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }

.review-form-details summary { font-size: 14px; font-weight: 600; cursor: pointer; color: var(--accent); }
.star-picker { display: flex; gap: 4px; }
.star-pick { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--muted); padding: 0; transition: color 0.1s; }
.star-pick:hover { color: var(--accent); }

/* ─── MODALS ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5);
  display: grid; place-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay[hidden] {
  display: none !important;
}
.modal-box {
  background: white;
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-box h3 { margin: 0 0 4px; font-size: 20px; }

/* Checkout / purchase modal: match dashboard “Upload a New Work” width (600px) */
#order-modal .modal-box {
  max-width: min(600px, 100%);
}

/* ─── DASHBOARD ────────────────────────────────────────── */
.dash-container { padding: 36px 0; }
@media (max-width: 820px) {
  /* Pull mobile Dashboard title area closer to header. */
  body.page-dashboard .dash-container {
    padding-top: 12px;
  }

  /**
   * Saved Works uses `.home-product-grid` outside `.home-section`, so it never picks up
   * landing’s mobile column rules — was stuck at 6 tracks (broken narrow cards).
   * Match other listing previews: 2 columns per row on mobile; desktop unchanged.
   */
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) .product-card {
    min-width: 0;
  }
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) .product-info {
    min-width: 0;
  }
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) .product-info h3,
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) .product-info h3 a {
    min-width: 0;
  }
  body.page-dashboard .dash-container .home-product-grid:not(.home-product-grid--masonry) .product-info h3 a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Card chargeback evidence list: shorter bullets on narrow viewports only. */
.dash-chargeback-evidence--mobile {
  display: none;
}
@media (max-width: 820px) {
  .dash-chargeback-evidence--desktop {
    display: none !important;
  }
  .dash-chargeback-evidence--mobile {
    display: inline !important;
  }
}

/**
 * Collapsible section-description: on desktop always visible, no toggle button.
 * On mobile the paragraph starts hidden; the “i” (info) button toggles .is-open.
 */
.dash-info-toggle { display: none; }

@media (max-width: 820px) {
  .dash-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
  }
  .dash-info-toggle.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-soft);
  }
  .dash-info-para {
    display: none;
  }
  .dash-info-para.is-open {
    display: block !important;
  }
}

/** Dashboard pagination: desktop = numbered buttons; mobile = Prev / page dropdown / Next */
.dash-pager--desktop {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.dash-pager--mobile {
  display: none;
}
@media (min-width: 821px) {
  /** Collector-item resale reviews: keep desktop label “Per page” (hide browse-style mobile fragments) */
  .reseller-reviews-pagesize .reseller-reviews-per-label-mob,
  .reseller-reviews-pagesize .reseller-reviews-per-slash-mob {
    display: none !important;
  }
}
@media (max-width: 820px) {
  .dash-pager--desktop {
    display: none !important;
  }
  .dash-pager--mobile {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    row-gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .dash-pager-page-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
  }

  /**
   * Pager + page-size row: Prev / n/m / Next on the left, "Show …/page" on the right.
   * (Desktop keeps 1fr | centered pager | 1fr with right slot from inline grid.)
   */
  .dash-pager-block:not(.dash-pager-block--pager-only) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  .dash-pager-block:not(.dash-pager-block--pager-only) > div:first-child {
    display: none !important;
  }

  .dash-pager-block:not(.dash-pager-block--pager-only) > div:nth-child(2) {
    display: flex !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .dash-pager-block:not(.dash-pager-block--pager-only) > div:nth-child(3) {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .dash-pager-block--pager-only {
    justify-content: flex-start !important;
  }

  /** Collector-item resale: mobile = Show … / page */
  .reseller-reviews-pagesize .reseller-reviews-per-label-desk {
    display: none !important;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block .reseller-reviews-pagesize {
    font-size: 12px !important;
    gap: 6px !important;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block .reseller-reviews-pagesize .reseller-reviews-per-label-mob,
  #reseller-reviews-controls.reseller-reviews-dash-block .reseller-reviews-pagesize .reseller-reviews-per-slash-mob {
    font-size: 12px !important;
    line-height: 1.1;
  }
  #reseller-reviews-controls.reseller-reviews-dash-block select.browse-pager-page-size-select {
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 11px !important;
  }

  /** Explore, Artists, Resell: browse pager row left-aligned on narrow screens */
  nav.pagination {
    justify-content: flex-start;
  }

  /**
   * Dashboard — My Listings / Archived: move action buttons below row; grid by --dash-action-cols (min 3; 4 buttons ⇒ 4 columns).
   */
  #dash-main .listings-list .listing-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #dash-main .listings-list .listing-row > .listing-info {
    flex: 1;
    min-width: 0;
  }

  #dash-main .listings-list .listing-row > .dash-listing-actions {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    order: 3;
    margin-top: 6px;
  }

  #dash-main .listings-list .listing-row > .dash-listing-actions.dash-listing-actions--grid {
    display: grid !important;
    grid-template-columns: repeat(var(--dash-action-cols, 3), minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
    flex-wrap: unset !important;
  }

  #dash-main .listings-list .listing-row > .dash-listing-actions.dash-listing-actions--grid > button,
  #dash-main .listings-list .listing-row > .dash-listing-actions.dash-listing-actions--grid > a.btn-ghost {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 30px !important;
    height: auto !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  #dash-main .listings-list .listing-row > .dash-listing-actions.dash-listing-actions--message {
    justify-content: flex-start !important;
  }

  /** Collector dashboard — My Collection action buttons: full-width row, equal split columns */
  #my-collection .orders-list .order-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #my-collection .orders-list .order-row > .listing-info {
    flex: 1;
    min-width: 0;
  }

  #my-collection .orders-list .order-row > .dash-listing-actions {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    order: 3;
    margin-top: 6px;
  }

  #my-collection .orders-list .order-row > .dash-listing-actions.dash-listing-actions--grid {
    display: grid !important;
    grid-template-columns: repeat(var(--dash-action-cols, 3), minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
    flex-wrap: unset !important;
  }

  #my-collection .orders-list .order-row > .dash-listing-actions.dash-listing-actions--grid > button,
  #my-collection .orders-list .order-row > .dash-listing-actions.dash-listing-actions--grid > a.btn-ghost {
    width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
    min-height: 30px !important;
    height: auto !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  #my-collection .orders-list .order-row > .dash-listing-actions.dash-listing-actions--message {
    justify-content: flex-start !important;
  }

  /**
   * Purchase-in-progress copy sits in a div with inline `display:flex`, so the text becomes a flex item
   * and stays content-width. Force a normal block formatting context on mobile so the line uses the row.
   */
  #my-collection .orders-list .order-row > .dash-listing-actions.dash-listing-actions--collection-purchase-pending {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box;
  }

  /** My Collection — resale purchase in progress note: use full row width under product info (not a narrow column). */
  #my-collection .orders-list .dash-collection-purchase-in-progress-hint {
    display: block;
    width: 100%;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
  }

  /** My Collection — resell unlock hints: avoid mid-phrase wrap on narrow viewports */
  #my-collection .orders-list .dash-collection-resell-hint {
    max-width: none !important;
    white-space: nowrap;
  }
}

@media (min-width: 821px) {
  #my-collection .orders-list .dash-collection-purchase-in-progress-hint {
    max-width: 300px;
    display: inline-block;
  }
}

.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; gap: 16px; }
.dash-title { margin: 0; font-size: 32px; letter-spacing: -0.03em; color: #111; }

/** Dashboard header: compact Edit Profile (global .btn-ghost uses min-height: 40px) */
a.btn-ghost.dash-edit-profile-btn {
  min-height: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 8px;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-section { margin-bottom: 40px; }
.dash-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-section-title { margin: 0 0 16px; font-size: 18px; letter-spacing: -0.02em; }

/** Artist Overview: full-width sub-heading between shop metrics (row 1) and seller/reseller financial metrics (row 2). */
.stat-grid--artist-overview > .dash-overview-bridge-title {
  grid-column: 1 / -1;
  margin: 18px 0 2px;
}

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.stat-val { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.stat-val small { font-size: 16px; font-weight: 400; color: var(--muted); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }

/** Dashboard: metric left, footnote right (top-align with other stat cards in the same row). */
.stat-card--split-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.stat-card--split-note .stat-card-split__value {
  container-type: inline-size;
  min-width: 0;
  text-align: center;
}
.stat-card--split-note .stat-card-split__value .stat-val {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(13px, calc(100cqi / 3.6), 30px);
}
.stat-card--split-note .stat-card-split__value .stat-label { margin-top: 4px; }
.stat-card--split-note .stat-card-split__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

/**
 * Mobile only: Artist Overview cards stack vertically.
 *   Top half  → value (left) | label (right)
 *   Bottom    → footnote
 * Desktop split (left value / right note) is preserved above.
 */
@media (max-width: 820px) {
  .stat-grid .stat-card--split-note {
    min-width: 0;
  }

  .stat-card--split-note {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .stat-card--split-note .stat-card-split__value {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    container-type: normal;
    min-width: 0;
  }

  .stat-card--split-note .stat-card-split__value .stat-val {
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
    margin-inline: 0;
    font-size: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    text-align: left;
  }

  .stat-card--split-note .stat-card-split__value .stat-val small {
    font-size: 13px;
  }

  .stat-card--split-note .stat-card-split__value .stat-label {
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
    margin-top: 0;
    text-align: right;
    align-self: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
  }

  .stat-card--split-note .stat-card-split__note {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .stat-grid--artist-overview .stat-card--split-note .stat-card-split__note {
    text-align: center;
  }

  /** Artist Overview — Adjustment only: wider value column on narrow screens */
  .stat-grid--artist-overview .stat-card--artist-adjustment .stat-card-split__value .stat-val {
    flex: 0 1 60%;
    max-width: 60%;
  }

  .stat-grid--artist-overview .stat-card--artist-adjustment .stat-card-split__value .stat-label {
    flex: 0 1 40%;
    max-width: 40%;
  }

  /**
   * Collector Overview duo cards (mobile): two stacked rows; each row = value (left) | label (right).
   * Desktop keeps side-by-side columns with vertical number-over-label stacks.
   */
  .stat-grid .stat-card--collector-collection-resale {
    min-width: 0;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    container-type: normal;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px 0;
    margin: 0;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half:last-child {
    padding: 0;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half .stat-val {
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
    margin-inline: 0;
    font-size: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    text-align: left;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half .stat-label {
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
    margin-top: 0;
    text-align: right;
    align-self: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    white-space: normal;
    font-size: 13px;
  }

  .stat-card--collector-collection-resale .stat-card-collector-duo__half--active-resale .stat-label,
  .stat-card--collector-collection-resale .stat-card-collector-duo__half--unique-resale-buyers .stat-label {
    white-space: normal;
    font-size: 13px;
    letter-spacing: normal;
    line-height: 1.25;
  }
}

/** Collector Overview: one card, two metrics (active resale | in collection). */
.stat-card--collector-collection-resale {
  /* Match .stat-card padding so numbers/labels line up with Ongoing orders in the same row. */
  padding: 20px;
}
.stat-card-collector-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  text-align: center;
  /** One shared width for both halves: stat-val `cqi` matches, unlike per-column container queries. */
  container-type: inline-size;
  min-width: 0;
}
.stat-card-collector-duo__half {
  min-width: 0;
  padding: 0 10px;
}
.stat-card-collector-duo__half .stat-val {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  margin-inline: auto;
  /**
   * Use full duo width (same cqi in both cells). 7.2 = 2× the split-note divisor (3.6) so
   * digits match "Ongoing orders" / other stat cards until clamp hits 30px; shrink on overflow.
   */
  font-size: clamp(13px, calc(100cqi / 7.2), 30px);
}
.stat-card-collector-duo__half:first-child {
  border-right: 1px solid var(--line);
  padding-right: 14px;
}
.stat-card-collector-duo__half:last-child {
  padding-left: 14px;
}
.stat-card-collector-duo__half .stat-label {
  white-space: normal;
  /* Match default .stat-label (Ongoing orders) for one rhythm; long labels use modifiers below. */
  font-size: 13px;
  line-height: 1.3;
  max-width: 100%;
  margin-top: 4px;
}
/** Tight line for long label: keep on one row in narrow half-column. */
.stat-card-collector-duo__half--active-resale .stat-label {
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/** Collector stat: keep “Unique resale buyers” on one line (narrower column). */
.stat-card-collector-duo__half--unique-resale-buyers .stat-label {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
}

.listings-list, .orders-list { display: flex; flex-direction: column; gap: 12px; }
.listing-row, .order-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }

/** Dashboard Sold (artist): 2-column grid on desktop only; mobile keeps single column from .listings-list. */
@media (min-width: 821px) {
  .listings-list--sold-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex-direction: unset;
  }
}
.listing-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.listing-info { flex: 1; min-width: 0; }
.listing-title { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.listing-title:hover { color: var(--accent); }
.listing-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.listing-stats { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.listing-stats span { font-weight: 500; }

.order-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-pending  { background: #fff3cd; color: #856404; }
.status-paid     { background: #d4edda; color: #155724; }
.status-shipped  { background: #cce5ff; color: #004085; }
.status-delivered{ background: #d1ecf1; color: #0c5460; }
.status-cancelled{ background: #f8d7da; color: #721c24; }
.danger-btn { border-color: #c0392b !important; color: #c0392b !important; }

/* Upload form */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--accent); }
/* Clickable zone: real <input type="file"> sits on top (opacity 0) — works when display:none + <label for> fails (Safari/iOS). */
.photo-picker-dropzone {
  position: relative;
  min-height: 88px;
  margin-top: 8px;
  border-radius: 12px;
}
.photo-picker-dropzone .photo-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 88px;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 24px; /* iOS: larger hit target */
}
.photo-picker-dropzone .img-upload-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  height: auto;
  min-height: 88px;
}
.img-upload-label {
  display: flex; align-items: center; justify-content: center;
  height: 80px; border: 2px dashed var(--line); border-radius: 12px;
  font-size: 14px; color: var(--muted); cursor: pointer;
  transition: border-color 0.15s;
}
.photo-picker-dropzone:hover .img-upload-label { border-color: var(--accent); color: var(--accent); }
.photo-picker-dropzone--full .photo-picker-input {
  cursor: not-allowed;
  pointer-events: none;
}
.photo-picker-dropzone--full .img-upload-label { opacity: 0.55; }

/** English file picker UI (native `<input type="file">` uses OS locale, e.g. Korean “파일 선택”). */
.file-input-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}
.file-input-custom__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-input-custom__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.file-input-custom__trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.file-input-custom__native:focus + .file-input-custom__trigger {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.file-input-custom__status {
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(240px, 42vw);
}

.upload-thumb-wrap {
  position: relative;
  width: 100%;
  max-width: 120px;
}
.upload-thumb-wrap img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  vertical-align: top;
}
.upload-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.upload-thumb-remove:hover { background: rgba(180, 40, 40, 0.92); }
.upload-thumb-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-upload-label:hover { border-color: var(--accent); color: var(--accent); }
.img-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.img-preview-item { position: relative; }
#edit-images-preview .img-preview-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.img-primary-label { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: var(--accent); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* ─── ARTIST PROFILE PAGE ──────────────────────────────── */
.artist-hero-section--loading .artist-hero-strip {
  background: var(--line);
}
.artist-hero-section--loading .artist-hero-avatar--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}
.artist-hero-section--loading .artist-hero-skeleton-line {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
}
.artist-hero-section--loading .artist-hero-skeleton-line--title {
  width: min(240px, 70vw);
  height: 28px;
  margin-bottom: 10px;
}
.artist-hero-section--loading .artist-hero-skeleton-line--subtitle {
  width: min(160px, 50vw);
  height: 14px;
}
.artist-hero-section--loading .artist-stat-pill--placeholder {
  min-width: 72px;
  min-height: 52px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.artist-hero-section--loading .artist-stat-pill--placeholder strong,
.artist-hero-section--loading .artist-stat-pill--placeholder span {
  visibility: hidden;
}
.artist-hero-section { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; min-height: 200px; }
.artist-hero-bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; background: linear-gradient(135deg, var(--surface-soft), var(--bg)); }
.artist-hero-bg.artist-hero-bg--empty { display: block; }
/* Artist profile, no banner strips: dark translucent band so hero type matches photo-banner pages. */
.artist-hero-section:not(.collector-hero) .artist-hero-bg.artist-hero-bg--empty {
  background: rgba(10, 10, 12, 0.72);
}
.artist-hero-strip { min-height: 220px; background-size: cover; background-position: center; }
.artist-hero-bg:not(.artist-hero-bg--empty)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.artist-hero-bg.artist-hero-bg--custom { display: block; background-size: cover; background-position: center center; min-height: 260px; }
.artist-hero-inner { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 40px 0; flex-wrap: wrap; }
.artist-hero-left { display: flex; gap: 20px; align-items: flex-start; flex: 1; min-width: 0; }
.artist-hero-left > div:not(.artist-hero-avatar-column) { min-width: 0; flex: 1; }
/* Avatar + compact social grid (2 per row) under photo — artist profile hero */
.artist-hero-section .artist-hero-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 80px;
}
.artist-hero-section .artist-social-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 8px;
  margin-top: 0;
  width: 100%;
  justify-items: center;
}
.artist-hero-section .artist-social-row .artist-social-icon:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
}
.artist-hero-section .artist-social-icon {
  width: 32px;
  height: 32px;
}
.artist-hero-section .artist-social-icon svg {
  width: 16px;
  height: 16px;
}
.artist-hero-avatar-ring {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.artist-hero-avatar-ring .artist-hero-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.artist-hero-name { margin: 0 0 4px; font-size: clamp(22px,3vw,36px); letter-spacing: -0.03em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.artist-hero-since { margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.artist-hero-bio {
  margin: 0;
  /* Shorter line length on narrow viewports, wider on desktop — see min-width:821px */
  max-width: min(100%, 38ch);
  font-size: 14px;
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  color: rgba(255,255,255,0.92);
  line-height: 1.65;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (min-width: 821px) {
  .artist-hero-left > div:not(.artist-hero-avatar-column) {
    flex: 1 1 760px;
  }
  .artist-hero-bio {
    max-width: min(100%, 96ch);
  }
}
.collector-hero.artist-hero--plain .artist-hero-name { color: var(--text); text-shadow: none; }
.collector-hero.artist-hero--plain .artist-hero-since { color: var(--muted); text-shadow: none; }
.collector-hero.artist-hero--plain .artist-hero-bio { color: var(--muted); text-shadow: none; }
.artist-social-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.artist-hero-section:not(.collector-hero) .artist-social-icon { background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.artist-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--line); color: var(--text); transition: background .2s, color .2s; }
.artist-social-icon:hover { background: var(--accent); color: #fff; }
.artist-social-icon svg { width: 20px; height: 20px; }
.artist-stat-row { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
/* Profile hero stats: number on top, label below (same rhythm as Works / Sold) */
.artist-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 20px;
  min-width: 80px;
}
.artist-stat-pill strong {
  display: block;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.artist-stat-pill span {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}

/* Artist profile hero only (not directory cards, not collector profile): smaller stats + frosted white pills */
.artist-hero-section:not(.collector-hero) .artist-stat-row {
  gap: 12px;
  align-items: flex-start;
}
@media (min-width: 821px) {
  /* Desktop artist profile: anchor stat pills slightly lower, closer to banner bottom edge */
  .artist-hero-section:not(.collector-hero) .artist-stat-row {
    align-self: flex-end;
  }
}
.artist-hero-section:not(.collector-hero) .artist-stat-pill {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 62px;
  gap: 3px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.artist-hero-section:not(.collector-hero) .artist-stat-pill strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.artist-hero-section:not(.collector-hero) .artist-stat-pill span {
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
}

.artist-hero-section:not(.collector-hero) .artist-profile-followers-inline {
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}

/* Artist profile hero: follow chip matches stat pills (frosted white); gray border; black icon; accent fill on hover */
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon {
  width: 40px;
  height: 30px;
  border-radius: 9px;
  margin-left: 6px;
  transform: translateY(-2px);
  flex-shrink: 0;
  /* Match social icon chip opacity in artist hero */
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon[data-following='1'] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: none;
}
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon:hover,
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon[data-following='0']:hover {
  background: rgba(255, 255, 255, 0.62);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255, 255, 255, 0.42));
}
.artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon[data-following='1']:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: none;
}

@media (min-width: 821px) {
  .artist-hero-section:not(.collector-hero) .artist-hero-name .artist-tier-inline {
    transform: translateY(-4px);
  }
  .artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon {
    margin-top: 9px;
    color: #fff;
  }
  .artist-hero-section:not(.collector-hero) .artist-hero-follow-btn .artist-follow-icon-svg {
    color: #fff;
  }
}

/* Artist profile teaser: stronger emphasis + white outline (desktop/mobile) */
.artist-hero-section .profile-teaser-line {
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-left: -2px;
  margin-top: 2px;
  margin-bottom: 10px;
  -webkit-text-stroke: 0.75px rgba(255, 255, 255, 0.9);
  paint-order: stroke fill;
  text-shadow:
    -0.75px 0 rgba(255, 255, 255, 0.85),
    0.75px 0 rgba(255, 255, 255, 0.85),
    0 -0.75px rgba(255, 255, 255, 0.85),
    0 0.75px rgba(255, 255, 255, 0.85);
}

/* Empty-banner artist hero: teaser line reads like name row (white on dark band). */
.artist-hero-section.artist-hero--plain:not(.collector-hero) .profile-teaser-line {
  color: rgba(255, 255, 255, 0.96);
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.artist-hero-section .artist-hero-bio {
  margin-left: -2px;
  margin-top: 6px;
}

@media (max-width: 820px) {
  .artist-hero-section:not(.collector-hero) .artist-stat-row {
    flex-wrap: nowrap;
    gap: 4px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .artist-hero-section:not(.collector-hero) .artist-stat-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 5px;
    gap: 2px;
  }
  .artist-hero-section:not(.collector-hero) .artist-stat-pill strong {
    font-size: 13px;
    letter-spacing: -0.03em;
  }
  .artist-hero-section:not(.collector-hero) .artist-stat-pill span {
    font-size: 9px;
    letter-spacing: -0.02em;
  }
  .artist-hero-section:not(.collector-hero) .artist-stat-pill strong,
  .artist-hero-section:not(.collector-hero) .artist-stat-pill span {
    color: #fff;
  }
  .artist-hero-section:not(.collector-hero) .artist-profile-followers-inline {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
  }
  .artist-hero-section:not(.collector-hero) .artist-profile-followers-inline .artist-stat-pill {
    flex: 0 1 auto;
    min-width: 46px;
    padding: 5px 5px;
  }
  .artist-hero-section:not(.collector-hero) .artist-hero-follow-btn.artist-follow-btn--icon {
    width: 28px;
    min-width: 28px;
    height: 24px;
    margin-left: 0;
    border-radius: 6px;
  }
  .artist-hero-section:not(.collector-hero) .artist-hero-follow-btn .artist-follow-icon-svg {
    width: 14px;
    height: 14px;
  }
}

/*
 * Collector profile: fixed-height strip banner (does NOT stretch with bio/stats).
 * Previously .artist-hero-bg used inset:0 so the “banner” was as tall as the whole hero — looked huge and hid the ID.
 */
.collector-hero.artist-hero-section {
  min-height: 0;
  background: var(--bg);
}
/* Only the top band is the banner; content sits below (readable ID, compact strip). */
.collector-hero:not(.artist-hero--plain) .artist-hero-bg {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.collector-hero:not(.artist-hero--plain) .artist-hero-strip {
  min-height: 0;
  height: 100%;
}
.collector-hero:not(.artist-hero--plain) .artist-hero-inner {
  padding: 96px 0 20px;
}
.collector-hero.artist-hero--plain .artist-hero-bg.artist-hero-bg--empty {
  display: none;
}
.collector-hero.artist-hero--plain .artist-hero-inner {
  padding: 20px 0 20px;
}
/* Text + ID read on page background (not on photo) when strips are shown */
.collector-hero:not(.artist-hero--plain) .artist-hero-name {
  color: var(--text);
  text-shadow: none;
}
.collector-hero:not(.artist-hero--plain) .artist-hero-since {
  color: var(--muted);
  text-shadow: none;
}
.collector-hero:not(.artist-hero--plain) .artist-hero-bio {
  color: var(--muted);
  text-shadow: none;
}
.collector-hero .artist-hero-name code.collector-hero-id {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.collector-hero.artist-hero--plain .artist-hero-name code.collector-hero-id {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
}

/* ─── RESPONSIVE ADDITIONS ─────────────────────────────── */
@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 20px;
  }
  .product-gallery-col {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    justify-self: stretch;
  }
  .product-layout__copyright {
    grid-column: 1;
    grid-row: 2;
  }
  .product-info-col {
    grid-column: 1;
    grid-row: 3;
  }
  .product-gallery { position: static; }
  /* Product detail: when there are exactly 6 preview images, keep thumbs on one row on mobile. */
  .product-gallery .gallery-thumbs.gallery-thumbs--six {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .product-gallery .gallery-thumbs.gallery-thumbs--six .gallery-thumb {
    width: calc((100% - 30px) / 6);
    min-width: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .upload-grid { grid-template-columns: 1fr; }
  .artist-hero-inner { flex-direction: column; }
}
@media (max-width: 640px) {
  .auth-card { padding: 24px 20px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listing-row, .order-row { flex-wrap: wrap; }
  .dash-header { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; max-width: none; justify-self: stretch; }
}

/* ─── LEGAL / POLICY PAGES ─────────────────────────────── */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 0 72px;
}
.legal-page .legal-hero {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.legal-page .legal-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em;
}
.legal-page .legal-effective {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.legal-page .legal-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.legal-page .legal-disclaimer {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 28px;
}
.legal-page h2 {
  font-size: 1.08rem;
  margin: 28px 0 10px;
  letter-spacing: -0.02em;
}
.legal-page h3 {
  font-size: 0.98rem;
  margin: 20px 0 8px;
  color: var(--text);
}
.legal-page p,
.legal-page li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}
.legal-page ul,
.legal-page ol {
  margin: 0 0 16px;
  padding-left: 1.35rem;
}
.legal-page li { margin-bottom: 8px; }
.legal-page .legal-callout {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--surface);
  margin: 20px 0;
}
.legal-page .legal-callout strong { color: var(--text); }
.legal-page a.legal-mail {
  color: var(--accent);
  font-weight: 600;
  word-break: break-all;
}

/* FAQ category headers */
.faq-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin: 40px 0 4px;
}
.faq-category:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 8px;
}
.faq-page h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 22px 0 8px;
  color: var(--text);
  letter-spacing: -0.015em;
}

/* Admin verify: shipping expand grid */
.admin-verify-ship-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  .admin-verify-ship-grid {
    grid-template-columns: 1fr;
  }
}

/* Header notices (bell) */
.nav-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.nav-notif-btn {
  position: relative;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text);
}
/* Outline bell (replaces emoji) — no fill inside; follows header text color */
.nav-notif-btn .nav-notif-icon {
  display: block;
}
.nav-notif-btn.nav-notif-btn--has-unread::after {
  content: '!';
  position: absolute;
  top: -1px;
  left: 0;
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
  pointer-events: none;
}
.nav-notif-btn:hover {
  background: var(--surface-soft);
}
.nav-notif-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* Header messages (DM) — count badge like notices */
.nav-dm-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.nav-dm-link {
  position: relative;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.nav-dm-link .nav-dm-icon {
  display: block;
}
.nav-dm-link:hover {
  background: var(--surface-soft);
}
.nav-dm-link.nav-dm-link--has-unread::after {
  content: '!';
  position: absolute;
  top: -1px;
  left: 0;
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
  pointer-events: none;
}
.nav-dm-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}
.nav-notif-panel {
  position: absolute;
  z-index: 200;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Author `display:flex` wins over the `hidden` attribute otherwise — keep panel closed until the bell is clicked */
.nav-notif-panel[hidden] {
  display: none !important;
}
.nav-notif-panel-inner {
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: min(22rem, 52vh);
  -webkit-overflow-scrolling: touch;
}
.nav-notif-panel-footer {
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  background: var(--surface-soft);
  flex-shrink: 0;
}
.nav-notif-history-link {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  text-decoration: none;
}
.nav-notif-history-link:hover {
  text-decoration: underline;
}
.nav-notif-empty {
  margin: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.nav-notif-item-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.nav-notif-item-wrap:last-child {
  border-bottom: none;
}
.nav-notif-item-wrap--unread {
  background: rgba(30, 40, 60, 0.09);
}
.nav-notif-item-wrap--unread:hover {
  background: rgba(30, 40, 60, 0.12);
}
.nav-notif-item-wrap--read {
  background: var(--surface);
}
.nav-notif-item-wrap--read:hover {
  background: var(--surface-soft);
}
.nav-notif-item-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 10px 8px 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.nav-notif-item-read {
  flex-shrink: 0;
  align-self: center;
  margin: 6px 10px 6px 0;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.nav-notif-item-read:hover {
  background: var(--line);
}
.nav-notif-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.nav-notif-item:last-child {
  border-bottom: none;
}
.nav-notif-item:hover {
  background: var(--surface-soft);
}
.nav-notif-item--unread {
  background: rgba(124, 58, 237, 0.06);
}
.nav-notif-item-time {
  font-size: 11px;
  color: var(--muted);
}
.nav-notif-item-title {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}
.nav-notif-item-body {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.nav-notif-more-hint {
  margin: 0;
  padding: 10px 14px 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  background: var(--surface-soft);
}
.nav-notif-more-hint strong {
  color: var(--text);
  font-weight: 600;
}

.notice-page-list {
  max-width: 640px;
  margin: 0 auto;
}
.notice-date-group + .notice-date-group {
  margin-top: 28px;
}
.notice-date-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding: 0 2px;
}
.notice-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface);
  transition: border-color .15s;
}
.notice-row--unread {
  border-color: var(--accent);
  background: rgba(30, 40, 60, 0.07);
}
.notice-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.notice-row-meta {
  font-size: 12px;
  color: var(--muted);
}
.notice-unread-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.notice-row-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 5px;
  line-height: 1.35;
}
.notice-row-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 10px;
  white-space: pre-line;
}
.notice-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.notice-row-actions a {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  line-height: 1.4;
  transition: background .15s;
}
.notice-row-actions a:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Scheduled maintenance notice (user popup) */
.dm-maint-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.dm-maint-box {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.dm-maint-title {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.dm-maint-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}