/* ==========================================================
   Heera Cartel Co. — quote builder + catalogue filters
   Loaded after style.css. Reuses its tokens (--ink, --bg, --line…).
   ========================================================== */

/* ---------- shared controls ---------- */
.hc-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.hc-chip{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  background:none; color:var(--ink-dim); border:1px solid var(--line-strong);
  padding:11px 18px; cursor:pointer; transition:.25s;
}
.hc-chip:hover{ color:var(--ink); border-color:var(--ink); }
.hc-chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.hc-chip.sub{ padding:8px 14px; font-size:.62rem; }
.hc-chip:disabled{ opacity:.35; cursor:not-allowed; }

.hc-field{ display:flex; flex-direction:column; gap:8px; min-width:0;
  font-family:var(--sans); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.hc-field select, .hc-field input{
  font-family:var(--sans); font-size:.92rem; font-weight:300; letter-spacing:0; text-transform:none;
  color:var(--ink); background:var(--bg); border:none; border-bottom:1px solid var(--line-strong);
  border-radius:0; padding:10px 0; width:100%; -webkit-appearance:none; appearance:none;
}
.hc-field select{
  padding-right:22px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.hc-field select:focus, .hc-field input:focus{ outline:none; border-color:var(--ink); }
.hc-field option{ background:var(--bg); color:var(--ink); }
.hc-field option:disabled{ color:var(--grey-dark, #666); }
.hc-range{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.hc-btn{
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.25s; text-align:center;
}
.hc-btn:hover{ background:none; color:var(--ink); }
.hc-btn.ghost{ background:none; color:var(--ink); border-color:var(--line-strong); }
.hc-btn.ghost:hover{ border-color:var(--ink); }
.hc-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* ---------- Quote builder (index.html #quote) ---------- */
.quote-app{ display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:start; }
.quote-form{ display:flex; flex-direction:column; gap:30px; }
.quote-form h3{ font-family:var(--sans); font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-bottom:14px; }
.quote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 30px; }
.quote-sub{ margin-top:14px; }
.quote-side{ position:sticky; top:90px; border:1px solid var(--line-strong); padding:30px; background:var(--bg-alt); }
.quote-side h3{ font-family:var(--serif); font-size:1.7rem; font-weight:400; margin-bottom:16px; }
.quote-preview{ font-family:var(--sans); font-size:.86rem; line-height:1.8; color:var(--ink-dim); white-space:pre-line; border-left:2px solid var(--line-strong); padding-left:16px; min-height:140px; }
.quote-match{ margin-top:20px; font-size:.78rem; line-height:1.7; color:var(--ink-dim); }
.quote-match a{ color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:2px; }
.quote-match a:hover{ border-color:var(--ink); }
.quote-actions{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.quote-note{ margin-top:16px; font-size:.7rem; color:var(--grey); line-height:1.7; }
@media (max-width:900px){ .quote-app{ grid-template-columns:1fr; gap:36px; } .quote-side{ position:static; } }
@media (max-width:560px){ .quote-grid{ grid-template-columns:1fr; } }

/* ---------- Catalogue page ---------- */
.cat-tools{ position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line); padding:18px 0 16px; }
.cat-tools .row{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; }
.cat-tools .row + .row{ margin-top:16px; }
.cat-tools .hc-field{ flex:1 1 150px; }
.cat-tools .hc-field.narrow{ flex:0 1 170px; }
.cat-summary{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin:28px 0 22px; }
.cat-summary .count{ font-size:.82rem; color:var(--ink-dim); margin-right:auto; }
.cat-summary .count b{ color:var(--ink); font-weight:500; }
.hc-pill{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--ink-dim); padding:7px 12px; background:none; cursor:pointer; }
.hc-pill:hover{ color:var(--ink); border-color:var(--ink); }
.hc-pill::after{ content:" ×"; }
.hc-clear{ font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:none; border:none; border-bottom:1px solid var(--line-strong); padding:0 0 3px; cursor:pointer; }
.cat-empty{ padding:70px 0; text-align:center; color:var(--ink-dim); line-height:1.9; }
.cat-empty h3{ font-family:var(--serif); font-size:2rem; font-weight:400; color:var(--ink); margin-bottom:10px; }
.cat-more{ display:flex; justify-content:center; margin:40px 0 10px; }
.cat-quote{ margin-top:50px; border:1px solid var(--line-strong); padding:28px; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between; }
.cat-quote p{ font-family:var(--serif); font-size:1.5rem; line-height:1.15; max-width:34ch; }
.stone-frame .sample-tag{ position:absolute; left:12px; bottom:12px; z-index:3; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); background:rgba(10,10,10,.6); padding:4px 8px; }
@media (max-width:640px){
  .cat-tools{ position:static; }
  .cat-tools .hc-field, .cat-tools .hc-field.narrow{ flex:1 1 44%; }
}