/* ================================================================
   NAFCO gem listing cards — dressed up.
   Styles the .listing card structure used across gemstone pages,
   search results, and "you might also like" (server + socket render).
   ================================================================ */

:root{
  --nm-ink:#1c2b4a; --nm-gold:#b0894f; --nm-gold-dk:#8f6d38;
  --nm-line:#e7e1d6; --nm-cream:#faf7f2; --nm-muted:#7b7367;
}

.listing{
  /* NOT !important — the range-slider filter hides cards with an inline
     display:none, and an !important author rule would outrank it. This file
     loads after style.css, so equal specificity already wins. */
  display:inline-flex; flex-direction:column;
  width:250px !important;
  height:430px !important;
  padding:0 !important;
  margin:12px !important;
  border:1px solid var(--nm-line) !important;
  border-radius:14px !important;
  background:#fff;
  box-shadow:0 4px 14px rgba(28,43,74,.05);
  overflow:hidden;
  vertical-align:top;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.listing:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(28,43,74,.14) !important;
  border-color:var(--nm-gold) !important;
}

/* clickable image + text area (fills the card above the button) */
.listing > a{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  text-decoration:none; color:inherit; padding:0;
}

/* gem image */
.listing img.results,
.listing a > img{
  width:100% !important; height:auto !important;
  aspect-ratio:1 / 1; flex:0 0 auto;
  object-fit:contain;
  display:block;
  background:linear-gradient(160deg,#faf8f4,#efe9df);
  border-bottom:1px solid #f1ede5;
  padding:6px;
  box-sizing:border-box;
}

/* title */
.listing .detail{
  font-size:13px; line-height:1.34; font-weight:600;
  color:var(--nm-ink);
  padding:11px 13px 5px;
  flex:0 0 auto;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .13s;
}
.listing:hover .detail{ color:var(--nm-gold-dk); }

/* dimensions + weight row */
.listing .dims{
  padding:0 13px 10px; font-size:11.5px; color:var(--nm-muted);
  display:flex; flex-direction:column; gap:2px; margin-top:auto;
}
.listing .dims .dimensions,
.listing .dims .weight{
  float:none !important; display:block; text-align:left; margin:0;
}
.listing .dims .dimensions b{ font-weight:500; color:var(--nm-muted); }
.listing .dims .weight b{ font-weight:700; color:var(--nm-ink); }

/* Add to Inquiry button (sits at the bottom of the flex card) */
.listing .add-to-inquiry,
.listing .add-to-inquiry-similar,
.listing .add-to-inquiry-quick{
  flex:0 0 auto; width:100%;
  border:none !important;
  background:linear-gradient(135deg,#c69a55,#8f6d38) !important;
  color:#fff !important;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  text-align:center;
  padding:12px 8px !important;
  cursor:pointer;
  transition:filter .12s, transform .12s;
}
.listing .add-to-inquiry:hover,
.listing .add-to-inquiry-similar:hover,
.listing .add-to-inquiry-quick:hover{ filter:brightness(1.09); }

/* the JS marks it "Added" by setting the text — keep a calmer look then */
.listing .add-to-inquiry.added{ background:#9c8a6a !important; }

/* the container that holds the grid — center the cards nicely */
#gem-list, #similar, #melee{ text-align:center; }

/* ---- cards inside a carousel (Our Latest Offerings) ----------------------
   The fixed 250px width is meant for the grid pages. Inside the carousel the
   slot is containerWidth / visibleItems (1200/6 = 200px at desktop), so a 250px
   card overflowed its slot and overlapped its neighbour by 50px. Let carousel
   cards fill their slot instead. Scoped to >640px so the mobile rules below —
   which already work — are untouched. */
@media (min-width:641px){
  /* the latest slides reuse the hero markup, whose Bootstrap .container adds
     15px side padding — that ate 30px of every 200px slot */
  .latest .owl-item .container{ padding-left:0 !important; padding-right:0 !important; }
  .owl-item .listing{
    width:calc(100% - 12px) !important;
    margin:0 6px !important;
    height:360px !important;
  }
  /* lift the hovered card above its neighbours so it reads as one whole card */
  .owl-stage .owl-item{ position:relative; }
  .owl-stage .owl-item:hover{ z-index:5; }
}

/* single column on phones/small tablets */
@media (max-width:640px){
  .listing{
    width:calc(100% - 24px) !important; max-width:360px; height:auto !important;
  }
  .listing img.results, .listing a > img{ max-height:340px; }
}

/* ================= cart / bulk-inquiry modal ================= */
.gm-box:has(#inquiring-bulk){ max-width:680px !important; }
#inquiring-bulk{ color:var(--nm-ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
#inquiring-bulk > h1{
  font-family:'Libre Bodoni',Georgia,"Times New Roman",serif; font-weight:500; font-size:27px;
  color:var(--nm-ink); margin:0 0 2px; text-align:left;
}
.inq-eyebrow{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--nm-gold-dk); font-weight:700; margin-bottom:18px;
}

/* selected items */
.inq-items{
  display:flex; flex-direction:column; gap:10px; margin-bottom:22px;
  max-height:266px; overflow-y:auto; padding-right:4px;
}
.inq-item{
  display:flex; gap:14px; align-items:center; padding:10px;
  border:1px solid var(--nm-line); border-radius:12px; background:#fff;
}
.inq-item img{
  width:70px; height:70px; object-fit:cover; border-radius:9px;
  border:1px solid var(--nm-line); flex:0 0 auto;
}
.inq-item-body{ flex:1; min-width:0; }
.inq-title{ font-size:13.5px; font-weight:600; color:var(--nm-ink); line-height:1.3; margin-bottom:3px; }
.inq-specs{ font-size:12px; color:var(--nm-muted); margin-bottom:8px; }
.remove{
  border:1px solid var(--nm-line) !important; background:#fff !important;
  color:var(--nm-gold-dk) !important; border-radius:8px !important;
  padding:5px 14px !important; font-weight:600; font-size:12px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.remove:hover{ border-color:var(--nm-gold) !important; background:var(--nm-cream) !important; }

/* trade form */
#bulk-inquiry{ border-top:1px solid var(--nm-line); padding-top:20px; }
.inq-note{ font-size:12.5px; color:var(--nm-muted); margin-bottom:14px; }
.req-star{ color:#c0392b; font-weight:700; }
.inq-trade{ font-size:13.5px; font-weight:600; color:var(--nm-ink); margin-bottom:16px; }
.inq-pills{ display:flex; gap:10px; margin-top:9px; max-width:300px; }
.inq-pills label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border:1px solid var(--nm-line); border-radius:9px; padding:8px 10px; font-size:13px;
  font-weight:600; color:var(--nm-ink); background:#fbf9f5; transition:border-color .13s;
}
.inq-pills label:hover{ border-color:var(--nm-gold); }
.inq-pills input{ accent-color:var(--nm-gold-dk); width:15px; height:15px; margin:0; }
.inq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:10px; }
#bulk-inquiry input[type=text], #bulk-inquiry textarea{
  width:100% !important; padding:10px 12px !important;
  border:1px solid var(--nm-line) !important; border-radius:9px !important;
  font-size:14px !important; font-family:inherit !important; margin:0 !important;
  box-sizing:border-box; color:var(--nm-ink); background:#fff;
}
#bulk-inquiry textarea{ margin-bottom:14px !important; resize:vertical; min-height:82px; }
#bulk-inquiry input:focus, #bulk-inquiry textarea:focus{
  outline:none; border-color:var(--nm-gold) !important;
  box-shadow:0 0 0 3px rgba(176,137,79,.15) !important;
}
#send-bulk-inquiry{
  width:100%; background:linear-gradient(135deg,#c69a55,#8f6d38) !important; color:#fff !important;
  border:none !important; border-radius:10px !important; padding:14px !important;
  font-weight:700; font-size:15px; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 6px 18px rgba(143,109,56,.3); transition:transform .12s, box-shadow .12s;
}
#send-bulk-inquiry:hover{ transform:translateY(-1px); box-shadow:0 9px 24px rgba(143,109,56,.38); }