/* Shop — Produktkarten-Raster
   Ausgelagert aus shop.html (Task P1-02, 03.08.2026).
   Basis: assets/css/base.css */

.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border: 1px solid rgba(216, 199, 173, .9);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .86);
  box-shadow: var(--shadow-soft);
}

.shop-card h3 { font-size: 23.5px; }
.shop-card .shop-price { font-size: 40px; font-weight: 760; line-height: 1; }
.shop-card .shop-price small { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 500; }
.shop-card p { flex: 1 1 auto; font-size: 16px; line-height: 1.5; }
.shop-card .shop-actions { display: grid; gap: 10px; }

@media (max-width: 1040px) { .shop-grid { grid-template-columns: 1fr; } }

/* HAERTUNG 01.09.2026 — Inline-Styles abgeloest (CSP-Schritt, s. base.css §20) */

/* Shop-Hero: kompakter als der Standard-.hero-pad (56px statt 66px unten),
   Display-Stufe der Uebersichts-H1 unterhalb der Produktseiten-Heroes. */
.hero-shop { padding: 76px 0 56px; }
.hero-shop h1 { font-size: clamp(42px, 5.6vw, 72px); }

/* Produktraster-Sektion schliesst dichter an den Hero an. */
.section-tight-top { padding-top: 56px; }

/* Flaggschiff-Karte traegt den BOS-Sub-Brand-Rahmen und -Tag. */
.shop-card.is-bos { border-color: rgba(47, 111, 151, .4); }
.shop-card.is-bos > .tag { background: var(--blue); }