/* meds.css */
.meds-slider { position: relative; overflow: hidden; }
.meds-track {
  display: flex; gap: 16px; scroll-behavior: smooth; overflow-x: auto; padding: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.meds-card {
  min-width: 260px; border: 1px solid #eee; border-radius: 14px; padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06); background:#fff;
  scroll-snap-align: start;
}
.meds-card img { width:100%; height:160px; object-fit: cover; border-radius: 10px; }
.meds-card h4 { margin: 10px 0 6px; font-size: 1.05rem; }
.meds-meta { font-size: .9rem; color:#333; line-height: 1.5; }
.meds-cta { margin-top:10px; display:inline-block; padding:8px 12px; background:#2271b1; color:#fff; border-radius:8px; text-decoration:none; }
.meds-cta.alt { background:#6b7280; }
.meds-slider .nav {
  position:absolute; top:50%; transform: translateY(-50%);
  background:#fff; border:1px solid #ddd; border-radius: 50%;
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.meds-slider .prev { left:6px; }
.meds-slider .next { right:6px; }

.meds-detail { border:1px solid #eee; border-radius:16px; padding:18px; box-shadow: 0 2px 12px rgba(0,0,0,.06); background:#fff; }
.meds-detail h2 { margin-top:0; }
.meds-detail .row { display:flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.meds-detail .thumb { flex: 0 0 280px; }
.meds-detail .thumb img { width:100%; height:auto; border-radius:12px; }
.meds-detail .info { flex:1; min-width: 240px; }
.meds-badge { display:inline-block; padding:4px 10px; border-radius: 999px; background:#f2f7ff; color:#1d4ed8; border:1px solid #dbeafe; margin-inline-end:6px; font-size:.87rem; }
.meds-badge.warn { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.meds-notfound { padding:14px; border:1px dashed #e11d48; color:#9f1239; background:#fff1f2; border-radius:12px; }
.meds-shortcodes code { display:block; background:#f7f7f7; padding:8px 10px; border-radius:8px; margin-bottom:6px; direction:ltr; }

@media (max-width: 640px) {
  .meds-card { min-width: 80vw; }
  .meds-card img { height: 48vw; }
  .meds-slider .nav { display: none; }
  .meds-detail .thumb { flex: 1 1 100%; }
  .meds-detail .info { flex: 1 1 100%; }
}
