/* Seachem collection styling (2026-09-27). Scoped to sc-* classes; does not touch shared page styles. */
.sc-detail-grid { display: grid; gap: 28px; margin-bottom: 32px; }
.sc-detail-gallery img { width: 100%; height: auto; border-radius: 14px; border: 1px solid #e4e4e4; background: #fff; }
.sc-detail-copy h1 { margin: 6px 0 12px; }
.sc-detail-copy .eyebrow { color: #2f7a63; }
.sc-detail-copy .list-icons { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.sc-sizes { font-size: .9rem; color: #565656; margin: 0 0 18px; }
.sc-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-detail-sections section { border-top: 1px solid #eee; padding: 22px 0; }
.sc-detail-sections h2 { font-size: 1.05rem; margin: 0 0 10px; }
.sc-detail-sections p { color: #3a3a3a; line-height: 1.55; }
.sc-detail-sections ul { margin: 0; padding-left: 18px; }
.sc-disclaimer { margin-top: 24px; font-size: .82rem; color: #7a7a7a; }
@media (min-width: 900px) { .sc-detail-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.sc-card .card-kicker { color: #2f7a63; }
.fs-chip[data-sc-cat] { }

/* Match the Waterbox/Aquaforest badge fix: the shared .card-badge class (from merch.css)
   collides with the sitewide species-card .card-badge rule in style.css, which sets
   top/left + backdrop-filter + border-radius:999px with no width/height. Combined with
   merch.css's right/bottom offsets for the store card badge, that stretches the badge to
   fill the image box. Reset right/bottom back to auto so the badge stays a small top-left pill. */
.sc-card .merch-card-image .card-badge { right: auto; bottom: auto; top: 12px; left: 12px; padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0b2027; font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: 0; text-transform: none; }
@media (max-width: 679px) {
  .sc-card .merch-card-image .card-badge { top: 8px; left: 8px; padding: 5px 7px; font-size: .56rem; }
}

/* Coming-soon status marker (2026-09-27). Separate class from .card-badge on purpose:
   .card-badge already carries top/left offsets from the fix above, and giving a second
   element the same class name is exactly the top/left-vs-right/bottom collision that caused
   the earlier badge-stretching bug. This pill is positioned independently, top-right. */
.sc-card .merch-card-image .sc-status-pill { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; width: auto; height: auto; padding: 6px 9px; border-radius: 999px; background: #b8501a; color: #fff; font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: 0; text-transform: none; }
@media (max-width: 679px) {
  .sc-card .merch-card-image .sc-status-pill { top: 8px; right: 8px; padding: 5px 7px; font-size: .56rem; }
}

.sc-status-badge { display: inline-block; margin: 0 0 8px; padding: 6px 10px; border-radius: 999px; background: #b8501a; color: #fff; font: 600 .72rem/1 "JetBrains Mono", monospace; letter-spacing: 0; text-transform: none; }
.sc-status-badge[hidden] { display: none; }

/* Short pricing context beside the dealer / source actions (2026-09-28 Store commerce revision). */
.sc-price-note { margin: 14px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }