/* ==========================================================================
   pages/medicines.css — layout used only by products.php (the medicines page)
   The intro, filter bar, empty state and bottom note come from catalogue.css;
   the pack-shot cards (.sc-*) are shared with the home page in components.css.
   ========================================================================== */

/* ---- card grid ---- */
.md-grid{list-style:none;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.md-item[hidden]{display:none!important}
.md-item .sc-link{height:100%}
.md-cat{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.1rem}
.md-item .sc-name{font-size:.98rem}
.md-item .sc-comp{font-size:.78rem}
.md-item .sc-more{padding-top:.45rem}

.empty p a{color:var(--peri-ink);font-weight:600}
.empty p a:hover{text-decoration:underline}

/* ---- bottom note: two columns instead of the catalogue's three ---- */
.md-note .fgrid{grid-template-columns:1.3fr 1fr}
.md-note p{line-height:1.6}

@media(max-width:860px){
  .md-note .fgrid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .md-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .md-item .sc-card{padding:.55rem}
  .md-item .sc-shot{padding:.55rem}
  .md-item .sc-name{font-size:.9rem}
  .md-item .sc-comp{font-size:.72rem}
  .md-cat{font-size:.56rem;letter-spacing:.1em}
}
@media(max-width:340px){.md-grid{grid-template-columns:1fr}}

@media print{
  .md-grid{grid-template-columns:repeat(4,1fr);gap:.6rem}
  .md-item .sc-card{box-shadow:none;border:1px solid #ccd;break-inside:avoid}
  .md-item .sc-shot{box-shadow:none}
  .sc-more{display:none}
}