/* A focused publishing workspace: clear sections, quiet fields, and a
   persistent finish line without competing with the seller's content. */
body.app-section-listing .app-section-page {
  width: min(1320px, 100%);
  padding-top: clamp(26px, 4vw, 54px);
}

body.app-section-listing .app-section-page > .app-section-heading {
  max-width: 780px;
  margin-bottom: 34px;
}

body.app-section-listing .listing-editor-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: clamp(20px, 2.4vw, 34px);
}

body.app-section-listing .listing-details,
body.app-section-listing .listing-media-panel {
  border-color: #3e4144;
  background: linear-gradient(145deg, #1b1c1e, #151617);
  box-shadow: 0 18px 48px #00000026;
}

body.app-section-listing .listing-details {
  gap: 26px;
  padding: clamp(20px, 2.6vw, 36px);
}

body.app-section-listing .listing-media-panel {
  top: 24px;
  padding: clamp(20px, 2.4vw, 30px);
}

body.app-section-listing .listing-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f3ca4f;
  font-size: 10px;
  letter-spacing: .14em;
}

body.app-section-listing .listing-step::after {
  content: '';
  display: block;
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #705f29, transparent);
}

body.app-section-listing .listing-form-grid,
body.app-section-listing .listing-media-inputs,
body.app-section-listing .listing-location-grid {
  gap: 16px;
}

body.app-section-listing .listing-form label {
  color: #e9e7e1;
  font-size: 11px;
  letter-spacing: .015em;
}

body.app-section-listing .listing-form input,
body.app-section-listing .listing-form textarea,
body.app-section-listing .listing-form select {
  min-height: 48px;
  border-color: #41454a;
  border-radius: 5px;
  background: #111214;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.app-section-listing .listing-form textarea { min-height: 132px; resize: vertical; }

body.app-section-listing .listing-form input:hover,
body.app-section-listing .listing-form textarea:hover,
body.app-section-listing .listing-form select:hover { border-color: #676c72; }

body.app-section-listing .listing-form input:focus,
body.app-section-listing .listing-form textarea:focus,
body.app-section-listing .listing-form select:focus {
  border-color: #dfbb49;
  background: #101113;
  box-shadow: 0 0 0 3px #dfbb4918;
}

body.app-section-listing .listing-media-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.app-section-listing .listing-media-inputs .listing-upload-field {
  grid-column: auto;
  min-height: 122px;
  border: 1px dashed #52575d;
  border-radius: 6px;
  background: #141517;
  transition: background .16s ease, border-color .16s ease;
}

body.app-section-listing .listing-media-inputs .listing-upload-field:hover {
  border-color: #b99c42;
  background: #191816;
}

body.app-section-listing .listing-media-inputs .listing-image-field { grid-column: 1 / -1; }

body.app-section-listing .listing-tags-source { display: none; }

body.app-section-listing .listing-tag-composer {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 14px;
  border: 1px solid #41464a;
  border-radius: 6px;
  background: #111315;
}

body.app-section-listing .listing-tag-composer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ece9e0;
  font: 700 11px "DM Sans", sans-serif;
}

body.app-section-listing .listing-tag-composer-head small,
body.app-section-listing .listing-tag-composer > small,
body.app-section-listing .listing-photo-count {
  color: #9da7b2;
  font: 10px "DM Mono", monospace;
}

body.app-section-listing .listing-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 26px;
}

body.app-section-listing .listing-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  border: 1px solid #857138;
  border-radius: 999px;
  background: #2a2618;
  color: #f3d16b;
  font: 10px "DM Mono", monospace;
}

body.app-section-listing .listing-tag-chip button {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f3d16b;
  font-size: 16px;
  line-height: 1;
}

body.app-section-listing .listing-tag-chip button:hover { background: #57491f; }
body.app-section-listing .listing-tag-empty { color: #848d97; font: 11px "DM Sans", sans-serif; }

body.app-section-listing .listing-tag-composer [data-listing-tag-entry] { min-height: 42px; }

body.app-section-listing .listing-photo-count { display: block; margin-top: 7px; color: #9fd4af; }

body.app-section-listing .listing-location-panel {
  gap: 16px;
  border-color: #3c4d45;
  border-radius: 6px;
  background: linear-gradient(135deg, #121917, #101312);
}

body.app-section-listing .listing-fulfillment-field {
  border-radius: 5px;
  border-color: #3d4c45;
}

body.app-section-listing .listing-image-preview {
  min-height: 390px;
  border: 1px solid #35393d;
  border-radius: 6px;
  background: #0e0f10;
}

body.app-section-listing .listing-image-preview::before {
  content: attr(data-media-count);
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  padding: 6px 8px;
  border: 1px solid #4c514f;
  border-radius: 999px;
  background: #121416e8;
  color: #dce6df;
  font: 9px "DM Mono", monospace;
}

body.app-section-listing .listing-image-preview { position: relative; padding-top: 40px; }

body.app-section-listing .preview-empty {
  min-height: 346px;
  padding: 26px;
  color: #a7adb5;
}

body.app-section-listing .listing-publish-bar {
  border-color: #3c4045;
  background: #17191bf5;
  backdrop-filter: blur(16px);
}

body.app-section-listing .listing-publish-bar span::before {
  content: 'DRAFT SAVES AUTOMATICALLY · ';
  color: #79bf91;
}

body.app-section-listing .listing-publish-bar button {
  min-width: 224px;
  min-height: 50px;
  border-radius: 4px;
  background: #f1ca4d;
  box-shadow: 0 6px 18px #0000002b;
}

body.app-section-listing .listing-publish-bar button:hover { background: #ffdb65; transform: translateY(-1px); }

/* The Create Listing flow is a full seller workspace, not a dialog stretched
   into the page. Keep the working area generous while the actual fields stay
   easy to scan. */
body.app-section-listing.listing-page .app-section-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(18px, 3vw, 54px) 146px;
}

body.app-section-listing.listing-page .app-section-intro {
  width: calc(100% + clamp(36px, 6vw, 108px));
  margin: 0 0 28px;
  margin-left: clamp(-54px, -3vw, -18px);
  padding: clamp(28px, 4vw, 54px) clamp(22px, 3.7vw, 68px) 26px;
}

body.app-section-listing.listing-page .app-section-content {
  width: 100%;
  margin: 0;
}

body.app-section-listing.listing-page .listing-form {
  gap: clamp(22px, 2vw, 32px);
}

body.app-section-listing.listing-page .listing-editor-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(410px, .55fr);
  align-items: start;
}

body.app-section-listing.listing-page .listing-details,
body.app-section-listing.listing-page .listing-media-panel {
  border-radius: 10px;
}

body.app-section-listing.listing-page .listing-media-panel {
  top: 18px;
}

body.app-section-listing.listing-page .listing-publish-bar {
  padding-right: clamp(22px, 3vw, 54px);
  padding-left: clamp(22px, 3vw, 54px);
}

@media (max-width: 840px) {
  body.app-section-listing .listing-editor-grid { grid-template-columns: 1fr; }
  body.app-section-listing .listing-media-panel { position: static; order: -1; }
  body.app-section-listing.listing-page .app-section-page { padding-right: 16px; padding-left: 16px; }
  body.app-section-listing.listing-page .app-section-intro { width: calc(100% + 32px); margin-left: -16px; padding-right: 22px; padding-left: 22px; }
}

@media (max-width: 580px) {
  body.app-section-listing .listing-media-inputs { grid-template-columns: 1fr; }
  body.app-section-listing .listing-media-inputs .listing-upload-field { grid-column: 1 / -1; }
  body.app-section-listing .listing-image-preview { min-height: 230px; }
  body.app-section-listing .preview-empty { min-height: 190px; }
}

/* Native option menus need explicit colors; otherwise some browsers render
   the Condition choices as black text on the marketplace's dark background. */
body.app-section-listing .listing-form select,
.listing-dialog .listing-editor-form select[name="condition"] {
  color-scheme: dark;
  color: #f5f2e9;
  background-color: #101113;
}

body.app-section-listing .listing-form select option,
.listing-dialog .listing-editor-form select[name="condition"] option {
  color: #f5f2e9;
  background: #16181b;
}

body.app-section-listing .listing-form select option:checked,
.listing-dialog .listing-editor-form select[name="condition"] option:checked {
  color: #101113;
  background: #e3c25c;
}