/* UI/CRO V4 - Sonderposten-Liste (de/sonderposten.php, .v4-sp) - 2026-09-30
   Nur bei aktivem Bereich "Service-Seiten". Filter/Sortierung/Karten wie die V4-Kategorieseiten. */

.v4-sp { padding: 24px; border-radius: 16px; background: #fff; }
.v4-sp .sp-filter { padding: 0; margin: 0 0 20px; }
.v4-sp .sp-filter .sp-chip { padding: 8px 16px; border: 0; border-radius: 999px; background: #f1f3f5; color: var(--navy, #062640); font-size: 14px; }
.v4-sp .sp-filter .sp-chip:hover { background: #fde3f1; color: var(--navy, #062640); }
.v4-sp .sp-filter .sp-chip.active { background: var(--pink, #ed0b87); color: #fff; }
.v4-sp .sp-toolbar { padding: 0; }
.v4-sp .sp-toolbar .sp-sort select { height: 40px; border-color: #cfd5da; border-radius: 8px; font-size: 14px; }

/* Raster statt Float-Spalten */
.v4-sp #product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.v4-sp #product-grid::before,
.v4-sp #product-grid::after { display: none; }
.v4-sp #product-grid > .item { float: none; width: auto; margin: 0 !important; }
.v4-sp #product-grid .item-inner { height: 100%; overflow: hidden; border: 1px solid var(--line, #dfe4e8); border-radius: 12px; background: #fff; }
.v4-sp #product-grid .product-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.v4-sp #product-grid .product-name { padding: 12px 14px 4px; }
.v4-sp #product-grid .product-name a { color: var(--navy, #062640); font-size: 15px; font-weight: 600; text-decoration: none; }
.v4-sp #product-grid .price-box { padding: 0 14px 14px; }
.v4-sp #product-grid .price-box .price { font: 700 19px/1 "Barlow Condensed", Arial, sans-serif; color: var(--pink, #ed0b87); }
.v4-sp .sp-badge { border-radius: 999px; background: var(--pink, #ed0b87); }
.v4-sp .sp-badge.sp-stock-low { background: #f59e0b; }
.v4-sp .sp-badge.sp-stock-out { background: #9aa4ad; }
.v4-sp .sp-pagination a { border-radius: 8px; color: var(--navy, #062640); }
.v4-sp .sp-pagination a.active { background: var(--pink, #ed0b87); border-color: var(--pink, #ed0b87); color: #fff; }

@media (max-width: 980px) { .v4-sp #product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .v4-sp { padding: 16px; border-radius: 0; }
  .v4-sp #product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ── Detailseite (de/sonderposten_detail.php, .v4-spd) ── */
.v4-spd { padding: 24px 32px !important; border-radius: 16px; background: #fff; }
.v4-spd ul.breadcrumb { padding: 0; background: none; font-size: 13px; }
.v4-spd ul.breadcrumb .divider { display: none; }  /* Trenner kommt bereits per CSS (li + li::before) */
.v4-spd .product-img-box { border-radius: 12px !important; background: #fff !important; border-color: var(--line, #dfe4e8) !important; }
/* Inline-Styles der Vorlage (h1 22px, Preis #c00) - nur hier mit !important uebersteuert */
.v4-spd h1 { font: 700 clamp(30px, 3vw, 42px)/1.05 "Barlow Condensed", Arial, sans-serif !important; color: var(--navy, #062640); }
.v4-spd .price-box .price { font-family: "Barlow Condensed", Arial, sans-serif; color: var(--pink, #ed0b87) !important; }
@media (max-width: 680px) {
  .v4-spd { padding: 16px !important; border-radius: 0; }
  .v4-spd .product-view > [class*="span"] { margin-left: 0; padding-left: 0; padding-right: 0; }
}