/* ===========================================================================
   PLP — ported from app/shop/shop-client.tsx + components/commerce/shop-card.tsx
   Container-query driven: the card responds to ITS OWN width (15rem / 18rem
   gates), not the viewport, exactly as the source does with @container.
   =========================================================================== */

/* ---- intro ---------------------------------------------------------------- */
.ms-plp__intro { padding-top: 1.5rem; padding-bottom: 1rem; }
@media (min-width: 640px) { .ms-plp__intro { padding-top: 2rem; padding-bottom: 1.25rem; } }

.ms-crumbs {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.ms-crumbs a { color: var(--ink-3); text-decoration: none; transition: color 150ms var(--ease-out-quart); }
.ms-crumbs a:hover { color: var(--brand); }
.ms-crumbs [aria-current] { color: var(--foreground); }

.ms-plp__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  column-gap: 2rem; row-gap: 0.75rem; margin-top: 1rem;
}
.ms-plp__sub { margin: 0.375rem 0 0; color: var(--muted-foreground); }

.ms-truststrip { display: none; flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: 0.25rem; }
@media (min-width: 768px) { .ms-truststrip { display: flex; } }
.ms-trustbadge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.ms-trustbadge svg { color: var(--brand); }

/* ---- command bar ---------------------------------------------------------- */
.ms-cmdbar {
  position: relative; z-index: 30;
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
}
/* Deliberately NOT sticky. It used to dock beneath the header at
   `top: var(--ms-header-real, ...)` and follow you down the whole grid, which
   meant a bar of controls permanently occupying the top of the results it was
   supposed to be filtering. It sits in the flow now, once, above the grid. */
.ms-cmdbar__inner { display: flex; flex-direction: column; gap: 0.625rem; padding-block: 0.75rem; }
.ms-cmdbar__row { display: flex; flex-direction: column; gap: 0.625rem; }
@media (min-width: 768px) { .ms-cmdbar__row { flex-direction: row; align-items: center; } }

.ms-search { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
@media (min-width: 768px) { .ms-search { max-width: 24rem; flex: 1; } }
.ms-search__icon {
  position: absolute; left: 0.875rem; pointer-events: none;
  width: 1.125rem; height: 1.125rem; color: var(--muted-foreground);
}
.ms-search__input { padding-left: 2.5rem; padding-right: 0.75rem; }
/* the UA clear affordance fights the token border — drop it, Escape clears */
.ms-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* min-width:0 — flex items default to min-width:auto (their content width),
   so the sort control refused to shrink and pushed past the viewport */
.ms-cmdbar__right { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
@media (min-width: 768px) { .ms-cmdbar__right { flex: 1; } }
.ms-count {
  display: none; flex-shrink: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--ink-3);
}
.ms-count b { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .ms-count { display: inline; margin-right: auto; } }

.ms-viewtoggle {
  display: inline-flex; flex-shrink: 0; padding: 2px; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--control);
}
.ms-viewtoggle__btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: none; border-radius: var(--radius-md); background: transparent;
  color: var(--ink-3); cursor: pointer;
  transition: background-color 150ms var(--ease-out-quart), color 150ms var(--ease-out-quart);
}
.ms-viewtoggle__btn:hover { color: var(--foreground); }
.ms-viewtoggle__btn.is-active { background: var(--background); color: var(--foreground); box-shadow: var(--elevation-whisper); }
/* `.control` is width:100%; on desktop the select must size to content or it
   claims the whole row and pushes past the viewport (it measured 823px). */
.ms-sort { flex: 1; min-width: 0; }
@media (min-width: 640px) { .ms-sort { flex: none; width: auto; min-width: 10rem; } }

/* overflow-x:auto clips anything drawn outside the box — including a focus
   ring on the first/last chip. Pad the scroller and pull the space back with
   a negative margin so the ring has room without shifting the layout. */
.ms-pills {
  display: flex; gap: 0.5rem; overflow-x: auto;
  /* vertical padding only — a NEGATIVE INLINE margin here made the scroller
     wider than the page axis and reintroduced horizontal overflow */
  padding: 4px 4px 8px; margin-top: -4px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-padding-inline: 4px;
}
.ms-pills::-webkit-scrollbar { display: none; }

/* ---- results -------------------------------------------------------------- */
.ms-plp__results { padding-block: 1.5rem; }
@media (min-width: 640px) { .ms-plp__results { padding-block: 2rem; } }

.ms-shopgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px)  { .ms-shopgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1280px) { .ms-shopgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* list view: one column of row cards */
.ms-shopgrid[data-view="list"] { grid-template-columns: 1fr; gap: 0.75rem; }

.shopcard[hidden] { display: none; }

/* ---- the card ------------------------------------------------------------- */
.shopcard {
  container-type: inline-size;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card);
  /* no resting shadow — the card is a calm outline until hovered */
  transition: box-shadow 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .shopcard:hover { border-color: color-mix(in oklab, var(--foreground) 15%, transparent); box-shadow: var(--elevation-card); }
  .shopcard:hover .shopcard__img { transform: scale(1.04); }
}
.shopcard__stage {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 1px solid var(--border); outline: none;
}
.shopcard__stage:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
.shopcard__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 300ms var(--ease-out-quart);
}
.shopcard__badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10;
  border-radius: var(--radius-md); background: var(--foreground); color: var(--background);
  padding: 0.125rem 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

.shopcard__body { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; padding: 0.75rem; }
@container (min-width: 15rem) { .shopcard__body { gap: 0.75rem; padding: 1.25rem; } }

.shopcard__ident { display: flex; flex-direction: column; gap: 0.25rem; }
.shopcard__namerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.shopcard__name {
  margin: 0; font-size: 1rem; line-height: 1.375; font-weight: 600;
  letter-spacing: -0.02em; text-wrap: balance;
}
@container (min-width: 15rem) { .shopcard__name { font-size: 1.125rem; } }
.shopcard__name a { color: var(--foreground); text-decoration: none; outline: none; transition: color 150ms var(--ease-out-quart); }
.shopcard__name a:hover, .shopcard__name a:focus-visible { color: var(--brand); }
/* the category chip is signal on a wide card and noise on a narrow one */
.shopcard__cat { display: none; margin-top: 0.125rem; }
@container (min-width: 15rem) { .shopcard__cat { display: inline-flex; } }
/* `display` needs the extra specificity: the block-editor stylesheet sets
   `display: flow-root` on paragraphs, which silently disables line-clamp. */
.shopcard .shopcard__tagline {
  margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.shopcard__price { display: flex; align-items: baseline; gap: 0.375rem; margin-top: auto; padding-top: 0.25rem; }
.shopcard__amount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  /* text-xl → leading 1.75rem; the inherited 1.55 body leading made the price
     row 41px against the reference's 32px and blew out the card height */
  font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
@container (min-width: 15rem) { .shopcard__amount { font-size: 1.5rem; line-height: 2rem; } }
.shopcard__amount .woocommerce-Price-amount { color: inherit; font: inherit; }
.shopcard__unit { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-3); }
.shopcard__unavail {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* Narrow: stacked, the money action ON TOP of the nav link.
   Wide (≥18rem): side by side with the CTA WIDER (1fr / 1.2fr) — the money
   action outranks a nav link, and the extra width is what keeps the label
   from clipping. Order swaps via `order`, so the markup stays single-source. */
.shopcard__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.shopcard__actions .btn { padding-inline: 0.5rem; }
.shopcard__actions [data-ms-add] { order: -1; }
@container (min-width: 18rem) {
  .shopcard__actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.5rem; }
  .shopcard__actions [data-ms-add] { order: 0; }
}

/* ---- list/row variant ----------------------------------------------------- */
.ms-shopgrid[data-view="list"] .shopcard {
  container-type: normal;
  flex-direction: row; align-items: center; gap: 1rem; padding: 0.75rem;
}
@media (min-width: 640px) { .ms-shopgrid[data-view="list"] .shopcard { gap: 1.25rem; padding: 1rem; } }
.ms-shopgrid[data-view="list"] .shopcard__stage {
  width: 6rem; height: 6rem; flex-shrink: 0; aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
@media (min-width: 640px) { .ms-shopgrid[data-view="list"] .shopcard__stage { width: 7rem; height: 7rem; } }
.ms-shopgrid[data-view="list"] .shopcard__body {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0; flex-wrap: wrap;
}
.ms-shopgrid[data-view="list"] .shopcard__ident { flex: 1; min-width: 10rem; }
.ms-shopgrid[data-view="list"] .shopcard__cat { display: inline-flex; }
.ms-shopgrid[data-view="list"] .shopcard__price { margin-top: 0; padding-top: 0; }
.ms-shopgrid[data-view="list"] .shopcard__actions {
  display: flex; flex-direction: row; gap: 0.375rem; flex-shrink: 0;
}
.ms-shopgrid[data-view="list"] .shopcard__actions .btn {
  height: 2.25rem; padding-inline: 0.75rem; font-size: 0.8125rem; width: auto;
}
.ms-shopgrid[data-view="list"] .shopcard__actions [data-ms-add] { order: 0; }

/* ---- empty state ---------------------------------------------------------- */
.ms-empty {
  display: grid; place-items: center; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--elevation-whisper);
  padding: 5rem 1.5rem;
}
.ms-empty[hidden] { display: none; }
.ms-empty__glyph {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 999px; background: var(--secondary); color: var(--ink-3);
}
.ms-empty h3 { margin: 1rem 0 0; }
.ms-empty__note { margin: 0.25rem 0 0; max-width: 24rem; color: var(--muted-foreground); }
.ms-empty .btn { margin-top: 1.25rem; }

/* --- card spec line: declared dose + cost per 100 mg ---------------------
   Mono + tabular-nums so the figures align down the column and can actually
   be scanned against each other, which is the whole reason they are here. */
.shopcard__spec {
  margin: .35rem 0 0;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
}
.shopcard__dose { color: var(--data-accent); }
.shopcard__sep  { color: var(--ink-4); }
.shopcard__cpm  { color: var(--ink-3); }