/*
 * Schnurrbartfritz – Shop. Baut auf sbf.css, home.css und book.css auf.
 */

.sbf-shop-head { text-align: center; }
.sbf-shop-head h1 { font-family: var(--sbf-font); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: var(--sbf-night); margin: 0 0 12px; }
.sbf-shop-head .sbf-hp-lead { margin-bottom: 0; }
.sbf-shop-section { background: #fff; padding-top: clamp(32px, 5vw, 56px); }
.sbf-shop-collections { background: var(--sbf-cream); }

.sbf-shop-grid { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 960px) { .sbf-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sbf-shop-grid { grid-template-columns: 1fr; } }

.sbf-shop-card { display: flex; flex-direction: column; background: var(--sbf-cream); border-radius: var(--sbf-radius); padding: 20px; box-shadow: 0 6px 20px rgba(11, 20, 64, .1); }
.sbf-shop-collections .sbf-shop-card { background: #fff; }
.sbf-shop-cover { display: block; text-align: center; margin-bottom: 16px; }
.sbf-shop-cover img { display: block; margin: 0 auto; width: 70%; max-width: 230px; height: auto; border-radius: 8px; box-shadow: 0 12px 24px rgba(11, 20, 64, .3); transition: transform .15s ease; }
.sbf-shop-cover:hover img { transform: translateY(-4px); }
/* Sammelband ohne eigenes Cover: die enthaltenen Bände aufgefächert */
.sbf-shop-cover.is-stack { position: relative; height: 245px; }
.sbf-shop-cover.is-stack img { position: absolute; top: 10px; left: 50%; width: 46%; margin: 0; }
.sbf-shop-cover.is-stack img:nth-child(1) { transform: translateX(-95%) rotate(-8deg); }
.sbf-shop-cover.is-stack img:nth-child(2) { transform: translateX(-50%); z-index: 2; top: 0; }
.sbf-shop-cover.is-stack img:nth-child(3) { transform: translateX(-5%) rotate(8deg); }
.sbf-shop-cover.is-stack:hover img:nth-child(2) { transform: translateX(-50%) translateY(-4px); }

.sbf-shop-body { display: flex; flex-direction: column; flex: 1; }
.sbf-shop-body .sbf-kicker { margin: 0; }
.sbf-shop-body h3 { margin: 4px 0 8px; font-size: 1.25rem; line-height: 1.25; }
.sbf-shop-body h3 a { color: var(--sbf-night); text-decoration: none; }
.sbf-shop-body h3 a:hover { text-decoration: underline; }
.sbf-shop-short { margin: 0 0 12px; line-height: 1.5; font-size: .98rem; }

.sbf-shop-formats { list-style: none; margin: 4px 0 16px !important; padding: 0 !important; }
.sbf-shop-formats li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #e6d9bd; }
.sbf-shop-formats li:last-child { border-bottom: 0; }
.sbf-shop-format { font-weight: 700; color: var(--sbf-night); }
.sbf-shop-price { font-weight: 800; color: var(--sbf-night); white-space: nowrap; }
.sbf-shop-state { font-size: .78rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; min-width: 72px; text-align: center; }
.sbf-shop-state.is-ok { background: #e3f5e8; color: var(--sbf-ok); }
.sbf-shop-state.is-soon { background: var(--sbf-cream-2); color: var(--sbf-muted); }
button.sbf-shop-state, a.sbf-shop-state { border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.4; text-decoration: none; }
button.sbf-shop-state.is-soon { border-color: var(--sbf-gold-deep); background: #fff; color: var(--sbf-night); }
button.sbf-shop-state.is-soon:hover { background: var(--sbf-cream-2); }
button.sbf-shop-state.is-requested { border-color: var(--sbf-ok); color: var(--sbf-ok); }
button.sbf-shop-state.is-soon:focus, button.sbf-shop-state.is-soon:active { background: #fff; color: var(--sbf-night); }
button.sbf-shop-state.is-soon:hover { background: var(--sbf-cream-2); }
button.sbf-shop-state.is-requested:focus, button.sbf-shop-state.is-requested:active { color: var(--sbf-ok); }
.sbf-shop-card .sbf-msg { font-size: .92rem; margin: 0 0 10px; }
.sbf-shop-card { scroll-margin-top: 100px; }
.sbf-shop-more { margin: auto 0 0 !important; text-align: center; }
.sbf-shop-more .sbf-btn { width: 100%; box-sizing: border-box; text-align: center; }
.sbf-shop-price abbr { text-decoration: none; cursor: help; }
.sbf-shop-note { margin: 24px 0 0; font-size: .9rem; color: var(--sbf-ink); text-align: center; }