/* card--rx-compound: a product as a catalogue file, sized as the approved design. A charcoal
   panel with square corners and no frame; the file tag in small accent capitals over a square
   image that fills the panel's width; the name in bold monospaced capitals with the strength in
   an outlined accent pill at the right; the summary in muted type; the price with the category
   at the right; then two equal square actions, the view link outlined behind a > prompt and
   the add button filled. The image eases in a touch on hover, and a scan line (fx-2) waits
   above the photo, out of sight until the snippet sweeps it down. */
.s-card--rx-compound { display: flex; flex-direction: column; height: 100%; border: 0; background: var(--surface); }
.s-card--rx-compound .rx-file-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.s-card--rx-compound .rx-file-media .card-img {
  display: block; width: 100%; height: 100%; padding: 0; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.s-card--rx-compound:hover .rx-file-media .card-img { transform: scale(1.04); }
.s-card--rx-compound .rx-file-scan {
  position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 1px;
  background: var(--accent); opacity: 0.55; transform: translateY(-100%); pointer-events: none;
}
.s-card--rx-compound .rx-file-tag {
  position: absolute; z-index: 1; top: calc(var(--s3) + var(--s1) / 2); left: calc(var(--s3) + var(--s1) / 2);
  font-family: var(--font-mono); font-size: calc(var(--t-xs) * 1.074); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.s-card--rx-compound .rx-file-chip {
  position: absolute; z-index: 1; right: var(--s3); bottom: var(--s3); padding: var(--s1) var(--s2);
  border: 1px solid var(--accent); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); background: var(--bg);
}
.s-card--rx-compound .rx-file-body {
  display: flex; flex-direction: column; gap: calc(var(--s2) + var(--s1) / 2); flex: 1;
  padding: var(--s5) calc(var(--s5) - var(--s1) / 2) var(--s5);
}
.s-card--rx-compound .rx-file-title { margin: 0; font-size: calc(var(--t-md) * 0.95); line-height: var(--lh-snug); }
.s-card--rx-compound .rx-file-title a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap);
  color: var(--fg); text-decoration: none;
}
.s-card--rx-compound .rx-file-name { font-family: var(--font-mono); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.02em; }
.s-card--rx-compound .rx-file-strength {
  flex: none; padding: var(--s1) var(--s3); border: 1px solid var(--accent); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: calc(var(--t-sm) * 0.9375); font-weight: var(--w-regular);
  letter-spacing: 0.08em; color: var(--accent);
}
.s-card--rx-compound .rx-file-short { flex: 1; margin: 0; font-size: calc(var(--t-sm) * 1.016); line-height: var(--lh-body); color: var(--muted); }
.s-card--rx-compound .rx-file-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
.s-card--rx-compound .rx-file-price {
  margin: 0; font-family: var(--font-mono); font-size: calc(var(--t-md) * 0.85); font-weight: var(--w-semi);
  text-transform: uppercase; white-space: nowrap; color: var(--fg);
}
.s-card--rx-compound .rx-file-price .from { font-weight: var(--w-semi); }
.s-card--rx-compound .rx-file-currency { font-size: var(--t-xs); color: var(--muted); }
.s-card--rx-compound .rx-file-cat {
  margin: 0 0 0 auto; font-family: var(--font-mono); font-size: calc(var(--t-xs) * 1.074); letter-spacing: 0.14em;
  text-transform: uppercase; text-align: right; color: var(--muted);
}
.s-card--rx-compound .rx-file-actions { display: flex; gap: calc(var(--s2) + var(--s1) / 2); margin-top: calc(var(--s1) * 1.5); }
.s-card--rx-compound .rx-file-btn {
  flex: 1; min-height: var(--tap); padding: var(--s3) calc(var(--s2) + var(--s1) / 2); border-radius: 0;
  font-family: var(--font-mono); font-size: calc(var(--t-sm) * 0.9375); font-weight: var(--w-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.s-card--rx-compound .rx-file-btn .btn-icon { display: none; }
.s-card--rx-compound .rx-file-view { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.s-card--rx-compound .rx-file-view::before { content: ">"; content: ">" / ""; }
.s-card--rx-compound .rx-file-view:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.s-card--rx-compound .rx-file-btn:focus-visible, .s-card--rx-compound .rx-file-title a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* A sold-out strength: its photo in black and white, a shade darker, and still (no zoom; the
   card renders no scan line for it). */
.s-card--rx-compound .rx-file-media.is-oos .card-img { filter: grayscale(1) brightness(0.78); }
.s-card--rx-compound:hover .rx-file-media.is-oos .card-img { transform: none; }
.s-card--rx-compound .rx-file-buy { display: flex; flex-direction: column; gap: calc(var(--s2) + var(--s1) / 2); }
.s-card--rx-compound .rx-file-stock {
  margin: 0 0 0 auto; font-family: var(--font-mono); font-size: calc(var(--t-xs) * 1.074); letter-spacing: 0.14em;
  text-transform: uppercase; text-align: right; color: var(--muted);
}
/* A family's strengths: one radio per strength, hidden in place but still focusable, its label
   the pill. Only the picked strength's photo and buy row show; no script is involved, so
   picking works wherever CSS does. A sold-out strength's pill is struck through. */
.s-card--rx-compound .rx-pick { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.s-card--rx-compound.has-picks .rx-m { display: none; }
.s-card--rx-compound .rx-file-picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.s-card--rx-compound .rx-file-pick { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; }
.s-card--rx-compound .rx-file-pick:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.s-card--rx-compound .rx-file-pick.is-oos { border-color: var(--line-strong); color: var(--muted); text-decoration: line-through; }
.s-card--rx-compound .rx-pick[value="1"]:checked ~ .rx-file-photo .rx-m-1 { display: block; }
.s-card--rx-compound .rx-pick[value="1"]:checked ~ .rx-file-body .rx-m-1 { display: flex; }
.s-card--rx-compound .rx-pick[value="1"]:checked ~ .rx-file-body .rx-l-1 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="1"]:checked ~ .rx-file-body .rx-l-1.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="1"]:focus-visible ~ .rx-file-body .rx-l-1 { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-card--rx-compound .rx-pick[value="2"]:checked ~ .rx-file-photo .rx-m-2 { display: block; }
.s-card--rx-compound .rx-pick[value="2"]:checked ~ .rx-file-body .rx-m-2 { display: flex; }
.s-card--rx-compound .rx-pick[value="2"]:checked ~ .rx-file-body .rx-l-2 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="2"]:checked ~ .rx-file-body .rx-l-2.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="2"]:focus-visible ~ .rx-file-body .rx-l-2 { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-card--rx-compound .rx-pick[value="3"]:checked ~ .rx-file-photo .rx-m-3 { display: block; }
.s-card--rx-compound .rx-pick[value="3"]:checked ~ .rx-file-body .rx-m-3 { display: flex; }
.s-card--rx-compound .rx-pick[value="3"]:checked ~ .rx-file-body .rx-l-3 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="3"]:checked ~ .rx-file-body .rx-l-3.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="3"]:focus-visible ~ .rx-file-body .rx-l-3 { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-card--rx-compound .rx-pick[value="4"]:checked ~ .rx-file-photo .rx-m-4 { display: block; }
.s-card--rx-compound .rx-pick[value="4"]:checked ~ .rx-file-body .rx-m-4 { display: flex; }
.s-card--rx-compound .rx-pick[value="4"]:checked ~ .rx-file-body .rx-l-4 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="4"]:checked ~ .rx-file-body .rx-l-4.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="4"]:focus-visible ~ .rx-file-body .rx-l-4 { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-card--rx-compound .rx-pick[value="5"]:checked ~ .rx-file-photo .rx-m-5 { display: block; }
.s-card--rx-compound .rx-pick[value="5"]:checked ~ .rx-file-body .rx-m-5 { display: flex; }
.s-card--rx-compound .rx-pick[value="5"]:checked ~ .rx-file-body .rx-l-5 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="5"]:checked ~ .rx-file-body .rx-l-5.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="5"]:focus-visible ~ .rx-file-body .rx-l-5 { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-card--rx-compound .rx-pick[value="6"]:checked ~ .rx-file-photo .rx-m-6 { display: block; }
.s-card--rx-compound .rx-pick[value="6"]:checked ~ .rx-file-body .rx-m-6 { display: flex; }
.s-card--rx-compound .rx-pick[value="6"]:checked ~ .rx-file-body .rx-l-6 { border-color: var(--accent); background: var(--accent); color: var(--on-cta); }
.s-card--rx-compound .rx-pick[value="6"]:checked ~ .rx-file-body .rx-l-6.is-oos { border-color: var(--line-strong); background: var(--line-strong); color: var(--bg); }
.s-card--rx-compound .rx-pick[value="6"]:focus-visible ~ .rx-file-body .rx-l-6 { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .s-card--rx-compound .rx-file-media .card-img { transition: none; }
  .s-card--rx-compound:hover .rx-file-media .card-img { transform: none; }
}