/* Listing pages, seller profiles and the upgraded listing form.
   Built only from the design tokens in styles.css, so the warm palette, radii and
   type scale stay exactly as they are. */

[hidden]{display:none!important}

a.card-main{color:inherit;text-decoration:none}
a.post-image{display:block}
.optional{font-weight:500;color:var(--muted)}
.field-help{font-size:11px;color:var(--muted);line-height:1.5}

/* ---- Listing page ---------------------------------------------------------- */
.listing-page,.seller-page{padding-bottom:12px}
.back-link{display:inline-flex;width:auto;margin:6px 0 14px;justify-content:flex-start}
.back-link svg{transform:rotate(180deg)}
.listing-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:start}
.listing-cover{border-radius:var(--radius);overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.listing-cover img{width:100%;height:100%;object-fit:cover;display:block}
.listing-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.listing-thumbs button{flex:0 0 76px;height:62px;border-radius:12px;overflow:hidden;padding:0;border:2px solid transparent;background:var(--sand)}
.listing-thumbs button[aria-current="true"]{border-color:var(--terra)}
.listing-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.listing-info{min-width:0}
.listing-info h1{font-size:34px;line-height:1.12;letter-spacing:-1px;margin:12px 0 10px;overflow-wrap:anywhere}
.listing-badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:7px;background:var(--sand);color:var(--ink);font-size:11px;font-weight:700}
.badge.type{background:var(--peach);color:var(--terra-dark)}
.listing-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:6px 0 2px}
.listing-price .price{font-size:30px}
.listing-price .price-label{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.listing-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:12px 0}
.listing-meta .icon{width:15px;height:15px;color:var(--terra)}
.listing-location{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.listing-description{font-size:14px;line-height:1.65;white-space:pre-line;margin:16px 0;overflow-wrap:anywhere}
.listing-notice{background:var(--sand);border-radius:14px;padding:13px 15px;font-size:12px;margin-bottom:14px}
.listing-notice p{margin-top:7px;color:var(--muted)}
.listing-notice .feedback{color:#943d2f}
.seller-card{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:14px;margin:20px 0}
.seller-card>div{min-width:0;flex:1}
.seller-card strong{display:block;font-size:14px;overflow-wrap:anywhere}
.seller-card small{font-size:11px;color:var(--muted)}
.seller-card .btn{margin-top:0;flex-shrink:0}
.listing-owner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.listing-owner p{flex-basis:100%;font-size:12px;color:var(--muted)}
.listing-owner .btn{margin-top:0}
.listing-owner .text-btn{width:auto}
.listing-cta{display:flex;gap:10px;margin-top:18px}
.listing-cta .btn{flex:1;margin-top:0;min-height:48px}
.report-link{width:auto;justify-content:flex-start;margin-top:10px}
.posts-notice{margin:0 0 16px;border:1px solid #e7c9a8}
.posts-notice code{font-size:11px;overflow-wrap:anywhere}
.seller-top{align-items:flex-end}
.seller-top .btn{margin-top:0}
.seller-top .back-link{margin-top:0}

/* ---- Listing form ---------------------------------------------------------- */
.choice-group{border:0;padding:0;margin:0 0 22px;min-width:0}
.choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid #dfded2;border-radius:14px;padding:13px;background:var(--paper);cursor:pointer;min-width:0}
.choice input{margin-top:3px;accent-color:var(--terra);flex-shrink:0}
.choice strong{display:block;font-size:13px}
.choice small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
.choice:has(input:checked){border-color:var(--terra);background:#fbf3ec}
.photo-manager{margin-bottom:22px}
.photo-manager-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.photo-manager-head strong{font-size:13px}
.photo-manager-head small{font-size:11px;color:var(--muted)}
.photo-grid{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.photo-tile{position:relative;border-radius:12px;overflow:hidden;background:var(--sand);aspect-ratio:1}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cover-badge{position:absolute;top:6px;left:6px;background:var(--terra);color:var(--white);font-size:9px;font-weight:750;padding:3px 7px;border-radius:6px}
.photo-tools{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:4px;padding:6px;background:linear-gradient(transparent,#1b261fb0)}
.photo-tools button{min-width:32px;min-height:32px;border-radius:8px;background:#fffdf9ee;color:var(--ink);font-size:17px;font-weight:800;line-height:1}
.photo-status,.photo-full{font-size:11px;color:var(--muted);margin:0 0 10px}
.photo-manager .upload-zone{margin-bottom:0}

/* ---- Phones ---------------------------------------------------------------- */
@media(max-width:700px){
  .listing-layout{display:block}
  .listing-cover{border-radius:18px}
  .listing-info h1{font-size:26px;margin-top:14px}
  .listing-price .price{font-size:26px}
  .seller-card{flex-wrap:wrap}
  .seller-card .btn{flex-basis:100%}
  /* The contact button stays on screen above the fixed navigation bar and the
     phone's safe area, so no browser bar or overlay ever covers it. */
  .listing-cta{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:6;margin:0;padding:10px 16px;background:#fffdf9f5;border-top:1px solid var(--line);backdrop-filter:blur(10px)}
  body.has-listing-cta main{padding-bottom:92px}
  body.has-listing-cta .site-footer{padding-bottom:172px}
  body.has-listing-cta .toast-stack{bottom:156px}
  .choice-row{grid-template-columns:minmax(0,1fr)}
  .photo-grid{gap:8px}
  .seller-top{flex-wrap:wrap}
  .seller-top .btn{flex-basis:100%}
}