/* [project]/app/globals.css [app-client] (css) */
:root {
  --bg: #130f17;
  --panel: #211827;
  --text: #f7efff;
  --muted: #c9b8d6;
  --accent: #d9b46f;
  --accent-2: #c88cff;
  --border: #ffffff21;
}

* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at top left, #c88cff40, transparent 34rem),
    radial-gradient(circle at bottom right, #d9b46f2e, transparent 28rem),
    var(--bg);
  color: var(--text);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

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

.nav {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 20px clamp(20px, 5vw, 72px);
  display: flex;
}

.brand {
  align-items: center;
  gap: 12px;
  display: flex;
}

.brand strong, .brand small {
  display: block;
}

.brand small {
  color: var(--muted);
  margin-top: 3px;
}

.moon {
  border: 1px solid var(--border);
  width: 42px;
  height: 42px;
  color: var(--accent);
  background: #ffffff0d;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

nav {
  color: var(--muted);
  gap: 18px;
  font-size: .95rem;
  display: flex;
}

.hero {
  max-width: 1120px;
  padding: 92px clamp(20px, 7vw, 96px) 76px;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
}

h1 {
  max-width: 1050px;
  margin: 14px 0 24px;
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: .93;
}

h2 {
  margin: 10px 0 18px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

h3 {
  margin-top: 0;
  font-size: 1.45rem;
}

.heroText {
  color: var(--muted);
  max-width: 740px;
  font-size: 1.25rem;
  line-height: 1.65;
}

.heroActions {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  display: flex;
}

.button {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 700;
}

.primary {
  background: var(--accent);
  color: #1a111f;
}

.secondary {
  background: #ffffff0f;
}

.section, .split {
  border: 1px solid var(--border);
  background: #211827b8;
  border-radius: 32px;
  margin: 0 clamp(20px, 5vw, 72px) 42px;
  padding: 42px;
}

.sectionHeader {
  max-width: 820px;
}

.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  display: grid;
}

.card, .shopPreview {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 24px;
  padding: 24px;
}

.card p, .split p, .vendorBox p, .shopPreview span {
  color: var(--muted);
  line-height: 1.6;
}

.split {
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 28px;
  display: grid;
}

.shopPreview h3 {
  color: var(--accent-2);
}

@media (max-width: 800px) {
  .nav, nav, .split {
    display: block;
  }

  nav {
    margin-top: 16px;
  }

  nav a {
    margin: 0 12px 8px 0;
    display: inline-block;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .section, .split {
    padding: 26px;
  }
}

.pageShell {
  padding: 28px clamp(18px, 5vw, 72px) 56px;
}

.pageHeader {
  max-width: 1000px;
  padding: 44px 0 32px;
}

.pageHeader p, .shopHero p, .listingPanel p {
  color: var(--muted);
  line-height: 1.65;
}

.compactHeader {
  max-width: 800px;
}

.smallHomeLink, .backLink, .vendorLink {
  color: var(--accent);
  font-weight: 700;
}

.backLink {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 18px;
  padding: 10px 14px;
  display: inline-flex;
}

.filterBar {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  display: flex;
}

.filterBar span {
  border: 1px solid var(--border);
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  padding: 10px 14px;
}

.productGrid, .dashboardGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.productCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  display: block;
  overflow: hidden;
}

.artTile, .productImageLarge {
  background: radial-gradient(circle at 35% 35%, #ffffff57, #0000 16rem), linear-gradient(135deg, #d9b46f99, #c88cff66);
  place-items: end start;
  min-height: 230px;
  padding: 20px;
  display: grid;
}

.artTile span, .productImageLarge span {
  color: var(--text);
  background: #130f17b8;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}

.toneGold {
  background: radial-gradient(circle at 35% 35%, #ffffff57, #0000 16rem), linear-gradient(135deg, #d9b46fbf, #6e4727cc);
}

.toneViolet {
  background: radial-gradient(circle at 35% 35%, #ffffff4d, #0000 16rem), linear-gradient(135deg, #c88cffb3, #391f54e6);
}

.toneRose {
  background: radial-gradient(circle at 35% 35%, #ffffff4d, #0000 16rem), linear-gradient(135deg, #e27fa4b8, #49253ee6);
}

.productInfo {
  padding: 22px;
}

.productVendor {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 0;
  font-size: .82rem;
  font-weight: 700;
}

.productInfo p {
  color: var(--muted);
  line-height: 1.5;
}

.productFooter {
  color: var(--accent);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  display: flex;
}

.shopHero {
  grid-template-columns: 1.2fr .8fr;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 28px;
  display: grid;
}

.shopPolicyCard, .listingPanel, .listingDetails {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 28px;
}

.mutedText {
  color: var(--muted);
}

.productLayout {
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: start;
  gap: 24px;
  display: grid;
}

.productImageLarge {
  border: 1px solid var(--border);
  border-radius: 32px;
  min-height: 620px;
}

.listingPrice {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent) !important;
}

.listingMeta {
  gap: 12px;
  margin: 24px 0;
  display: grid;
}

.listingMeta div {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px 0;
  display: grid;
}

.listingMeta strong {
  color: var(--text);
}

.listingMeta span {
  color: var(--muted);
}

.checkoutButton {
  background: var(--accent);
  color: #1a111f;
  cursor: not-allowed;
  border: 0;
  border-radius: 999px;
  width: 100%;
  min-height: 52px;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 800;
}

.listingDetails {
  margin-top: 28px;
}

.listingDetails li {
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .productGrid, .dashboardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopHero, .productLayout {
    grid-template-columns: 1fr;
  }

  .productImageLarge {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .pageShell {
    padding: 18px 16px 40px;
  }

  .pageHeader {
    padding-top: 24px;
  }

  .productGrid, .dashboardGrid {
    grid-template-columns: 1fr;
  }

  .filterBar {
    flex-wrap: nowrap;
    padding-bottom: 6px;
    overflow-x: auto;
  }

  .filterBar span {
    white-space: nowrap;
  }

  .productLayout {
    gap: 16px;
  }

  .productImageLarge {
    border-radius: 24px;
    min-height: 320px;
  }

  .listingPanel, .shopPolicyCard, .listingDetails {
    border-radius: 24px;
    padding: 22px;
  }

  .listingMeta div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .backLink {
    justify-content: center;
    width: 100%;
  }
}

.shopActions {
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 20px;
  display: flex;
}

.socialLinks {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.socialLinks a {
  border: 1px solid var(--border);
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  padding: 9px 12px;
}

.contactLayout {
  grid-template-columns: minmax(0, .9fr) minmax(340px, .7fr);
  align-items: start;
  gap: 28px;
  display: grid;
}

.contactForm {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 28px;
}

.contactForm label {
  color: var(--text);
  gap: 8px;
  margin-bottom: 18px;
  font-weight: 700;
  display: grid;
}

.contactForm input, .contactForm textarea {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  font: inherit;
  background: #130f17b8;
  border-radius: 16px;
  padding: 14px 16px;
}

.contactForm textarea {
  resize: vertical;
}

.contactForm input::placeholder, .contactForm textarea::placeholder {
  color: #c9b8d6a6;
}

.formNote {
  color: var(--muted);
  margin-bottom: 0;
  font-size: .95rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .contactLayout {
    grid-template-columns: 1fr;
  }
}

.ratingLine {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
  display: flex;
}

.ratingLine strong {
  color: var(--text);
}

.stars {
  color: var(--accent);
  letter-spacing: .08em;
}

.reviewsSection {
  margin-top: 28px;
}

.reviewList {
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.reviewCard, .emptyReviews {
  border: 1px solid var(--border);
  background: #ffffff0d;
  border-radius: 22px;
  padding: 22px;
}

.reviewTopline {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.verifiedBadge {
  min-height: 32px;
  color: var(--accent);
  background: #d9b46f24;
  border: 1px solid #d9b46f52;
  border-radius: 999px;
  align-items: center;
  padding: 6px 10px;
  font-size: .85rem;
  font-weight: 700;
  display: inline-flex;
}

.reviewCard h3 {
  margin-bottom: 8px;
}

.reviewCard p, .emptyReviews p {
  color: var(--muted);
  line-height: 1.6;
}

.reviewCard footer {
  color: var(--muted);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  font-size: .92rem;
  display: flex;
}

@media (max-width: 640px) {
  .reviewCard footer {
    gap: 6px;
    display: grid;
  }
}

.relatedSection {
  margin-top: 28px;
}

.relatedLinks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.relatedLinks a {
  border: 1px solid var(--border);
  background: #ffffff0d;
  border-radius: 20px;
  gap: 8px;
  padding: 18px;
  display: grid;
}

.relatedLinks span {
  color: var(--muted);
}

@media (max-width: 760px) {
  .relatedLinks {
    grid-template-columns: 1fr;
  }
}

.siteHeader {
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 20;
  background: #130f17c7;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 18px clamp(18px, 5vw, 72px);
  display: flex;
  position: sticky;
  top: 0;
}

.siteNav {
  color: var(--muted);
  align-items: center;
  gap: 18px;
  font-size: .95rem;
  display: flex;
}

.siteNav a {
  align-items: center;
  min-height: 40px;
  display: inline-flex;
}

.siteFooter {
  border-top: 1px solid var(--border);
  color: var(--muted);
  justify-content: space-between;
  gap: 24px;
  margin: 44px clamp(18px, 5vw, 72px) 28px;
  padding: 28px 0 0;
  display: flex;
}

.siteFooter strong {
  color: var(--text);
}

.footerLinks {
  flex-wrap: wrap;
  gap: 14px;
  display: flex;
}

.footerLinks a {
  color: var(--accent);
}

.vendorInfoHero {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  margin-bottom: 32px;
  display: grid;
}

.vendorInfoPanel, .vendorInfoCard, .stepCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 28px;
}

.vendorInfoPanel p, .vendorInfoCard p, .stepCard p {
  color: var(--muted);
  line-height: 1.6;
}

.stepGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  display: grid;
}

.stepCard span {
  background: var(--accent);
  color: #1a111f;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  font-weight: 900;
  display: grid;
}

.featureList {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.featureList span {
  border: 1px solid var(--border);
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  padding: 10px 14px;
}

@media (max-width: 900px) {
  .siteHeader {
    display: block;
  }

  .siteNav {
    margin-top: 14px;
    padding-bottom: 4px;
    overflow-x: auto;
  }

  .siteNav a {
    white-space: nowrap;
  }

  .vendorInfoHero, .stepGrid {
    grid-template-columns: 1fr;
  }

  .siteFooter {
    display: block;
  }

  .footerLinks {
    margin-top: 16px;
  }
}

@media (max-width: 520px) {
  .siteHeader {
    position: static;
  }

  .siteNav {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid;
    overflow: visible;
  }

  .siteNav a {
    border: 1px solid var(--border);
    background: #ffffff0d;
    border-radius: 999px;
    justify-content: center;
    padding: 8px 10px;
    font-size: .88rem;
  }
}

.adminToolSection {
  margin-top: 28px;
}

.adminToolHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  display: flex;
}

.adminToolHeader p, .referralPanel p {
  color: var(--muted);
  line-height: 1.6;
}

.adminActionButton {
  white-space: nowrap;
  cursor: pointer;
  border: 0;
}

.codeTableWrap {
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow-x: auto;
}

.codeTable {
  border-collapse: collapse;
  background: #ffffff0a;
  width: 100%;
  min-width: 780px;
}

.codeTable th, .codeTable td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  padding: 14px;
}

.codeTable th {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .88rem;
}

.codeTable code, .referralCodeBox code {
  color: var(--accent);
  letter-spacing: .04em;
  font-weight: 900;
}

.referralPanel {
  margin-top: 28px;
}

.referralCodeBox {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 22px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 22px;
  display: flex;
}

.referralCodeBox code {
  font-size: clamp(1rem, 3vw, 1.6rem);
}

.referralCodeBox span {
  color: var(--muted);
}

@media (max-width: 760px) {
  .adminToolHeader {
    display: grid;
  }

  .adminActionButton {
    justify-content: center;
    width: 100%;
  }
}

.matureGate, .preferencePanel {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 32px;
  max-width: 820px;
  margin: 32px 0;
  padding: 36px;
}

.matureGate p, .preferencePanel p {
  color: var(--muted);
  line-height: 1.65;
}

.matureGateCard {
  background: #d9b46f14;
  border: 1px solid #d9b46f52;
  border-radius: 24px;
  margin: 24px 0;
  padding: 22px;
}

.matureGateCard strong {
  color: var(--accent);
}

.preferenceCheck {
  color: var(--text);
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 18px;
  font-weight: 700;
  display: grid;
}

.preferenceCheck input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .matureGate, .preferencePanel {
    border-radius: 24px;
    padding: 24px;
  }
}

.artistGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.artistCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  grid-template-columns: 76px 1fr;
  align-items: start;
  gap: 18px;
  padding: 24px;
  display: grid;
}

.artistAvatar {
  border: 1px solid var(--border);
  width: 76px;
  height: 76px;
  color: var(--accent);
  background: #ffffff0d;
  border-radius: 50%;
  place-items: center;
  font-size: 2rem;
  display: grid;
}

.artistCard h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.7rem;
}

.artistCard p, .artistCard span {
  color: var(--muted);
  line-height: 1.6;
}

.matureShopNotice {
  color: var(--accent);
  background: #d9b46f14;
  border: 1px solid #d9b46f52;
  border-radius: 18px;
  margin-top: 18px;
  padding: 14px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .artistGrid, .artistCard {
    grid-template-columns: 1fr;
  }
}

.productMainLink {
  display: block;
}

.tagChips {
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
  display: flex;
}

.tagChips a, .tagChips span, .filterBar a {
  border: 1px solid var(--border);
  min-height: 34px;
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  align-items: center;
  padding: 7px 11px;
  font-size: .9rem;
  display: inline-flex;
}

.tagChips a:hover, .filterBar a:hover, .filterBar .activeFilter {
  color: var(--accent);
  background: #d9b46f17;
  border-color: #d9b46f73;
}

.vendorTagChips {
  margin-top: 18px;
  margin-bottom: 18px;
}

.productFooter a {
  color: var(--accent);
  font-weight: 700;
}

.listingTagChips {
  margin: 20px 0 22px;
}

.listingTagChips a {
  min-height: 38px;
  font-weight: 700;
}

.tagDirectoryGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.tagDirectoryCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 24px;
}

.tagDirectoryCard h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.tagDirectoryCard p {
  color: var(--muted);
  line-height: 1.6;
}

.tagStats, .tagAliasList {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.tagStats span, .tagAliasList a, .tagAliasList span {
  border: 1px solid var(--border);
  min-height: 30px;
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  align-items: center;
  padding: 6px 10px;
  font-size: .86rem;
  display: inline-flex;
}

.tagAliasList strong {
  color: var(--text);
  width: 100%;
}

.aliasNotice {
  color: var(--muted);
  background: #d9b46f14;
  border: 1px solid #d9b46f52;
  border-radius: 18px;
  margin-top: 18px;
  padding: 14px;
}

.aliasNotice strong {
  color: var(--accent);
}

@media (max-width: 760px) {
  .tagDirectoryGrid {
    grid-template-columns: 1fr;
  }
}

.guideGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  display: grid;
}

.guideCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 24px;
}

.guideCard h3 {
  margin-bottom: 14px;
}

.guideCard li {
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.55;
}

.imageToolPreview p {
  color: var(--muted);
  line-height: 1.6;
}

.mockupPreview {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  display: grid;
}

.mockWall {
  border: 1px solid var(--border);
  background-color: #ffffff0d;
  background-image: linear-gradient(90deg, #ffffff0a 1px, #0000 1px), linear-gradient(#ffffff0a 1px, #0000 1px), none;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-size: 32px 32px;
  background-attachment: scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box;
  border-radius: 28px;
  place-items: center;
  min-height: 260px;
  display: grid;
}

.mockFrame {
  aspect-ratio: 4 / 5;
  width: min(230px, 70%);
  color: var(--text);
  background: linear-gradient(135deg, #c88cff73, #d9b46f59);
  border: 12px solid #d9b46f80;
  place-items: center;
  font-weight: 900;
  display: grid;
  box-shadow: 0 24px 60px #00000047;
}

.mockControls {
  gap: 12px;
  display: grid;
}

.mockControls button {
  border: 1px solid var(--border);
  min-height: 46px;
  color: var(--muted);
  cursor: not-allowed;
  background: #ffffff0f;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .guideGrid, .mockupPreview {
    grid-template-columns: 1fr;
  }
}

.listingManagerStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  display: grid;
}

.listingManagerStats article {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 24px;
  padding: 22px;
}

.listingManagerStats strong {
  color: var(--accent);
  font-size: 2rem;
  display: block;
}

.listingManagerStats span {
  color: var(--muted);
}

.vendorListingTableWrap {
  border: 1px solid var(--border);
  background: #ffffff0a;
  border-radius: 24px;
  overflow-x: auto;
}

.vendorListingTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 980px;
}

.vendorListingTable th, .vendorListingTable td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  padding: 16px;
}

.vendorListingTable th {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .84rem;
}

.vendorListingTitle {
  gap: 6px;
  display: grid;
}

.vendorListingTitle strong {
  color: var(--text);
}

.vendorListingTitle span {
  color: var(--muted);
  font-size: .9rem;
}

.statusBadge, .matureMiniBadge {
  border-radius: 999px;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
}

.status-active {
  color: var(--accent);
  background: #d9b46f1a;
  border: 1px solid #d9b46f52;
}

.status-draft, .status-paused, .status-sold, .status-removed {
  color: var(--muted);
  border: 1px solid var(--border);
  background: #ffffff0d;
}

.matureMiniBadge {
  color: var(--accent);
  background: #d9b46f1a;
  border: 1px solid #d9b46f52;
}

.tableAction {
  color: var(--accent);
  font-weight: 800;
}

.compactTags {
  margin: 8px 0 0;
}

.compactTags a {
  min-height: 28px;
  padding: 5px 9px;
  font-size: .8rem;
}

.listingFormPreview {
  gap: 18px;
  display: grid;
}

.formPreviewGroup {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 24px;
}

.formPreviewGroup label {
  color: var(--text);
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 800;
  display: grid;
}

.formPreviewGroup input, .formPreviewGroup textarea {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--muted);
  font: inherit;
  background: #130f17b8;
  border-radius: 16px;
  padding: 14px 16px;
}

.formPreviewGroup p {
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .listingManagerStats {
    grid-template-columns: 1fr;
  }
}

.formPreviewGroup select {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  font: inherit;
  background: #130f17eb;
  border-radius: 16px;
  padding: 14px 16px;
}

.helperText {
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.formActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.successNotice {
  color: var(--muted);
  background: #d9b46f1a;
  border: 1px solid #d9b46f5c;
  border-radius: 22px;
  margin-bottom: 20px;
  padding: 16px 18px;
}

.successNotice strong {
  color: var(--accent);
}

.helperPanel {
  border: 1px solid var(--border);
  background: #ffffff0b;
  border-radius: 22px;
  margin: 18px 0;
  padding: 18px;
}

.helperPanel strong {
  color: var(--accent);
}

.smartTagInputWrap {
  position: relative;
}

.smartTagInput {
  border: 1px solid var(--border);
  background: #130f17b8;
  border-radius: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 10px;
  display: flex;
}

.smartTagInput input {
  min-width: 220px;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  padding: 8px;
}

.smartTagChip {
  color: var(--accent);
  cursor: pointer;
  background: #d9b46f1a;
  border: 1px solid #d9b46f57;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 800;
}

.unknownTagChip {
  color: var(--text);
  background: #c88cff1a;
  border-color: #c88cff66;
}

.inlineSuggestions {
  z-index: 20;
  border: 1px solid var(--border);
  background: #130f17fa;
  border-radius: 18px;
  gap: 6px;
  padding: 10px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  box-shadow: 0 24px 70px #00000059;
}

.inlineSuggestions button {
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: #ffffff0f;
  border: 0;
  border-radius: 12px;
  padding: 10px;
}

.unknownTagRequest {
  background: #c88cff14;
  border: 1px solid #c88cff57;
  border-radius: 22px;
  margin-top: 18px;
  padding: 18px;
}

.unknownTagRequest strong {
  color: var(--accent);
}

.smallActions {
  margin-top: 14px;
}

.matureChoiceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
  display: grid;
}

.matureChoiceCard {
  border: 1px solid var(--border);
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 22px;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 18px;
  gap: 12px !important;
  display: grid !important;
}

.matureChoiceCard input {
  width: auto;
  margin-top: 5px;
}

.matureChoiceCard strong {
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}

.matureChoiceCard span {
  color: var(--muted);
  line-height: 1.5;
}

.modalOverlay {
  z-index: 100;
  background: #000000ad;
  place-items: center;
  padding: 22px;
  display: grid;
  position: fixed;
  inset: 0;
}

.tagModal {
  border: 1px solid var(--border);
  background: #130f17fa;
  border-radius: 30px;
  width: min(920px, 100%);
  max-height: 82vh;
  padding: 24px;
  overflow: auto;
  box-shadow: 0 30px 90px #00000080;
}

.modalHeader {
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  display: flex;
}

.modalHeader button {
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  background: #ffffff0f;
  border-radius: 999px;
  padding: 10px 14px;
}

.modalSearch {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  font: inherit;
  background: #ffffff0f;
  border-radius: 16px;
  margin: 18px 0;
  padding: 14px 16px;
}

.modalTagGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.modalTagGrid button {
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 18px;
  padding: 16px;
}

.modalTagGrid strong {
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}

.modalTagGrid span {
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 760px) {
  .matureChoiceGrid, .modalTagGrid {
    grid-template-columns: 1fr;
  }

  .modalHeader {
    display: grid;
  }
}

.requiredMark {
  min-height: 24px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #d9b46f14;
  border: 1px solid #d9b46f52;
  border-radius: 999px;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 900;
  display: inline-flex;
}

.addTagButton {
  color: var(--accent);
  cursor: pointer;
  background: #d9b46f1a;
  border: 1px solid #d9b46f57;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}

.formWarning {
  color: var(--muted);
  background: #d9b46f17;
  border: 1px solid #d9b46f57;
  border-radius: 20px;
  padding: 14px 16px;
  font-weight: 700;
}

.checkoutButton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.tagToolButton {
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  background: #d9b46f24;
  border: 1px solid #d9b46f6b;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
}

.tagToolButton:hover {
  background: #d9b46f38;
}

.tagDebugPreview {
  border: 1px solid var(--border);
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 16px;
  margin-top: 14px;
  padding: 12px 14px;
}

.tagDebugPreview strong {
  color: var(--accent);
}

.productCardImage {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ffffff0f;
  border-radius: 26px 26px 0 0;
  width: 100%;
  display: block;
}

.listingImageWrap {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 32px;
  overflow: hidden;
}

.listingImageWrap img {
  width: 100%;
  height: auto;
  display: block;
}

.uploadPanel {
  gap: 18px;
  display: grid;
}

.imageUploadForm {
  gap: 16px;
  max-width: 720px;
  display: grid;
}

.imageUploadForm label {
  color: var(--text);
  gap: 8px;
  font-weight: 800;
  display: grid;
}

.imageUploadForm input {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  font: inherit;
  background: #130f17b8;
  border-radius: 16px;
  padding: 14px 16px;
}

.imageManagerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.imageManagerCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  overflow: hidden;
}

.imageManagerCard img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ffffff0f;
  width: 100%;
  display: block;
}

.imageManagerCard > div {
  padding: 18px;
}

.imageManagerCard p {
  color: var(--muted);
  line-height: 1.5;
}

.primaryImageBadge {
  min-height: 30px;
  color: var(--accent);
  background: #d9b46f1a;
  border: 1px solid #d9b46f5c;
  border-radius: 999px;
  align-items: center;
  padding: 6px 10px;
  font-weight: 900;
  display: inline-flex;
}

.imageActionRow, .tableActionStack {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.dangerButton {
  color: #ffb3b3;
  cursor: pointer;
  background: #ff787814;
  border: 1px solid #ff787857;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .imageManagerGrid {
    grid-template-columns: 1fr;
  }
}

.imageChecklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  display: grid;
}

.imageChecklist article {
  border: 1px solid var(--border);
  background: #ffffff0d;
  border-radius: 20px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  display: flex;
}

.imageChecklist strong {
  border-radius: 999px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 900;
  display: grid;
}

.checkGood strong {
  color: var(--accent);
  background: #d9b46f1f;
}

.checkWarn strong {
  color: #ffcf8a;
  background: #ffaa461f;
}

.imageChecklist span {
  color: var(--muted);
  font-weight: 700;
}

.altTextForm {
  gap: 10px;
  margin: 14px 0;
  display: grid;
}

.altTextForm label {
  color: var(--text);
  gap: 8px;
  font-weight: 800;
  display: grid;
}

.altTextForm input {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  font: inherit;
  background: #130f17b8;
  border-radius: 14px;
  padding: 12px 14px;
}

.tagToolButton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.imageEditLink {
  text-decoration: none;
}

.imageWorkspace {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.imageWorkspacePreview, .imageWorkspaceTools, .galleryWallMockup, .mockupNotes {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 30px;
  padding: 22px;
}

.imageWorkspacePreview img {
  object-fit: contain;
  background: #0000002e;
  border-radius: 22px;
  width: 100%;
  max-height: 720px;
  display: block;
}

.toolButtonGrid {
  gap: 10px;
  margin: 18px 0;
  display: grid;
}

.toolButtonGrid button {
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: not-allowed;
  background: #ffffff0f;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 900;
}

.galleryWallMockup {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  display: grid;
}

.mockRoom {
  background: linear-gradient(#ffffff21, #ffffff0a 58%, #46372d73 58%), #ffffff0f;
  border-radius: 24px;
  place-items: start center;
  min-height: 360px;
  padding-top: 52px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.mockRoom img {
  object-fit: contain;
  background: #ffffff14;
  border: 10px solid #d9b46f8c;
  width: min(210px, 45%);
  max-height: 210px;
  box-shadow: 0 20px 48px #00000047;
}

.mockSofa {
  background: #130f1794;
  border-radius: 42px 42px 18px 18px;
  width: min(420px, 72%);
  height: 80px;
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
}

.mockSofa:before, .mockSofa:after {
  content: "";
  background: #130f1794;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  position: absolute;
  bottom: -28px;
}

.mockSofa:before {
  left: 26px;
}

.mockSofa:after {
  right: 26px;
}

.mockupNotes p {
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .imageWorkspace, .galleryWallMockup, .imageChecklist {
    grid-template-columns: 1fr;
  }
}

.backdropGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  display: grid;
}

.backdropCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 26px;
  padding: 16px;
}

.backdropCard h3 {
  margin: 14px 0 8px;
}

.backdropCard p {
  color: var(--muted);
  line-height: 1.5;
}

.backdropCard span {
  border: 1px solid var(--border);
  min-height: 28px;
  color: var(--muted);
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: .82rem;
  display: inline-flex;
}

.backdropThumb, .uploadedBackdropThumb {
  border: 1px solid var(--border);
  border-radius: 20px;
  place-items: start center;
  min-height: 190px;
  padding-top: 38px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.backdropThumb img {
  object-fit: contain;
  background: #ffffff14;
  border: 7px solid #d9b46f8c;
  width: 32%;
  max-height: 96px;
  box-shadow: 0 16px 36px #00000042;
}

.backdropCleanGallery {
  background: radial-gradient(circle at 22% 8%, #ffffff6b, #0000 18%), radial-gradient(circle at 50% 8%, #ffffff5c, #0000 18%), radial-gradient(circle at 78% 8%, #ffffff6b, #0000 18%), linear-gradient(#f3f0e9 0 72%, #c7c0b2 72%);
}

.backdropCozyLiving {
  background: radial-gradient(circle at 12% 65%, #1c2f1c73, #0000 16%), linear-gradient(#4b5b36 0 62%, #5d3f28 62%);
}

.backdropDarkGothic {
  background: radial-gradient(circle at 50% 15%, #d9b46f42, #0000 18%), linear-gradient(#070608 0 70%, #281410 70%);
}

.backdropBrightStudio {
  background: linear-gradient(115deg, #ffffff73 0 24%, #0000 24% 100%), linear-gradient(#f7f5ee 0 70%, #e2d8c7 70%);
}

.backdropNeutralWhite {
  background: linear-gradient(130deg, #ffffff73, #0000 38%), linear-gradient(#eee7dc 0 72%, #d7cab9 72%);
}

.backdropShelfDesk {
  background: linear-gradient(#d8c6a8 0 38%, #9b7654 38% 52%, #6a442d 52%);
}

.backdropMarketBooth {
  background: linear-gradient(160deg, #ffffff61 0 18%, #0000 18%), linear-gradient(#1c1b1f 0 70%, #d9d0bf 70%);
}

.backdropBrick {
  background: repeating-linear-gradient(0deg, #0000 0 22px, #ffffff14 22px 24px), repeating-linear-gradient(90deg, #783c26e6 0 48px, #502a1ee6 48px 52px);
}

.backdropConcrete {
  background: radial-gradient(circle at 72% 28%, #ffffff38, #0000 22%), linear-gradient(#8f918e 0 70%, #7a7770 70%);
}

.backdropWood {
  background: repeating-linear-gradient(0deg, #5b3d26 0 28px, #6f4c31 28px 32px), linear-gradient(#765739 0 72%, #4b321f 72%);
}

.backdropArch {
  background: radial-gradient(at 50% 58%, #ffffff4d 0 34%, #0000 35%), linear-gradient(#e8ded0 0 72%, #d1bfaa 72%);
}

.backdropMoody {
  background: radial-gradient(circle at 50% 20%, #d9b46f59, #0000 25%), linear-gradient(#0c0a0c 0 74%, #3a251a 74%);
}

.uploadedBackdropGrid {
  margin-top: 24px;
}

.uploadedBackdropThumb {
  background: #ffffff0a;
  padding: 0;
}

.uploadedBackdropThumb > img:first-child {
  object-fit: cover;
  width: 100%;
  height: 210px;
  display: block;
}

.floatingArtworkPreview {
  object-fit: contain;
  background: #ffffff14;
  border: 7px solid #d9b46f8c;
  width: 28%;
  max-height: 95px;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 16px 36px #00000042;
}

.uploadedBackdropCard form {
  margin-top: 14px;
}

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

@media (max-width: 680px) {
  .backdropGrid {
    grid-template-columns: 1fr;
  }
}

.notFoundPage {
  align-content: center;
  min-height: 70vh;
  display: grid;
}

.notFoundCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 34px;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 34px;
  display: grid;
}

.notFoundCard p {
  color: var(--muted);
  line-height: 1.6;
}

.notFoundTrollImage {
  background: #ffffff0f;
  border-radius: 28px;
  width: 100%;
  max-width: 240px;
}

.trollFallback {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 38px;
  place-items: center;
  width: 220px;
  height: 220px;
  font-size: 7rem;
  display: grid;
}

@media (max-width: 720px) {
  .notFoundCard {
    grid-template-columns: 1fr;
  }

  .trollFallback {
    width: 180px;
    height: 180px;
  }
}

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

.tableActionButton:hover, .tableAction:hover {
  text-decoration: underline;
}

.inquirySection {
  margin-top: 32px;
}

.inquiryList {
  gap: 18px;
  display: grid;
}

.inquiryCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 24px;
}

.inquiryHeader {
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  display: flex;
}

.inquiryHeader h2 {
  margin: 0;
}

.inquiryHeader span, .inquiryCard p {
  color: var(--muted);
  line-height: 1.6;
}

.inquiryMeta {
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  display: flex;
}

.inquiryMeta span, .inquiryMeta a {
  border: 1px solid var(--border);
  min-height: 30px;
  color: var(--muted);
  background: #ffffff0d;
  border-radius: 999px;
  align-items: center;
  padding: 6px 10px;
  display: inline-flex;
}

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

.saleModeCard {
  border: 1px solid var(--border);
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 22px;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 18px;
  gap: 12px !important;
  display: grid !important;
}

.saleModeCard input {
  width: auto;
  margin-top: 5px;
}

.saleModeCard strong {
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}

.saleModeCard span {
  color: var(--muted);
  line-height: 1.5;
}

.auctionSellerWarning {
  color: var(--muted);
  background: #d9b46f14;
  border: 1px solid #d9b46f5c;
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 14px;
}

.tagDirectoryButton {
  margin-top: 14px;
}

.sellerDashboardStats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
  display: grid;
}

.sellerDashboardStats article {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 22px;
  padding: 18px;
}

.sellerDashboardStats strong {
  color: var(--accent);
  font-size: 1.8rem;
  display: block;
}

.sellerDashboardStats span {
  color: var(--muted);
  font-size: .9rem;
}

.vendorCardGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.vendorLink {
  color: var(--accent);
  margin-top: 12px;
  font-weight: 800;
  display: inline-block;
}

.sellerSocialList {
  gap: 12px;
  margin: 18px 0;
  display: grid;
}

.sellerSocialList article {
  border: 1px solid var(--border);
  background: #ffffff0d;
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px;
  display: flex;
}

.sellerSocialList article > div {
  gap: 4px;
  display: grid;
}

.sellerSocialList a {
  color: var(--muted);
}

.socialAddForm {
  grid-template-columns: 200px 1fr auto;
  align-items: end;
  gap: 12px;
  display: grid;
}

.socialAddForm label {
  color: var(--text);
  gap: 8px;
  font-weight: 800;
  display: grid;
}

.socialAddForm input {
  border: 1px solid var(--border);
  color: var(--text);
  background: #130f17b8;
  border-radius: 14px;
  padding: 12px 14px;
}

.inquiryActions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  display: flex;
}

.sellerAuctionGrid {
  gap: 18px;
  display: grid;
}

.sellerAuctionCard {
  border: 1px solid var(--border);
  background: #ffffff0f;
  border-radius: 28px;
  padding: 24px;
}

.sellerAuctionCard p {
  color: var(--muted);
}

.auctionStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
  display: grid;
}

.auctionStats span {
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 18px;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.auctionStats strong {
  color: var(--accent);
}

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

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

@media (max-width: 760px) {
  .saleModeGrid, .vendorCardGrid, .sellerDashboardStats, .auctionStats, .socialAddForm {
    grid-template-columns: 1fr;
  }

  .sellerSocialList article {
    display: grid;
  }
}

@media (max-width: 1100px) {
  .editorWorkspace, .mockupBuilderWorkspace {
    grid-template-columns: 1fr;
  }

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

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

  .editorCanvasStage, .mockupCanvasStage {
    min-height: 320px;
  }
}

.photoEditorShell {
  gap: 34px;
  display: grid;
}

.editorMessage {
  color: var(--text);
  background: #d9b46f1a;
  border: 1px solid #d9b46f61;
  border-radius: 18px;
  padding: 14px 18px;
}

.editorWorkspace {
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: start;
  gap: 22px;
  display: grid;
}

.editorPreviewPanel, .editorControls, .mockupBuilderSection, .mockupControls {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 28px;
}

.editorPreviewPanel {
  padding: 18px;
}

.editorCanvasStage {
  background-color: #0000;
  background-image: linear-gradient(45deg, #ffffff09 25%, #0000 25%), linear-gradient(-45deg, #ffffff09 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #ffffff09 75%), linear-gradient(-45deg, #0000 75%, #ffffff09 75%);
  background-position: 0 0, 0 15px, 15px -15px, -15px 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 30px 30px;
  background-attachment: scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
  border-radius: 22px;
  place-items: center;
  min-height: 520px;
  display: grid;
  overflow: hidden;
}

.editorCanvas {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  display: block;
}

.editorImageMeta {
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: .88rem;
  display: flex;
}

.editorControls {
  gap: 20px;
  padding: 20px;
  display: grid;
}

.editorControls section {
  border-bottom: 1px solid var(--border);
  gap: 12px;
  padding-bottom: 18px;
  display: grid;
}

.editorControls section:last-of-type {
  border-bottom: 0;
}

.editorControls h3 {
  margin: 0;
}

.editorControls label, .mockupControls label {
  color: var(--muted);
  gap: 7px;
  font-size: .9rem;
  display: grid;
}

.editorControls label span, .mockupControls label span {
  color: var(--accent);
  font-weight: 800;
}

.editorControls input[type="range"], .mockupControls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.editorControls select {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  background: #130f17e6;
  border-radius: 13px;
  padding: 10px 12px;
}

.editorButtonRow {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.editorButtonRow button {
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  background: #ffffff0f;
  border-radius: 999px;
  padding: 8px 12px;
}

.editorButtonRow button:hover {
  border-color: var(--accent);
}

.editorSaveActions {
  gap: 10px;
  display: grid;
}

.mockupBuilderSection {
  padding: 24px;
}

.sectionHeadingRow {
  margin-bottom: 20px;
}

.sectionHeadingRow h2 {
  margin-top: 4px;
}

.sectionHeadingRow p {
  color: var(--muted);
}

.backdropSelectorGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  display: grid;
}

.backdropSelector {
  appearance: none;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  background: #ffffff0a;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.backdropSelector.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #d9b46f2e;
}

.backdropSelector img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}

.backdropSelector span {
  padding: 10px;
  font-size: .83rem;
  font-weight: 800;
  display: block;
}

.mockupBuilderWorkspace {
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 20px;
  display: grid;
}

.mockupCanvasStage {
  border: 1px solid var(--border);
  background: #111;
  border-radius: 22px;
  place-items: center;
  min-height: 500px;
  display: grid;
  overflow: hidden;
}

.mockupCanvas {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 75vh;
  display: block;
}

.mockupControls {
  gap: 18px;
  padding: 20px;
  display: grid;
}

@media (max-width: 1100px) {
  .editorWorkspace, .mockupBuilderWorkspace {
    grid-template-columns: 1fr;
  }

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

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

  .editorCanvasStage, .mockupCanvasStage {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .accountActionGrid {
    grid-template-columns: 1fr;
  }
}

.authPage {
  place-items: center;
  min-height: 70vh;
  display: grid;
}

.authPanel {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 30px;
  width: min(100%, 520px);
  padding: 30px;
}

.authPanel > h1 {
  margin-top: 0;
}

.authPanel > p {
  color: var(--muted);
  line-height: 1.6;
}

.authForm {
  gap: 15px;
  display: grid;
}

.authForm label {
  gap: 7px;
  font-weight: 800;
  display: grid;
}

.authForm input {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  background: #130f17d9;
  border-radius: 14px;
  padding: 13px 14px;
}

.googleAuthButton {
  border: 1px solid var(--border);
  color: #171717;
  cursor: pointer;
  background: #fff;
  border-radius: 15px;
  width: 100%;
  padding: 13px 16px;
  font-weight: 900;
}

.authDivider {
  color: var(--muted);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  display: grid;
}

.authDivider:before, .authDivider:after {
  content: "";
  background: var(--border);
  height: 1px;
}

.authSwitch {
  margin-top: 20px;
}

.authSwitch a {
  color: var(--accent);
  font-weight: 900;
}

.authStagingNotice {
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 12px 14px;
}

.accountIdentityCard {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 28px;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 22px;
  display: flex;
}

.accountIdentityCard img {
  object-fit: cover;
  border-radius: 50%;
  width: 74px;
  height: 74px;
}

.accountIdentityCard h2, .accountIdentityCard p {
  margin: 4px 0;
}

.accountActionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  display: grid;
}

@media (max-width: 760px) {
  .accountActionGrid {
    grid-template-columns: 1fr;
  }
}

.sellerLaunchTools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  display: grid;
}

.orderLineItem {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

.orderLineItem strong {
  color: var(--text);
}

.shippingAddressCard {
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 18px;
  gap: 4px;
  margin-top: 18px;
  padding: 16px;
  display: grid;
}

.shippingAddressCard strong {
  color: var(--text);
}

@media (max-width: 760px) {
  .sellerLaunchTools {
    grid-template-columns: 1fr;
  }
}

.podProductGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.podProductCard {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 24px;
  overflow: hidden;
}

.podProductCard > img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.podProductCardBody {
  padding: 18px;
}

.purchasePanel {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 24px;
  gap: 16px;
  margin: 24px 0;
  padding: 22px;
  display: grid;
}

.purchasePrice {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 900;
}

.variantOption {
  gap: 7px;
  display: grid;
}

.variantOption > span {
  font-weight: 800;
}

.variantOption select {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  background: #130f17e6;
  border-radius: 14px;
  padding: 12px 14px;
}

.selectedVariantText {
  color: var(--muted);
  margin: 0;
}

.secureCheckoutNote {
  text-align: center;
  color: var(--muted);
  margin: 0;
  font-size: .85rem;
}

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

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

.checkoutResultCard {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 30px;
  width: min(100%, 760px);
  margin: 40px auto;
  padding: 30px;
}

.checkoutOrderItems {
  margin: 22px 0;
}

.sellerOrderControls {
  border: 1px solid var(--border);
  border-radius: 18px;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  display: grid;
}

.trackingForm {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  display: grid;
}

.trackingForm input {
  border: 1px solid var(--border);
  min-width: 0;
  color: var(--text);
  background: #130f17e6;
  border-radius: 13px;
  padding: 11px 13px;
}

.reviewForm {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 26px;
  gap: 18px;
  width: min(100%, 700px);
  padding: 24px;
  display: grid;
}

.reviewForm label {
  gap: 7px;
  font-weight: 800;
  display: grid;
}

.reviewForm input, .reviewForm textarea, .reviewForm select {
  border: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  background: #130f17e6;
  border-radius: 14px;
  padding: 12px 14px;
}

@media (max-width: 760px) {
  .trackingForm {
    grid-template-columns: 1fr;
  }
}

.auctionPanel {
  border: 1px solid var(--border);
  background: #ffffff0e;
  border-radius: 28px;
  gap: 20px;
  margin: 24px 0;
  padding: 24px;
  display: grid;
}

.auctionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.auctionHeader h2 {
  margin: 3px 0 0;
}

.auctionCountdown {
  text-align: right;
  gap: 4px;
  display: grid;
}

.auctionCountdown span, .auctionPriceGrid span, .auctionBuyNow span {
  color: var(--muted);
  font-size: .85rem;
}

.auctionCountdown strong {
  font-size: 1.2rem;
}

.auctionPriceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.auctionPriceGrid > div {
  border: 1px solid var(--border);
  border-radius: 18px;
  gap: 5px;
  padding: 16px;
  display: grid;
}

.auctionPriceGrid strong {
  color: var(--accent);
  font-size: 1.6rem;
}

.auctionReserve {
  color: var(--muted);
  margin: 0;
}

.auctionReserve.met {
  color: var(--text);
  font-weight: 800;
}

.auctionBidForm {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  display: grid;
}

.auctionBidForm label {
  gap: 7px;
  font-weight: 800;
  display: grid;
}

.moneyInput {
  border: 1px solid var(--border);
  background: #130f17e6;
  border-radius: 14px;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.moneyInput span {
  padding-left: 14px;
  font-weight: 900;
}

.moneyInput input {
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  padding: 13px;
}

.auctionBuyNow {
  border: 1px solid var(--border);
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 16px;
  display: flex;
}

.auctionBuyNow > div {
  gap: 4px;
  display: grid;
}

.auctionBuyNow strong {
  font-size: 1.3rem;
}

.winnerPanel {
  border: 1px solid var(--accent);
  border-radius: 22px;
  padding: 20px;
}

.winnerPanel h3 {
  margin-top: 5px;
}

.auctionHistory {
  gap: 8px;
  display: grid;
}

.auctionHistoryRow {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  display: grid;
}

.auctionHistoryRow small {
  color: var(--muted);
}

.auctionFinePrint {
  color: var(--muted);
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .auctionHeader {
    display: grid;
  }

  .auctionCountdown {
    text-align: left;
  }

  .auctionPriceGrid, .auctionBidForm {
    grid-template-columns: 1fr;
  }

  .auctionHistoryRow {
    grid-template-columns: 1fr auto;
  }

  .auctionHistoryRow small {
    grid-column: 1 / -1;
  }
}

.siteHeaderAccount, .headerAccount {
  align-items: center;
  gap: 10px;
  display: flex;
}

.headerLogin, .headerAccountLink, .headerSeller {
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
}

.headerJoin {
  background: var(--accent);
  color: #171117;
  border-radius: 999px;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
}

.headerSignOut {
  appearance: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
}

.headerSignOut:hover {
  color: var(--text);
}

@media (max-width: 850px) {
  .siteHeaderInner {
    flex-wrap: wrap;
  }

  .siteNav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .siteHeaderAccount {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .headerJoin {
    display: none;
  }

  .headerAccount {
    gap: 6px;
  }

  .headerSignOut {
    font-size: .85rem;
  }
}

.sellerApplicationHero, .sellerStatusCard {
  max-width: 780px;
  margin-bottom: 32px;
}

.sellerApplicationForm {
  gap: 22px;
  max-width: 820px;
  display: grid;
}

.sellerApplicationForm label {
  gap: 8px;
  font-weight: 700;
  display: grid;
}

.sellerApplicationForm input, .sellerApplicationForm textarea, .adminDecisionGrid textarea {
  width: 100%;
}

.applicationGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.applicationChoices {
  gap: 12px;
  display: grid;
}

.checkboxRow {
  align-items: flex-start;
  gap: 10px !important;
  display: flex !important;
}

.checkboxRow input {
  width: auto;
}

.slugInputRow {
  align-items: center;
  gap: 8px;
  display: flex;
}

.applicationStatusBadge {
  border: 1px solid;
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 7px 12px;
  font-weight: 800;
  display: inline-flex;
}

.adminApplicationList {
  gap: 24px;
  display: grid;
}

.adminApplicationCard {
  border: 1px solid #ffffff29;
  border-radius: 18px;
  padding: 24px;
}

.applicationCardHeader, .adminVendorRow {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.applicationFlags {
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  display: flex;
}

.applicationFlags span {
  background: #ffffff0f;
  border-radius: 999px;
  padding: 6px 10px;
}

.adminDecisionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
  display: grid;
}

.adminDecisionGrid form {
  gap: 10px;
  display: grid;
}

.adminVendorTable {
  gap: 8px;
  display: grid;
}

.adminVendorRow {
  border-bottom: 1px solid #ffffff1a;
  padding: 12px 0;
}

@media (max-width: 700px) {
  .applicationGrid, .adminDecisionGrid {
    grid-template-columns: 1fr;
  }

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

.onboardingChecklist {
  gap: 12px;
  max-width: 820px;
  margin: 30px 0;
  display: grid;
}

.onboardingCheck {
  border: 1px solid #ffffff24;
  border-radius: 16px;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.onboardingCheck.done {
  border-color: #ffffff52;
}

.onboardingCheckIcon {
  border: 1px solid;
  border-radius: 50%;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.onboardingCheck strong {
  margin-bottom: 5px;
  display: block;
}

.onboardingActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  display: flex;
}

.vendorSetupCard {
  border: 1px solid #ffffff24;
  border-radius: 18px;
  margin-top: 28px;
  padding: 22px;
}

.legacyVendorRow {
  border: 1px solid #ffffff47;
  border-radius: 16px;
  padding: 16px;
}

.legacyBadge {
  letter-spacing: .05em;
  border: 1px solid;
  border-radius: 999px;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  font-weight: 900;
  display: inline-flex;
}

.adminVendorIdentity, .adminVendorFacts, .adminVendorControls {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  display: flex;
}

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

.adminVendorFacts {
  flex: 1;
}

.adminVendorControls {
  justify-content: flex-end;
}

.legacyAccountNotice {
  border: 1px solid;
  border-radius: 16px;
  max-width: 820px;
  margin: 18px 0;
  padding: 18px;
}

.legacyAccountNotice strong {
  font-size: 1.05rem;
}

.artistShopTheme {
  --shop-bg: #f6f2eb;
  --shop-surface: #fff;
  --shop-accent: #8e6c88;
  --shop-text: #211d22;
  --shop-accent-text: #fff;
  background: var(--shop-bg);
  min-height: 100%;
  color: var(--shop-text);
}

.artistShopTheme .pageShell {
  color: var(--shop-text);
  background: none;
}

.artistShopTheme h1, .artistShopTheme h2, .artistShopTheme h3, .artistShopTheme h4, .artistShopTheme p, .artistShopTheme span {
  color: inherit;
}

.artistShopTheme a:not(.button) {
  color: var(--shop-accent);
}

.artistShopTheme .button, .artistShopTheme .checkoutButton {
  background: var(--shop-accent);
  border-color: var(--shop-accent);
  color: var(--shop-accent-text);
}

.artistShopTheme .productCard, .artistShopTheme .reviewCard {
  background: var(--shop-surface);
  color: var(--shop-text);
}

.themeEditor {
  gap: 40px;
  max-width: 1050px;
  margin-top: 30px;
  display: grid;
}

.themePresetGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.themePresetCard {
  cursor: pointer;
  border: 2px solid #8080804d;
  border-radius: 16px;
  gap: 10px;
  padding: 16px;
  transition: transform .15s, border-color .15s;
  display: grid;
}

.themePresetCard:hover {
  transform: translateY(-2px);
}

.themePresetCard.selected {
  border-color: currentColor;
}

.themePresetCard input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.themeSwatches {
  border-radius: 10px;
  grid-template-columns: repeat(4, 1fr);
  height: 58px;
  display: grid;
  overflow: hidden;
}

.themeSwatches i {
  display: block;
}

.customThemeSymbol {
  border: 1px dashed;
  border-radius: 10px;
  place-items: center;
  height: 58px;
  font-size: 2rem;
  display: grid;
}

.customThemePanel {
  border: 1px solid #8080804d;
  border-radius: 18px;
  padding: 22px;
}

.themeColorGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.themeColorField {
  gap: 8px;
  display: grid;
}

.themeColorControls {
  gap: 10px;
  display: flex;
}

.themeColorControls input[type="color"] {
  cursor: pointer;
  flex: 0 0 58px;
  width: 58px;
  height: 46px;
  padding: 2px;
}

.themeColorControls input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.themeContrast {
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding: 14px;
  display: flex;
}

.themeContrast strong {
  width: 100%;
}

.themeContrast.good {
  border: 1px solid #50b46eb3;
}

.themeContrast.warning {
  border: 1px solid #dc963ccc;
}

.themePreview {
  border-radius: 20px;
  min-height: 470px;
  padding: 30px;
}

.themePreviewHeading {
  max-width: 560px;
  margin-bottom: 26px;
}

.themePreviewHeading h3 {
  margin: 6px 0;
  font-size: 2rem;
}

.themePreviewProduct {
  background: var(--shop-surface);
  width: min(100%, 320px);
  color: var(--shop-text);
  border: 1px solid
    color-mix(in srgb,
      var(--shop-text) 20%,
      transparent);
  border-radius: 16px;
  overflow: hidden;
}

.themePreviewImage {
  background: color-mix(in srgb,
      var(--shop-accent) 18%,
      var(--shop-surface));
  letter-spacing: .12em;
  place-items: center;
  height: 210px;
  font-weight: 900;
  display: grid;
}

.themePreviewBody {
  gap: 8px;
  padding: 18px;
  display: grid;
}

.themePreviewBody h4 {
  margin: 0;
}

.themePreviewButton {
  background: var(--shop-accent);
  color: var(--shop-accent-text);
  border: 0;
  border-radius: 9px;
  margin-top: 8px;
  padding: 11px 14px;
  font-weight: 800;
}

.vendorCustomizeCard {
  border: 1px solid #8080804d;
  border-radius: 18px;
  margin-top: 28px;
  padding: 22px;
}

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

@media (max-width: 550px) {
  .themePresetGrid, .themeColorGrid {
    grid-template-columns: 1fr;
  }
}

.themeEditorSection {
  margin-top: 2rem;
}

.themePresetGrid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  display: grid;
}

.themePresetButton {
  appearance: none;
  width: 100%;
  min-height: 130px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  z-index: 1;
  pointer-events: auto;
  background: #fff;
  border: 2px solid #0000001f;
  border-radius: 14px;
  padding: 1rem;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}

.themePresetButton:hover {
  border-color: #00000059;
  transform: translateY(-2px);
}

.themePresetButton.selected {
  border-color: #8e6c88;
  box-shadow: 0 0 0 3px #8e6c882e;
}

.themePresetButton strong, .themePresetButton span {
  pointer-events: none;
  display: block;
}

.themePresetButton strong {
  margin-top: .8rem;
  font-size: 1rem;
}

.themePresetButton span {
  opacity: .72;
  margin-top: .3rem;
  font-size: .9rem;
}

.themePresetButton .themeSwatches {
  pointer-events: none;
}

.themeColorGrid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  display: grid;
}

.themeColorField {
  display: block;
}

.themeColorControls {
  align-items: center;
  gap: .65rem;
  margin-top: .45rem;
  display: flex;
}

.themeColorControls input[type="color"] {
  cursor: pointer;
  border-radius: 8px;
  width: 52px;
  height: 42px;
  padding: 2px;
}

.themeColorControls input[type="text"] {
  flex: 1;
  min-width: 0;
}

.themeLivePreview {
  border: 1px solid #0000001f;
  border-radius: 18px;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: 1.5rem;
  min-height: 300px;
  margin-top: 1rem;
  padding: 2rem;
  transition: background-color .15s, color .15s;
  display: grid;
}

.themePreviewHeader, .themePreviewCard {
  transition: background-color .15s, color .15s, border-color .15s;
}

.themePreviewHeader h2 {
  margin: .4rem 0 .75rem;
}

.themePreviewEyebrow {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
}

.themePreviewButton {
  font: inherit;
  border: 1px solid;
  border-radius: 999px;
  margin-top: 1rem;
  padding: .7rem 1rem;
  font-weight: 700;
}

.themePreviewCard {
  border: 2px solid;
  border-radius: 14px;
  padding: 1.25rem;
}

.themePreviewCard h3 {
  margin: .4rem 0 .6rem;
}

.themePreviewAccent {
  border-radius: 999px;
  width: 100%;
  height: 8px;
  margin-top: 1.25rem;
}

@media (max-width: 700px) {
  .themeLivePreview {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

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

@media (max-width: 450px) {
  .themePresetGrid {
    grid-template-columns: 1fr;
  }
}

.themeJsStatus {
  background: #0000000d;
  border-radius: 10px;
  margin-top: 1rem;
  padding: .7rem .9rem;
}

.themeJsStatus.ready, .themeJsStatus.warning {
  font-weight: 600;
}

.themePresetButton {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.themePresetButton * {
  pointer-events: none;
}

:root {
  --sm-page: #fbf8f4;
  --sm-page-pink: #fff7f8;
  --sm-surface: #fff;
  --sm-surface-lilac: #f5eff7;
  --sm-surface-blush: #f8e8eb;
  --sm-surface-sage: #edf4ec;
  --sm-accent: #966a97;
  --sm-accent-hover: #79577b;
  --sm-accent-soft: #eaddeb;
  --sm-text: #342e35;
  --sm-muted: #756b74;
  --sm-border: #e7dee6;
  --sm-border-strong: #d6c8d4;
  --sm-success-bg: #edf7ef;
  --sm-success-text: #365d40;
  --sm-warning-bg: #fff5df;
  --sm-warning-text: #75591d;
  --sm-danger-bg: #fcebed;
  --sm-danger-text: #7c3d49;
  --sm-shadow: 0 12px 34px
    #49364814;
  --sm-shadow-hover: 0 16px 42px
    #49364821;
}

html {
  background: var(--sm-page);
}

body {
  color: var(--sm-text);
  background: radial-gradient(circle at 8% 5%,
      #f8e8ebb8,
      transparent 30rem),
    radial-gradient(circle at 92% 10%,
      #eaddeba6,
      transparent 34rem),
    linear-gradient(180deg,
      #fffdfc 0%,
      var(--sm-page) 42%,
      #f9faf6 100%);
  background-attachment: fixed;
}

body > header {
  color: var(--sm-text);
  border-bottom: 1px solid
    var(--sm-border);
  -webkit-backdrop-filter: blur(14px);
  background: #fffdfcf0;
  box-shadow: 0 4px 24px #4936480e;
}

body > header a {
  color: var(--sm-text);
}

body > header a:hover, body > header [class*="brand"], body > header [class*="logo"] {
  color: var(--sm-accent-hover);
}

body > footer {
  color: var(--sm-text);
  border-top: 1px solid
    var(--sm-border);
  background: linear-gradient(135deg, #f5eff7 0%, #faf5f3 52%, #edf4ec 100%);
}

body > footer a {
  color: var(--sm-accent-hover);
}

body > footer a:hover {
  color: var(--sm-accent);
}

.pageShell:not(.artistShopTheme *) {
  color: var(--sm-text);
}

.mutedText:not(.artistShopTheme *) {
  color: var(--sm-muted);
}

.eyebrow:not(.artistShopTheme *) {
  color: var(--sm-accent-hover);
}

.infoCard:not(.artistShopTheme *), .authCard:not(.artistShopTheme *), .formCard:not(.artistShopTheme *), .dashboardCard:not(.artistShopTheme *), .statCard:not(.artistShopTheme *), .listingCard:not(.artistShopTheme *), .productCard:not(.artistShopTheme *), .panel:not(.artistShopTheme *), .shopPolicyCard:not(.artistShopTheme *) {
  color: var(--sm-text);
  border-color: var(--sm-border);
  box-shadow: var(--sm-shadow);
  background: #fffffff5;
}

.productCard:not(.artistShopTheme *), .listingCard:not(.artistShopTheme *), .infoCard:not(.artistShopTheme *) {
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.productCard:not(.artistShopTheme *):hover, .listingCard:not(.artistShopTheme *):hover {
  border-color: var(--sm-border-strong);
  box-shadow: var(--sm-shadow-hover);
  transform: translateY(-2px);
}

.button.primary:not(.artistShopTheme *), button.button.primary:not(.artistShopTheme *) {
  color: #fff;
  background: linear-gradient(135deg,
      #a878a9 0%,
      var(--sm-accent) 55%,
      #865e88 100%);
  border-color: var(--sm-accent);
  box-shadow: 0 7px 20px #966a9733;
}

.button.primary:not(.artistShopTheme *):hover, button.button.primary:not(.artistShopTheme *):hover {
  color: #fff;
  border-color: var(--sm-accent-hover);
  background: linear-gradient(135deg, #966a97 0%, #825b84 100%);
  transform: translateY(-1px);
}

.button.secondary:not(.artistShopTheme *), button.button.secondary:not(.artistShopTheme *) {
  color: var(--sm-accent-hover);
  background: #fffffff2;
  border-color: #cebccf;
}

.button.secondary:not(.artistShopTheme *):hover, button.button.secondary:not(.artistShopTheme *):hover {
  color: #68466b;
  background: var(--sm-surface-lilac);
  border-color: var(--sm-accent);
}

input:not(.artistShopTheme *), textarea:not(.artistShopTheme *), select:not(.artistShopTheme *) {
  color: var(--sm-text);
  border-color: var(--sm-border-strong);
  background-color: #fff;
}

input:not(.artistShopTheme *):focus, textarea:not(.artistShopTheme *):focus, select:not(.artistShopTheme *):focus {
  border-color: var(--sm-accent);
  outline: none;
  box-shadow: 0 0 0 3px #966a9724;
}

input:not(.artistShopTheme *)::placeholder, textarea:not(.artistShopTheme *)::placeholder {
  color: #9b929a;
}

.tagChips:not(.artistShopTheme *) a, .tagChip:not(.artistShopTheme *), .badge:not(.artistShopTheme *) {
  color: #694c6c;
  background: var(--sm-surface-lilac);
  border-color: #ddcedf;
}

.formSuccess:not(.artistShopTheme *) {
  color: var(--sm-success-text);
  background: var(--sm-success-bg);
  border-color: #cfe3d2;
}

.formWarning:not(.artistShopTheme *) {
  color: var(--sm-warning-text);
  background: var(--sm-warning-bg);
  border-color: #ead59e;
}

table:not(.artistShopTheme *) {
  border-color: var(--sm-border);
  background: #fffffff0;
}

th:not(.artistShopTheme *) {
  color: #604d61;
  background: #f7f1f7;
}

td:not(.artistShopTheme *), th:not(.artistShopTheme *), hr:not(.artistShopTheme *) {
  border-color: var(--sm-border);
}

.artistShopTheme {
  isolation: isolate;
}

/* [project]/app/selenite-light.css [app-client] (css) */
:root {
  --selenite-v6-loaded: 1;
  --sm-page: #fbf8f4;
  --sm-surface: #fff;
  --sm-lilac: #f4ecf3;
  --sm-blush: #f8ecef;
  --sm-sage: #eef4ed;
  --sm-accent: #966a97;
  --sm-accent-dark: #79577b;
  --sm-text: #342e35;
  --sm-copy: #625864;
  --sm-muted: #716773;
  --sm-border: #ddd1dc;
}

html, body {
  background-color: var(--sm-page) !important;
}

body {
  color: var(--sm-text) !important;
  background: radial-gradient(circle at 8% 5%, #f8ecefe6, #0000 30rem), radial-gradient(circle at 94% 8%, #f0e8f3d9, #0000 34rem), linear-gradient(#fffdfc 0%, #fbf8f4 65%, #f8faf6 100%) !important;
}

.siteHeader {
  color: #342e35 !important;
  border-bottom: 1px solid
    var(--sm-border) !important;
  background: linear-gradient(135deg, #f3eaf1 0%, #faf3f1 55%, #eef4ec 100%) !important;
  box-shadow: 0 4px 20px #44324314 !important;
}

.siteHeaderInner {
  color: #342e35 !important;
  background: none !important;
}

.siteHeader a[href="/"] {
  color: #342e35 !important;
  opacity: 1 !important;
  font-weight: 750 !important;
}

.siteNav {
  color: #493f4a !important;
}

.siteNav a {
  color: #493f4a !important;
  opacity: 1 !important;
  background: #ffffff8c !important;
  border: 1px solid #cdbfcd !important;
  font-weight: 600 !important;
}

.siteNav a:hover {
  color: #604762 !important;
  background: #fff !important;
  border-color: #a989aa !important;
}

.siteHeaderAccount, .headerAccount {
  color: #342e35 !important;
}

.headerLogin, .headerAccountLink, .headerSeller {
  color: #49394b !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.headerJoin {
  color: #fff !important;
  opacity: 1 !important;
  background: #966a97 !important;
  border-color: #966a97 !important;
  font-weight: 750 !important;
}

.headerJoin:hover {
  color: #fff !important;
  background: #79577b !important;
}

.hero {
  color: var(--sm-text) !important;
  background: none !important;
}

.hero h1 {
  color: #302a31 !important;
}

.hero .eyebrow {
  color: #79577b !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.heroText {
  color: #625864 !important;
  opacity: 1 !important;
}

.heroActions .button.primary {
  color: #fff !important;
  background: #966a97 !important;
  border-color: #966a97 !important;
}

.heroActions .button.primary:hover {
  background: #79577b !important;
}

.heroActions .button.secondary {
  color: #674969 !important;
  background: #fff !important;
  border-color: #cbbacb !important;
}

body:not(:has(.artistShopTheme)) .section {
  color: var(--sm-text) !important;
  background: linear-gradient(135deg, #fff 0%, #f5eff7 100%) !important;
  border: 1px solid #e1d6e0 !important;
  box-shadow: 0 10px 30px #44334312 !important;
}

body:not(:has(.artistShopTheme)) .sectionHeader h2 {
  color: #342e35 !important;
}

body:not(:has(.artistShopTheme)) .sectionHeader .eyebrow {
  color: #79577b !important;
}

body:not(:has(.artistShopTheme)) .cards {
  color: #342e35 !important;
}

body:not(:has(.artistShopTheme)) .card {
  color: #342e35 !important;
  background: #fffffff0 !important;
  border: 1px solid #d9cdd8 !important;
}

body:not(:has(.artistShopTheme)) .card h3 {
  color: #342e35 !important;
}

body:not(:has(.artistShopTheme)) .card p {
  color: #625864 !important;
  opacity: 1 !important;
}

body:not(:has(.artistShopTheme)) .split {
  color: #342e35 !important;
  background: linear-gradient(135deg, #f9eef2 0%, #f3edf6 100%) !important;
  border-color: #ded2dd !important;
}

:is(body:not(:has(.artistShopTheme)) .split h2, body:not(:has(.artistShopTheme)) .split h3) {
  color: #342e35 !important;
}

body:not(:has(.artistShopTheme)) .split p {
  color: #625864 !important;
  opacity: 1 !important;
}

:is(body:not(:has(.artistShopTheme)) .pageShell h1, body:not(:has(.artistShopTheme)) .pageShell h2, body:not(:has(.artistShopTheme)) .pageShell h3) {
  color: #342e35;
}

body:not(:has(.artistShopTheme)) .pageShell p {
  color: #625864;
}

body:not(:has(.artistShopTheme)) .mutedText {
  color: #716773 !important;
  opacity: 1 !important;
}

body:not(:has(.artistShopTheme)) .eyebrow {
  color: #79577b !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .siteHeader {
    background: linear-gradient(160deg, #f3eaf1 0%, #faf4f1 100%) !important;
  }

  .siteNav a {
    color: #403741 !important;
    background: #ffffffc7 !important;
    border-color: #c6b6c6 !important;
  }

  .headerLogin {
    color: #49394b !important;
  }

  .heroText {
    color: #5d535f !important;
  }
}

/*# sourceMappingURL=app_0izyae8._.css.map*/