/* =====================================================================
   Super Surgical Industry — Products page components
   Styled to match the site design system (css/app.css). Loads AFTER
   app.css and reuses its tokens (--primary, --navy, --line, --radius…).
   Class names here match what js/ProductScript.js renders — do not
   rename them without updating that file.
   ===================================================================== */

/* ---------- toolbar: search + filter tabs ---------- */
.products-toolbar{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; margin-bottom:2rem;
}

.search-box{ position:relative; flex:1 1 260px; max-width:360px; }
.search-box .icon{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--primary-dark); width:18px; height:18px;
}
.search-box input{
  width:100%; padding:.8rem 1rem .8rem 2.6rem;
  border:1.5px solid var(--line); border-radius:999px;
  font-family:'Inter',sans-serif; font-size:.98rem; color:var(--ink); background:var(--bg);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-box input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(28,140,153,.14);
}

.filter-tabs{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:flex-end; }
.filter-tab{
  cursor:pointer; border:1.5px solid var(--line); background:var(--bg);
  color:var(--ink); font-family:'Inter',sans-serif; font-weight:600; font-size:.9rem;
  padding:.55rem 1rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.filter-tab:hover{ border-color:var(--primary); color:var(--primary-dark); transform:translateY(-1px); }
.filter-tab.active{
  background:var(--primary-dark); border-color:var(--primary-dark); color:#fff;
  box-shadow:var(--shadow-sm);
}
.tab-count{
  font-size:.72rem; font-weight:700; background:var(--bg-soft); color:var(--primary-dark);
  padding:.05rem .45rem; border-radius:999px; line-height:1.5;
}
.filter-tab.active .tab-count{ background:rgba(255,255,255,.22); color:#fff; }

/* ---------- product grid + cards ---------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:1.5rem;
}

.product-card{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation:cardIn .45s var(--ease) both;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.card-media{
  position:relative; aspect-ratio:4/3; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; padding:1.1rem;
  overflow:hidden;
}
.card-media img{
  max-height:100%; max-width:100%; object-fit:contain;
  transition:transform var(--dur) var(--ease);
}
.product-card:hover .card-media img{ transform:scale(1.06); }

.quick-badge{
  position:absolute; left:50%; bottom:12px; transform:translate(-50%,150%);
  background:var(--navy); color:#fff; font-size:.76rem; font-weight:600;
  padding:.4rem .8rem; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:transform var(--dur) var(--ease); pointer-events:none;
}
.quick-badge i{ font-size:.7rem; }
.product-card:hover .quick-badge{ transform:translate(-50%,0); }

.card-body{ padding:1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.card-body h3{
  font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:600; color:var(--navy);
  margin:0 0 .3rem; line-height:1.3;
}
.card-blurb{ color:var(--muted); font-size:.9rem; line-height:1.5; margin:0 0 1rem; flex:1; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.price-tag{
  font-size:.8rem; font-weight:700; color:var(--primary-dark);
  background:var(--bg-soft); padding:.3rem .6rem; border-radius:var(--radius-sm);
}
.card-cta{ font-size:.85rem; font-weight:700; color:var(--primary-dark); white-space:nowrap; }
.card-cta i{ transition:transform var(--dur) var(--ease); }
.product-card:hover .card-cta i{ transform:translateX(4px); }

/* ---------- empty state ---------- */
.no-results{
  display:none; text-align:center; padding:4rem 1rem; color:var(--muted);
  font-size:1.05rem; font-weight:600;
}
.no-results i{ display:block; font-size:2.2rem; color:var(--primary); margin-bottom:.6rem; opacity:.6; }

/* ---------- quick-view popup ---------- */
.quick-view{
  position:fixed; inset:0; z-index:2000;
  background:rgba(11,59,66,.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:1.2rem;
}
.quick-view.open{ display:flex; animation:qvFade .25s var(--ease); }
@keyframes qvFade{ from{opacity:0;} to{opacity:1;} }

.qv-panel{
  background:var(--bg); border-radius:var(--radius); overflow:hidden;
  width:min(920px, 100%); max-height:92vh; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 30px 80px rgba(11,59,66,.4);
  animation:qvPop .3s var(--ease);
}
@keyframes qvPop{ from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:none;} }

.qv-media{
  position:relative; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; padding:2rem; min-height:280px;
}
.qv-media img{ max-width:100%; max-height:360px; object-fit:contain; }

.qv-info{ padding:2rem 1.9rem; position:relative; }
.qv-close{
  position:absolute; top:.7rem; right:.9rem; width:40px; height:40px;
  border-radius:50%; border:none; background:var(--bg-soft); color:var(--navy);
  font-size:1.7rem; line-height:1; cursor:pointer; z-index:3;
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qv-close:hover{ background:var(--primary-dark); color:#fff; transform:rotate(90deg); }

.qv-cat{
  display:inline-block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--primary-dark); background:var(--bg-soft);
  padding:.3rem .7rem; border-radius:999px;
}
.qv-info h2{
  font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700;
  color:var(--navy); margin:.7rem 0 .5rem;
}
.qv-desc{ color:var(--muted); font-size:.96rem; line-height:1.65; margin:0 0 1.1rem; }

.qv-specs{ width:100%; border-collapse:collapse; margin-bottom:1.2rem; font-size:.92rem; }
.qv-specs th, .qv-specs td{
  text-align:left; padding:.55rem .2rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.qv-specs th{ color:var(--navy); font-weight:700; width:40%; white-space:nowrap; }
.qv-specs td{ color:var(--muted); }

.qv-price{ font-size:1.1rem; font-weight:700; color:var(--primary-dark); margin-bottom:1rem; }
.qv-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.qv-btn{
  flex:1 1 180px; text-align:center; padding:.85rem 1rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:.95rem; display:inline-flex; align-items:center;
  justify-content:center; gap:.5rem;
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.qv-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.qv-btn.wa{ background:#25d366; color:#fff; }
.qv-btn.call{ background:var(--navy); color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .qv-panel{ grid-template-columns:1fr; }
  .qv-media{ min-height:200px; }
  .filter-tabs{ justify-content:flex-start; }
  .products-toolbar{ flex-direction:column; align-items:stretch; }
  .search-box{ max-width:none; }
}
@media (max-width:420px){
  .products-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.9rem; }
  .card-body{ padding:.85rem; }
  .card-body h3{ font-size:.98rem; }
  .card-blurb{ display:none; }
}