/* ============================================================
   LISTING.CSS
   The compact "photos + spec sheet together" layout used by
   every project page. Replaces the old long-scroll multi-section
   template. Two clicks from homepage to any listing; everything
   a buyer needs to compare (photos, dimensions, quantities) is
   visible without scrolling through separate sections.
   ============================================================ */

.lwrap{max-width:1160px;margin:0 auto;padding:6.5rem 2rem 3rem}

.lhead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem;padding-bottom:1.6rem;border-bottom:1px solid var(--border)}
.lhead-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lstatus{font-family:'Josefin Sans',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#9333ea,#d946ef);padding:.4rem 1rem;border-radius:50px;white-space:nowrap}
.lseller-badge{font-family:'Josefin Sans',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--neon2);background:rgba(217,70,239,.08);border:1px solid rgba(217,70,239,.4);padding:.4rem 1rem;border-radius:50px;white-space:nowrap}
.ltitle{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1;color:#fff;letter-spacing:.02em}
.lloc{font-family:'Josefin Sans',sans-serif;font-size:.85rem;color:var(--neon2);letter-spacing:.03em;margin-top:.3rem}
.lback{font-family:'Josefin Sans',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;border:1px solid var(--border);border-radius:50px;padding:.6rem 1.2rem;transition:all .2s;white-space:nowrap}
.lback:hover{color:#fff;border-color:var(--purple);background:rgba(139,68,255,.15)}

/* Core layout: gallery left, spec sheet right, side by side */
.llisting{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:start}
@media(max-width:900px){.llisting{grid-template-columns:1fr}}

/* Gallery */
.lgallery-main{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;background-size:cover;background-position:center;filter:brightness(.92)}
.lgallery-main.stock{filter:brightness(.6) saturate(1.1)}
.lgallery-main-tag{position:absolute;top:.9rem;left:.9rem;font-family:'Josefin Sans',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,171,252,.9);background:rgba(6,0,16,.6);border:1px solid rgba(217,70,239,.4);border-radius:4px;padding:.25rem .55rem}
.lgallery-empty{display:flex;align-items:center;justify-content:center;height:100%;font-family:'Josefin Sans',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.lgallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.5rem;margin-top:.6rem}
.lthumb{aspect-ratio:1;border-radius:6px;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent;opacity:.55;transition:all .18s ease}
.lthumb:hover{opacity:.85}
.lthumb.active{opacity:1;border-color:var(--neon)}

/* Spec sheet — dense, legible, everything a buyer needs together */
.lspecs{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1.6rem 1.8rem}
.lspecs-title{font-family:'Josefin Sans',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--neon);margin-bottom:1.1rem;display:block}
.lfacts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px dashed var(--border)}
.lfact-label{font-family:'Josefin Sans',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-bottom:.2rem}
.lfact-value{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.03em;color:#fff;line-height:1}
.lfact-value.hot{color:var(--neon2);text-shadow:0 0 10px rgba(217,70,239,.4)}

.lspec-table{display:flex;flex-direction:column}
.lspec-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.lspec-row:last-child{border-bottom:none}
.lspec-row-wrap{flex-direction:column;align-items:flex-start;gap:.3rem}
.lspec-item{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:400;color:rgba(255,255,255,.6)}
.lspec-dim{font-family:'IBM Plex Mono',monospace;font-size:.98rem;font-weight:700;color:var(--neon2);white-space:nowrap;text-shadow:0 0 8px rgba(217,70,239,.35)}
.lspec-note-inline{font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.5)}
.lspec-note-inline .spec-highlight{color:var(--neon2);font-weight:600}
.lspec-note{font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:400;color:rgba(255,255,255,.45);padding-top:.7rem}
.lspec-comingsoon{font-family:'Josefin Sans',sans-serif;font-size:.72rem;letter-spacing:.03em;color:rgba(217,70,239,.65);background:rgba(139,68,255,.08);border:1px dashed rgba(217,70,239,.35);border-radius:8px;padding:.9rem 1rem;line-height:1.6}

.lcta{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap;align-items:center}
.lcta a,.lcta button{flex:1;text-align:center;font-family:'Josefin Sans',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.9rem 1rem;border-radius:8px;white-space:nowrap;border:none;cursor:pointer}
.lcta .lcall{background:linear-gradient(135deg,#9333ea,#d946ef);color:#fff}
.lcta .lemail{border:1px solid var(--border);color:rgba(255,255,255,.75);background:transparent}
.lcta .lemail:hover{border-color:var(--purple);color:#fff}
.lcta-hint{width:100%;font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:400;color:rgba(255,255,255,.45);text-align:center;margin-top:.3rem}

.loverview{margin-top:2rem;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:300;line-height:1.75;color:rgba(255,255,255,.5);max-width:820px}
.loverview strong{color:rgba(255,255,255,.85);font-weight:500}
.loverview .spec-highlight{color:var(--neon2);font-weight:600;text-shadow:0 0 8px rgba(217,70,239,.35)}

/* Item-for-sale cards (seller pages like J Fine Furniture) — dimensions are
   the thing a buyer scans for, so they're the biggest element on the card,
   not the generic item name. */
.sitem-category{font-family:'Josefin Sans',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-bottom:.4rem}
.sitem-dims{font-family:'Bebas Neue',sans-serif;font-size:2.1rem;letter-spacing:.03em;color:var(--neon2);text-shadow:0 0 10px rgba(217,70,239,.4);display:block;line-height:1;margin-bottom:.6rem}
.sitem-price{font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:.4rem;background:rgba(139,68,255,.15);border:1px solid var(--border);border-radius:6px;padding:.35rem .75rem}
.sitem-price .sitem-tag{font-family:'Josefin Sans',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}

@media(max-width:640px){
  .lwrap{padding:5.5rem 1.2rem 2.5rem}
  .lfacts{grid-template-columns:1fr 1fr}
}