/* ===== Quartz Collection — MSI-style slab browser (Versa Stone) ===== */
.qc-hero{
  padding:128px 0 30px;
  background:
    radial-gradient(120% 90% at 92% 0%, rgba(200,169,110,0.13) 0%, rgba(200,169,110,0) 56%),
    linear-gradient(158deg,#FFFFFF 0%,#FBF8F3 55%,#F3EBDD 100%);
  text-align:center;
}
.qc-eyebrow{
  display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.qc-hero h1{
  font-family:var(--font-heading);font-weight:600;color:var(--black);
  font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.08;margin:0 0 16px;
}
.qc-sub{
  max-width:660px;margin:0 auto;color:var(--gray-text,#5b5750);
  font-size:1.04rem;line-height:1.7;
}
.qc-sub span{color:var(--gold-dark,#B8955A);font-weight:600;}

/* ---- sticky toolbar ---- */
.qc-toolbar-wrap{
  position:sticky;top:96px;z-index:40;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(0,0,0,0.06);padding:16px 0 14px;
}
.qc-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.qc-search{
  position:relative;flex:1 1 280px;min-width:220px;display:flex;align-items:center;
}
.qc-search svg{position:absolute;left:14px;width:18px;height:18px;color:#9a948a;pointer-events:none;}
.qc-search input{
  width:100%;padding:13px 16px 13px 42px;border:1px solid rgba(0,0,0,0.14);
  border-radius:8px;font-family:var(--font-body);font-size:.95rem;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.qc-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,0.18);}
.qc-filters{display:flex;gap:10px;flex-wrap:wrap;}
.qc-filters select{
  appearance:none;-webkit-appearance:none;padding:12px 38px 12px 16px;border:1px solid rgba(0,0,0,0.14);
  border-radius:8px;font-family:var(--font-body);font-size:.9rem;background:#fff;color:var(--black);
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23998f7d' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.qc-filters select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,0.18);}

/* family pills */
.qc-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.qc-pill{
  padding:7px 16px;border-radius:999px;border:1px solid rgba(0,0,0,0.14);background:#fff;
  font-family:var(--font-body);font-size:.82rem;font-weight:500;color:#4a463f;cursor:pointer;
  transition:all .18s;white-space:nowrap;
}
.qc-pill:hover{border-color:var(--gold);color:var(--gold-dark,#B8955A);}
.qc-pill.active{background:var(--black);border-color:var(--black);color:#fff;}

/* ---- grid ---- */
.qc-grid-section{padding:30px 0 80px;background:#fff;}
.qc-resultbar{margin:6px 0 20px;font-family:var(--font-body);font-size:.85rem;color:#857f74;letter-spacing:.3px;}
.qc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;
}
.qc-card{
  border:1px solid rgba(0,0,0,0.07);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,0.05);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
  text-align:left;display:flex;flex-direction:column;
}
.qc-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,0.14);}
.qc-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eee;}
.qc-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.qc-card:hover .qc-card-img img{transform:scale(1.07);}
.qc-badge{
  position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;background:rgba(26,26,26,0.86);color:#fff;
  font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
}
.qc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fd07a;}
.qc-card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:9px;flex:1;}
.qc-card-name{font-family:var(--font-heading);font-size:1.18rem;font-weight:600;color:var(--black);line-height:1.2;}
.qc-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.qc-card-sku{font-family:var(--font-body);font-size:.72rem;letter-spacing:1px;color:#a8a297;text-transform:uppercase;}
.qc-chips{display:flex;gap:6px;}
.qc-chip{
  font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.4px;color:#6a655c;
  border:1px solid rgba(0,0,0,0.12);border-radius:5px;padding:3px 7px;background:#faf8f4;
}

.qc-empty{text-align:center;padding:70px 20px;color:#857f74;font-family:var(--font-body);}
.qc-empty button{background:none;border:none;color:var(--gold-dark,#B8955A);font-weight:600;cursor:pointer;text-decoration:underline;}

/* ---- modal ---- */
.qc-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;}
.qc-modal[hidden]{display:none;}
.qc-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,15,0.72);backdrop-filter:blur(3px);animation:qcFade .25s ease;}
@keyframes qcFade{from{opacity:0}to{opacity:1}}
.qc-modal-panel{
  position:relative;z-index:1;width:min(1080px,100%);max-height:90vh;overflow:auto;
  background:#fff;border-radius:14px;display:grid;grid-template-columns:1.25fr 1fr;
  box-shadow:0 40px 100px rgba(0,0,0,0.4);animation:qcPop .3s cubic-bezier(.22,1,.36,1);
}
@keyframes qcPop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.qc-modal-close{
  position:absolute;top:12px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(255,255,255,0.9);font-size:1.6rem;line-height:1;color:#333;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);transition:background .2s;
}
.qc-modal-close:hover{background:#fff;}
.qc-modal-media{background:#111;display:flex;flex-direction:column;}
.qc-zoom{position:relative;flex:1;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;}
.qc-zoom img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s ease-out;transform-origin:center center;}
.qc-zoom.zoomed{cursor:zoom-out;}
.qc-zoom.zoomed img{transform:scale(2.3);}
.qc-zoom-hint{padding:8px;text-align:center;color:rgba(255,255,255,0.55);font-family:var(--font-body);font-size:.72rem;letter-spacing:.4px;}
.qc-modal-info{padding:32px 32px 30px;display:flex;flex-direction:column;}
.qc-modal-fam{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}
.qc-modal-info h2{font-family:var(--font-heading);font-size:2rem;font-weight:600;color:var(--black);margin:8px 0 4px;line-height:1.1;}
.qc-modal-sku{font-family:var(--font-body);font-size:.78rem;letter-spacing:1px;color:#a8a297;text-transform:uppercase;margin-bottom:22px;}
.qc-modal-spec{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:20px 0;border-top:1px solid rgba(0,0,0,0.08);border-bottom:1px solid rgba(0,0,0,0.08);}
.qc-modal-spec>div{display:flex;flex-direction:column;gap:3px;}
.qc-modal-spec span{font-family:var(--font-body);font-size:.7rem;letter-spacing:.8px;text-transform:uppercase;color:#a8a297;}
.qc-modal-spec strong{font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--black);}
.qc-modal-cta{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 6px;}
.qc-modal-cta .btn{flex:1 1 auto;justify-content:center;text-align:center;}
.qc-related{margin-top:26px;}
.qc-related h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--black);margin:0 0 14px;}
.qc-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.qc-related-item{cursor:pointer;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,0.07);transition:transform .25s;}
.qc-related-item:hover{transform:translateY(-3px);}
.qc-related-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.qc-related-item span{display:block;padding:5px 6px;font-family:var(--font-body);font-size:.66rem;color:#6a655c;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

body.qc-modal-open{overflow:hidden;}

/* ---- responsive ---- */
@media(max-width:900px){
  .qc-modal-panel{grid-template-columns:1fr;max-height:92vh;}
  .qc-zoom{aspect-ratio:16/10;}
}
@media(max-width:768px){
  .qc-hero{padding:104px 0 24px;}
  .qc-toolbar-wrap{top:84px;}
  .qc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .qc-card-name{font-size:1.02rem;}
  .qc-modal{padding:0;}
  .qc-modal-panel{border-radius:0;height:100vh;max-height:100vh;width:100%;}
  .qc-modal-info{padding:24px 20px;}
  .qc-related-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:430px){
  .qc-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .qc-filters{width:100%;}
  .qc-filters select{flex:1;}
}