/* =====================================================================
   BongoBong — Rasta Design · bb--Komponenten-Schicht
   Ziel: templates/Sweet/themes/sweet/bb-rasta.css   (löst bb-hiphop.css ab)
   Tokens: --bb-* aus sweet.css (kompiliert aus sass/_variables.scss).
   Namespace-Regel (THEME-MAP §5): alles Eigene unter bb-, BEM mit __.
   Vendor-Anker nur die live verifizierten: .productbox-Kette, .ribbon,
   .wishlist, #jtl-nav-wrapper, ul.nav-icons, #footer, #copyright,
   body[data-page="18"] (Home).
   ===================================================================== */

/* ---------- Utilities ---------- */
.bb-stripe { height: 6px; background: var(--bb-stripe); }
.bb-stripe--thin { height: 3px; }
.bb-kicker {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bb-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.bb-kicker::before { content: ""; width: 26px; height: 5px; border-radius: 2px; flex: none; background: var(--bb-stripe); }
.bb-disp {
  font-family: var(--bb-font-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.04; margin: 0;
}
.bb-mark { display: inline-block; padding: .01em .14em; margin-inline: -.04em; border-radius: .14em; transform: rotate(-1.4deg); }
.bb-mark--g { background: var(--bb-g); color: var(--bb-bg); }
.bb-mark--y { background: var(--bb-y); color: var(--bb-ink); }
.bb-mark--r { background: var(--bb-r); color: var(--bb-bg); }
.bb-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.bb-section { padding-block: clamp(56px, 7vw, 88px); }
.bb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.bb-section-head h2 { font-size: clamp(30px, 4.4vw, 52px); }
.bb-section-head .bb-link {
  font-family: var(--bb-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid var(--bb-y); padding-bottom: 3px; white-space: nowrap; text-decoration: none; color: inherit;
}
.bb-section-head .bb-link:hover { color: var(--bb-g); border-color: var(--bb-g); }

/* ---------- Buttons (Pill + Mono, Dummy .btn) ---------- */
.btn, .bb-btn {
  font-family: var(--bb-font-mono); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px;
}
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; padding: 15px 24px; border: 0; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.bb-btn--ink { background: var(--bb-ink); color: var(--bb-bg); }
.bb-btn--ink:hover { background: var(--bb-g); color: #fff; }
.bb-btn--gold { background: var(--bb-y); color: var(--bb-ink); }
.bb-btn--gold:hover { transform: translateY(-1px); }
.bb-btn--ghost { border: 1.5px solid var(--bb-line); color: var(--bb-ink); background: none; }
.bb-btn--ghost:hover { border-color: var(--bb-ink); }

/* ---------- Gold-Marquee (Topbar, Block layout-header-branding-top-bar) ---------- */
.bb-marquee { background: var(--bb-y); color: var(--bb-ink); overflow: hidden; white-space: nowrap; }
.bb-marquee__track { display: inline-flex; animation: bb-marq 28s linear infinite; }
.bb-marquee__seq { display: inline-flex; }
.bb-marquee__seq span {
  font-family: var(--bb-font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 0;
}
.bb-marquee__seq span::after { content: "★"; margin-inline: 22px; opacity: .45; }
@keyframes bb-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bb-marquee__track { animation: none; } }

/* ---------- Header-Anker (verifiziert: #jtl-nav-wrapper, ul.nav-icons) ---------- */
#jtl-nav-wrapper .nav-link { font-family: var(--bb-font-mono); text-transform: uppercase; letter-spacing: .05em; }
ul.nav-icons .badge { background: var(--bb-r); color: #fff; font-family: var(--bb-font-mono); }
/* FlexNav (.bb-fn-*) wird separat in plugins/bb_frontend/frontend/css/flexnav.css umgestellt. */

/* ---------- Produktkachel (.productbox-Kette, Werte = Dummy .rcard) ---------- */
.productbox.productbox-column {
  position: relative; background: var(--bb-surface);
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  padding: 12px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.productbox.productbox-column:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); }
.productbox .productbox-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* v4: NICHT auf .square scopen — im OPC-Kontext fehlt die Klasse. Plus
   Remake-Transform-Gotcha neutralisieren (img.first/.second werden mit
   translate(-50%,-50%) zentriert; ohne top/left-Reset hängt das Bild
   135px außerhalb der Kachel — dokumentiertes v2.10-Rezept). */
.productbox .productbox-image {
  border-radius: var(--bb-radius-sm); overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 12px;
  background: radial-gradient(115% 95% at 50% 20%, #fff 0%, var(--bb-bg-2) 58%, #edeadd 100%);
}
.productbox .productbox-image .inner,
.productbox .productbox-image picture {
  display: flex; width: 100%; height: 100%; position: static;
}
.productbox .productbox-image img {
  width: 100%; height: 100%; object-fit: contain; padding: 10%;
  position: static !important; transform: none !important;
  transition: none !important; inset: auto !important;
}
.productbox .productbox-image img.second,
.productbox .productbox-image.second-wrapper,
.productbox .productbox-onhover { display: none !important; }
.productbox .productbox-ribbon.ribbon,
.productbox .ribbon {
  font-family: var(--bb-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; transform: rotate(-2deg);
}
.productbox .wishlist.badge {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92); /* Fallback für Browser ohne color-mix */
  background: color-mix(in oklab, var(--bb-surface), transparent 8%);
  border: 1px solid var(--bb-line); display: grid; place-items: center; transition: .18s;
}
.productbox .wishlist.badge:hover { transform: scale(1.08); }
.productbox .wishlist.badge.on, .productbox .wishlist.badge.active { background: var(--bb-r); color: #fff; border-color: transparent; }
.productbox .manufacturer {
  font-family: var(--bb-font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bb-muted);
}
.productbox .productbox-title a {
  font-size: 14.5px; line-height: 1.3; font-weight: 600; color: inherit; text-decoration: none;
}
.productbox .productbox-price { font-family: var(--bb-font-mono); font-weight: 700; font-size: 17px; color: var(--bb-ink); }
.productbox .bb-card__pricerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.productbox .bb-card__add.basket-details-add-to-cart {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bb-ink); color: var(--bb-bg);
  display: grid; place-items: center; flex: none; border: 0; padding: 0; transition: .18s;
}
.productbox .bb-card__add.basket-details-add-to-cart:hover { background: var(--bb-g); color: #fff; }

/* ---------- Home-Sektionen (body[data-page="18"], Markup: Sweet/layout/index.tpl) ---------- */
.bb-hero .bb-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bb-hero h1 { font-size: clamp(44px, 7vw, 92px); line-height: .98; }
.bb-hero__sub { max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--bb-ink-2); margin: 22px 0 28px; }
.bb-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.bb-hero__facts { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 36px; }
.bb-hero__facts .n { font-family: var(--bb-font-mono); font-weight: 700; font-size: 22px; }
.bb-hero__facts .l { font-family: var(--bb-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-muted); }
.bb-hero__frame { border-radius: var(--bb-radius-lg); overflow: hidden; border: 1.5px solid var(--bb-line); }
.bb-hero__frame img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .bb-hero .bb-wrap { grid-template-columns: 1fr; } }

.bb-usp { border-block: 1px solid var(--bb-line); background: var(--bb-bg-2); }
.bb-usp .bb-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 22px; }
.bb-usp__item { display: flex; align-items: center; gap: 12px; }
.bb-usp__ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.bb-usp__item:nth-child(3n+1) .bb-usp__ring { background: var(--bb-g); }
.bb-usp__item:nth-child(3n+2) .bb-usp__ring { background: var(--bb-y); color: var(--bb-ink); }
.bb-usp__item:nth-child(3n)   .bb-usp__ring { background: var(--bb-r); }
.bb-usp__item strong { display: block; font-size: 14px; }
.bb-usp__item span { font-size: 12.5px; color: var(--bb-muted); }
@media (max-width: 900px) { .bb-usp .bb-wrap { grid-template-columns: 1fr 1fr; } }

.bb-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bb-cat { border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; background: var(--bb-surface); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.bb-cat:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); }
.bb-cat__media { display: block; aspect-ratio: 16 / 10; background: var(--bb-bg-2); }
.bb-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-cat__meta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.bb-cat__idx { font-family: var(--bb-font-mono); font-weight: 700; color: var(--bb-muted); }
.bb-cat strong { display: block; font-size: 16px; }
.bb-cat small { color: var(--bb-muted); }
@media (max-width: 820px) { .bb-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 360px) { .bb-cats__grid { grid-template-columns: 1fr; } }

.bb-manifesto__panel { background: #12351f; color: #f2f0e4; border-radius: var(--bb-radius-lg); overflow: hidden; position: relative; }
.bb-manifesto__panel::before { content: ""; display: block; height: 6px; background: var(--bb-stripe); }
.bb-manifesto__inner { padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 64px); position: relative; z-index: 2; }
.bb-manifesto__inner .bb-kicker { color: rgba(242, 240, 228, .65); }
.bb-manifesto__inner h2 { font-size: clamp(30px, 4.6vw, 60px); max-width: 20ch; }
.bb-manifesto__inner p { max-width: 500px; color: rgba(242, 240, 228, .78); margin: 22px 0 30px; }
.bb-manifesto__stats { display: flex; gap: clamp(20px, 4vw, 56px); margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(242, 240, 228, .16); flex-wrap: wrap; }
.bb-manifesto__stats .n { font-family: var(--bb-font-mono); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); color: var(--bb-y); }
.bb-manifesto__stats .l { font-family: var(--bb-font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 240, 228, .6); margin-top: 4px; }
.bb-manifesto__deco { position: absolute; right: -50px; bottom: -90px; font-family: var(--bb-font-disp); font-size: 330px; color: rgba(242, 240, 228, .045); line-height: 1; z-index: 1; pointer-events: none; user-select: none; }

.bb-brands__wall { display: flex; flex-wrap: wrap; gap: 12px; }
.bb-brands__wall a {
  flex: 1 1 calc(16.66% - 12px); min-width: 132px; border: 1.5px solid var(--bb-line); border-radius: 999px;
  padding: 18px 14px; display: grid; place-items: center; font-family: var(--bb-font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; color: var(--bb-ink-2);
  transition: .2s; background: var(--bb-surface); text-decoration: none;
}
.bb-brands__wall a:hover { color: var(--bb-ink); border-color: var(--bb-ink); transform: translateY(-3px) rotate(-.5deg); }

.bb-newsletter__frame { border-radius: var(--bb-radius-lg); padding: 5px; background: var(--bb-stripe); }
.bb-newsletter__inner {
  background: var(--bb-surface); border-radius: calc(var(--bb-radius-lg) - 4px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: clamp(32px, 5vw, 56px);
}
.bb-newsletter__inner h2 { font-size: clamp(26px, 3.5vw, 42px); }
.bb-newsletter__inner p { color: var(--bb-ink-2); margin: 12px 0 0; }
.bb-newsletter__fine { font-size: 12px; color: var(--bb-muted); }
@media (max-width: 760px) { .bb-newsletter__inner { grid-template-columns: 1fr; } }

/* ---------- Footer (Remake #footer/#copyright, Boxen aus DB) ---------- */
/* Roast-M11: Rasta-Streifen direkt AM Footer (::before) statt tpl-Override —
   das frühere footer.tpl entfällt damit komplett (weniger aktive Overrides). */
#footer::before { content: ""; display: block; height: 6px; background: var(--bb-stripe); }
#footer { background: var(--bb-ink); color: rgba(253, 252, 247, .68); }
#footer a { color: rgba(253, 252, 247, .68); }
#footer a:hover { color: #fdfcf7; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer .h5 {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fdfcf7;
}
#copyright { background: var(--bb-ink); color: rgba(253, 252, 247, .5); border-top: 1px solid rgba(253, 252, 247, .14); }

/* ---------- OPC-Produkt-Rails (taProductFeed, .opc-ProductStream) ----------
   Kacheln kommen über productlist/item_box.tpl (isOPC, class='thumbnail') —
   bereits gestylt. Hier nur Rhythmus + Sektionskopf für den OPC-Baustein
   „Freier eigener Inhalt“ (Markup-Snippet: theme/README.md §OPC). */
body[data-page="18"] .opc-ProductStream { margin-bottom: clamp(40px, 5vw, 64px); }
/* Safety-Net (V14): bildlose Produkte auf der Home ausblenden (wie bb-hiphop;
   inkl. lazysizes data-src, solange src noch Platzhalter ist) */
body[data-page="18"] .productbox:has(img[src*="keinBild"]),
body[data-page="18"] .productbox:has(img[data-src*="keinBild"]) { display: none; }
.bb-opc-head { max-width: 1280px; margin: clamp(48px, 6vw, 72px) auto 32px; padding-inline: clamp(16px, 4vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bb-opc-head h2 { font-size: clamp(30px, 4.4vw, 52px); }
/* Slick-Pfeile der Slider-Variante (mobil erzwungen) auf Ink/Grün */
.opc-product-slider .slick-arrow { background: var(--bb-ink); color: var(--bb-bg); border-radius: 50%; }
.opc-product-slider .slick-arrow:hover { background: var(--bb-g); }

/* =====================================================================
   2b: Globale Komponenten (Coverage-Review 2026-07-14, Findings F1–F14;
   Selektoren am Repo-Mirror verifiziert — docs/design/rasta-coverage-review.md)
   ===================================================================== */

/* F1 — EIN CTA-Schema: Primary = Ink, Hover Grün (Login, Warenkorb,
   Checkout-Einstieg #cart-checkout-btn, Filter — überall gleich) */
.btn-primary {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background: var(--bb-g); border-color: var(--bb-g); color: #fff;
}

/* F2/F8 — Sekundär-/Outline-Buttons als Ghost („Zum Artikel", „Jetzt
   registrieren", Subkategorie-Pills). Ausnahme: Mengen-Stepper bleiben flächig. */
.btn-secondary, .btn-outline-secondary, .btn-outline-primary {
  background: none; border: 1.5px solid var(--bb-line); color: var(--bb-ink);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle {
  background: none; border-color: var(--bb-ink); color: var(--bb-ink);
  box-shadow: none;
}
.form-counter .btn-secondary, .form-counter .btn-secondary:hover {
  border: 0; background: var(--bb-bg-2); color: var(--bb-ink);
}

/* F5 — Produkt-Slider überall (PDP „Ähnliche", Basket, mobile OPC-Rails,
   Boxen tplscope=box, X-Selling-Modal tplscope=half — Roast-M5):
   Karten-Look + Flex-/Höhen-Kette (Roast-M6) für item_slider-Kacheln.
   Wrapper: .carousel.slick-type-{product|box|half} (snippets/product_slider.tpl) */
.carousel.slick-type-product .productbox,
.carousel.slick-type-box .productbox,
.carousel.slick-type-half .productbox {
  position: relative; background: var(--bb-surface);
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  padding: 12px; height: 100%;
  display: flex; flex-direction: column;
}
.carousel.slick-type-product .productbox .productbox-inner,
.carousel.slick-type-box .productbox .productbox-inner,
.carousel.slick-type-half .productbox .productbox-inner {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.carousel.slick-type-product .productbox .product-box,
.carousel.slick-type-box .productbox .product-box,
.carousel.slick-type-half .productbox .product-box {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.carousel.slick-type-product .productbox .item-slider-price,
.carousel.slick-type-box .productbox .item-slider-price,
.carousel.slick-type-half .productbox .item-slider-price {
  margin-top: auto; padding-top: 8px;
}
.slick-arrow { background: var(--bb-ink); border-radius: 50%; }
.slick-arrow:hover, .slick-arrow:focus { background: var(--bb-g); }
.slick-arrow::before { color: var(--bb-bg); opacity: 1; }

/* F6 — Warenkorb Modal-Sidebar (cart_type=modal-sidebar, #cartModal) */
#cartModal .modal-content { background: var(--bb-bg); border: 0; border-radius: 0; }
#cartModal .modal-header, #cartModal .modal-footer { border-color: var(--bb-line); }
#cartModal .modal-header .modal-title {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .1em; font-size: 15px;
}
#cartModal table.dropdown-cart-items td,
#cartModal table.dropdown-cart-items th { border-color: var(--bb-line-2); }
#cartModal .cart-items-name a { font-weight: 600; text-decoration: none; }

/* F7 — Kategorien-Baum (linke PLP-Sidebar, boxes/box_categories.tpl) */
.box-categories .box-normal-link {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink);
}
.box-categories .nav-panel .nav-link { font-size: 14px; }
.box-categories .nav-panel .nav-link:hover,
.box-categories .nav-panel .nav-link.active { color: var(--bb-g); }

/* F8 — Unterkategorie-Karten (productlist/header.tpl .sub-categories) */
.subcategories-image { border-radius: var(--bb-radius-sm); }

/* F9 — Kachel: Flex-Kette durchreichen (margin-top:auto der Preiszeile
   wirkt sonst nicht) + Lieferzeit-Zeile einordnen */
.productbox-column .productbox-inner > .row { flex: 1 1 auto; }
.productbox-column .productbox-inner > .row > [class*="col"] {
  display: flex; flex-direction: column; min-width: 0;
}
.productbox-column form.form-basket, .productbox-column .product-box {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.productbox .item-delivery-status {
  font-family: var(--bb-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-muted); margin-top: 6px;
}

/* F11 — Consent-Banner: Hierarchie (nur „Alle akzeptieren" gefüllt) */
.consent-btn {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .05em; border-radius: 999px;
}
#consent-banner-btn-all {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
}
#consent-banner-btn-all:hover { background: var(--bb-g); border-color: var(--bb-g); color: #fff; }

/* F12 — Breadcrumb (Mono-Feinschliff, Token-Fallback ist Basis) */
#breadcrumb .breadcrumb-item, #breadcrumb .breadcrumb-item a {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
}

/* F13 — Tabs (PDP Beschreibung/Bewertungen) */
.nav-tabs .nav-link {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--bb-ink-2);
}
.nav-tabs .nav-link.active { color: var(--bb-ink); border-bottom: 3px solid var(--bb-g); }

/* F14 — USP mobil einspaltig */
@media (max-width: 480px) { .bb-usp .bb-wrap { grid-template-columns: 1fr; } }

/* ---------- PLP: Filter + Toolbar (verifizierte Anker, THEME-MAP §4) ---------- */
.productlist-filter-list .filter-label,
.box-filter-characteristics .box-title, .box[class*="box-filter"] .box-title {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink);
}
.snippets-filter-list-item, .btn-filter-box {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; border: 1.5px solid var(--bb-line); border-radius: 999px;
}
.snippets-filter-list-item:hover, .btn-filter-box:hover { border-color: var(--bb-ink); }
.pagination .page-link { font-family: var(--bb-font-mono); border-radius: 999px; margin-inline: 3px; border-color: var(--bb-line); color: var(--bb-ink); }
.pagination .page-item.active .page-link { background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg); }

/* ---------- PDP: Kaufbox + Preis (verifizierte Anker) ---------- */
.price_wrapper .price { font-family: var(--bb-font-mono); font-weight: 700; }
.price_wrapper .price_label { font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-muted); }
.product-buy #add-to-cart, .product-buy .btn-primary {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
  border-radius: 999px; font-family: var(--bb-font-mono); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.product-buy #add-to-cart:hover, .product-buy .btn-primary:hover { background: var(--bb-g); border-color: var(--bb-g); color: #fff; }
#quantity-grp.form-counter .btn, #quantity-grp.form-counter .form-control,
#quantity-grp.form-counter .input-group-text { background: var(--bb-bg-2); border-color: transparent; font-family: var(--bb-font-mono); }
#quantity-grp.form-counter { border: 1.5px solid var(--bb-line); border-radius: 999px; overflow: hidden; }

/* =====================================================================
   2c: Ideen-Runde (Codex-Sparring 2026-07-14) — A11y/Kontrast + Mobile
   ===================================================================== */

/* I4 — AA-Kontrast: kleiner Text auf muted-text; kleine farbige Flächen
   (Ribbons, Hover-Zustände mit weißem Text) auf Action-Varianten.
   Große Deko-Flächen (bb-mark, USP-Ringe, Streifen) bleiben Original. */
.bb-kicker { color: var(--bb-muted-text); }
.productbox .manufacturer { color: var(--bb-muted-text); }
.bb-cat small { color: var(--bb-muted-text); }
.bb-hero__facts .l, .bb-usp__item span { color: var(--bb-muted-text); }
.ribbon-3, .ribbon-8 { background: var(--bb-g-action); color: #fff; }
.ribbon-2, .ribbon-10 { background: var(--bb-r-action); color: #fff; }
.productbox .ribbon::before { display: none; } /* Fahnen-Ecke passt nicht zur Pill */
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active { background: var(--bb-g-action); border-color: var(--bb-g-action); }
.bb-btn--ink:hover { background: var(--bb-g-action); }
.productbox .bb-card__add.basket-details-add-to-cart:hover { background: var(--bb-g-action); }
.slick-arrow:hover, .slick-arrow:focus { background: var(--bb-g-action); }

/* I8 — Fokus sichtbar (Tokens setzen box-shadow:none) + Touchziele >= 44px */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bb-ink); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bb-y) !important;
}
.productbox .wishlist.badge { width: 44px; height: 44px; }
.productbox .bb-card__add.basket-details-add-to-cart { width: 44px; height: 44px; }
.slick-arrow { min-width: 44px; min-height: 44px; }

/* I6 — Mobile: schneller zum ersten Produkt (kompaktere Sektionen) */
@media (max-width: 600px) {
  .bb-section { padding-block: 40px; }
  .bb-cat__media { aspect-ratio: 4 / 3; }
  .bb-cat__meta { padding: 10px 12px; }
  .bb-hero__facts { display: none; }
}

/* =====================================================================
   2d: Owner-Entscheid I3 — Kachel-Kaufzeile: Mengen-Stepper + Icon-Add
   ===================================================================== */
.bb-card__pricerow { flex-wrap: wrap; row-gap: 8px; }
.bb-card__buy { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.productbox .bb-card__qty.form-counter {
  width: auto; flex-wrap: nowrap; align-items: stretch;
  border: 1.5px solid var(--bb-line); border-radius: 999px;
  background: var(--bb-bg-2); overflow: hidden; height: 40px;
}
.productbox .bb-card__qty .btn,
.productbox .bb-card__qty .btn-secondary,
.productbox .bb-card__qty .btn-secondary:hover,
.productbox .bb-card__qty .btn-secondary:focus {
  border: 0; background: none; color: var(--bb-ink);
  width: 30px; height: 100%; padding: 0;
  display: grid; place-items: center; font-size: 11px; box-shadow: none;
}
.productbox .bb-card__qty input.quantity {
  flex: 0 0 32px; width: 32px; height: 100%; border: 0; background: none;
  text-align: center; font-family: var(--bb-font-mono); font-weight: 700;
  font-size: 13px; padding: 0; appearance: textfield; -moz-appearance: textfield;
}
.productbox .bb-card__qty input.quantity::-webkit-outer-spin-button,
.productbox .bb-card__qty input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bb-cart-ico { width: 21px; height: 21px; transform: rotate(-6deg); transition: transform .18s ease; }
.productbox .bb-card__add:hover .bb-cart-ico { transform: rotate(0deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .bb-cart-ico { transition: none; } }

/* =====================================================================
   Cutover-Übergang (Roast-B1-Brücke)
   ===================================================================== */
/* Kontaktleiste auf der Home ausblenden — bewusste Design-Entscheidung
   (wie Alt-Design/Dummy; auf Unterseiten bleibt sie sichtbar). */
body[data-page="18"] > .contact-bar-wrapper { display: none !important; }

/* =====================================================================
   2e: Live-QA-Hotfixes (Cutover-Abend 2026-07-14)
   ===================================================================== */
/* Slick-Pfeile: Vendor setzt background:transparent mit höherer Spezifität
   (_carousel.scss:345) — hier mit gleicher Tiefe + späterer Ladung gewinnen */
.carousel .slick-arrow, .slick-slider-other .slick-arrow { background: var(--bb-ink); }
.carousel .slick-arrow:hover, .slick-slider-other .slick-arrow:hover { background: var(--bb-g-action); }
.carousel .slick-prev::before, .carousel .slick-next::before,
.slick-slider-other .slick-prev::before, .slick-slider-other .slick-next::before {
  color: var(--bb-bg); opacity: 1;
}
/* Warenkorb-/Modal-Stepper: nicht umbrechen, kompakt */
.basket .form-counter, #cartModal .form-counter {
  display: inline-flex; flex-wrap: nowrap; width: auto; max-width: 140px;
}
.basket .form-counter .btn, #cartModal .form-counter .btn { width: 34px; padding: 0; }
.basket .form-counter input.quantity, #cartModal .form-counter input.quantity {
  flex: 0 0 44px; width: 44px; text-align: center;
}

/* (TEMP-OPC-BRIDGE entfernt 2026-07-15 — OPC-Rebuild kPage=8 ist publiziert.)
   OPC-Sektionsköpfe liegen im boxed FlexContainer → dessen .container
   liefert Breite/Padding, bb-opc-head nicht doppelt einrücken: */
.opc-Container .bb-opc-head { max-width: none; padding-inline: 0; }