/*
 * Shop-specific glue on top of the Groover theme (bundle.shop.css).
 * Grows as more storefront pages are migrated to the theme. Self-contained:
 * uses the shop brand colour directly so it never depends on theme internals.
 */
:root {
    --shop-brand: #309bd9;
    --shop-brand-dark: #2a89c0;
    --shop-brand-tint: #e8f4fb;
    --shop-ink: #292929;
    --shop-muted: #707070;
    --shop-border: #e4e4e4;
}

/* ---- Base ---- */
body { font-family: 'Open Sans', sans-serif; }
.shop-main { display: block; min-height: 40vh; }

/* ---- Brand text logo (no logo image shipped) ---- */
.shop-brand-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    color: var(--shop-ink);
    letter-spacing: -0.5px;
    display: inline-block;
}
.shop-brand-text span { color: var(--shop-brand); }
.shop-brand-text:hover { color: var(--shop-ink); }

/* ---- Top-header text-link count badges ---- */
.shop-count-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--shop-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}
.shop-count-badge[hidden] { display: none; }

/* ---- Live search dropdown ---- */
/* The Groover .form-searchbox sets overflow:hidden, which CLIPS the absolutely-
   positioned results dropdown (it sits below the box). Must be visible here. */
#sf-search.form-searchbox { position: relative; overflow: visible; }
.sf-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
}
.sf-search-results[hidden] { display: none; }
.sf-search-section-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shop-muted);
    font-weight: 700;
    margin: 4px 4px 8px;
}
.sf-search-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shop-border);
}
.sf-search-category-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--shop-brand-tint);
    color: var(--shop-brand-dark);
    font-size: 13px;
    font-weight: 500;
}
.sf-search-category-chip:hover { background: var(--shop-brand); color: #fff; }
.sf-search-products { display: flex; flex-direction: column; gap: 2px; }
.sf-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    color: var(--shop-ink);
}
.sf-search-result-item:hover { background: #f7f7f7; }
.sf-search-result-item img,
.sf-search-result-placeholder {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0f0f0;
    flex-shrink: 0;
}
.sf-search-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-search-result-title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-search-result-price { font-size: 13px; color: var(--shop-muted); }
.sf-search-result-price .sf-price-sale { color: var(--shop-brand-dark); font-weight: 700; }
.sf-search-result-price .sf-price-original { text-decoration: line-through; color: var(--shop-muted); margin-right: 5px; }
.sf-search-highlight { background: var(--shop-brand-tint); color: var(--shop-brand-dark); border-radius: 2px; padding: 0 1px; }
.sf-search-popular { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-search-popular-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--shop-muted);
    cursor: pointer;
    background: #fff;
}
.sf-search-popular-chip:hover { border-color: var(--shop-brand); color: var(--shop-brand); }
.sf-search-empty { color: var(--shop-muted); font-size: 14px; padding: 8px 4px; margin: 0; }

/* ---- Product card: favorite/compare overlay buttons ---- */
.item-action-behaviors .shop-action-form { margin: 0; padding: 0; }
.shop-action-btn {
    transition: all 0.5s ease;
    transform: translateX(-40px);
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 10px 0;
    padding: 0;
    text-align: center;
    color: var(--shop-ink);
    display: block;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.shop-action-btn::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 15px;
}
/* Die Glyphen gehören NUR an die runden Kachel-Buttons. Ohne die .shop-action-btn-Bindung
   greifen sie auch auf der Produktseite, wo der Herz-Button ein eigenes <i class="fas fa-heart">
   trägt und KEIN .shop-action-btn ist — dort fehlt dann die Icon-Schriftart aus der Regel
   darüber, und der Codepunkt wird als leeres Kästchen neben dem echten Herz gerendert. */
.shop-action-btn.sf-favorite-btn::before { content: '\f004'; }
.sf-favorite-btn[data-favorited="1"] { color: #FF3860; }
.shop-action-btn.sf-compare-btn::before { content: '\f362'; }
.sf-compare-btn[data-compared="1"] { color: var(--shop-brand); }
.shop-action-btn:hover { background-color: var(--shop-brand); color: #fff; }
.item:hover .shop-action-btn { transform: translateX(0); }
.list-style .shop-action-btn { transform: translateX(0); }
.sf-compare-limit-note {
    position: absolute;
    right: 0;
    bottom: -22px;
    background: #a12626;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ---- Product card: image placeholder ---- */
.shop-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--shop-brand-tint), #f3f3f3);
    color: var(--shop-brand);
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 48px;
    text-transform: uppercase;
}

/* ---- CSS-only star rating ---- */
.shop-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.shop-stars-bg { color: #d8d8d8; }
.shop-stars-fg {
    color: #ffb400;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: var(--rating-pct, 0%);
}

/* ---- Hero slider ---- */
.shop-hero-slide {
    background: linear-gradient(120deg, var(--shop-brand-tint) 0%, #ffffff 60%);
    height: 506px;
    display: flex;
    align-items: center;
}
.shop-hero-row { min-height: 506px; }
.shop-hero-copy h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 5vw, 60px);
    color: var(--shop-ink);
    margin-bottom: 16px;
    line-height: 1.05;
}
.shop-hero-copy p { color: var(--shop-muted); font-size: 17px; margin-bottom: 24px; max-width: 420px; }
.shop-hero-media { text-align: center; }
.shop-hero-media img { max-height: 420px; max-width: 100%; object-fit: contain; }
@media (max-width: 991px) {
    .shop-hero-slide, .shop-hero-row { height: auto; min-height: 0; }
    .shop-hero-slide { padding: 40px 0; }
    .shop-hero-media { margin-top: 24px; }
    .shop-hero-media img { max-height: 260px; }
}

/* ---- Event banner ---- */
.shop-event { padding: 30px 0; }
.shop-event-inner {
    display: flex;
    gap: 30px;
    align-items: center;
    background: linear-gradient(120deg, var(--event-accent, var(--shop-brand)), #ffffff 130%);
    border-radius: 10px;
    padding: 30px;
    color: #fff;
    flex-wrap: wrap;
}
.shop-event-media img { max-height: 160px; border-radius: 8px; }
.shop-event-copy h2 { font-family: 'Raleway', sans-serif; font-weight: 800; color: #fff; margin-bottom: 8px; }
.shop-event-copy p { color: rgba(255, 255, 255, 0.92); margin-bottom: 10px; }
.shop-event-coupon { font-weight: 700; }
.shop-countdown { display: flex; gap: 14px; margin: 16px 0; }
.shop-countdown-unit {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    min-width: 62px;
}
.shop-countdown-unit span { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.shop-countdown-unit small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- USP strip ---- */
.shop-usp {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding: 28px 0;
    border-bottom: 1px solid var(--shop-border);
}
.shop-usp-item { display: flex; align-items: center; gap: 12px; flex: 1 1 210px; }
.shop-usp-item i { font-size: 24px; color: var(--shop-brand); }
.shop-usp-item span { font-weight: 600; color: var(--shop-ink); font-size: 14px; }

/* ---- Category showcase cards ---- */
.shop-category-grid { margin-top: 10px; }
.shop-category-card {
    display: block;
    text-align: center;
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    color: var(--shop-ink);
}
.shop-category-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); transform: translateY(-3px); color: var(--shop-brand); }
.shop-category-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }
.shop-category-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--shop-brand-tint), #f3f3f3);
    color: var(--shop-brand);
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 40px;
}
.shop-category-card-label { display: block; margin-top: 12px; font-weight: 700; }

/* ---- Brand row ---- */
.shop-brand-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.shop-brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 74px;
    padding: 10px 18px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    background: #fff;
    color: var(--shop-muted);
    font-weight: 700;
}
.shop-brand-card img { max-height: 50px; max-width: 120px; object-fit: contain; }
.shop-brand-card:hover { border-color: var(--shop-brand); color: var(--shop-brand); }

/* Marke ohne hinterlegtes Logo: der Name wird als Wortmarke gesetzt, nicht als grauer
   Platzhaltertext. Solange keine freigegebenen Logodateien vorliegen, ist das der Dauerzustand
   — er soll deshalb gewollt aussehen und nicht nach fehlendem Bild. */
.shop-brand-card > span {
    color: var(--shop-ink);
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}
.shop-brand-card:hover > span { color: var(--shop-brand); }

/* ---- Sidebar + active filter ---- */
.shop-sidebar h4 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.shop-category-list { list-style: none; padding: 0; margin: 0 0 30px; border: 1px solid var(--shop-border); border-radius: 8px; overflow: hidden; }
.shop-category-list li + li { border-top: 1px solid var(--shop-border); }
.shop-category-list a { display: block; padding: 11px 16px; color: var(--shop-ink); font-size: 14px; }
.shop-category-list a:hover { background: var(--shop-brand-tint); color: var(--shop-brand-dark); }
.shop-category-list a.active { background: var(--shop-brand); color: #fff; font-weight: 700; }
.shop-active-filter {
    background: var(--shop-brand-tint);
    color: var(--shop-brand-dark);
    padding: 10px 16px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 18px;
}
.shop-active-filter a { color: var(--shop-brand-dark); text-decoration: underline; font-weight: 700; }

/* ---- Flash messages ---- */
.shop-flash {
    margin: 16px 0;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid transparent;
}
.shop-flash-success { background: #e6f6ec; border-color: #b6e2c6; color: #1c6b3a; }
.shop-flash-error { background: #fdecec; border-color: #f5c2c2; color: #a12626; }
.shop-flash-info { background: var(--shop-brand-tint); border-color: #bce0f3; color: var(--shop-brand-dark); }

/* ---- Category page hero ---- */
.shop-category-hero {
    background: var(--shop-brand-tint);
    border-radius: 8px;
    padding: 28px 32px;
    margin-bottom: 10px;
}
.shop-category-hero.has-image {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0;
    overflow: hidden;
}
.shop-category-hero-img {
    width: 280px;
    max-width: 40%;
    align-self: stretch;
    object-fit: cover;
    flex-shrink: 0;
}
.shop-category-hero.has-image .shop-category-hero-copy { padding: 28px 32px 28px 0; }
.shop-category-hero-title { margin: 0 0 8px; font-size: 28px; color: var(--shop-brand-dark); }
.shop-category-hero-copy p { margin: 0; color: #4a4a4a; font-size: 14px; line-height: 1.7; }

@media (max-width: 767px) {
    .shop-category-hero.has-image { display: block; }
    .shop-category-hero-img { width: 100%; max-width: 100%; height: 180px; }
    .shop-category-hero.has-image .shop-category-hero-copy { padding: 22px 20px; }
    .shop-category-hero-title { font-size: 22px; }
}

/* ---- Cart page ---- */
.shop-page-title { font-size: 26px; margin-bottom: 22px; }
.shop-cart-sub { font-size: 12px; color: #767676; margin-top: 4px; }
.shop-cart-empty h5 { color: #767676; font-weight: 400; }
/* Mengen-Zeile: Stepper + Übernehmen-Button nebeneinander. Der Button darf NICHT
   zwischen Input und .plus-a rutschen — app.js sucht das Feld über .prev(). */
.shop-qty-form .cart-quantity { display: flex; align-items: center; gap: 8px; }
.shop-qty-submit { flex-shrink: 0; }
.shop-calc-grand { font-weight: 700; color: var(--shop-brand-dark); }

/* ---- Checkout page ---- */
.shop-checkout-block { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px 22px; }
.shop-vat-note { font-size: 12px; color: #767676; margin: 4px 0 0; }
.shop-checkout-submit { width: 100%; margin-top: 8px; }
.page-checkout .astk, .page-group .astk { color: #d0021b; }
.page-checkout label, .page-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* .label-text gehört neben seine Checkbox/Radio, nicht darüber — die generische
   label-Regel oben würde es sonst auf eine eigene Zeile zwingen. */
.page-checkout label.label-text, .page-group label.label-text { display: inline; font-weight: 400; margin-bottom: 0; }

/* ---- Group order pages (join / area / manage / configure / product select) ---- */
.shop-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shop-table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-group-results { list-style: none; margin: 0; padding: 0; }
.shop-group-results li { border-bottom: 1px solid var(--shop-border); }
.shop-group-results li:last-child { border-bottom: 0; }
.shop-group-results a { display: block; padding: 11px 2px; font-weight: 600; color: var(--shop-ink); }
.shop-group-results a:hover { color: var(--shop-brand); }

/* Manage view: access-code box + designed-product admin list */
.shop-group-code-box { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.shop-group-code-label { display: block; font-size: 12px; color: var(--shop-muted); text-transform: uppercase; letter-spacing: .04em; }
.shop-group-code { font-size: 24px; font-weight: 700; letter-spacing: .12em; color: var(--shop-brand-dark); }
.shop-group-code-box code { font-size: 13px; word-break: break-all; }
.shop-gp-admin-list { display: flex; flex-direction: column; gap: 10px; }
.shop-gp-admin-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #fff; border: 1px solid var(--shop-border); border-radius: 6px; }
.shop-gp-admin-item img,
.shop-gp-admin-noimg { width: 48px; height: 48px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.shop-gp-admin-noimg { display: flex; align-items: center; justify-content: center; background: var(--shop-brand-tint); color: var(--shop-brand-dark); font-weight: 700; }
.shop-gp-admin-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.shop-gp-admin-body span { font-size: 13px; color: var(--shop-muted); }

/* Public area: group-product card (own fields, not a catalog product) */
.shop-gp-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--shop-border); border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 30px; transition: box-shadow .2s ease; }
.shop-gp-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.shop-gp-card-media { position: relative; aspect-ratio: 1 / 1; background: #f6f7f9; }
.shop-gp-card-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-gp-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: 700; color: #cfd6de; }
.shop-gp-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; flex: 1 1 auto; }
.shop-gp-card-title { font-weight: 600; color: var(--shop-ink); }
.shop-gp-card-price { font-size: 17px; font-weight: 700; color: var(--shop-brand-dark); }
.shop-gp-card-was { font-size: 13px; font-weight: 400; color: var(--shop-muted); text-decoration: line-through; margin-right: 6px; }
.shop-gp-order-form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.shop-gp-variants { border: 0; margin: 0; padding: 0; }
.shop-gp-variants legend { font-size: 12px; font-weight: 600; color: var(--shop-muted); margin-bottom: 6px; }
.shop-gp-variant-options { display: flex; flex-wrap: wrap; gap: 6px; }
.page-group .shop-gp-variant { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 9px; font-size: 13px; font-weight: 400; border: 1px solid var(--shop-border); border-radius: 5px; cursor: pointer; }
.page-group .shop-gp-variant.is-oos { opacity: .5; cursor: not-allowed; }
.shop-gp-qty { display: flex; align-items: center; gap: 10px; }
.page-group .shop-gp-qty label { margin: 0; }
.shop-gp-qty input { width: 80px; }

/* ---- Account pages (profile / addresses / orders / order detail) ---- */
.page-account label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.page-account .shop-checkout-block h6 { font-weight: 700; margin-bottom: 8px; }
.shop-order-totals { max-width: 420px; margin-left: auto; }
.shop-total-row { display: flex; justify-content: space-between; gap: 24px; padding: 7px 0; border-bottom: 1px solid var(--shop-border); }
.shop-total-row:last-child { border-bottom: 0; }
.shop-total-grand { font-weight: 700; font-size: 17px; color: var(--shop-brand-dark); border-top: 2px solid var(--shop-border); margin-top: 4px; padding-top: 11px; }

/* ---- Status badge colour buckets (orders, groups, history) ---- */
.badge[data-status] { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.5; background: #eee; color: #555; }
.badge[data-status="active"] { background: #e6f6ec; color: #1c6b3a; }
.badge[data-status="disabled"] { background: #fdecec; color: #a12626; }
.badge[data-status="pending"] { background: #fff5e0; color: #8a5a00; }

/* ---- Blog / guide list ---- */
.shop-blog-intro { color: var(--shop-muted); margin-top: 6px; max-width: 720px; }
.shop-blog-card { height: 100%; margin-bottom: 30px; border: 1px solid var(--shop-border); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.shop-blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.09); transform: translateY(-3px); }
.shop-blog-card-link { display: block; color: inherit; }
.shop-blog-card-link:hover { color: inherit; }
.shop-blog-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--shop-brand-tint); overflow: hidden; }
.shop-blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-blog-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 800; color: var(--shop-brand); font-family: 'Raleway', sans-serif; }
.shop-blog-card-body { padding: 16px 18px 20px; }
.shop-blog-card-date { display: block; font-size: 12px; color: var(--shop-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.shop-blog-card-title { font-size: 18px; font-weight: 700; color: var(--shop-ink); margin-bottom: 8px; }
.shop-blog-card-excerpt { font-size: 14px; color: var(--shop-muted); line-height: 1.6; margin-bottom: 12px; }
.shop-blog-card-more { font-size: 13px; font-weight: 600; color: var(--shop-brand-dark); }

/* ---- Blog / guide article ---- */
.shop-article { max-width: 780px; margin: 0 auto; }
.shop-article-header { margin-bottom: 22px; }
.shop-article-date { display: block; font-size: 13px; color: var(--shop-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.shop-article-lead { font-size: 18px; color: var(--shop-muted); line-height: 1.6; margin-top: 12px; }
.shop-article-image { width: 100%; border-radius: 8px; margin-bottom: 24px; }
.shop-article-body { font-size: 16px; line-height: 1.8; color: var(--shop-ink); }
.shop-article-body p { margin-bottom: 18px; }
/* Gliederung eines Ratgebers — Google liest die Struktur an den Überschriften ab, und der
   Leser überfliegt daran. Beides spricht gegen eine Wand aus Absätzen. */
.shop-article-body h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.3;
    color: var(--shop-ink);
    margin: 38px 0 14px;
}
.shop-article-body h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--shop-ink);
    margin: 28px 0 10px;
}
.shop-article-body h2:first-child,
.shop-article-body h3:first-child { margin-top: 0; }
.shop-article-body ul,
.shop-article-body ol { margin: 0 0 18px 22px; padding: 0; }
.shop-article-body li { margin-bottom: 8px; }
.shop-article-body a { color: var(--shop-brand-dark); text-decoration: underline; }
.shop-article-body a:hover { color: var(--shop-brand); }
.shop-article-body strong { color: var(--shop-ink); font-weight: 700; }

/* Handlungsaufruf: als Schaltfläche, damit er nicht als weiterer Link untergeht. */
.shop-article-body .shop-article-cta { margin: 30px 0; }
.shop-article-body .shop-article-cta a {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 8px;
    background: var(--shop-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.shop-article-body .shop-article-cta a:hover {
    background: var(--shop-brand-dark);
    color: #fff;
    transform: translateY(-1px);
}
.shop-article-back a { font-weight: 600; color: var(--shop-brand-dark); }

/* ---- Product image gallery at end of description (zoomable, own IDs) ---- */
.shop-desc-gallery { max-width: 460px; margin: 0 auto; }
.zoom-area #gallery-desc a { display: inline-block; width: 70px; height: 70px; border: 1px solid #e6e6e6; margin: 0 5px 10px; outline: 0; cursor: pointer; }
.zoom-area #gallery-desc a img { width: 100%; height: auto; }
.zoom-area #gallery-desc a.active { border: 2px solid var(--shop-brand); }

/* ---- Große Produktbeschreibung (Langtext) unten ---- */
.shop-long-desc { max-width: 860px; margin: 0 auto; font-size: 16px; line-height: 1.8; color: var(--shop-ink); }
.shop-long-desc p { margin-bottom: 18px; }

/* ---- Configurator controls moved into the right buy column ---- */
.shop-config-section { margin: 4px 0 10px; }
.shop-config-section .sf-zone-controls { max-width: 100%; }
.shop-config-section .sf-zone-controls * { max-width: 100%; box-sizing: border-box; }

/* ---- Product variant attribute buttons (Farbe/Größe/… als klickbare Buttons) ---- */
.shop-attr-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
.shop-attr-label { display: block; font-size: 13px; font-weight: 600; color: var(--shop-ink); margin-bottom: 7px; }
.shop-attr-options { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-attr-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--shop-ink); background: #fff; border: 1.5px solid var(--shop-border); border-radius: 6px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.shop-attr-btn:hover { border-color: var(--shop-brand); }
.shop-attr-btn.is-selected { border-color: var(--shop-brand); background: var(--shop-brand-tint); color: var(--shop-brand-dark); }
.shop-attr-btn.is-oos { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.shop-attr-btn.is-oos:hover { border-color: var(--shop-border); }
.shop-attr-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }

/* ---- Catalog listing (shared: category + search) ---- */
.shop-listing-sidebar .title-name { font-size: 15px; }
/* Collapsible sidebar sections (category list starts collapsed; facets start open). */
.shop-collapsible-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.shop-collapsible-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-left: 10px; flex-shrink: 0; opacity: .55; }
.shop-collapsible.is-collapsed .shop-collapsible-caret { transform: rotate(-45deg); }
.shop-collapsible.is-collapsed .shop-collapsible-body { display: none; }
.shop-listing-filter { margin-top: 10px; }
.shop-price-slider { margin: 16px 5px 20px; }
.shop-price-inputs { display: flex; gap: 12px; }
.shop-price-inputs label { flex: 1; font-size: 12px; color: var(--shop-muted); display: flex; flex-direction: column; gap: 4px; }
.shop-price-inputs input { width: 100%; padding: 6px 8px; border: 1px solid var(--shop-border); border-radius: 4px; }
.shop-filter-actions { margin: 18px 0 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.shop-filter-reset { font-size: 13px; color: var(--shop-muted); }
.shop-filter-reset:hover { color: var(--shop-brand); }
.shop-result-count { font-size: 13px; color: var(--shop-muted); }
.shop-listing-empty { color: var(--shop-muted); }
.facet-filter-associates .shop-stars { display: inline-flex; vertical-align: middle; margin-right: 4px; }

/* ---- Legal content page ---- */
.shop-legal-content { max-width: 820px; line-height: 1.7; color: var(--shop-ink); }
.shop-legal-content h2 { font-size: 20px; margin: 26px 0 10px; }
.shop-legal-content h3 { font-size: 17px; margin: 20px 0 8px; }
.shop-legal-content p { margin-bottom: 14px; }
.shop-legal-content ul, .shop-legal-content ol { margin: 0 0 14px 20px; }
.shop-legal-content table { width: 100%; max-width: 820px; margin-bottom: 16px; border-collapse: collapse; }
.shop-legal-content th, .shop-legal-content td { padding: 8px 10px; border: 1px solid var(--shop-border); text-align: left; vertical-align: top; font-size: 14px; }
.shop-legal-content th { background: var(--shop-brand-tint, #eaf4fb); font-weight: 600; }

/* Anbieterangaben (Impressum/Datenschutz/Widerruf) — kommen aus den Stammdaten, nicht aus dem
   redaktionellen Text, und werden deshalb sichtbar als eigener Block abgesetzt. */
.shop-legal-seller {
    max-width: 820px;
    margin-bottom: 26px;
    padding: 18px 20px;
    border: 1px solid var(--shop-border);
    border-radius: 6px;
    background: var(--shop-bg-soft, #f7f9fb);
    line-height: 1.7;
}
.shop-legal-seller-name { margin: 0 0 4px; font-size: 16px; }
.shop-legal-seller-addr { margin: 0; color: var(--shop-ink); }
.shop-legal-seller-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 14px 0 0; }
.shop-legal-seller-list dt { font-weight: 600; color: var(--shop-muted); }
.shop-legal-seller-list dd { margin: 0; }
@media (max-width: 575px) {
    .shop-legal-seller-list { grid-template-columns: 1fr; gap: 0; }
    .shop-legal-seller-list dd { margin-bottom: 8px; }
}

/* ---- Order confirmation (thank-you) ---- */
.shop-oc-check { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; background: #e6f6ec; color: #1c6b3a; font-size: 34px; line-height: 66px; text-align: center; }

/* ---- Auth pages (login / register / forgot / reset) ---- */
.page-auth label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.shop-auth-card { max-width: 440px; margin: 0 auto; }
.shop-auth-card .shop-page-title { font-size: 24px; margin-bottom: 22px; }
.shop-auth-submit { width: 100%; margin-top: 8px; }
.page-auth p a { color: var(--shop-brand-dark); font-weight: 600; }

/* ---- Compare page (product-per-column matrix) ---- */
.shop-compare table { table-layout: fixed; }
.shop-compare th, .shop-compare td { vertical-align: middle; text-align: center; }
.shop-compare-label { text-align: left !important; font-weight: 600; color: var(--shop-ink); width: 180px; background: #fafafa; }
.shop-compare-head { padding-top: 18px !important; padding-bottom: 18px !important; }
.shop-compare-img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 12px; display: block; }
.shop-compare-ph { position: relative; width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 6px; font-size: 46px; }
.shop-compare-name { font-weight: 600; color: var(--shop-ink); margin-bottom: 12px; }
.shop-compare-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.shop-compare-old { display: block; font-size: 13px; color: var(--shop-muted); text-decoration: line-through; }
.shop-compare-sale { display: block; font-weight: 700; color: var(--shop-brand-dark); }

/* ---- Listing-Paginierung (Theme .pagination-area) ------------------------
   Das Groover-Markup kennt keinen Auslassungs-Zustand und geht von einer
   einzelnen Toolbar-Select aus — beides hier nachgezogen. */
.pagination-area .pagination-number ul > li.shop-page-gap > span {
    display: inline-block;
    padding: 0 8px;
    line-height: 34px;
    color: #999;
}
.page-bar .toolbar-sorter {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ---- Warenkorb: Produktbild + Titel als Link -----------------------------
   Das Theme stylt `.cart-anchor-image > a > img`. Zwei Dinge brachen das:
   das fehlende <a> (kein Link hinterlegt) und der <picture>-Wrapper aus der
   Bildoptimierung, der den direkten Kind-Selektor unterbricht. Beides hier
   abgefangen, damit das Bild nicht in voller Ableitungsgröße stehen bleibt. */
.cart-anchor-image > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.cart-anchor-image > a > picture { display: inline-flex; flex: none; }
.cart-anchor-image > a > picture > img,
.cart-anchor-image > a > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0;
    border-radius: 4px;
    background: #f6f8fa;
}
.cart-anchor-image > a > h6 {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    transition: color .15s;
}
.cart-anchor-image > a:hover > h6 { color: var(--shop-brand); }

@media (max-width: 767px) {
    .cart-anchor-image > a { flex-direction: column; align-items: center; gap: 6px; }
    .cart-anchor-image > a > h6 { text-align: center; }
}

/* ---- Kopf-Ausklappmenü: seitliches Überlaufen auf Handys -------------------
   `.g-dropdown` ist position:absolute mit left:0 und wird im geschlossenen
   Zustand nur über visibility:hidden ausgeblendet — verborgene Elemente belegen
   aber weiterhin Layoutfläche und verbreitern das Dokument. Das Konto-Menü hängt
   am rechten Rand der Kopfleiste, seine 200px ragten dort hinaus und machten die
   ganze Seite seitlich verschiebbar (gemessen: Dokument 440px bei 384px Bildschirm).
   Es klappt jetzt nach links auf und kann nie breiter als der Bildschirm werden. */
.shop-dropdown-right {
    left: auto;
    right: 0;
    width: 200px;
}
.g-dropdown {
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

/* ---- Entwurfs-Vorschau in Warenkorb und Kasse ---- */
.shop-cart-preview {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 4px;
    background: #f6f8fa;
    display: block;
}
.shop-preview-link { text-decoration: underline; }
.shop-co-item { display: flex; align-items: center; gap: 10px; }
.shop-co-preview { flex: none; line-height: 0; }
.shop-co-preview img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
    background: #f6f8fa;
}

/* ---- Entwurfs-Vorschau als Überlagerung ----------------------------------
   Eigenes Overlay statt des Bootstrap-Modals: die Vorschau soll auch dann
   funktionieren, wenn an der Reihenfolge der Theme-Skripte gedreht wird. */
.shop-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(16, 24, 32, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overscroll-behavior: contain;
}
.shop-preview-box {
    position: relative;
    /* KEIN display:flex hier: ein Flex-Element schrumpft wegen min-width:auto nicht unter
       seine Inhaltsbreite. Das 700px breite Vorschaubild hat die Box damit auf dem Handy
       aufgeblaeht statt sich zu verkleinern. Als Blockelement greift max-width am Bild. */
    display: block;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
}
.shop-preview-img {
    display: block;
    max-width: 100%;
    /* Platz für den Schließen-Knopf oberhalb lassen, damit er auf kleinen
       Bildschirmen nicht auf dem Bild klebt. */
    max-height: calc(100vh - 90px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.shop-preview-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 1;
    font-size: 26px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #14202a;
    cursor: pointer;
    padding: 0;
}
.shop-preview-close:hover { background: var(--shop-brand); color: #fff; }
.shop-preview-close:focus-visible { outline: 3px solid var(--shop-brand); outline-offset: 2px; }

@media (max-width: 575px) {
    .shop-preview-overlay { padding: 12px; }
    .shop-preview-img { max-height: calc(100vh - 76px); }
    .shop-preview-close { top: -42px; width: 36px; height: 36px; font-size: 23px; }
}

/* ---- Mini-Warenkorb: seitliches Scrollen auf Handys ----------------------
   Das Theme parkt das Panel im geschlossenen Zustand mit `right: -300px`
   ausserhalb des Sichtbereichs. Eine solche Positionierung vergroessert den
   scrollbaren Bereich des Dokuments — gemessen auf einem 384px-Geraet:
   Dokument 517px, alle Ueberhaenge waren Kinder des Panels.

   Statt es hinauszuschieben bleibt es jetzt an Ort und Stelle (right: 0) und
   wird per transform verschoben. Transformationen wirken rein optisch und
   erzeugen keinen zusaetzlichen Scrollbereich. Der Uebergang bleibt erhalten,
   laeuft aber ueber transform statt ueber right — das ist zudem fluessiger,
   weil der Browser dafuer kein Neu-Layout braucht. */
.mini-cart {
    right: 0;
    transform: translateX(100%);
    transition: transform .3s ease;
    /* Auf sehr schmalen Geraeten darf das Panel den Bildschirm nicht ueberragen. */
    max-width: 100vw;
}
.mini-cart-open .mini-cart {
    right: 0;
    transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    .mini-cart { transition: none; }
}

/* ---- Schutznetz gegen seitliches Scrollen --------------------------------
   Die konkreten Ursachen sind einzeln behoben (Konto-Dropdown, Mini-Warenkorb).
   Dies ist die Absicherung darunter: sollte irgendwo noch ein Element ueber den
   rechten Rand ragen, darf daraus kein horizontal verschiebbares Dokument werden.

   `clip` statt `hidden`: hidden macht das Element zu einem Scroll-Container und
   bricht damit `position: sticky` in Nachfahren; clip verhindert nur das Scrollen.
   Fuer aeltere Browser steht hidden als Rueckfall davor.

   Wichtig: Bereiche, die absichtlich seitlich scrollen (die Warenkorb-Tabelle in
   `.table-wrapper`), haben einen eigenen Scroll-Container und bleiben unberuehrt. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* Produkttitel in der Kasse als Link - erbt die Schriftgroesse der Ueberschrift,
   damit sich am Layout nichts aendert, faerbt sich aber beim Ueberfahren. */
.shop-co-title {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.shop-co-title:hover,
.shop-co-title:focus-visible { color: var(--shop-brand); text-decoration: underline; }

/* ---- PayPal-Zahlungs-Buttons in der Kasse ---- */
.sf-paypal-block { margin-top: 6px; }
.sf-paypal-slot { margin-bottom: 8px; }
.sf-paypal-status { margin: 6px 0 0; font-size: 13px; color: var(--shop-muted, #6b7d8a); min-height: 1.2em; }
.sf-paypal-status[data-state="error"] { color: #d0323a; font-weight: 600; }

/* ---- PayPal Express: Knopf im Warenkorb, Pruefseite ----
   Der Block im Warenkorb ist bewusst eine eigene, schmalere Karte: er ist eine Abkuerzung
   neben "Zur Kasse", kein zweiter gleichwertiger Weg. Ohne Breitenbegrenzung liefen die
   PayPal-Buttons ueber die halbe Seite. */
.sf-express-cart {
    max-width: 420px;
    margin-top: 10px;
    padding: 16px 18px 18px;
    border: 1px solid var(--shop-border);
    border-radius: 6px;
}
.sf-express-cart h6 { margin: 0 0 6px; }
.sf-express-cart .sf-field-hint { margin-bottom: 14px; }

/* Bisher unstyled — der Hinweis unter einem Feld soll kleiner und leiser sein als das
   Feld selbst. Wirkt auch auf den USt-IdNr.-Hinweis in der normalen Kasse. */
.sf-field-hint {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shop-muted);
}

/* Adresse aus dem PayPal-Konto — als Zitat abgesetzt, weil sie hier nicht bearbeitet
   werden kann und das sichtbar sein soll. */
.sf-express-address {
    font-style: normal;
    line-height: 1.7;
    padding: 12px 16px;
    border-left: 3px solid var(--shop-brand);
    background: var(--shop-brand-tint, #eaf4fb);
    border-radius: 0 6px 6px 0;
}

/* ---- Kasse: Zahlungsauswahl erst nach vollstaendiger Adresse ---- */
.sf-payment-locked-note {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-left: 3px solid var(--shop-brand);
    background: var(--shop-brand-tint, #eaf4fb);
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* =====================================================================================
   Kategoriemenü — Ausklappfeld der Unterkategorien
   =====================================================================================
   Das Theme liefert dafür nur ein weißes Rechteck mit fester Breite und eine schmucklose
   Linkliste. Hier bekommt es eine eigene Gestalt: Kopfzeile mit dem Namen der Oberkategorie,
   klar abgesetzte Einträge mit Hover-Fläche und ein Abschluss-Verweis in die Oberkategorie.

   Nur ab Desktop-Breite. Darunter ist das Menü ein Akkordeon; dort gilt die Theme-Regel
   (width: auto !important) und der Aufbau soll flach und schmal bleiben.
   ===================================================================================== */
@media (min-width: 991px) {
    .v-drop-right.shop-nav-drop {
        width: auto;
        min-width: 264px;
        max-width: 580px;
        padding: 0;                       /* Innenabstand übernehmen die Teilbereiche */
        border: 1px solid var(--shop-border);
        border-radius: 10px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
        overflow: hidden;
        /* Etwas Luft zum Menüeintrag, damit das Feld nicht angeklebt wirkt. Die Maus
           überquert die Lücke nicht — das Feld liegt weiterhin am selben <li>. */
        margin-left: 6px;
    }
    /* Der weiße Pfeil des Themes passt nicht mehr zur abgerundeten Fläche. */
    .v-drop-right.shop-nav-drop:before { content: none; }

    /* ---- Kopfzeile ---- */
    .shop-nav-drop-head {
        padding: 14px 22px 12px;
        background: linear-gradient(135deg, var(--shop-brand-tint), #ffffff);
        border-bottom: 1px solid var(--shop-border);
    }
    .shop-nav-drop-title {
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .02em;
        color: var(--shop-ink);
    }

    /* ---- Liste der Unterkategorien ---- */
    .shop-nav-drop .shop-nav-sublist {
        margin: 0;
        padding: 10px 12px;
        list-style: none;
    }
    .shop-nav-drop.is-wide .shop-nav-sublist {
        column-count: 2;
        column-gap: 8px;
    }
    .shop-nav-drop .shop-nav-sublist > li {
        break-inside: avoid;              /* Eintrag nicht über den Spaltenumbruch reißen */
        margin: 0;
    }
    .shop-nav-drop .shop-nav-sublist > li > a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 12px;
        border-radius: 7px;
        font-size: 14px;
        line-height: 1.35;
        color: var(--shop-muted);
        transition: background-color .15s ease, color .15s ease;
    }
    /* Punkt vor dem Eintrag: markiert die Zeile, ohne eine Aufzählung zu behaupten. */
    .shop-nav-drop .shop-nav-sublist > li > a:before {
        content: "";
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--shop-border);
        transition: background-color .15s ease, transform .15s ease;
    }
    .shop-nav-drop .shop-nav-sublist > li > a:hover {
        background: var(--shop-brand-tint);
        color: var(--shop-brand-dark);
    }
    .shop-nav-drop .shop-nav-sublist > li > a:hover:before {
        background: var(--shop-brand);
        transform: scale(1.5);
    }

    /* ---- Abschluss: in die Oberkategorie ---- */
    .shop-nav-drop-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 22px;
        border-top: 1px solid var(--shop-border);
        background: #fafbfc;
        font-size: 13px;
        font-weight: 600;
        color: var(--shop-brand-dark);
    }
    .shop-nav-drop-all i { font-size: 13px; transition: transform .15s ease; }
    .shop-nav-drop-all:hover { background: var(--shop-brand); color: #fff; }
    .shop-nav-drop-all:hover i { transform: translateX(3px); }

    /* Ohne Unterkategorien besteht das Feld nur aus Kopf und Abschluss — dann darf der
       Abschluss keine zweite Trennlinie direkt unter der ersten ziehen. */
    .shop-nav-drop-head + .shop-nav-drop-all { border-top: 0; }
}

/* ==========================================================================
   Warenkorb und Kasse am Finger
   --------------------------------------------------------------------------
   Gemessen auf einem 412-px-Gerät: die Mengenangabe war 98x36 px, „Ändern" und
   „Entfernen" 45x33 bzw. 43x33, und sämtliche 16 Adressfelder standen auf 14 px
   Schrift. Am Monitor ist davon nichts zu bemerken.

   Die Regeln hängen bewusst an `pointer: coarse` und nicht an der Fensterbreite.
   Ein schmales Fenster am Rechner wird mit der Maus bedient und braucht keine
   Fingermaße; ein Tablet mit 1024 px Breite dagegen schon.
   ========================================================================== */
@media (pointer: coarse) {
    /* Safari auf dem iPhone zoomt in die Seite hinein, sobald ein Feld mit einer
       Schrift unter 16 px den Fokus bekommt — und zoomt danach nicht von selbst
       zurück. Auf der Kasse heißt das: ab dem ersten Adressfeld sitzt der Kunde
       in einer vergrößerten Seite fest. 16 px verhindern das. */
    .page-cart input,
    .page-cart select,
    .page-cart textarea,
    .page-checkout input,
    .page-checkout select,
    .page-checkout textarea {
        font-size: 16px;
    }

    /* Mengenfeld und die Knöpfe daneben. min-height statt height, damit ein
       längerer Text den Knopf weiterhin wachsen lässt. */
    .page-cart input[type="number"],
    .page-cart input[type="text"],
    .page-cart button,
    .page-cart .button,
    .page-checkout button,
    .page-checkout .button {
        min-height: 44px;
    }

    /* Auswahl zwischen Privat- und Geschäftskunde: die Schaltfläche selbst ist
       13x13 px groß. Anklickbar ist das ganze Etikett, das war aber nur 20 px
       hoch — eine breite, sehr flache Zeile. */
    .page-checkout label {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* Die Auswahlfelder selbst dürfen ruhig größer sein als die Voreinstellung
       des Browsers. */
    .page-checkout input[type="radio"],
    .page-checkout input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-height: 0;
    }

    /* „Ändern" und „Entfernen" tragen nur ein Symbol und waren deshalb schmaler
       als hoch. */
    .page-cart button,
    .page-checkout button {
        min-width: 44px;
    }

    /* Das Plus und das Minus an der Mengenangabe waren 10x27 und 6x27 Pixel groß —
       mit dem Finger praktisch nicht zu treffen. Sie liegen absolut in der
       Mengenangabe, deshalb muss das Feld selbst breiter werden und innen Platz
       für beide lassen, sonst stünde die Zahl unter den Schaltflächen.
       Die Regeln des Themes stehen auf `.minus-a` allein; `.page-cart` davor
       genügt, um sie zu überschreiben. */
    .page-cart .quantity .quantity-text-field {
        font-size: 16px;
        width: 132px;
        height: auto;
        min-height: 44px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .page-cart .minus-a,
    .page-cart .plus-a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 44px;
        font-size: 22px;
    }
    .page-cart .minus-a { left: 1px; }
    .page-cart .plus-a { right: 1px; }
}

/* Verweise auf die weiteren gestalteten Seiten eines Entwurfs. Ein Shirt kann vorne UND hinten
   bedruckt sein; vorher war nur die erste Seite abrufbar. */
.shop-preview-lead { margin-right: .35rem; color: #6b7684; font-size: .8125rem; }
.shop-cart-sub .shop-preview-link + .shop-preview-link { margin-left: .5rem; }
.shop-co-views { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .35rem; font-size: .8125rem; }