/* ==========================================================================
   NE BAZAAR plugin styles — everything scoped under .nebz-app so it can't
   leak into or clash with whatever theme is active on the site. Same
   gamosa-inspired identity as discussed: cream ground, woven-red accent,
   Fraunces + Inter type.
   ========================================================================== */

.nebz-app {
  --nebz-cream: #FBF5E8;
  --nebz-cream-deep: #F3E9D6;
  --nebz-card: #FFFFFF;
  --nebz-ink: #2A2218;
  --nebz-ink-soft: #7C7061;
  --nebz-maroon: #9C2B26;
  --nebz-maroon-deep: #7A211D;
  --nebz-teal: #1F5C4E;
  --nebz-teal-deep: #143F35;
  --nebz-gold: #C6952F;
  --nebz-hairline: #E7DAC0;
  --nebz-shadow: 0 6px 24px rgba(42, 34, 24, 0.09);
  --nebz-shadow-sm: 0 2px 8px rgba(42, 34, 24, 0.07);
  --nebz-radius: 14px;
  --nebz-radius-sm: 9px;

  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--nebz-ink);
  line-height: 1.5;
  max-width: 1100px;
  margin: 0 auto;
}

.nebz-app * { box-sizing: border-box; }
.nebz-app h1, .nebz-app h2, .nebz-app h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--nebz-ink);
}
.nebz-app a { color: var(--nebz-teal-deep); text-decoration: none; }
.nebz-app a:hover { text-decoration: underline; }
.nebz-app img { max-width: 100%; }

/* A small woven-diamond divider you can sprinkle in — not global site chrome,
   just an optional accent available within marketplace sections. */
.nebz-weave-strip {
  height: 9px;
  background-image:
    linear-gradient(135deg, var(--nebz-maroon) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--nebz-maroon) 25%, transparent 25.5%),
    linear-gradient(315deg, var(--nebz-maroon) 25%, transparent 25.5%),
    linear-gradient(45deg, var(--nebz-maroon) 25%, transparent 25.5%);
  background-size: 11px 11px;
  background-position: 0 0, 5.5px 0, 5.5px -5.5px, 0 5.5px;
  background-color: var(--nebz-gold);
  margin: 18px 0;
}

.nebz-hero { padding: 20px 0 4px; text-align: center; }
.nebz-hero h2 { font-size: 26px; }
.nebz-hero p { color: var(--nebz-ink-soft); font-size: 15px; max-width: 480px; margin: 0 auto; }

.nebz-flash { padding: 13px 18px; border-radius: var(--nebz-radius-sm); margin: 16px 0; font-size: 14px; font-weight: 500; }
.nebz-flash.nebz-success { background: #E6F2EC; color: var(--nebz-teal-deep); }
.nebz-flash.nebz-error { background: #FBE9E7; color: var(--nebz-maroon-deep); }

.nebz-app .nebz-btn {
  display: inline-block; background: var(--nebz-teal); color: #fff; border: none;
  padding: 12px 22px; border-radius: 9px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.15s ease;
}
.nebz-app .nebz-btn:hover { background: var(--nebz-teal-deep); text-decoration: none; }
.nebz-app .nebz-btn.nebz-ghost { background: transparent; color: var(--nebz-ink-soft); border: 1.5px solid var(--nebz-hairline); }
.nebz-app .nebz-btn.nebz-ghost:hover { background: var(--nebz-cream-deep); }
.nebz-app .nebz-btn.nebz-danger { background: var(--nebz-maroon); }
.nebz-app .nebz-btn.nebz-danger:hover { background: var(--nebz-maroon-deep); }
.nebz-app .nebz-btn.nebz-marigold { background: var(--nebz-gold); color: var(--nebz-ink); }
.nebz-app .nebz-btn.nebz-block { width: 100%; text-align: center; }

.nebz-app input, .nebz-app select, .nebz-app textarea {
  width: 100%; padding: 12px 14px; border-radius: 9px; border: 1.5px solid var(--nebz-hairline);
  font-size: 15px; font-family: inherit; margin-bottom: 13px; background: #fff; color: var(--nebz-ink);
  transition: border-color 0.15s ease;
}
.nebz-app input:focus, .nebz-app select:focus, .nebz-app textarea:focus { outline: none; border-color: var(--nebz-teal); }
.nebz-app label { font-size: 12.5px; font-weight: 600; color: var(--nebz-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 5px; }
.nebz-app textarea { resize: vertical; min-height: 100px; font-family: inherit; }

.nebz-card { background: var(--nebz-card); border-radius: var(--nebz-radius); padding: 24px; box-shadow: var(--nebz-shadow); }
.nebz-form-narrow { max-width: 460px; margin: 24px auto; }

.nebz-cat-chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 20px 0; }
.nebz-cat-chips a { background: #fff; border: 1.5px solid var(--nebz-hairline); padding: 8px 17px; border-radius: 22px; font-size: 13.5px; font-weight: 500; color: var(--nebz-ink); }
.nebz-cat-chips a.nebz-active { background: var(--nebz-teal); color: #fff; border-color: var(--nebz-teal); }

.nebz-search-bar { display: flex; gap: 10px; margin: 22px 0 18px; }
.nebz-search-bar input { margin-bottom: 0; }
.nebz-search-bar button { flex-shrink: 0; }

.nebz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 20px; margin: 22px 0 30px; }
.nebz-listing-card {
  background: var(--nebz-card); border-radius: var(--nebz-radius); overflow: hidden;
  box-shadow: var(--nebz-shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease; border: 1px solid var(--nebz-hairline);
}
.nebz-listing-card:hover { box-shadow: var(--nebz-shadow); transform: translateY(-2px); text-decoration: none; }
.nebz-listing-card .nebz-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--nebz-cream-deep); }
.nebz-listing-card .nebz-body { padding: 13px 15px; flex: 1; display: flex; flex-direction: column; }
.nebz-listing-card .nebz-price { font-size: 19px; font-weight: 700; color: var(--nebz-maroon-deep); font-family: 'Fraunces', serif; }
.nebz-listing-card .nebz-title { font-size: 14.5px; margin: 4px 0; color: var(--nebz-ink); font-weight: 500; }
.nebz-listing-card .nebz-meta { font-size: 12px; color: var(--nebz-ink-soft); margin-top: auto; padding-top: 7px; }

.nebz-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.nebz-badge.nebz-free { background: var(--nebz-gold); color: var(--nebz-ink); }
.nebz-badge.nebz-pending { background: var(--nebz-cream-deep); color: var(--nebz-ink-soft); }
.nebz-badge.nebz-sold { background: var(--nebz-hairline); color: var(--nebz-ink-soft); }
.nebz-badge.nebz-rejected { background: #FBE9E7; color: var(--nebz-maroon-deep); }
.nebz-badge.nebz-active { background: #E6F2EC; color: var(--nebz-teal-deep); }

.nebz-listing-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; margin: 10px 0 30px; }
@media (max-width: 720px) { .nebz-listing-detail { grid-template-columns: 1fr; } }
.nebz-gallery-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--nebz-radius); background: var(--nebz-cream-deep); border: 1px solid var(--nebz-hairline); }
.nebz-gallery-thumbs { display: flex; gap: 8px; margin-top: 9px; }
.nebz-gallery-thumbs img { width: 66px; height: 66px; object-fit: cover; border-radius: 7px; cursor: pointer; border: 2px solid transparent; }
.nebz-gallery-thumbs img.nebz-active { border-color: var(--nebz-teal); }

.nebz-seller-box { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nebz-seller-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--nebz-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; font-family: 'Fraunces', serif; }

.nebz-app table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--nebz-radius); overflow: hidden; box-shadow: var(--nebz-shadow-sm); }
.nebz-app th, .nebz-app td { text-align: left; padding: 11px 13px; font-size: 13.5px; border-bottom: 1px solid var(--nebz-hairline); }
.nebz-app th { background: var(--nebz-cream-deep); color: var(--nebz-ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.nebz-app tr:last-child td { border-bottom: none; }

.nebz-tabs { display: flex; gap: 4px; margin: 20px 0; border-bottom: 2px solid var(--nebz-hairline); }
.nebz-tabs a { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--nebz-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nebz-tabs a.nebz-active { color: var(--nebz-maroon-deep); border-bottom-color: var(--nebz-maroon); }

.nebz-empty-state { text-align: center; padding: 46px 20px; color: var(--nebz-ink-soft); }
.nebz-empty-state h3 { color: var(--nebz-ink); }

.nebz-row { display: flex; gap: 12px; }
.nebz-row > * { flex: 1; }