/* PharmSearch CIS — app layout on top of the FOM design system tokens.
   Only layout/spacing glue here; all visual styling comes from .fom-* classes. */

body {
  margin: 0;
  background: var(--surface-subtle);
  color: var(--text-body);
  font-family: var(--font-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- top bar ---- */
.ps-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.ps-top__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.ps-top__mark { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--fom-red); }
.ps-top__name { font: var(--fw-extrabold) var(--fs-h4)/1 var(--font-display); color: var(--text-strong); }
.ps-top__cis { color: var(--fom-red); }
.ps-top__nav { display: flex; gap: var(--space-5); margin-left: auto; }
.ps-top__link { font-size: var(--fs-body-sm); color: var(--text-body); text-decoration: none; padding: 6px 2px; }
.ps-top__link:hover { color: var(--fom-red); }

/* ---- main / footer ---- */
.ps-main { flex: 1; padding-top: var(--space-8); padding-bottom: var(--space-12); }
.ps-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-6) var(--space-8);
  color: var(--text-muted); font-size: var(--fs-caption);
  border-top: 1px solid var(--border-subtle);
}
.ps-foot__sep { opacity: .5; }

/* ---- search form ---- */
.ps-search { display: flex; flex-direction: column; gap: var(--space-5); }
.ps-search__row { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.ps-search__row .fom-search { flex: 1; min-width: 260px; }
.ps-countries { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ps-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.ps-controls .fom-select { min-width: 200px; }

/* ---- results ---- */
.ps-group { margin-top: var(--space-10); }
.ps-group__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
}
.ps-group__flag { font-size: 24px; line-height: 1; }
.ps-group__name { font: var(--fw-bold) var(--fs-h3)/1 var(--font-display); color: var(--text-strong); }
.ps-group__upd { margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); }

.ps-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.ps-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.ps-card__media {
  height: 140px; border-radius: var(--radius-md); background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ps-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ps-card__media--empty { color: var(--text-muted); font-size: var(--fs-caption); }
.ps-card__name { font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-text); color: var(--text-strong); }
.ps-card__meta { font-size: var(--fs-caption); color: var(--text-muted); }
.ps-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ps-card__price { font: var(--fw-bold) var(--fs-body-lg)/1 var(--font-text); color: var(--text-strong); }
.ps-card__price--none { font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-regular); }

/* ---- detail ---- */
.ps-detail { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8); align-items: start; }
.ps-detail__media { border-radius: var(--radius-lg); background: var(--surface-muted); padding: var(--space-4); text-align: center; }
.ps-detail__media img { max-width: 100%; }
.ps-detail__title { font: var(--fw-extrabold) var(--fs-h2)/1.15 var(--font-display); color: var(--text-strong); margin: 0 0 var(--space-2); }
.ps-detail__price { font: var(--fw-bold) var(--fs-h3)/1 var(--font-text); color: var(--text-strong); margin: var(--space-3) 0; }
.ps-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
.ps-facts__k { color: var(--text-muted); font-size: var(--fs-body-sm); }
.ps-facts__v { color: var(--text-strong); font-size: var(--fs-body-sm); }
.ps-section { margin-top: var(--space-8); }
.ps-section__h { font: var(--fw-bold) var(--fs-h4)/1 var(--font-display); margin: 0 0 var(--space-4); color: var(--text-strong); }

@media (max-width: 760px) {
  .ps-detail { grid-template-columns: 1fr; }
}

/* ---- misc ---- */
.ps-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0; }
.ps-toolbar__count { color: var(--text-muted); font-size: var(--fs-body-sm); }
.ps-pagination { margin-top: var(--space-10); display: flex; justify-content: center; }
.ps-prose { max-width: 70ch; line-height: var(--lh-relaxed); }
.ps-prose p { margin: 0 0 var(--space-4); }
.ps-stack > * + * { margin-top: var(--space-4); }