/* ppsw-Blöcke — nutzt die Design-Tokens (tokens.css) des Themes. */

/* The "card" layout is the shop's listing card and comes from the theme's
   shared.css (.ppsw-card--card, single source with the Shopware theme).
   The rules below cover the inline and hero layouts only. */
.ppsw-card--inline,
.ppsw-card--hero {
    background: var(--pp-cream-card, #fdfcf8);
    border: 1px solid var(--pp-border, #dedaca);
    border-radius: var(--pp-radius, 0);
    overflow: hidden;
    max-width: 22rem;
}
.ppsw-card--inline { display: flex; max-width: none; }
.ppsw-card--inline .ppsw-card__media { flex: 0 0 8rem; }
.ppsw-card--hero { max-width: none; }

.ppsw-card__media img { display: block; width: 100%; height: auto; }
.ppsw-card__body { padding: var(--pp-space-md, 1rem); }
.ppsw-card__title { margin: 0 0 var(--pp-space-sm, 0.5rem); font-size: 1.0625rem; }
.ppsw-card__title a { color: var(--pp-ink, #1f2513); text-decoration: none; }
.ppsw-card__price { font-weight: 700; color: var(--pp-orange, #d96a29); margin: 0 0 var(--pp-space-md, 1rem); }

/* one full-width card per row — the shop shows the same card one per
   slide / full width in the listing */
.ppsw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pp-space-gutter, 1.25rem);
}

.ppsw-compare-wrap { overflow-x: auto; }
.ppsw-compare { width: 100%; border-collapse: collapse; }
.ppsw-compare th, .ppsw-compare td {
    border: 1px solid var(--pp-border, #dedaca);
    padding: var(--pp-space-md, 1rem);
    text-align: left;
    vertical-align: top;
    background: var(--pp-cream-card, #fdfcf8);
}
.ppsw-compare th img { max-width: 8rem; height: auto; display: block; margin-bottom: var(--pp-space-sm, 0.5rem); }

.ppsw-cta {
    padding: var(--pp-space-lg, 2rem);
    border-radius: var(--pp-radius, 0);
    background: var(--pp-orange, #d96a29);
    color: #fff;
}
.ppsw-cta--dark { background: var(--pp-olive, #333d1e); }
.ppsw-cta__headline { color: #fff; margin-top: 0; }
.ppsw-cta .pp-btn--outline { color: #fff; border-color: #fff; background: transparent; }

.ppsw-fallback {
    border: 1px dashed var(--pp-border, #dedaca);
    padding: var(--pp-space-md, 1rem);
    color: var(--pp-muted, #6b6a5c);
}