:root{
  --ink:#171411;--muted:#6c655f;--cream:#f8f3eb;--paper:#fffdf9;--line:#e9e0d5;
  --terracotta:#aa5f47;--rose:#ead6ce;--green:#263c34;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.container{width:min(1180px,calc(100% - 36px));margin:0 auto}
.narrow{width:min(820px,calc(100% - 36px))}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,253,249,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;gap:28px}
.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;font-family:"Playfair Display",serif;font-size:25px;font-weight:700;color:var(--ink);padding:0}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--terracotta);color:white;font-size:18px}
.nav-links{display:flex;gap:18px;margin-right:auto}
.nav-links button,.footer-grid button{border:0;background:none;color:var(--ink);padding:6px}
.nav-actions{display:flex;gap:10px}
.btn{border:0;border-radius:999px;padding:11px 18px;font-weight:600}
.btn-dark{background:var(--ink);color:white}
.btn-accent{background:var(--terracotta);color:white}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.btn-large{padding:14px 24px}
.page{display:none;min-height:70vh}
.page.active{display:block}
.hero{background:linear-gradient(135deg,#fbf6ef 0%,#f0ded5 100%);padding:72px 0 58px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:68px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--terracotta)}
h1,h2{font-family:"Playfair Display",serif;line-height:1.04;margin:12px 0}
h1{font-size:clamp(42px,6vw,72px);max-width:780px}
h2{font-size:38px}
h3{margin:0 0 10px}
.hero-copy{font-size:18px;line-height:1.7;color:var(--muted);max-width:650px}
.hero-search{display:flex;background:white;padding:7px;border-radius:999px;box-shadow:0 12px 35px rgba(63,43,30,.09);margin-top:26px;max-width:620px}
.hero-search input{flex:1;border:0;outline:0;padding:0 16px;background:transparent;min-width:0}
.hero-card{background:#fff;border-radius:28px;padding:14px;box-shadow:0 25px 50px rgba(88,54,38,.16)}
.hero-card-photo{height:390px;border-radius:20px;position:relative;overflow:hidden;background:linear-gradient(145deg,#7d3f35,#c9876e 50%,#ecd1be)}
.dress-shape{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:170px;height:260px;background:#f4e3cf;clip-path:polygon(35% 0,65% 0,72% 14%,82% 18%,70% 45%,95% 100%,5% 100%,30% 45%,18% 18%,28% 14%)}
.floating-tag{position:absolute;background:white;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.tag-1{top:24px;left:22px}.tag-2{right:20px;top:75px}.tag-3{left:30px;bottom:24px}
.hero-card-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 8px 6px}
.hero-card-footer strong,.hero-card-footer span{display:block}.hero-card-footer span{font-size:12px;color:var(--muted);margin-top:3px}
.round-arrow{width:42px;height:42px;border-radius:50%;border:0;background:var(--green);color:white;font-size:20px}
.section{padding:72px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px;gap:20px}
.section-head h2{margin-bottom:0}
.text-link{border:0;background:none;color:var(--terracotta);font-weight:600;padding:0}
.soft-band{background:var(--cream);padding:56px 0}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.value-num{font-family:"Playfair Display";font-size:28px;color:var(--terracotta)}
.value-card p{color:var(--muted);line-height:1.6}
.listing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:56px}
.listing-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white}
.listing-img{height:250px;position:relative;background:linear-gradient(145deg,var(--rose),#f4eadc);display:grid;place-items:center}
.listing-img::after{content:"";width:100px;height:150px;background:rgba(255,255,255,.65);clip-path:polygon(35% 0,65% 0,72% 14%,82% 18%,70% 45%,95% 100%,5% 100%,30% 45%,18% 18%,28% 14%)}
.listing-body{padding:16px}
.listing-title{font-weight:600}
.listing-meta{font-size:12px;color:var(--muted);margin-top:6px}
.price-row{display:flex;align-items:center;gap:8px;margin-top:14px}
.price{font-size:20px;font-weight:700}
.original-price{text-decoration:line-through;color:#999;font-size:13px}
.browse-head{padding:60px 0 28px}
.browse-head h1,.form-heading h1{font-size:54px}
.browse-head p,.form-heading p{color:var(--muted)}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-top:28px}
.filters input,.filters select,.sell-form input,.sell-form select,.sell-form textarea,.auth-panel input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;outline:none}
.results-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.form-heading{padding:60px 0 24px}
.sell-form{padding-bottom:70px}
.form-card{border:1px solid var(--line);border-radius:20px;padding:26px;margin-bottom:18px;background:white}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field-grid label,.auth-panel label{display:block;font-size:13px;font-weight:600}
.field-grid input,.field-grid select,.field-grid textarea,.auth-panel input{margin-top:7px}
.wide{grid-column:1/-1}
.check-row{display:flex;gap:24px;margin-top:10px}
.check-row label{font-weight:400;display:flex;align-items:center;gap:8px}
.check-row input{width:auto;margin:0}
.transaction-note{background:var(--cream);border-radius:16px;padding:20px;margin:20px 0;color:var(--muted)}
.transaction-note strong{color:var(--ink)}
.empty-state{text-align:center;padding:70px 20px}
.empty-icon{font-size:60px;color:var(--terracotta)}
.modal{display:none;position:fixed;inset:0;z-index:50}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,16,14,.48);backdrop-filter:blur(2px)}
.modal-panel{position:relative;width:min(460px,calc(100% - 24px));max-height:90vh;overflow:auto;margin:5vh auto;background:white;border-radius:24px;padding:34px;z-index:2}
.modal-close{position:absolute;right:18px;top:15px;border:0;background:#f4efe9;width:36px;height:36px;border-radius:50%;font-size:22px}
.auth-panel form{display:grid;gap:14px;margin-top:22px}
.auth-tabs{display:flex;gap:8px;background:var(--cream);padding:5px;border-radius:999px;margin-top:20px}
.auth-tab{flex:1;border:0;border-radius:999px;padding:9px;background:transparent;font-weight:600}
.auth-tab.active{background:white;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.fine-print{display:block;color:var(--muted);margin-top:12px;font-size:12px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:white;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{background:#1c1a18;color:white;padding:50px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px}
.footer-grid div{display:flex;flex-direction:column;gap:8px}
.footer-grid button,.footer-grid span{color:#c9c2bc;text-align:left;padding:0}
.footer-brand{color:white}
.footer-grid p{color:#c9c2bc}
.footer-bottom{border-top:1px solid #3a3632;margin-top:35px;padding-top:20px;color:#aaa;font-size:12px}
@media(max-width:950px){
 .hero-grid{grid-template-columns:1fr}.hero-card{display:none}
 .listing-grid{grid-template-columns:repeat(2,1fr)}
 .filters{grid-template-columns:1fr 1fr}
 .nav-links{display:none}
}
@media(max-width:620px){
 .container,.narrow{width:min(100% - 24px,1180px)}
 .nav{height:64px}.nav-actions .btn-dark{padding:9px 13px}
 .brand{font-size:22px}
 .hero{padding:46px 0}.hero h1{font-size:44px}.hero-copy{font-size:16px}
 .hero-search{border-radius:16px}
 .section{padding:48px 0}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:31px}
 .value-grid{grid-template-columns:1fr;gap:18px}
 .listing-grid{grid-template-columns:1fr 1fr;gap:10px}.listing-img{height:190px}.listing-body{padding:12px}
 .browse-head{padding:42px 0 22px}.browse-head h1,.form-heading h1{font-size:42px}
 .filters{grid-template-columns:1fr}
 .field-grid{grid-template-columns:1fr}.wide{grid-column:auto}
 .check-row{flex-direction:column;gap:10px}
 .form-card{padding:18px}
 .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}


.form-help{
  color:var(--muted);
  font-size:13px;
  margin:-2px 0 16px;
}
.photo-upload-box{
  border:1.5px dashed #d8c7ba;
  background:var(--cream);
  border-radius:18px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:5px;
  cursor:pointer;
  padding:22px;
}
.photo-upload-box:hover{border-color:var(--terracotta)}
.photo-upload-box input{display:none}
.photo-upload-icon{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:white;color:var(--terracotta);
  font-size:25px;margin-bottom:5px
}
.photo-upload-box span:last-of-type{font-size:12px;color:var(--muted)}
.photo-preview{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:14px;
}
.photo-thumb{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  position:relative;
  background:var(--cream);
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb:first-child::after{
  content:"Cover";
  position:absolute;
  left:6px;bottom:6px;
  background:rgba(23,20,17,.86);
  color:#fff;
  border-radius:999px;
  padding:4px 7px;
  font-size:9px;
  font-weight:700;
}
.photo-count{font-size:12px;color:var(--muted);margin-top:8px}
.photo-count.error{color:#a33d35;font-weight:600}
.listing-photo{
  width:100%;height:100%;object-fit:cover;display:block
}
@media(max-width:620px){
  .photo-preview{grid-template-columns:repeat(3,1fr)}
}


.my-listing-card{position:relative}
.listing-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 14px 14px;
}
.listing-actions .full{grid-column:1/-1}
.btn-small{padding:9px 12px;font-size:12px}
.btn-outline{background:white;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:#8e3f36;color:white}
.status-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:700;
  margin-top:9px;
}
.status-active{background:#e8f0eb;color:#274336}
.status-sold{background:#eee8de;color:#715a3f}
.status-hidden{background:#eee;color:#666}
.listing-edit-panel{width:min(700px,calc(100% - 24px))}
.edit-form{display:grid;gap:16px;margin-top:18px}
.edit-form>label{display:block;font-size:13px;font-weight:600}
.edit-form input,.edit-form select,.edit-form textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;margin-top:7px
}
.edit-check-row{margin:0}
.remove-reasons{display:grid;gap:10px;margin:20px 0}
.remove-reasons label{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:13px;border-radius:12px
}
.remove-reasons input{width:auto}


/* =========================
   CLICKABLE LISTING DETAILS
========================= */
.listing-card[data-listing-id]{cursor:pointer}
.listing-detail-panel{
  width:min(780px,calc(100% - 24px));
  padding:0;
  overflow:hidden;
}
.detail-photo-grid{background:#f6f0e9}
.detail-main-photo{
  width:100%;
  max-height:560px;
  object-fit:contain;
  display:block;
  background:#f4eee7;
}
.detail-thumbnails{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px;
}
.detail-thumb{
  width:72px;
  height:72px;
  flex:0 0 auto;
  padding:0;
  border:2px solid transparent;
  background:none;
  border-radius:10px;
  overflow:hidden;
}
.detail-thumb:hover{border-color:var(--terracotta)}
.detail-thumb img{width:100%;height:100%;object-fit:cover}
.listing-detail-info{padding:26px}
.detail-price{font-size:30px;font-weight:700;margin:12px 0}
.detail-facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:24px 0;
}
.detail-facts div{
  background:var(--cream);
  border-radius:12px;
  padding:13px;
}
.detail-facts span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px;
}
.detail-description{margin:28px 0}
.detail-description p{
  line-height:1.7;
  color:var(--muted);
  white-space:pre-wrap;
}
.message-seller-btn{width:100%;margin-top:12px}
.seller-own-notice{
  background:var(--cream);
  border-radius:12px;
  padding:14px;
  font-weight:600;
}

/* =========================
   INBOX
========================= */
.conversation-list{
  display:grid;
  gap:12px;
  padding-bottom:60px;
}
.conversation-card{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
  cursor:pointer;
}
.conversation-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.06)}
.conversation-card img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  background:var(--cream);
}
.conversation-main{flex:1;min-width:0}
.conversation-main strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.conversation-main span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.conversation-role{
  font-size:10px;
  font-weight:700;
  border-radius:999px;
  background:var(--cream);
  padding:5px 8px;
}

/* =========================
   PRIVATE MESSAGES
========================= */
.messages-page{
  max-width:760px;
  padding:50px 0 80px;
}
.messages-header h1{font-size:42px}
.chat-listing-preview{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  margin:24px 0 14px;
}
.chat-listing-preview img{
  width:65px;
  height:65px;
  object-fit:cover;
  border-radius:10px;
}
.chat-listing-preview strong,
.chat-listing-preview span{display:block}
.chat-listing-preview span{
  margin-top:5px;
  color:var(--muted);
}
.message-thread{
  height:450px;
  overflow-y:auto;
  background:var(--cream);
  border-radius:18px;
  padding:18px;
}
.message-row{display:flex;margin:8px 0}
.message-row.mine{justify-content:flex-end}
.message-row.theirs{justify-content:flex-start}
.message-bubble{
  max-width:72%;
  padding:11px 14px;
  border-radius:17px;
  line-height:1.45;
  font-size:14px;
}
.mine .message-bubble{
  background:var(--ink);
  color:white;
  border-bottom-right-radius:5px;
}
.theirs .message-bubble{
  background:white;
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
}
.message-time{
  margin-top:4px;
  font-size:9px;
  opacity:.6;
}
.message-form{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.message-form textarea{
  flex:1;
  resize:none;
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px;
}

@media(max-width:620px){
  .detail-facts{grid-template-columns:1fr 1fr}
  .message-thread{height:55vh}
  .conversation-card img{width:58px;height:58px}
}


/* =========================
   FIX: SCROLLABLE LISTING DETAILS
========================= */
#listingDetailModal .listing-detail-panel{
  max-height:92vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

#listingDetailContent{
  min-height:0;
}

#listingDetailModal .modal-close{
  position:sticky;
  top:12px;
  margin:12px 12px -48px auto;
  display:block;
  z-index:30;
}

.message-seller-btn{
  display:block;
  width:100%;
  margin:22px 0 10px;
  position:relative;
  z-index:2;
}

@media(max-width:620px){
  #listingDetailModal .listing-detail-panel{
    width:calc(100% - 12px);
    max-height:96vh;
    margin:2vh auto;
    border-radius:18px;
  }

  .listing-detail-info{
    padding:20px;
  }

  .detail-main-photo{
    max-height:48vh;
  }
}


/* =========================
   ARCHIVE FOLDERS
========================= */
.folder-tabs{
  display:flex;
  gap:8px;
  width:max-content;
  background:var(--cream);
  padding:5px;
  border-radius:999px;
  margin-bottom:24px;
}
.folder-tab{
  border:0;
  background:transparent;
  border-radius:999px;
  padding:9px 16px;
  font-weight:700;
  color:var(--muted);
}
.folder-tab.active{
  background:white;
  color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.archive-reason{
  margin-top:10px;
  background:var(--cream);
  border-radius:10px;
  padding:10px;
  font-size:12px;
  color:var(--muted);
}
.archive-reason strong{
  color:var(--ink);
}
.archive-banner{
  border:1px solid #e2d5c7;
  background:#f7efe5;
  border-radius:14px;
  padding:13px 15px;
  margin-bottom:12px;
}
.archive-banner strong,
.archive-banner span{
  display:block;
}
.archive-banner span{
  color:var(--muted);
  margin-top:4px;
  font-size:12px;
}
.system-message{
  display:flex;
  justify-content:center;
  margin:14px 0;
}
.system-message-inner{
  max-width:82%;
  background:#eee6db;
  color:#65594f;
  border-radius:999px;
  padding:7px 12px;
  text-align:center;
  font-size:11px;
}
.conversation-archived{
  opacity:.88;
}
.conversation-status{
  display:inline-flex;
  margin-top:7px;
  border-radius:999px;
  padding:4px 7px;
  background:#eee6db;
  color:#68584b;
  font-size:9px;
  font-weight:700;
}
.message-form.archived{
  opacity:.55;
}
.message-form.archived textarea,
.message-form.archived button{
  pointer-events:none;
}
.archived-image-placeholder{
  width:72px;
  height:72px;
  flex:0 0 auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--cream);
  color:var(--muted);
  font-size:10px;
  text-align:center;
  padding:6px;
}


/* =========================
   BROWSE CARD OVERVIEW
========================= */

.browse-listing-card{
  overflow:hidden;
  background:#fff;
}

.browse-listing-img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  background:var(--cream);
}

.browse-listing-img::after{
  display:none;
}

.browse-listing-img .listing-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.listing-no-photo{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:12px;
}

.browse-listing-body{
  padding:14px 14px 16px;
}

.listing-category{
  color:var(--terracotta);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
  font-weight:700;
  margin-bottom:6px;
}

.browse-listing-body .listing-title{
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.browse-listing-body .price-row{
  margin-top:9px;
}

.browse-listing-body .price{
  font-size:18px;
}

@media(max-width:620px){
  .browse-listing-body{
    padding:11px 10px 13px;
  }

  .browse-listing-body .listing-title{
    font-size:13px;
  }

  .browse-listing-body .price{
    font-size:16px;
  }

  .listing-category{
    font-size:9px;
  }
}


/* =========================
   SAFETY + LEGAL PAGES
========================= */
.policy-page{
  width:min(820px,calc(100% - 36px));
  padding:58px 0 90px;
}
.policy-back{
  display:block;
  margin-bottom:34px;
}
.policy-page h1{
  font-size:clamp(42px,6vw,62px);
  margin-bottom:14px;
}
.policy-intro{
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 42px;
}
.policy-meta{
  color:var(--muted);
  font-size:12px;
  margin:-4px 0 20px;
}
.policy-section{
  padding:27px 0;
  border-top:1px solid var(--line);
}
.policy-section h2{
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:20px;
  line-height:1.3;
  margin:0 0 10px;
}
.policy-section p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}
.policy-note{
  margin-top:28px;
  background:var(--cream);
  border-radius:18px;
  padding:22px;
}
.policy-note strong{
  display:block;
  margin-bottom:6px;
}
.policy-note p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.legal-draft{
  border:1px solid var(--line);
}
footer .footer-grid button{
  cursor:pointer;
}
footer .footer-grid button:hover{
  color:#fff;
}
@media(max-width:620px){
  .policy-page{
    width:min(100% - 24px,820px);
    padding:42px 0 70px;
  }
  .policy-intro{
    font-size:16px;
  }
  .policy-section{
    padding:22px 0;
  }
}


/* =========================
   SERVER PAGINATION + UNREAD
========================= */
.load-more-wrap{
  display:flex;
  justify-content:center;
  padding:0 0 60px;
}
.nav-unread{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:4px;
  border-radius:999px;
  background:var(--terracotta);
  color:white;
  font-size:9px;
  font-weight:800;
}
.conversation-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
.conversation-unread{
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--terracotta);
  color:white;
  font-size:10px;
  font-weight:800;
}


/* =========================
   MY LISTINGS IMAGE FIX
========================= */
.my-listing-card .listing-img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  background:var(--cream);
}

.my-listing-card .listing-img::after{
  display:none;
}

.my-listing-card .listing-img .listing-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   EDIT LISTING PHOTOS
========================= */
.edit-photo-section{
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
  margin-bottom:2px;
}
.section-label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:5px;
}
.photo-upload-box.compact{
  min-height:110px;
  margin-top:12px;
}
.edit-photo-item{
  position:relative;
}
.remove-photo-btn{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:0;
  background:rgba(23,20,17,.86);
  color:white;
  font-size:16px;
  line-height:1;
  z-index:5;
}
.photo-thumb.marked-remove{
  opacity:.35;
}
.photo-thumb.marked-remove::before{
  content:"Will be removed";
  position:absolute;
  inset:auto 5px 5px 5px;
  background:rgba(145,55,45,.92);
  color:white;
  border-radius:6px;
  padding:4px 5px;
  font-size:8px;
  text-align:center;
  z-index:4;
}


/* =========================
   LISTING REVIEW + MODERATION
========================= */
.review-notice{
  margin:18px 0 24px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--cream);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.review-notice strong{font-size:14px;}
.review-notice span{font-size:13px;color:var(--muted);line-height:1.5;}

.status-pending{
  background:#fff1c9;
  color:#755511;
}
.status-rejected{
  background:#f8dddd;
  color:#8a2e2e;
}
.moderation-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:#fff5f4;
  color:#7d3832;
  font-size:12px;
  line-height:1.45;
}
.page-heading-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:28px;
}
.moderation-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.moderation-card{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:white;
}
.moderation-photo{
  width:100%;
  aspect-ratio:1/1;
  background:var(--cream);
}
.moderation-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.moderation-card-body{padding:18px;}
.moderation-card-body h3{margin:5px 0 8px;font-size:22px;}
.moderation-details{
  margin:18px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
.moderation-details div{
  border-top:1px solid var(--line);
  padding-top:8px;
}
.moderation-details dt{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.moderation-details dd{
  margin:3px 0 0;
  font-size:13px;
}
.moderation-description{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.moderation-thumbs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:14px;
}
.moderation-thumbs img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
}
.moderation-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
}
@media(max-width:760px){
  .moderation-grid{grid-template-columns:1fr;}
  .page-heading-row{flex-direction:column;}
}


/* ============================================================
   PUBLIC LISTING CARD — CONSISTENT APPROVED LISTING FORMAT
   Every Home/Browse card is: square photo, then text underneath.
============================================================ */
#homeListings .browse-listing-card,
#browseListings .browse-listing-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  overflow:hidden;
  background:#fff;
}

#homeListings .browse-listing-img,
#browseListings .browse-listing-img{
  position:relative;
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  overflow:hidden;
  background:var(--cream);
}

#homeListings .browse-listing-img::after,
#browseListings .browse-listing-img::after{
  content:none !important;
  display:none !important;
}

#homeListings .browse-listing-img > .listing-photo,
#browseListings .browse-listing-img > .listing-photo{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:cover;
  object-position:center;
  display:block;
}

#homeListings .browse-listing-body,
#browseListings .browse-listing-body{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:100%;
  padding:14px 14px 16px;
  background:#fff;
}

#homeListings .browse-listing-body .listing-category,
#browseListings .browse-listing-body .listing-category{
  display:block;
}

#homeListings .browse-listing-body .listing-title,
#browseListings .browse-listing-body .listing-title{
  display:block;
  margin:0;
}

#homeListings .browse-listing-body .price-row,
#browseListings .browse-listing-body .price-row{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:9px;
}

@media(max-width:620px){
  #homeListings .browse-listing-body,
  #browseListings .browse-listing-body{
    padding:11px 10px 13px;
  }
}


/* MY LISTINGS — square marketplace-style cards */
#myListingsGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:start;
}

.square-my-listing-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  min-width:0;
}

.square-my-listing-card .my-listing-square-img{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  background:var(--cream);
}

.square-my-listing-card .my-listing-square-img::after{
  content:none !important;
  display:none !important;
}

.square-my-listing-card .my-listing-square-img .listing-photo{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:block;
}

.square-my-listing-card .no-photo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
}

.my-listing-card-body{
  padding:13px 13px 10px;
}

.my-listing-card-body .listing-category{
  margin-bottom:5px;
}

.my-listing-card-body .price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}

.my-listing-detail-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.my-listing-detail-row span{
  font-size:10px;
  line-height:1;
  padding:6px 7px;
  border-radius:999px;
  background:var(--cream);
  color:var(--muted);
  white-space:nowrap;
}

.my-listing-location{
  margin-top:10px;
  font-size:11px;
}

.my-listing-status-row{
  margin-top:10px;
}

.my-listing-actions{
  margin-top:auto;
  padding:0 13px 13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.my-listing-actions .btn{
  width:100%;
}

.my-listing-actions .btn-danger{
  grid-column:1 / -1;
}

@media(max-width:1100px){
  #myListingsGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:760px){
  #myListingsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .my-listing-actions{
    grid-template-columns:1fr;
    padding:0 10px 10px;
  }

  .my-listing-actions .btn-danger{
    grid-column:auto;
  }
}


/* ============================================================
   MOBILE NAVIGATION — expose full desktop navigation on phones
============================================================ */
.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}

.mobile-menu-btn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
}

.mobile-nav-menu{
  display:none;
}

@media(max-width:950px){
  .topbar{
    position:sticky;
    top:0;
    z-index:100;
  }

  .nav{
    gap:10px;
  }

  .brand{
    margin-right:auto;
  }

  .mobile-menu-btn{
    display:flex;
    order:3;
  }

  .nav-actions{
    order:2;
  }

  .mobile-nav-menu{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(30,24,20,.10);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .mobile-nav-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .mobile-nav-inner{
    padding-top:10px;
    padding-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .mobile-nav-inner > button{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-weight:600;
    text-align:left;
    padding:11px 12px;
    cursor:pointer;
  }

  .mobile-nav-inner > button:hover,
  .mobile-nav-inner > button:focus-visible{
    background:var(--cream);
  }
}

@media(max-width:620px){
  /* Sell is already available inside the mobile menu, so keep the header uncluttered. */
  .nav-actions .btn-dark{
    display:none;
  }

  .nav-actions{
    gap:2px;
  }

  .nav-actions .btn-ghost{
    padding:8px 9px;
    font-size:12px;
  }

  .mobile-menu-btn{
    width:40px;
    height:40px;
  }
}