/* ============================================================================
   Joenit public site — visual price catalogue (brand × category card grid).
   Layered on styles.css (shares :root palette + top chrome + footer). Owns the
   breadcrumb/header, the product-card grid (one card per MODEL, photo + "from"
   price), and the variant modal (colour / cartridge options + their prices).
   ========================================================================== */

/* ------------------------------ page header ----------------------------- */
.cat__head{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(1.4rem,4vw,2.4rem) clamp(1rem,4vw,2.5rem) .4rem;
}
.crumbs{
  display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
  font-size:.8rem; font-weight:600; color:var(--grey-500); margin-bottom:.7rem;
}
.crumbs a{color:var(--grey-700); text-decoration:none}
.crumbs a:hover{color:var(--c, var(--accent))}
.crumbs .sep{color:var(--grey-300)}
.crumbs .here{color:var(--ink)}

.cat__title{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.cat__dot{width:1rem; height:1rem; border-radius:50%; background:var(--c, var(--steel)); flex:none}
.cat__title h1{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0; color:var(--ink)}
.cat__title .cat__cat{
  font-size:1rem; font-weight:600; color:var(--grey-700);
  padding:.2rem .7rem; background:var(--grey-100); border-radius:999px;
}
.cat__lead{color:var(--text-soft); max-width:64ch; margin:.6rem 0 0}
.cat__vat{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  font-size:.82rem; color:var(--grey-500); margin-top:.7rem;
}
.cat__updated{font-weight:600}

/* --------------------------- category tab strip ------------------------- */
.cattabs{
  max-width:var(--maxw); margin:.9rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.cattab{
  font:inherit; font-weight:600; font-size:.9rem; cursor:pointer;
  padding:.45rem 1rem; border-radius:999px;
  border:1px solid var(--grey-300); background:var(--grey-50); color:var(--grey-700);
  transition:background .15s, color .15s, border-color .15s;
}
.cattab:hover{border-color:var(--c, var(--accent)); color:var(--ink)}
.cattab.active{
  background:var(--c, var(--accent)); border-color:var(--c, var(--accent)); color:#fff;
}

/* ------------------------------ filter bar ------------------------------ */
.cat__filters{
  max-width:var(--maxw); margin:1rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center;
}
.search{
  flex:1 1 260px; max-width:360px; padding:.6rem .75rem; font:inherit;
  border:1px solid var(--grey-300); border-radius:var(--radius-sm);
  background:var(--grey-50); color:var(--text);
}
.search:focus{outline:2px solid var(--accent-hi); outline-offset:1px; background:#fff}
.listhead{
  margin-left:auto; font-size:.78rem; font-weight:700; color:var(--text-soft);
}

/* ------------------------------- card grid ------------------------------ */
.cat-grid{
  max-width:var(--maxw); margin:1.1rem auto clamp(2rem,6vw,4rem);
  padding:0 clamp(1rem,4vw,2.5rem);
  display:grid; gap:clamp(1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

.pcard{
  display:flex; flex-direction:column; align-items:stretch;
  background:#fff; border:1px solid var(--panel-edge);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  font:inherit; text-align:center; color:inherit; padding:0;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pcard:hover{
  box-shadow:var(--shadow-md, 0 10px 30px rgba(20,24,31,.12));
  transform:translateY(-3px); border-color:var(--c, var(--grey-300));
}
.pcard:focus-visible{outline:2px solid var(--c, var(--accent-hi)); outline-offset:2px}

.pcard__media{
  position:relative; aspect-ratio:4/3; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:1.1rem;
}
.pcard__media img{
  max-width:100%; max-height:100%; object-fit:contain;
  transition:transform .25s ease;
}
.pcard:hover .pcard__media img{transform:scale(1.04)}

.pcard__body{
  padding:.5rem .8rem 1rem; border-top:1px solid var(--grey-100);
  display:flex; flex-direction:column; gap:.25rem;
}
.pcard__name{
  font-size:.92rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin:.3rem 0 .1rem;
}
.pcard__price{font-size:1rem; font-weight:700; color:var(--ink)}
.pcard__from{font-size:.72rem; font-weight:600; color:var(--grey-500); text-transform:uppercase; letter-spacing:.05em}
.pcard__noprice{font-size:.92rem; font-weight:600; font-style:italic; color:var(--grey-500)}
.pcard__count{
  margin-top:.35rem; font-size:.72rem; font-weight:600; color:var(--grey-500);
}

.empty{
  grid-column:1/-1; padding:1.6rem 1.1rem; color:var(--text-soft); font-size:.95rem;
}

/* -------------------------------- modal --------------------------------- */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:clamp(.8rem,3vw,2rem);
  background:rgba(18,22,28,.55); backdrop-filter:blur(2px);
}
.modal.open{display:flex}
.modal__panel{
  width:min(640px,100%); max-height:90vh; overflow:auto;
  background:#fff; border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.3);
  border-top:4px solid var(--c, var(--accent));
}
.modal__head{
  display:flex; gap:1rem; align-items:center; padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--panel-edge); position:relative;
}
.modal__thumb{
  width:90px; height:68px; flex:none; background:#fff;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--grey-100); border-radius:var(--radius-sm); padding:.3rem;
}
.modal__thumb img{max-width:100%; max-height:100%; object-fit:contain}
.modal__titles h2{font-family:var(--font-display); font-size:1.3rem; margin:0; color:var(--ink)}
.modal__titles p{margin:.15rem 0 0; font-size:.8rem; color:var(--grey-500)}
.modal__close{
  position:absolute; top:.6rem; right:.7rem; width:2rem; height:2rem;
  border:0; border-radius:50%; background:var(--grey-100); color:var(--grey-700);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.modal__close:hover{background:var(--grey-300); color:var(--ink)}

.vtable{width:100%; border-collapse:collapse; font-size:.92rem}
.vtable th{
  text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey-500);
  padding:.6rem 1.2rem; border-bottom:1px solid var(--panel-edge); background:var(--grey-50);
}
.vtable td{padding:.55rem 1.2rem; border-bottom:1px solid var(--grey-100); color:var(--ink)}
.vtable tr:last-child td{border-bottom:0}
.vtable tr:hover td{background:var(--grey-50)}
.vtable .v-name{color:var(--ink)}
.vtable .v-code{
  display:block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem; color:var(--grey-500); margin-top:.1rem;
}
.vtable .v-price{text-align:right; white-space:nowrap; font-weight:700}
.vtable th.v-price{text-align:right}
.vtable .noprice{font-weight:600; color:var(--grey-500); font-style:italic}

.modal__foot{padding:.8rem 1.2rem 1.1rem; font-size:.78rem; color:var(--grey-500)}

@media (max-width:480px){
  .modal__thumb{display:none}
  .vtable th, .vtable td{padding-left:.9rem; padding-right:.9rem}
}