/** Shopify CDN: Minification failed

Line 464:40 Unexpected "*"
Line 1951:19 Unexpected "*"

**/
/* ============================================================
   BOOSTERBOX.CH — Custom Theme Styles
   Shopify Dawn Theme Override
   ============================================================ */

/* ── CSS VARIABLES (Brand Tokens) ─────────────────────────── */
:root {
  /* Gold from "BOOSTER" logo text */
  --bb-gold: #c6912e;
  --bb-gold-light: #e8b84a;
  --bb-gold-bright: #f5ce60;
  --bb-gold-subtle: rgba(198, 145, 46, 0.1);
  --bb-gold-border: rgba(198, 145, 46, 0.25);

  /* Charcoal from "BOX" logo text */
  --bb-charcoal: #3a3d4a;
  --bb-charcoal-light: #5a5d6e;

  /* Backgrounds */
  --bb-bg: #0c0b10;
  --bb-bg-card: #13121a;
  --bb-bg-elevated: #1c1b26;

  /* Text */
  --bb-text: #f0efe8;
  --bb-text-muted: #908e9e;
  --bb-text-dim: #5a5870;

  /* Borders */
  --bb-border: #28273a;

  /* Status */
  --bb-success: #34d399;
  --bb-danger: #ef4444;

  /* Gradients */
  --bb-gradient-gold: linear-gradient(135deg, #c6912e 0%, #e8b84a 50%, #c6912e 100%);
  --bb-gradient-gold-warm: linear-gradient(135deg, #b07a1e 0%, #e8b84a 40%, #f5ce60 100%);
  --bb-gradient-dark: linear-gradient(180deg, #0c0b10 0%, #141320 100%);

  /* Spacing */
  --bb-container: 1320px;
  --bb-gap: 24px;
  --bb-radius: 14px;
  --bb-radius-sm: 8px;
  --bb-radius-lg: 20px;

  /* Typography */
  --bb-font-display: 'Playfair Display', Georgia, serif;
  --bb-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── DAWN THEME OVERRIDES ─────────────────────────────────── */
/* Override Dawn's default light-theme CSS variables so the
   entire page (header, footer, between sections) matches
   our dark BoosterBox branding. */

/* CRITICAL: Override Dawn's color scheme at EVERY level.
   Dawn generates inline styles from theme settings that
   set --color-background to white. We must override with
   !important at the root AND on every color-scheme class. */

:root,
body,
.color-background-1,
.color-background-2,
.color-scheme-1,
.color-scheme-2,
[class*="color-scheme-"],
[class*="color-background-"] {
  --color-base-text: 240, 239, 232 !important;
  --color-base-background-1: 12, 11, 16 !important;
  --color-base-background-2: 19, 18, 26 !important;
  --color-base-solid-button-labels: 12, 11, 16 !important;
  --color-base-outline-button-labels: 232, 184, 74 !important;
  --color-base-accent-1: 198, 145, 46 !important;
  --color-base-accent-2: 232, 184, 74 !important;
  --color-shadow: 0, 0, 0 !important;
  --color-border: 40, 39, 58 !important;

  /* Dawn's NEW variable names (current Dawn versions) */
  --color-background: 12, 11, 16 !important;
  --color-foreground: 240, 239, 232 !important;
  --color-button: 198, 145, 46 !important;
  --color-button-text: 12, 11, 16 !important;
  --color-secondary-button: 12, 11, 16 !important;
  --color-secondary-button-text: 232, 184, 74 !important;
  --color-link: 232, 184, 74 !important;
  --color-badge-foreground: 240, 239, 232 !important;
  --color-badge-background: 19, 18, 26 !important;
  --color-badge-border: 40, 39, 58 !important;
  --color-background-contrast: 28, 27, 38 !important;

  /* Force dark background on body */
  background-color: rgb(12, 11, 16) !important;
  color: rgba(240, 239, 232, 0.85) !important;
}

/* Override Dawn's generated gradient-background GLOBALLY.
   Dawn's .gradient class sets background-image via --gradient-background
   variable. Even with matching --color-background values, the gradient
   creates a visible layer that appears slightly different from the body bg.
   Solution: Kill ALL gradient backgrounds and force transparent on
   every color-scheme container so the body bg (rgb(12,11,16)) shines through. */
[class*="color-scheme-"],
[class*="color-background-"],
.gradient,
.gradient.color-scheme-1,
.gradient.color-scheme-2,
.gradient.color-scheme-3,
.gradient.color-scheme-4,
.gradient.color-scheme-5 {
  --gradient-background: none !important;
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Re-apply body background (the ONLY element that should have the dark bg) */
body,
html {
  background-color: rgb(12, 11, 16) !important;
  background: rgb(12, 11, 16) !important;
}

/* Force ALL Dawn content containers to transparent.
   Dawn's base CSS can set backgrounds on .shopify-section,
   .content-for-layout, and template-specific classes like .template-404.
   These don't always have .gradient or color-scheme-* classes. */
.content-for-layout,
.content-for-layout > .shopify-section,
.shopify-section > div:not([class*="bb-"]),
.template-404,
.template-404 .page-width,
.template-search,
.template-cart,
.template-list-collections,
.template-customers,
.template-blog,
.template-article,
.template-page .shopify-section,
[class*="section-template-"][class*="-padding"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── HIDE DAWN'S DEFAULT HEADER + ANNOUNCEMENT BAR ────────── */
/* Dawn uses {% sections 'header-group' %} which outputs a
   wrapper div. We hide EVERYTHING inside it. */

/* Method 1: Hide the section group wrapper */
.shopify-section-group-header-group {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Method 2: Hide individual Dawn header sections by their IDs */
[id^="shopify-section-"][class*="header-group"] {
  display: none !important;
}

/* Method 3: Hide Dawn's known header elements directly */
.header-wrapper,
.announcement-bar-section,
.announcement-bar,
.section-header .header {
  display: none !important;
}

/* Method 4: Hide Dawn's "Welcome to our store" text */
.announcement-bar__message {
  display: none !important;
}

/* ── ENSURE OUR BB SECTIONS ARE VISIBLE ────────────────────── */
/* Our sections are NOT in the header-group, so the above
   hiding rules don't affect them. But just to be safe: */

.shopify-section:has(.bb-header),
.bb-header-section {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 500 !important;
  position: sticky !important;
  top: 0 !important;
}

.shopify-section:has(.bb-announcement),
.bb-announcement-section {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 50 !important;
  position: relative;
}

/* Hide Dawn's localization form / currency selector in header-group */
.shopify-section-group-header-group localization-form,
.shopify-section-group-header-group .disclosure-has-popup,
.shopify-section-group-header-group .header__icon--localization {
  display: none !important;
}


/* Hide Dawn's "Welcome to our store" announcement if still visible */
.announcement-bar__message,
.utility-bar {
  display: none !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */

/* Footer wrapper — THE dark background */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group .footer {
  background-color: var(--bb-bg-card) !important;
  background: var(--bb-bg-card) !important;
  color: var(--bb-text) !important;
}

/* Top border only on footer itself */
.shopify-section-group-footer-group .footer {
  border-top: 1px solid var(--bb-border) !important;
}

/* ALL child elements — TRANSPARENT, no own background */
.footer-block,
.footer-block__details-content,
.footer [class*="color-scheme-"],
.shopify-section-group-footer-group [class*="color-scheme-"],
.footer .color-scheme-1,
.footer .color-scheme-2,
.footer [style*="background"],
.footer-block[style],
.footer .footer__content-top,
.footer .footer__blocks-wrapper {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}

/* Footer headings — gold, uppercase */
.footer__title,
.footer-block__heading,
h2.footer__title {
  color: var(--bb-gold-light) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--bb-font-body) !important;
  margin-bottom: 16px !important;
}

/* First footer block = Brand column with BOOSTERBOX wordmark */
.footer-block:first-child h2.footer-block__heading {
  font-size: 24px !important;
  font-weight: 800 !important;
  font-family: var(--bb-font-display) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  background: var(--bb-gradient-gold-warm) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 12px !important;
}

/* Brand description text */
.footer-block:first-child .footer-block__details-content p,
.footer-block:first-child .rte p {
  color: var(--bb-text-dim) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  max-width: 280px !important;
}

/* Space between brand column and menu columns */
.footer-block:first-child {
  padding-right: 40px !important;
}


/* Footer text */
.footer__content-bottom,
.footer__copyright,
.footer p,
.footer .copyright__content {
  color: var(--bb-text-dim) !important;
}

/* Footer links — clean list */
.footer a,
.footer__list-item a {
  color: var(--bb-text-muted) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: color 0.2s !important;
}

.footer a:hover,
.footer__list-item a:hover {
  color: var(--bb-gold-light) !important;
}

/* Footer menu list spacing */
.footer-block__details-content ul,
.footer__list-social {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-block__details-content li {
  margin-bottom: 10px !important;
}

/* Footer bottom bar (copyright, payment icons) */
.footer__content-bottom {
  border-top: 1px solid var(--bb-border) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}

.footer__copyright a {
  color: var(--bb-gold-light) !important;
}

/* Footer newsletter form */
.footer .newsletter-form__field-wrapper,
.footer .field,
.footer .newsletter-form {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
}

/* Footer newsletter title spacing ("Subscribe to our emails") */
.footer .footer__title,
.shopify-section-group-footer-group h2 {
  margin-bottom: 16px !important;
}

/* Footer newsletter input spacing */
.footer .newsletter-form {
  margin-top: 8px !important;
}

.footer .newsletter-form__field-wrapper input,
.footer .field__input,
.footer input[type="email"] {
  background: var(--bb-bg-elevated) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.footer .newsletter-form__field-wrapper input::placeholder,
.footer .field__input::placeholder,
.footer input::placeholder {
  color: var(--bb-text-dim) !important;
}

.footer .newsletter-form__button,
.footer .field__button {
  color: var(--bb-gold-light) !important;
}

/* Footer payment icons */
.footer__payment,
.footer .payment-icons {
  opacity: 0.7;
}

/* Footer social links */
.footer .social-icons a,
.footer .list-social a {
  color: var(--bb-text-muted) !important;
}

.footer .social-icons a:hover,
.footer .list-social a:hover {
  color: var(--bb-gold-light) !important;
}

/* Dawn cart icon badge */
.cart-count-bubble {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
}

/* Dawn buttons — gold accent */
.button--primary,
.shopify-challenge__button {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
}

.button--secondary {
  border-color: var(--bb-gold-border) !important;
  color: var(--bb-gold-light) !important;
}

/* Dawn input fields */
.field__input,
.search__input,
.form__input {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
}

.field__input:focus,
.search__input:focus {
  border-color: var(--bb-gold) !important;
  box-shadow: 0 0 0 2px var(--bb-gold-subtle) !important;
}

/* Dawn footer — additional styling */

.footer__title {
  color: var(--bb-gold-light) !important;
  letter-spacing: 0.08em !important;
}

/* Dawn collection/product pages background */
.template-collection,
.template-product,
.template-cart,
.template-search,
.template-blog,
.template-article,
.template-page,
.template-list-collections,
.template-customers-login,
.template-customers-register,
.template-customers-account,
.template-customers-order,
.template-404,
.template-index,
main#MainContent {
  background: var(--bb-gradient-dark) !important;
}

/* Override Dawn's .content-for-layout background */
.content-for-layout {
  background: transparent !important;
}

/* Fix Dawn's default large spacing between sections on subpages */
.template-collection .section-template--*,
.template-product .section-template--*,
.template-collection .shopify-section--main-collection,
.template-product .shopify-section--main-product {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hide Dawn's empty image banner / slideshow on collection pages */
.template-collection .shopify-section .banner--empty,
.template-collection .shopify-section .image-banner:empty,
.template-collection .shopify-section .slideshow:empty,
.template-collection .collection-hero--no-image {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Reduce Dawn's default section-to-section spacing on subpages */
.template-collection .content-for-layout > .shopify-section + .shopify-section,
.template-product .content-for-layout > .shopify-section + .shopify-section {
  margin-top: 0 !important;
}

/* Dawn's spacing-sections variable override for dark theme */
.template-collection,
.template-product,
.template-cart,
.template-search {
  --spacing-sections-desktop: 24px;
  --spacing-sections-mobile: 16px;
}

/* Dawn section spacing resets for our custom sections */
.shopify-section:has(.bb-announcement),
.shopify-section:has(.bb-hero),
.shopify-section:has(.bb-trust),
.shopify-section:has(.bb-section),
.shopify-section:has(.bb-newsletter) {
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   DAWN SUBPAGE OVERRIDES
   Product, Collection, Cart, Search, Blog, Account
   ═══════════════════════════════════════════════════════════ */

/* ── PRODUCT PAGE ─────────────────────────────────────────── */

/* Product title */
.product__title h1,
.product__title {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

/* Product price */
.price-item,
.price-item--regular,
.price .money {
  color: var(--bb-text) !important;
  font-weight: 800 !important;
}

.price-item--sale {
  color: var(--bb-danger) !important;
}

.price-item--compare {
  color: var(--bb-text-dim) !important;
}

/* Sale badge on product page */
.badge {
  background: var(--bb-danger) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

/* Sold-out badge — muted style */
.badge--bottom-left[aria-hidden],
.card__badge .badge[class*="sold"],
.badge.color-inverse {
  background: var(--bb-bg-elevated) !important;
  color: var(--bb-text-muted) !important;
  border: 1px solid var(--bb-border) !important;
  font-weight: 600 !important;
}

/* Product image in cards */
.card__media img,
.card .media img,
.card__media .media img {
  border-radius: 8px 8px 0 0 !important;
  object-fit: contain !important;
}

/* Vendor name */
.product__text .caption-with-letter-spacing {
  color: var(--bb-gold-light) !important;
  letter-spacing: 0.1em !important;
}

/* Product description text */
.product__description,
.product__description p,
.product__info-container {
  color: var(--bb-text-muted) !important;
}

.product__info-container h2,
.product__info-container h3 {
  color: var(--bb-text) !important;
}

/* Product media / image gallery */
.product__media-wrapper,
.product__media-item {
  background: transparent !important;
  border-color: var(--bb-border) !important;
  border-radius: var(--bb-radius) !important;
}

/* Force consistent background on entire product section — 
   Dawn generates IDs like "MainProduct-template--123__main",
   so we use [id^="MainProduct"] attribute selector */
[id^="MainProduct"] product-info,
[id^="MainProduct"],
product-info.gradient,
product-info.gradient.color-scheme-1,
product-info.gradient.color-scheme-2,
product-info[class*="color-scheme-"],
product-info[class*="section-template-"],
.template-product product-info,
.template-product .product__column-sticky {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  --gradient-background: none !important;
  --color-background: 12, 11, 16 !important;
}

/* Bildcontainer selbst: weisser Hintergrund für transparente PNGs — 
   wie auf Collection-Karten und Pre-Order-Section */
.template-product .product-media-container,
.template-product .product__media-item .product-media-container,
.product-media-container.media-fit-contain,
.product-media-container.constrain-height,
.template-product .product__media,
.template-product .product .media--transparent {
  background: #f4f4f6 !important;
  background-color: #f4f4f6 !important;
  background-image: none !important;
  --gradient-background: none !important;
  border-radius: var(--bb-radius) !important;
}

/* Sicherstellen dass Bild im weissen Container passt */
.template-product .product__media-item img,
.template-product .product__media img {
  mix-blend-mode: normal !important;
}

/* Produktbild-Spalte kompakter auf Desktop */
@media (min-width: 990px) {
  .template-product .product__media-wrapper {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: 40px !important;
  }
}

/* Einheitliches 1:1 Aspect-Ratio für Produktbild-Container.
   Moderne aspect-ratio Property überschreibt Dawn's --ratio komplett. */
.template-product .product__media-item,
.template-product .product-media-container,
.template-product .product-media-container[style*="--ratio"],
.template-product .product__media,
.template-product .product__media.media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
}

/* Dawn's padding-top Trick auf ::before entfernen (Fallback für ältere Browser) */
.template-product .product-media-container::before,
.template-product .product__media::before {
  display: none !important;
  content: none !important;
  padding: 0 !important;
}

/* Bild im quadratischen Container zentriert einpassen */
.template-product .product-media-container img,
.template-product .product__media img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Inventory-Indikator ("10 auf Lager") — dezenter */
.product__inventory {
  font-size: 13px !important;
  color: var(--bb-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product__inventory::before {
  width: 6px !important;
  height: 6px !important;
}

.product__inventory.product__inventory--high-inventory::before,
.product__inventory[data-inventory="high"]::before {
  background: #34d399 !important;
}

.product__inventory.product__inventory--low-inventory::before,
.product__inventory[data-inventory="low"]::before {
  background: var(--bb-gold) !important;
}

.product__media-toggle {
  background: var(--bb-bg-elevated) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

/* Variant selectors (radio pills + dropdowns) */
.variant-input .form__label,
fieldset legend {
  color: var(--bb-text) !important;
}

.variant-input input[type="radio"] + label {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text-muted) !important;
}

.variant-input input[type="radio"]:checked + label {
  border-color: var(--bb-gold) !important;
  color: var(--bb-gold-light) !important;
  box-shadow: 0 0 0 1px var(--bb-gold) !important;
}

/* Quantity selector */
.quantity__input {
  background: var(--bb-bg-elevated) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.quantity__button {
  color: var(--bb-text-muted) !important;
}

.quantity__button:hover {
  color: var(--bb-gold-light) !important;
}

/* Add to cart button — gold */
.product-form__submit,
.product-form__submit.button--primary {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 20px rgba(198, 145, 46, 0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.product-form__submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(198, 145, 46, 0.4) !important;
}

.product-form__submit[disabled] {
  background: var(--bb-bg-elevated) !important;
  color: var(--bb-text-dim) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Pickup availability */
.pickup-availability-preview {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text-muted) !important;
}

/* Product accordion / collapsible tabs */
.product__accordion .accordion__title,
.product__accordion summary {
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.product__accordion .accordion__content,
.product__accordion details[open] .accordion__content {
  color: var(--bb-text-muted) !important;
}

/* Share button */
.share-button {
  color: var(--bb-text-muted) !important;
}

.share-button:hover {
  color: var(--bb-gold-light) !important;
}

/* ── COLLECTION PAGE ──────────────────────────────────────── */

/* Remove empty space from unused Dawn sections on subpages */
.template-collection .shopify-section:empty,
.template-product .shopify-section:empty {
  display: none !important;
}

/* Collection page main container */
.template-collection main#MainContent,
.template-product main#MainContent {
  padding-top: 0 !important;
}

/* Remove Dawn's default section top spacing on subpages */
.template-collection .shopify-section,
.template-product .shopify-section {
  margin-top: 0 !important;
}

/* Collection header / banner */
.collection-hero,
.collection-hero__inner {
  background: transparent !important;
}

.collection-hero__title,
.collection__title h1,
.collection__title,
h1.collection__title {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.collection__description,
.collection-hero__description,
.collection__description p,
.collection-hero__description p {
  color: var(--bb-text-muted) !important;
  max-width: none !important;
}

/* Collection text wrapper — full width */
.collection-hero__text-wrapper {
  max-width: none !important;
  width: 100% !important;
}

/* Collection banner — force transparent, kill gradient */
.collection-hero,
.collection-hero.gradient,
.collection-hero.color-scheme-1,
.collection-hero.color-scheme-1.gradient,
.collection-hero.color-scheme-2,
.collection-hero.color-scheme-2.gradient {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  --gradient-background: none !important;
  min-height: auto !important;
}

.collection-hero__inner,
.collection-hero__text-wrapper {
  background: transparent !important;
}

.collection-hero:empty,
.collection-banner:empty {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Collection page section (main-collection) */
.collection {
  padding-top: 24px !important;
}

/* ── Sort / Filter bar — konsistentes Pill-Design ────────── */

/* Container */
.facets-container {
  background: var(--bb-bg-card) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

/* Form: Haupt-Flex-Container mit Wrap */
.facets-container .facets__form {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  row-gap: 10px !important;
}

/* Wrapper unsichtbar machen — alle Kinder werden direkte Flex-Items des Form */
.facets-container #FacetsWrapperDesktop,
.facets-container .facets__wrapper {
  display: contents !important;
}

/* Filter-Pills: natürliche Breite, nicht wachsen */
.facets-container details.facets__disclosure,
.facets-container .facets__disclosure {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Sort-Block: rechts ausgerichtet */
.facets-container .facet-filters.sorting {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.facets-container .facet-filters__field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Active facets (Alle entfernen) */
.facets-container .active-facets-desktop {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Product Count: schrumpft nicht */
.facets-container .product-count {
  margin: 0 !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
}

/* "Filter:" und "Sortieren nach:" Labels */
.facets__heading,
.facet-filters__label,
.facet-filters__label label {
  color: var(--bb-text-dim) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ===== Filter Pills (TCG, Produkttyp, etc.) ===== */
details.facets__disclosure > summary,
.facets__summary {
  background: var(--bb-bg-elevated) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
  color: var(--bb-text) !important;
  padding: 7px 12px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  /* Unterstrich entfernen */
  text-decoration: none !important;
}

/* Inhalt der Filter-Pills: Label und Caret mit Abstand */
details.facets__disclosure > summary > div,
.facets__summary > div {
  display: inline-flex !important;
  align-items: center !important;
}

/* Dawn's Caret-SVG komplett ausblenden */
.facets__summary svg.icon-caret,
details.facets__disclosure > summary svg.icon-caret {
  display: none !important;
}

/* Neuen Caret als CSS-Pseudo-Element mit garantiertem Abstand */
details.facets__disclosure > summary > div::after,
.facets__summary > div::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* Caret rotiert bei offenem Filter */
details.facets__disclosure[open] > summary > div::after {
  transform: rotate(225deg) translateY(-2px) translateX(-2px);
  opacity: 1;
}

/* Unterstrich auch von inneren Elementen entfernen */
.facets__summary > div,
.facets__summary span,
details.facets__disclosure > summary > div,
details.facets__disclosure > summary span {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Hover */
details.facets__disclosure > summary:hover,
.facets__summary:hover {
  border-color: var(--bb-gold-border) !important;
  background: var(--bb-gold-subtle) !important;
  color: var(--bb-gold-light) !important;
}

/* Geöffneter Filter */
details.facets__disclosure[open] > summary {
  border-color: var(--bb-gold) !important;
  background: var(--bb-gold-subtle) !important;
  color: var(--bb-gold-light) !important;
}

/* Caret im Filter-Button (wird durch Pseudo-Element ersetzt, siehe oben) */

/* ===== Sort Dropdown — gleicher Stil wie Filter-Pills ===== */
select.select__select {
  background: var(--bb-bg-elevated) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
  color: var(--bb-text) !important;
  padding: 7px 30px 7px 12px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  height: auto !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

select.select__select:hover {
  border-color: var(--bb-gold-border) !important;
}

select.select__select:focus {
  border-color: var(--bb-gold) !important;
  box-shadow: 0 0 0 2px var(--bb-gold-subtle) !important;
  outline: none !important;
}

/* Native dropdown-Liste: dunkler Hintergrund, heller Text */
select.select__select option,
select option {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  font-weight: 400 !important;
}

select.select__select option:checked,
select option:checked {
  background-color: var(--bb-gold) !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

select.select__select option:hover,
select.select__select option:focus,
select option:hover,
select option:focus {
  background-color: var(--bb-gold-subtle) !important;
  color: #ffffff !important;
}

/* Sort field wrapper — transparent */
.facet-filters__field {
  background: transparent !important;
  border-color: transparent !important;
}

/* Sort dropdown: space for chevron inside box */
.facet-filters .select {
  position: relative;
}

.facet-filters select.select__select {
  min-width: 150px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.facet-filters .select .icon-caret,
.facet-filters .select .svg-wrapper {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

/* Chevron color */
.select .icon-caret {
  color: var(--bb-text-muted) !important;
}

/* Product count */
.product-count,
.product-count__text {
  color: var(--bb-text-dim) !important;
  font-weight: 500 !important;
}

/* Filter dropdown panels */
.facets__display {
  background: var(--bb-bg-card) !important;
  border: 1px solid var(--bb-gold-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  color: var(--bb-text-muted) !important;
  margin-top: 8px !important;
}

.facets__header { color: var(--bb-text-dim) !important; }
.facets__reset { color: var(--bb-gold-light) !important; }
.facets__selected { color: var(--bb-text-dim) !important; }

/* Price range inputs */
.facets__price .field__input {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
}

.facets__price .field__label,
.facets__price .field-currency {
  color: var(--bb-text-muted) !important;
}


/* Filter sidebar items */
.facets__display .facet-checkbox label,
.facets__item label {
  color: var(--bb-text-muted) !important;
}

/* Hover: Subtiler Gold-Hintergrund + heller Goldtext — NICHT weiss! */
.facets__display .facet-checkbox:hover,
.facets__display .facet-checkbox label:hover,
.facets__item label:hover,
.facets__list li:hover .facets__label,
.facets__list .facets__label:hover {
  background: var(--bb-gold-subtle) !important;
  color: var(--bb-gold-light) !important;
}

/* Hover auf der kompletten <li> Reihe */
.facets__list li.facets__item:hover {
  background: var(--bb-gold-subtle) !important;
}

.facets__list li.facets__item:hover .facets__label,
.facets__list li.facets__item:hover .facet-checkbox__text,
.facets__list li.facets__item:hover .facet-checkbox__text-label {
  color: var(--bb-gold-light) !important;
  background: transparent !important;
}

/* Deaktivierte Filter-Optionen (z.B. "Nicht vorrätig (0)") */
.facets__list .facets__label.disabled,
.facets__list .facet-checkbox.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.facets__list .facets__label.disabled:hover,
.facets__list li:has(.facets__label.disabled):hover {
  background: transparent !important;
  color: var(--bb-text-muted) !important;
}

.facet-checkbox input[type="checkbox"] {
  border-color: var(--bb-border) !important;
  background: var(--bb-bg-elevated) !important;
}

.facet-checkbox input[type="checkbox"]:checked {
  background: var(--bb-gold) !important;
  border-color: var(--bb-gold) !important;
}

/* Active filter tags */
.active-facets .active-facets__button,
.active-facets a {
  background: var(--bb-gold-subtle) !important;
  border-color: var(--bb-gold-border) !important;
  color: var(--bb-gold-light) !important;
  border-radius: var(--bb-radius-sm) !important;
}

/* Empty collection state */
.collection--empty,
.collection--empty p,
.template-collection .no-products,
.collection .title--primary + p {
  color: var(--bb-text-muted) !important;
  text-align: center !important;
}

.collection--empty a,
.collection--empty .link {
  color: var(--bb-gold-light) !important;
  text-decoration: underline !important;
}

/* Product grid cards on collection page */
.card-wrapper,
.card {
  background: var(--bb-bg-card) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius) !important;
  transition: all 0.3s ease !important;
}

.card-wrapper:hover .card,
.card:hover {
  border-color: var(--bb-gold-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-4px) !important;
}

.card__inner {
  background: var(--bb-bg-card) !important;
  border: none !important;
  border-radius: var(--bb-radius) !important;
  overflow: hidden !important;
}

.card__media,
.card .media {
  background: #f4f4f6 !important;
  border-radius: var(--bb-radius) var(--bb-radius) 0 0 !important;
  overflow: hidden !important;
}

/* Collection card equal-height alignment */
.card-wrapper {
  height: 100% !important;
}

.card-wrapper .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.card-wrapper .card > .card__inner {
  flex-shrink: 0 !important;
}

.card-wrapper .card > .card__content {
  padding: 14px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.card-wrapper .card > .card__content > .card__information {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.card-wrapper .card > .card__content > .card__information > .card__heading {
  flex: 1 !important;
}

.card-wrapper .card > .card__content .card-information {
  margin-top: auto !important;
}

.card__heading,
.card__heading a {
  color: var(--bb-text) !important;
  font-weight: 600 !important;
}

.card-information .price,
.card-information .price .money {
  color: var(--bb-text) !important;
  font-weight: 800 !important;
}

.card-information .price--on-sale .price-item--regular {
  color: var(--bb-text-dim) !important;
}

.card-information .price--on-sale .price-item--sale {
  color: var(--bb-danger) !important;
}

/* Release date badge on collection cards */
.bb-card-release {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-top: 8px;
  border: 1px solid var(--bb-gold-border);
  border-radius: 16px;
  font-size: 12px;
  color: var(--bb-gold-light);
  background: transparent;
  white-space: nowrap;
}

/* Card vendor */
.card__information .caption-with-letter-spacing {
  color: var(--bb-gold-light) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* Quick add on collection cards */
.quick-add__submit {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Pagination */
.pagination__list .pagination__item a,
.pagination__list .pagination__item span {
  color: var(--bb-text-muted) !important;
  border-color: var(--bb-border) !important;
}

.pagination__list .pagination__item--current span,
.pagination__list .pagination__item a:hover {
  background: var(--bb-gold) !important;
  color: var(--bb-bg) !important;
  border-color: var(--bb-gold) !important;
}

/* Grid view / List view toggle */
.collection-filters__item--count,
.collection-filters__field,
.collection-filters label {
  color: var(--bb-text-muted) !important;
}

/* Loading spinner */
.collection .loading__spinner,
.collection .loading-overlay {
  background: rgba(12, 11, 16, 0.7) !important;
}

/* ── CART PAGE & DRAWER ───────────────────────────────────── */

.cart,
.cart-drawer {
  background: var(--bb-bg-card) !important;
  color: var(--bb-text) !important;
}

.cart-drawer {
  border-left: 1px solid var(--bb-border) !important;
}

.cart__empty-text,
.cart-drawer__empty-text {
  color: var(--bb-text-muted) !important;
}

.cart-item,
.cart-drawer__item {
  border-color: var(--bb-border) !important;
}

.cart-item__name,
.cart-item__name a {
  color: var(--bb-text) !important;
  font-weight: 600 !important;
}

.cart-item__price .money,
.cart-item .price .money {
  color: var(--bb-text) !important;
}

.cart-item__details .product-option,
.cart-item .caption {
  color: var(--bb-text-muted) !important;
}

/* Cart-Item Bildcontainer: weisser Hintergrund wie Produktkarten */
.cart-item__media {
  background: transparent !important;
  border: none !important;
}

.cart-item__image-container {
  background: #f4f4f6 !important;
  border-radius: var(--bb-radius-sm) !important;
  border: 1px solid var(--bb-border) !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-item__image,
.cart-item__media img {
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Link-Overlay nicht als Block anzeigen (sonst graue Fläche darüber) */
.cart-item__link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  z-index: 1 !important;
}

/* Cart totals */
.totals,
.cart__footer,
.cart-drawer__footer {
  border-color: var(--bb-border) !important;
}

.totals__total,
.totals__total-value {
  color: var(--bb-text) !important;
  font-weight: 800 !important;
}

.totals__subtotal,
.totals__subtotal-value {
  color: var(--bb-text-muted) !important;
}

/* Checkout button */
.cart__checkout-button,
.cart-drawer__checkout-button {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(198, 145, 46, 0.3) !important;
}

.cart__checkout-button:hover,
.cart-drawer__checkout-button:hover {
  box-shadow: 0 8px 28px rgba(198, 145, 46, 0.4) !important;
}

/* Cart note */
.cart__note textarea {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
}

/* Remove / edit links in cart */
.cart-item__remove,
cart-remove-button a {
  color: var(--bb-text-dim) !important;
}

.cart-item__remove:hover {
  color: var(--bb-danger) !important;
}

/* ── SEARCH PAGE ──────────────────────────────────────────── */

.template-search .search__input {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
}

.template-search .search__button {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
}

/* Predictive search dropdown */
.predictive-search {
  background: var(--bb-bg-card) !important;
  border-color: var(--bb-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

.predictive-search__item {
  border-color: var(--bb-border) !important;
}

.predictive-search__item a {
  color: var(--bb-text) !important;
}

.predictive-search__item:hover {
  background: var(--bb-bg-elevated) !important;
}

.predictive-search__item .price .money {
  color: var(--bb-text) !important;
}

/* ── BLOG & ARTICLE PAGES ─────────────────────────────────── */

.article-card,
.blog-articles .card {
  background: var(--bb-bg-card) !important;
  border-color: var(--bb-border) !important;
}

.article-card:hover {
  border-color: var(--bb-gold-border) !important;
}

.article-card__title,
.article-card__title a {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.article-card__info,
.article-card__info * {
  color: var(--bb-text-muted) !important;
}

.article__title {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.article__content,
.article__content p {
  color: var(--bb-text-muted) !important;
  line-height: 1.7 !important;
}

.article__content h2,
.article__content h3 {
  color: var(--bb-text) !important;
}

.article__content a {
  color: var(--bb-gold-light) !important;
}

.article__comment {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-border) !important;
}

/* ── ACCOUNT PAGES (Login, Register, Orders) ──────────────── */

.customer {
  background: var(--bb-bg) !important;
}

.customer h1,
.customer h2 {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.customer .field label,
.customer label {
  color: var(--bb-text-muted) !important;
}

.customer table {
  color: var(--bb-text-muted) !important;
}

.customer table th {
  color: var(--bb-gold-light) !important;
  border-color: var(--bb-border) !important;
}

.customer table td {
  border-color: var(--bb-border) !important;
}

.customer .button {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
}

/* Global button border-radius — align all Dawn buttons with BB design */
.button,
button.button,
.shopify-payment-button button,
.shopify-payment-button .shopify-payment-button__button,
.product-form__submit,
.product-form__submit[disabled],
.customer button,
a.button,
.cart__checkout-button,
.form__submit,
button[name="add"],
[class*="button--"],
.stoq-button,
.stoq-notify-btn,
form[action="/cart/add"] button {
  border-radius: 10px !important;
  --buttons-radius: 10px !important;
  --buttons-radius-outset: 11px !important;
}

/* ── 404 PAGE ─────────────────────────────────────────────── */

.template-404 h1 {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.template-404 .button {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
}

/* ── MODALS & OVERLAYS ────────────────────────────────────── */

.modal__dialog,
.popup-modal__content,
.menu-drawer {
  background: var(--bb-bg-card) !important;
  color: var(--bb-text) !important;
}

.menu-drawer {
  border-right: 1px solid var(--bb-border) !important;
}

.menu-drawer__menu-item,
.menu-drawer a {
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.menu-drawer a:hover {
  color: var(--bb-gold-light) !important;
}

.menu-drawer__close-button {
  color: var(--bb-text-muted) !important;
}

/* ── BREADCRUMBS ──────────────────────────────────────────── */

.breadcrumbs a,
.breadcrumbs span {
  color: var(--bb-text-dim) !important;
}

.breadcrumbs a:hover {
  color: var(--bb-gold-light) !important;
}

/* ── GENERAL DAWN COMPONENTS ──────────────────────────────── */

/* Section headings throughout all pages */
.section-header__title,
.title,
h2.title {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

.section-header__link,
.full-unstyled-link {
  color: var(--bb-text-muted) !important;
}

.section-header__link:hover {
  color: var(--bb-gold-light) !important;
}

/* Horizontal rules */
hr {
  border-color: var(--bb-border) !important;
}

/* All links default */
a {
  color: var(--bb-gold-light);
  transition: color 0.2s;
}

a:hover {
  color: var(--bb-gold-bright);
}

/* Image banners / slideshow on subpages */
.banner,
.image-banner {
  border-radius: var(--bb-radius) !important;
  overflow: hidden !important;
}

/* Rich text sections */
.rich-text {
  color: var(--bb-text-muted) !important;
}

.rich-text h2 {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

/* Collapsible content / FAQ */
.collapsible-content summary,
.collapsible-content .accordion__title {
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.collapsible-content .accordion__content {
  color: var(--bb-text-muted) !important;
}

/* Newsletter section (Dawn default) */
.newsletter {
  background: var(--bb-bg-card) !important;
}

/* Contact form */
.contact .field__input,
.contact .field textarea,
.contact textarea,
.form .field__input,
.form textarea {
  background: var(--bb-bg-elevated) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius-sm) !important;
  color: var(--bb-text) !important;
}

.contact .field__input:focus,
.contact textarea:focus,
.form .field__input:focus,
.form textarea:focus {
  border-color: var(--bb-gold) !important;
  box-shadow: 0 0 0 2px var(--bb-gold-subtle) !important;
}

.contact .field__input::placeholder,
.contact textarea::placeholder,
.form .field__input::placeholder,
.form textarea::placeholder {
  color: var(--bb-text-dim) !important;
}

.contact .field__label,
.contact label,
.form .field__label,
.form label {
  color: var(--bb-text-muted) !important;
}

.contact .button,
.form .button,
.contact .btn,
.form__submit {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ── ALL PAGE TITLES (h1 on every page) ───────────────────── */
/* This fixes Kontakt, Katalog, Warenkorb, etc. page titles */
.template-page h1,
.template-contact h1,
.template-cart h1,
.template-collection h1,
.template-search h1,
.template-blog h1,
.template-article h1,
.template-list-collections h1,
.page-header h1,
.rte h1 {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

/* Page content text — brighter than --bb-text-muted for readability.
   Dawn uses rgba(var(--color-foreground), 0.75) for .rte text.
   We override BOTH the variable AND the direct color property. */
.template-page,
.template-page .shopify-section,
.template-page .page-width,
.template-contact,
.template-contact .shopify-section,
.template-contact .page-width {
  --color-foreground: 240, 239, 232 !important;
}

.template-page .rte,
.template-page .rte *,
.template-page p,
.template-page li,
.template-page td,
.template-page th,
.template-page span,
.template-contact .rte,
.template-contact .rte *,
.template-contact p,
.template-contact li,
.template-contact span,
.rte p,
.rte li,
.rte td,
.rte span:not([class]) {
  color: rgba(240, 239, 232, 0.85) !important;
}

/* Kill ALL Word/Office inline color styles — these use color: #333333 or rgb(0,0,0)
   which are invisible on dark backgrounds */
.rte [style*="color"],
.rte h2 [style*="color"],
.rte h3 [style*="color"],
.rte h4 [style*="color"],
.rte p [style*="color"],
.rte li [style*="color"],
.template-page [style*="color"],
.template-contact [style*="color"],
.rte .MsoNormal,
.rte .MsoNormal span {
  color: inherit !important;
}

/* RTE headings — full brightness (also override inline span colors) */
.template-page .rte h2,
.template-page .rte h2 span,
.template-page .rte h3,
.template-page .rte h3 span,
.template-page .rte h4,
.template-page .rte h4 span,
.template-contact .rte h2,
.template-contact .rte h2 span,
.template-contact .rte h3,
.template-contact .rte h3 span,
.rte h2,
.rte h2 span,
.rte h3,
.rte h3 span,
.rte h4,
.rte h4 span {
  color: var(--bb-text) !important;
}

/* Table headers on pages — slightly brighter */
.template-page th,
.rte th {
  color: var(--bb-text) !important;
}

/* Table borders on pages */
.template-page table,
.template-page td,
.template-page th,
.rte table,
.rte td,
.rte th {
  border-color: var(--bb-border) !important;
}

/* Links in page content */
.template-page a:not(.button),
.rte a:not(.button) {
  color: var(--bb-gold-light) !important;
  text-decoration: underline;
}

.template-page a:not(.button):hover,
.rte a:not(.button):hover {
  color: var(--bb-gold) !important;
}

/* ── CART EMPTY STATE ─────────────────────────────────────── */
.cart--empty-page .button,
.cart__empty-text + a,
.cart .button,
a.button[href*="collections"] {
  background: var(--bb-gradient-gold) !important;
  color: var(--bb-bg) !important;
  border: none !important;
  font-weight: 700 !important;
}

.cart--empty-page p,
.cart__empty-text {
  color: var(--bb-text-muted) !important;
}

.cart--empty-page h2,
.cart--empty-page h1 {
  color: var(--bb-text) !important;
}

/* "Hast du ein Konto?" text on cart page */
.cart__login-title {
  color: var(--bb-text) !important;
}

.cart__login-paragraph,
.cart__login-paragraph a {
  color: var(--bb-text-muted) !important;
}

.cart__login-paragraph a:hover {
  color: var(--bb-gold-light) !important;
}

/* ── GENERIC SHOPIFY SECTIONS ON SUBPAGES ─────────────────── */
/* Kill ALL white/light backgrounds from Dawn's color schemes */
.shopify-section {
  background: transparent !important;
}

/* Dawn adds color-scheme classes with inline background colors */
[class*="color-scheme-"] {
  background-color: rgb(12, 11, 16) !important;
  color: rgba(240, 239, 232, 0.85) !important;
}

/* Dawn's gradient class */
.gradient {
  background: var(--bb-gradient-dark) !important;
}

/* Any section with explicit background */
section[style*="background"],
div[style*="background"],
.section-template--*,
.content-for-layout {
  background-color: rgb(12, 11, 16) !important;
}

/* Keep our custom sections' backgrounds */
.shopify-section:has(.bb-trust),
.shopify-section:has(.bb-section--alt) {
  background: var(--bb-bg-elevated) !important;
}

/* Dawn's "rich text" sections on pages */
.rich-text__wrapper,
.rich-text__blocks {
  color: var(--bb-text-muted) !important;
}

/* Generic page content */
.main-page-title,
.page-title {
  color: var(--bb-text) !important;
  font-family: var(--bb-font-display) !important;
}

/* Dawn's "image with text" sections */
.image-with-text {
  background: var(--bb-bg-card) !important;
}

.image-with-text__content h2 {
  color: var(--bb-text) !important;
}

.image-with-text__content p {
  color: var(--bb-text-muted) !important;
}

/* Dawn's "multicolumn" section */
.multicolumn {
  background: transparent !important;
}

.multicolumn-card__info h3 {
  color: var(--bb-text) !important;
}

.multicolumn-card__info p {
  color: var(--bb-text-muted) !important;
}

/* Notification bar (e.g. "added to cart") */
.notification {
  background: var(--bb-bg-elevated) !important;
  border-color: var(--bb-gold-border) !important;
  color: var(--bb-text) !important;
}

/* ── BASE / RESET ─────────────────────────────────────────── */
body {
  background: var(--bb-gradient-dark) !important;
  background-color: rgb(12, 11, 16) !important;
  color: var(--bb-text) !important;
  font-family: var(--bb-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Dawn's body class selectors */
body.gradient {
  background: var(--bb-gradient-dark) !important;
  background-color: rgb(12, 11, 16) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: var(--bb-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(198, 145, 46, 0.4); }

/* Container */
.bb-container {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: 0 var(--bb-gap);
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes bb-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}

@keyframes bb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes bb-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bb-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── 1. ANNOUNCEMENT BAR ──────────────────────────────────── */
.bb-announcement {
  background: var(--bb-gradient-gold);
  color: #0c0b10;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 50;
}

.bb-announcement__track {
  display: flex;
  gap: 80px;
  white-space: nowrap;
  animation: bb-ticker 30s linear infinite;
}

.bb-announcement__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bb-announcement__divider {
  opacity: 0.35;
  font-size: 8px;
}

/* ── 2. HEADER ────────────────────────────────────────────── */
.bb-header {
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-border);
  position: relative;
  z-index: 500;
  transition: all 0.3s ease;
}

.bb-header--scrolled {
  background: rgba(12, 11, 16, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--bb-gold-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.bb-header__inner {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: 0 var(--bb-gap);
  display: flex;
  align-items: center;
  height: 68px;
  gap: 32px;
}

/* ── Header: Mobile Toggle ──────────────────────────── */
.bb-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--bb-text);
  cursor: pointer;
  padding: 8px;
  margin-left: -8px;
  flex-shrink: 0;
}

/* ── Header: Logo ───────────────────────────────────── */
.bb-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.bb-header__logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(198, 145, 46, 0.25));
}

.bb-header__logo-text {
  display: flex;
  flex-direction: column;
}

.bb-header__wordmark {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--bb-font-display);
  letter-spacing: -0.01em;
}

.bb-header__wordmark-booster {
  background: var(--bb-gradient-gold-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bb-header__wordmark-box {
  color: var(--bb-charcoal-light);
}

.bb-header__tagline {
  font-size: 9px;
  font-weight: 600;
  color: var(--bb-gold-light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Header: Desktop Navigation ─────────────────────── */
.bb-header__nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
}

.bb-header__nav-item {
  position: relative;
}

.bb-header__nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  color: var(--bb-text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--bb-font-body);
  white-space: nowrap;
  transition: color 0.2s;
  border-radius: var(--bb-radius-sm);
}

.bb-header__nav-link:hover,
.bb-header__nav-link--active {
  color: var(--bb-text);
}

.bb-header__nav-link--highlight {
  color: var(--bb-gold-light);
  font-weight: 600;
}

.bb-header__nav-link--sale {
  color: var(--bb-danger);
  font-weight: 700;
}

.bb-header__nav-link--sale:hover {
  color: #ff6666;
}

.bb-header__nav-chevron {
  opacity: 0.4;
  transition: transform 0.2s;
}

.bb-header__nav-item:hover .bb-header__nav-chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* ── Header: Dropdown ───────────────────────────────── */
.bb-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
  padding-top: 8px;
}

.bb-header__nav-item:hover .bb-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.bb-header__dropdown-inner {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(198, 145, 46, 0.06);
  display: flex;
  flex-direction: column;
}

.bb-header__dropdown-link {
  display: block;
  padding: 10px 14px;
  color: var(--bb-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--bb-radius-sm);
  transition: all 0.15s;
}

.bb-header__dropdown-link:hover,
.bb-header__dropdown-link--active {
  background: var(--bb-gold-subtle);
  color: var(--bb-gold-light);
}

/* ── Header: Actions (Search, Account, Cart) ────────── */
.bb-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bb-header__action {
  background: none;
  border: none;
  color: var(--bb-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--bb-radius-sm);
  transition: all 0.2s;
  text-decoration: none;
  position: relative;
}

.bb-header__action:hover {
  color: var(--bb-gold-light);
  background: var(--bb-gold-subtle);
}

.bb-header__cart {
  position: relative;
}

.bb-header__cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--bb-gradient-gold);
  color: var(--bb-bg);
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.bb-header__currency {
  display: none !important;
  /* Deaktiviert — hat keine Funktion. Im Theme Editor unter
     BB Header > "Währung anzeigen" deaktivieren, dann diese
     CSS-Regel entfernen, um sie bei Bedarf wieder zu zeigen. */
}

/* ── Search Overlay ─────────────────────────────────── */
.bb-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 11, 16, 0.92);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  overflow-y: auto;
}

.bb-search-overlay--open {
  opacity: 1;
  visibility: visible;
}

.bb-search-overlay__inner {
  width: 100%;
  max-width: 780px;
  padding: 0 var(--bb-gap);
  position: relative;
}

.bb-search-overlay__form {
  display: flex;
  position: relative;
}

.bb-search-overlay__input {
  width: 100%;
  padding: 18px 56px 18px 24px;
  background: var(--bb-bg-elevated);
  border: 2px solid var(--bb-gold-border);
  border-radius: var(--bb-radius);
  color: var(--bb-text);
  font-size: 18px;
  font-family: var(--bb-font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bb-search-overlay__input:focus {
  border-color: var(--bb-gold);
  box-shadow: 0 0 0 4px var(--bb-gold-subtle);
}

.bb-search-overlay__input::placeholder {
  color: var(--bb-text-dim);
}

.bb-search-overlay__submit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--bb-gold-light);
  cursor: pointer;
  padding: 4px;
}

.bb-search-overlay__close {
  position: absolute;
  top: -60px;
  right: var(--bb-gap);
  background: none;
  border: none;
  color: var(--bb-text-muted);
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s;
}

.bb-search-overlay__close:hover {
  color: var(--bb-text);
}

/* ── Predictive Search Results ─────────────────────── */
.bb-search-results {
  max-width: 780px;
  margin: 8px auto 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 var(--bb-gap);
}

.bb-search-results__section {
  padding: 14px 0;
  border-bottom: 1px solid var(--bb-border);
}

.bb-search-results__heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-gold-light);
  padding: 0 4px 10px;
}

.bb-search-results__collection {
  display: block;
  padding: 10px 4px;
  color: var(--bb-text-muted);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.15s;
}

.bb-search-results__collection:hover {
  color: var(--bb-gold-light);
}

.bb-search-results__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
  color: var(--bb-text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.bb-search-results__item:hover {
  background: var(--bb-bg-elevated);
}

.bb-search-results__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bb-bg-card);
  flex-shrink: 0;
}

.bb-search-results__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bb-search-results__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--bb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-search-results__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--bb-gold-light);
}

.bb-search-results__empty {
  padding: 24px 4px;
  color: var(--bb-text-dim);
  font-size: 16px;
  text-align: center;
}

.bb-search-results__all {
  display: block;
  text-align: center;
  padding: 16px;
  color: var(--bb-gold-light);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-top: 1px solid var(--bb-border);
}

.bb-search-results__all:hover {
  color: var(--bb-gold);
}

/* ── Mobile Drawer ──────────────────────────────────── */
.bb-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--bb-bg-card);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bb-mobile-drawer--open {
  transform: translateX(0);
}

.bb-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--bb-border);
}

.bb-mobile-drawer__close {
  background: none;
  border: none;
  color: var(--bb-text-muted);
  cursor: pointer;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.bb-mobile-drawer__close:hover {
  color: var(--bb-text);
}

.bb-mobile-drawer__search {
  padding: 16px 20px;
}

.bb-mobile-drawer__search-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bb-bg-elevated);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text);
  font-size: 15px;
  font-family: var(--bb-font-body);
  outline: none;
}

.bb-mobile-drawer__search-input:focus {
  border-color: var(--bb-gold);
}

.bb-mobile-drawer__nav {
  flex: 1;
  padding: 8px 0;
}

.bb-mobile-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--bb-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--bb-border);
  transition: color 0.2s;
}

.bb-mobile-drawer__link:hover {
  color: var(--bb-gold-light);
}

.bb-mobile-drawer__link--highlight {
  color: var(--bb-gold-light);
  font-weight: 600;
}

.bb-mobile-drawer__link--sale {
  color: var(--bb-danger);
  font-weight: 700;
}

.bb-mobile-drawer__link--parent {
  cursor: pointer;
  list-style: none;
}

.bb-mobile-drawer__chevron {
  opacity: 0.4;
  transition: transform 0.2s;
}

details[open] > .bb-mobile-drawer__link--parent .bb-mobile-drawer__chevron {
  transform: rotate(180deg);
}

.bb-mobile-drawer__group {
  border-bottom: 1px solid var(--bb-border);
}

.bb-mobile-drawer__submenu {
  padding: 4px 0 12px;
  background: rgba(255, 255, 255, 0.02);
}

.bb-mobile-drawer__sublink {
  display: block;
  padding: 10px 20px 10px 36px;
  color: var(--bb-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.bb-mobile-drawer__sublink:hover {
  color: var(--bb-gold-light);
}

.bb-mobile-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--bb-border);
  display: flex;
  gap: 24px;
}

.bb-mobile-drawer__footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bb-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.bb-mobile-drawer__footer-link:hover {
  color: var(--bb-gold-light);
}

/* ── Mobile Backdrop (button for iOS touch support) ── */
.bb-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Reset button defaults */
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.bb-mobile-backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when drawer/search is open */
body.bb-no-scroll {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: none !important;
}


/* ── Header Responsive ──────────────────────────────── */
@media (max-width: 960px) {
  .bb-header__nav {
    display: none;
  }
  .bb-header__mobile-toggle {
    display: flex;
  }
  .bb-header__action--desktop-only {
    display: none;
  }
  .bb-header__inner {
    height: 58px;
    gap: 16px;
  }
  /* Actions nach rechts schieben, wenn Nav ausgeblendet */
  .bb-header__actions {
    margin-left: auto;
  }
  .bb-header__wordmark {
    font-size: 18px;
  }
  .bb-header__tagline {
    display: none;
  }
  .bb-header__logo-img {
    height: 34px;
  }
}

@media (max-width: 480px) {
  .bb-header__currency {
    display: none;
  }
}

/* ── 3. HERO SLIDESHOW ────────────────────────────────────── */
.bb-hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  transition: background 0.8s ease;

  /* Contained layout */
  max-width: var(--bb-container);
  margin: 24px auto;
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-gold-border);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(198, 145, 46, 0.08);
}

.bb-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.bb-hero__glow--gold {
  top: -120px;
  right: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(198, 145, 46, 0.06) 0%, transparent 70%);
}

.bb-hero__glow--accent {
  bottom: -80px;
  left: 5%;
  width: 400px;
  height: 400px;
}

.bb-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(198, 145, 46, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 145, 46, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.bb-hero__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 56px 48px;
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.bb-hero__content {
  max-width: 420px;
  flex-shrink: 0;
}

.bb-hero__image {
  flex: 1 1 0;
  min-width: 0;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bb-hero__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
}

.bb-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.bb-hero__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: bb-pulse 2s infinite;
}

.bb-hero__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: var(--bb-text);
  line-height: 1.08;
  margin: 0 0 12px;
  font-family: var(--bb-font-display);
  letter-spacing: -0.02em;
}

.bb-hero__subtitle {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--bb-text-muted);
  margin: 0 0 36px;
  font-weight: 400;
}

.bb-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-hero__emoji {
  font-size: 120px;
  opacity: 0.12;
  filter: blur(1px);
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

/* Slide indicators */
.bb-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.bb-hero__dot {
  height: 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
  width: 8px;
}

.bb-hero__dot--active {
  width: 36px;
  background: var(--bb-gradient-gold);
}

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.bb-btn {
  border: none;
  padding: 14px 34px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.bb-btn--gold {
  background: var(--bb-gradient-gold);
  color: #0c0b10;
  box-shadow: 0 4px 24px rgba(198, 145, 46, 0.3);
}

.bb-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(198, 145, 46, 0.45);
}

.bb-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bb-text);
  border: 1px solid var(--bb-border);
}

.bb-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--bb-gold-border);
}

.bb-btn--sm {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: var(--bb-radius-sm);
}

.bb-btn--outline-gold {
  background: var(--bb-gold-subtle);
  border: 1px solid var(--bb-gold-border);
  color: var(--bb-gold-light);
}

.bb-btn--outline-gold:hover {
  background: var(--bb-gradient-gold);
  color: #0c0b10;
}

/* ── 5. TRUST BAR ─────────────────────────────────────────── */
.bb-trust {
  background: var(--bb-bg-card);
  border-bottom: 1px solid var(--bb-border);
  border-top: 1px solid var(--bb-gold-border);
  overflow: hidden;
}

/* Desktop: grid layout */
.bb-trust__inner--desktop {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: 20px var(--bb-gap);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* Mobile: hidden on desktop */
.bb-trust__inner--mobile {
  display: none;
}

.bb-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bb-trust__icon {
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-trust__icon svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.bb-trust__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-text);
  white-space: nowrap;
}

.bb-trust__desc {
  font-size: 11px;
  color: var(--bb-text-muted);
  white-space: nowrap;
}

/* Mobile marquee divider */
.bb-trust__divider {
  color: var(--bb-gold);
  opacity: 0.3;
  font-size: 8px;
  margin: 0 16px;
  flex-shrink: 0;
}

/* ── Trust Bar Mobile Marquee ─────────────────────────── */
@media (max-width: 960px) {
  .bb-trust__inner--desktop {
    display: none;
  }

  .bb-trust__inner--mobile {
    display: block;
    overflow: hidden;
    padding: 14px 0;
  }

  .bb-trust__track {
    display: flex;
    align-items: center;
    animation: bb-trust-scroll 35s linear infinite;
    width: max-content;
  }

  .bb-trust__track:hover {
    animation-play-state: paused;
  }

  .bb-trust__inner--mobile .bb-trust__item {
    gap: 8px;
  }

  .bb-trust__inner--mobile .bb-trust__icon {
    font-size: 20px;
  }

  .bb-trust__inner--mobile .bb-trust__icon svg {
    width: 22px;
    height: 22px;
  }

  .bb-trust__inner--mobile .bb-trust__title {
    font-size: 12px;
  }

  .bb-trust__inner--mobile .bb-trust__desc {
    font-size: 10px;
  }
}

@keyframes bb-trust-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* ── 6. SECTION HEADERS ───────────────────────────────────── */
.bb-section {
  padding: 56px 0;
}

.bb-section--alt {
  background: var(--bb-bg-elevated);
  border-top: 1px solid var(--bb-border);
  border-bottom: 1px solid var(--bb-border);
}

.bb-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.bb-section-header__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--bb-text);
  margin: 0;
  font-family: var(--bb-font-display);
  letter-spacing: -0.02em;
}

.bb-section-header__line {
  width: 48px;
  height: 3px;
  background: var(--bb-gradient-gold);
  border-radius: 2px;
  margin-top: 8px;
}

.bb-section-header__subtitle {
  font-size: 14px;
  color: var(--bb-text-muted);
  margin: 10px 0 0;
}

.bb-section-header__action {
  background: none;
  border: 1px solid var(--bb-border);
  color: var(--bb-text-muted);
  padding: 8px 16px;
  border-radius: var(--bb-radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.bb-section-header__action:hover {
  border-color: var(--bb-gold);
  color: var(--bb-gold-light);
}

/* ── 7. BRAND / CATEGORY GRID ─────────────────────────────── */
.bb-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.bb-brand-card {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.bb-brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-gold-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.bb-brand-card__emoji {
  font-size: 40px;
  margin-bottom: 12px;
  display: block;
  transition: transform 0.3s;
}

.bb-brand-card:hover .bb-brand-card__emoji {
  transform: scale(1.15);
}

.bb-brand-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--bb-text);
}

.bb-brand-card__cta {
  font-size: 11px;
  color: var(--bb-text-muted);
  margin-top: 4px;
}

/* ── 8. PRODUCT CARD ──────────────────────────────────────── */
.bb-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.bb-product-card {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  animation: bb-fadeUp 0.5s ease both;
}

.bb-product-card:nth-child(1) { animation-delay: 0s; }
.bb-product-card:nth-child(2) { animation-delay: 0.06s; }
.bb-product-card:nth-child(3) { animation-delay: 0.12s; }
.bb-product-card:nth-child(4) { animation-delay: 0.18s; }
.bb-product-card:nth-child(5) { animation-delay: 0.24s; }
.bb-product-card:nth-child(6) { animation-delay: 0.30s; }
.bb-product-card:nth-child(7) { animation-delay: 0.36s; }
.bb-product-card:nth-child(8) { animation-delay: 0.42s; }

.bb-product-card:hover {
  transform: translateY(-6px);
  border-color: var(--bb-gold-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--bb-gold-border);
}

.bb-product-card__media {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bb-bg-elevated), var(--bb-bg));
}

.bb-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.bb-product-card:hover .bb-product-card__media img {
  transform: scale(1.05);
}

.bb-product-card__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(198, 145, 46, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.bb-product-card:hover .bb-product-card__shimmer {
  opacity: 1;
}

.bb-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: 0.05em;
  z-index: 2;
}

.bb-product-card__badge--new {
  background: var(--bb-success);
  color: #fff;
}

.bb-product-card__badge--sale {
  background: var(--bb-danger);
  color: #fff;
}

.bb-product-card__badge--bestseller {
  background: var(--bb-gold-light);
  color: #000;
}

/* Quick add overlay */
.bb-product-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2;
}

.bb-product-card:hover .bb-product-card__quick-add {
  transform: translateY(0);
}

.bb-product-card__quick-add-btn {
  width: 100%;
  padding: 10px;
  background: var(--bb-gradient-gold);
  color: #0c0b10;
  border: none;
  border-radius: var(--bb-radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.bb-product-card__info {
  padding: 14px 16px 18px;
}

.bb-product-card__vendor {
  font-size: 11px;
  color: var(--bb-gold-light);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.bb-product-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-text);
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.bb-product-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.bb-product-card__stars {
  font-size: 12px;
  color: var(--bb-gold-light);
}

.bb-product-card__review-count {
  font-size: 11px;
  color: var(--bb-text-muted);
}

.bb-product-card__price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-product-card__price-current {
  font-size: 18px;
  font-weight: 800;
  color: var(--bb-text);
}

.bb-product-card__price-current--sale {
  color: var(--bb-danger);
}

.bb-product-card__price-compare {
  font-size: 13px;
  color: var(--bb-text-dim);
  text-decoration: line-through;
}

/* ── 9. PRE-ORDER CARDS ───────────────────────────────────── */
.bb-preorders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bb-preorder-card {
  background: var(--bb-bg-elevated);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.bb-preorder-card:hover {
  border-color: var(--bb-gold-border);
}

.bb-preorder-card__image {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  background: #f4f4f6 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 32px;
}

.bb-preorder-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  padding: 8px;
  background: #f4f4f6 !important;
  mix-blend-mode: normal !important;
}

.bb-preorder-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bb-preorder-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-text);
  line-height: 1.3;
  margin-bottom: 8px;
  flex: 1;
}

.bb-preorder-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.bb-preorder-card__price {
  font-size: 16px;
  font-weight: 800;
  background: var(--bb-gradient-gold-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bb-preorder-card__date {
  font-size: 12px;
  color: var(--bb-gold-light);
  padding: 4px 10px;
  background: var(--bb-gold-subtle);
  border: 1px solid var(--bb-gold-border);
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 500;
}

/* Vorbestellen button in card */
.bb-preorder-card .bb-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ── 10. SOCIAL PROOF ─────────────────────────────────────── */
.bb-social-proof {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-gold-border);
  border-radius: 12px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: var(--bb-text-muted);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  text-decoration: none;
}

/* Clickable version */
.bb-social-proof--link {
  text-decoration: none;
  cursor: pointer;
}

.bb-social-proof--link:hover {
  border-color: var(--bb-gold);
  box-shadow: 0 4px 20px rgba(198, 145, 46, 0.15);
}

.bb-social-proof--link:hover .bb-social-proof__arrow {
  opacity: 1;
  transform: translateX(0);
}

.bb-social-proof--link:hover .bb-social-proof__product {
  text-decoration: underline;
}

/* Green pulse dot */
.bb-social-proof__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bb-success);
  animation: bb-pulse 2s infinite;
  flex-shrink: 0;
}

/* Product thumbnail */
.bb-social-proof__img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bb-bg-elevated);
  border: 1px solid var(--bb-border);
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.bb-social-proof__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Text content */
.bb-social-proof__text {
  transition: opacity 0.3s;
}

.bb-social-proof__name {
  color: var(--bb-text);
  font-weight: 700;
}

.bb-social-proof__product {
  color: var(--bb-gold-light);
  font-weight: 700;
  transition: text-decoration 0.2s;
}

.bb-social-proof__time {
  color: var(--bb-text-dim);
  font-size: 12px;
  font-weight: 400;
}

/* Arrow (visible on hover for links) */
.bb-social-proof__arrow {
  color: var(--bb-gold-light);
  font-size: 18px;
  position: absolute;
  right: 24px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

/* Mobile */
@media (max-width: 768px) {
  .bb-social-proof {
    padding: 12px 16px;
    gap: 10px;
    font-size: 13px;
  }
  .bb-social-proof__img {
    width: 36px;
    height: 36px;
  }
  .bb-social-proof__arrow {
    display: none;
  }
}

/* ── 11. NEWSLETTER ───────────────────────────────────────── */
.bb-newsletter {
  background: linear-gradient(135deg, var(--bb-gold-subtle) 0%, var(--bb-bg-card) 50%, rgba(198, 145, 46, 0.05) 100%);
  border: 1px solid var(--bb-gold-border);
  border-radius: var(--bb-radius-lg);
  padding: 52px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bb-newsletter__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--bb-text);
  margin: 0 0 8px;
  font-family: var(--bb-font-display);
}

.bb-newsletter__desc {
  font-size: 14px;
  color: var(--bb-text-muted);
  margin: 0 0 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.bb-newsletter__form {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bb-newsletter__input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.bb-newsletter__input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  color: var(--bb-text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.bb-newsletter__input:focus {
  border-color: var(--bb-gold);
}

.bb-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  padding: 0 4px;
}

.bb-newsletter__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--bb-gold);
  cursor: pointer;
}

.bb-newsletter__consent-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bb-text-dim);
}

.bb-newsletter__consent-text a {
  color: var(--bb-gold);
  text-decoration: underline;
}

.bb-newsletter__consent-text a:hover {
  color: var(--bb-gold-light);
}

.bb-newsletter__success {
  font-size: 13px;
  color: #34d399;
  margin: 0;
  text-align: center;
}

.bb-newsletter__error {
  font-size: 13px;
  color: #ef4444;
  margin: 0;
  text-align: center;
}

.bb-newsletter__disclaimer {
  font-size: 11px;
  color: var(--bb-text-dim);
  margin: 14px 0 0;
}

/* ── 12. FOOTER ───────────────────────────────────────────── */
.bb-footer {
  background: var(--bb-bg-card);
  border-top: 1px solid var(--bb-border);
}

.bb-footer__inner {
  max-width: var(--bb-container);
  margin: 0 auto;
  padding: 56px var(--bb-gap) 32px;
}

.bb-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  margin-bottom: 48px;
}

.bb-footer__heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-gold-light);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bb-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bb-footer__link {
  font-size: 13px;
  color: var(--bb-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.bb-footer__link:hover {
  color: var(--bb-gold-light);
}

.bb-footer__bottom {
  border-top: 1px solid var(--bb-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bb-footer__payments {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bb-footer__payment-icon {
  padding: 4px 10px;
  background: var(--bb-bg-elevated);
  border: 1px solid var(--bb-border);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--bb-text-muted);
  letter-spacing: 0.05em;
}

.bb-footer__copyright {
  font-size: 12px;
  color: var(--bb-text-dim);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-search { display: none; }
  .bb-nav { display: none; }
  .bb-hero__emoji { display: none; }
  .bb-currency-badge { display: none; }
  .bb-header__action-label { display: none; }

  .bb-hero__inner { padding: 32px 20px; flex-direction: column; gap: 20px; }
  .bb-hero__content { max-width: 100%; }
  .bb-hero__image { height: 180px; justify-content: center; }
  .bb-hero {
    min-height: 300px;
    margin: 12px;
    border-radius: var(--bb-radius);
  }
  .bb-section { padding: 40px 0; }

  .bb-brands { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .bb-brand-card { padding: 18px 12px; }
  .bb-brand-card__emoji { font-size: 28px; margin-bottom: 8px; }

  .bb-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bb-product-card__info { padding: 10px 12px 14px; }
  .bb-product-card__title { font-size: 12px; min-height: 32px; }
  .bb-product-card__price-current { font-size: 15px; }

  .bb-preorders { grid-template-columns: repeat(2, 1fr); }
  .bb-preorder-card__image { height: 160px; }
  .bb-newsletter { padding: 36px 20px; }
  .bb-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 480px) {
  .bb-brands { grid-template-columns: repeat(2, 1fr); }
  .bb-products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bb-preorders { grid-template-columns: 1fr; }
  /* Einspaltige Pre-Order Karten: Bild nutzt mehr vertikalen Platz */
  .bb-preorder-card__image { height: 260px !important; }
  .bb-preorder-card__image img { padding: 16px !important; }
}

/* ===== Einheitliche Produktbild-Höhe auf Collection-Seiten ===== */
#product-grid .card--standard.card--media .card__inner.ratio {
  --ratio-percent: 100% !important;
}

#product-grid .card--standard.card--media .card__media .media img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* ===== Pre-Order Bild-Hintergrund (überall hell, auch auf Mobile) ===== */
.bb-preorder-card .bb-preorder-card__image,
.bb-preorder-card .bb-preorder-card__image img {
  background: #f4f4f6 !important;
}

/* ===== Mobile Filter-Drawer: Sort-Dropdown Caret inside box ===== */
.mobile-facets__sort .select {
  position: relative;
}

.mobile-facets__sort select.select__select {
  padding-right: 36px !important;
  min-width: 180px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.mobile-facets__sort .select .icon-caret,
.mobile-facets__sort .select .svg-wrapper {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

/* ===== Header Platz auf sehr kleinen Screens ===== */
@media (max-width: 480px) {
  .bb-header__inner {
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .bb-header__logo {
    gap: 6px !important;
    min-width: 0;
    overflow: hidden;
  }

  .bb-header__logo-img {
    height: 36px !important;
  }

  .bb-header__actions {
    gap: 2px !important;
  }

  .bb-header__action {
    padding: 6px !important;
  }
}

/* ===== Alternierende Section-Hintergründe =====
   Wird jetzt sauber über das "Hintergrund-Variante" Setting in jeder Section
   gesteuert (siehe `.bb-section--alt` weiter oben + die :has-Regel in den
   Dawn-Subpage-Overrides). Hardcoded Section-spezifische Overrides wurden
   hier entfernt, damit der Theme-Editor die Kontrolle hat. */


/* ===== Mobile Collection-Karten Fixes ===== */
@media (max-width: 768px) {
  /* Weniger Padding in Karten auf Mobile */
  .card-wrapper .card > .card__content {
    padding: 10px 10px 14px !important;
  }

  /* Titel kleiner */
  .card-wrapper .card .card__heading.h5 {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Quick-Add Button auf Mobile: Text kleiner, Umbruch erlauben */
  .quick-add .quick-add__submit,
  .quick-add__submit {
    font-size: 11px !important;
    padding: 8px 10px !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* Release-Datum Badge: kompakter */
  .bb-card-release {
    font-size: 10px;
    padding: 3px 8px;
  }
}
/* ==========================================================================
   JUDGE.ME REVIEWS — DARK THEME INTEGRATION
   ==========================================================================
   Stand: Mai 2026
   Anwendung: Diesen kompletten Block ans ENDE von boosterbox-custom.css
              anhängen (nach allen bestehenden Sektionen).
   Ziel: Judge.me-Widgets nahtlos ins BoosterBox Dark Theme einbinden.
   Farben referenzieren das bestehende Brand-System:
     - #0c0b10 (Page-BG)
     - #16151c (Surface)
     - #c6912e → #e8b84a (Gold-Gradient)
     - #e7e7ec (Haupttext)
     - #9a9aa3 (Sekundärtext)
   ========================================================================== */

/* --- Haupt-Widget-Container ----------------------------------------------- */
.jdgm-widget,
.jdgm-rev-widg,
.jdgm-all-reviews-widget {
  background-color: #16151c !important;
  color: #e7e7ec !important;
  border: 1px solid rgba(198, 145, 46, 0.2) !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

/* --- Header / Summary ----------------------------------------------------- */
.jdgm-rev-widg__title,
.jdgm-rev-widg__summary,
.jdgm-rev-widg__summary-stars-with-text {
  color: #e7e7ec !important;
}

.jdgm-rev-widg__summary-text {
  color: #9a9aa3 !important;
}

/* --- Sterne (CSS-Fallback zusätzlich zu Judge.me Settings) ---------------- */
.jdgm-star {
  color: #e8b84a !important;
}

.jdgm-star.jdgm--off {
  color: rgba(232, 184, 74, 0.25) !important;
}

/* --- Einzelne Reviews ----------------------------------------------------- */
.jdgm-rev {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(198, 145, 46, 0.15) !important;
  padding: 20px 0 !important;
}

.jdgm-rev__author,
.jdgm-rev__title {
  color: #e7e7ec !important;
  font-weight: 600 !important;
}

.jdgm-rev__body {
  color: #cccccc !important;
}

.jdgm-rev__timestamp,
.jdgm-rev__location {
  color: #9a9aa3 !important;
}

/* "Verifizierter Käufer"-Badge */
.jdgm-rev__buyer-badge {
  background-color: rgba(198, 145, 46, 0.15) !important;
  color: #e8b84a !important;
  border: 1px solid rgba(198, 145, 46, 0.3) !important;
}

.jdgm-rev__icon {
  color: #e8b84a !important;
}

/* --- Store-Antwort (Reply-Box) -------------------------------------------- */
.jdgm-rev__reply {
  background-color: rgba(198, 145, 46, 0.08) !important;
  border-left: 3px solid #c6912e !important;
  color: #cccccc !important;
  padding: 12px 16px !important;
  margin-top: 12px !important;
  border-radius: 0 8px 8px 0 !important;
}

.jdgm-rev__replier {
  color: #e8b84a !important;
  font-weight: 600 !important;
}

/* --- Buttons (Gold-Gradient wie im restlichen Shop) ----------------------- */
.jdgm-write-rev-link,
.jdgm-btn,
.jdgm-btn--solid,
.jdgm-paginate__page--active,
.jdgm-submit-rev {
  background: linear-gradient(135deg, #c6912e 0%, #e8b84a 100%) !important;
  color: #0c0b10 !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.jdgm-write-rev-link:hover,
.jdgm-btn:hover,
.jdgm-submit-rev:hover {
  opacity: 0.92 !important;
  color: #0c0b10 !important;
  transform: translateY(-1px) !important;
}

/* --- Pagination ----------------------------------------------------------- */
.jdgm-paginate__page {
  color: #9a9aa3 !important;
  background-color: transparent !important;
}

.jdgm-paginate__page:hover {
  color: #e8b84a !important;
}

/* --- Review-Form (Bewertung schreiben) ------------------------------------ */
.jdgm-form-wrapper,
.jdgm-form {
  background-color: #16151c !important;
  color: #e7e7ec !important;
  border-radius: 12px !important;
}

.jdgm-form input[type="text"],
.jdgm-form input[type="email"],
.jdgm-form textarea,
.jdgm-form select {
  background-color: #0c0b10 !important;
  color: #e7e7ec !important;
  border: 1px solid rgba(198, 145, 46, 0.3) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}

.jdgm-form input[type="text"]::placeholder,
.jdgm-form input[type="email"]::placeholder,
.jdgm-form textarea::placeholder {
  color: #6e6e75 !important;
}

.jdgm-form input[type="text"]:focus,
.jdgm-form input[type="email"]:focus,
.jdgm-form textarea:focus,
.jdgm-form select:focus {
  border-color: #e8b84a !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232, 184, 74, 0.2) !important;
}

.jdgm-form label,
.jdgm-form__title,
.jdgm-form-rating-title {
  color: #e7e7ec !important;
}

/* Foto-Upload-Bereich */
.jdgm-form__upload-btn,
.jdgm-form__upload-label,
.jdgm-form-upload {
  background-color: rgba(198, 145, 46, 0.1) !important;
  color: #e8b84a !important;
  border: 1px dashed rgba(198, 145, 46, 0.4) !important;
  border-radius: 6px !important;
}

.jdgm-form__upload-btn:hover,
.jdgm-form-upload:hover {
  background-color: rgba(198, 145, 46, 0.2) !important;
}

/* --- Sort-Dropdown -------------------------------------------------------- */
.jdgm-sort-dropdown,
.jdgm-rev-widg__sort {
  background-color: #0c0b10 !important;
  color: #e7e7ec !important;
  border: 1px solid rgba(198, 145, 46, 0.3) !important;
  border-radius: 6px !important;
}

/* --- Foto-Galerie / Thumbnails -------------------------------------------- */
.jdgm-rev__pic,
.jdgm-rev__pic-img {
  border-radius: 8px !important;
  border: 1px solid rgba(198, 145, 46, 0.2) !important;
}

/* --- "Featured Review"-Badge ---------------------------------------------- */
.jdgm-rev__featured-badge {
  background-color: #c6912e !important;
  color: #0c0b10 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* --- Preview-Badge (Sterne in Produkt-Cards & PDP-Header) ----------------- */
.jdgm-prev-badge {
  color: #9a9aa3 !important;
}

.jdgm-prev-badge__text {
  color: inherit !important;
}

.jdgm-prev-badge .jdgm-star {
  color: #e8b84a !important;
}

/* --- All-Reviews-Seite (/pages/reviews) ----------------------------------- */
.jdgm-all-reviews-page,
.jdgm-all-reviews__body {
  background-color: #0c0b10 !important;
  color: #e7e7ec !important;
}

/* --- Modal / Lightbox-Overlay --------------------------------------------- */
.jdgm-modal__bg {
  background-color: rgba(12, 11, 16, 0.85) !important;
  backdrop-filter: blur(4px) !important;
}

.jdgm-modal__container {
  background-color: #16151c !important;
  border: 1px solid rgba(198, 145, 46, 0.3) !important;
  color: #e7e7ec !important;
  border-radius: 12px !important;
}

.jdgm-modal__close {
  color: #e7e7ec !important;
}

/* --- Q&A-Modul (falls später aktiviert) ----------------------------------- */
.jdgm-qa-widg,
.jdgm-qa {
  background-color: #16151c !important;
  color: #e7e7ec !important;
  border: 1px solid rgba(198, 145, 46, 0.2) !important;
}

.jdgm-qa__question,
.jdgm-qa__answer {
  color: #e7e7ec !important;
}

/* --- Mobile-Anpassungen --------------------------------------------------- */
@media (max-width: 749px) {
  .jdgm-widget,
  .jdgm-rev-widg,
  .jdgm-all-reviews-widget {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  .jdgm-rev {
    padding: 16px 0 !important;
  }
}

/* ==========================================================================
   ENDE JUDGE.ME DARK THEME INTEGRATION
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME DARK THEME — TEXT-COLOR FIX (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen,
              direkt nach der bestehenden "ENDE JUDGE.ME DARK THEME"-Sektion.
   Ziel: Alle zu dunklen Texte (Custom Forms, Body, Reply, Summary) heller
         machen für bessere Lesbarkeit auf dunklem Hintergrund.
   ========================================================================== */

/* --- Catch-all: alle Texte in Reviews mind. lesbar -------------------------- */
.jdgm-rev,
.jdgm-rev * {
  color: #d4d4d4 !important;
}

/* Author, Title bleiben bei #e7e7ec (heller, prominenter) */
.jdgm-rev__author,
.jdgm-rev__title {
  color: #e7e7ec !important;
}

/* Body-Text deutlich heller als vorher (#cccccc → #d4d4d4) */
.jdgm-rev__body,
.jdgm-rev__body p,
.jdgm-rev__body span {
  color: #d4d4d4 !important;
}

/* "More"/"Show More"-Link heller + gold-akzentuiert */
.jdgm-rev__expander,
.jdgm-rev__body-read-more,
.jdgm-rev__body-read-less,
a.jdgm-rev__expander {
  color: #e8b84a !important;
  text-decoration: underline !important;
}

/* --- Summary-Block oben (z.B. "4.1 15 Bewertungen") ------------------------ */
.jdgm-rev-widg__summary,
.jdgm-rev-widg__summary *,
.jdgm-rev-widg__summary-stars-with-text,
.jdgm-histogram,
.jdgm-histogram__row-label,
.jdgm-histogram__bar-content {
  color: #e7e7ec !important;
}

.jdgm-rev-widg__summary-average {
  color: #e8b84a !important;
  font-weight: 700 !important;
}

/* --- Custom Form Questions & Answers --------------------------------------- */
/* Die Zusatzfragen wie "How would you rate the comfort?" */
.jdgm-rev__custom-questions-summary,
.jdgm-rev__custom-questions,
.jdgm-rev__custom-form-answer,
.jdgm-rev__custom-form-question,
.jdgm-custom-questions-summary,
.jdgm-rev__prod-link-prefix,
.jdgm-rev__product-link {
  color: #d4d4d4 !important;
}

/* Question-Label (z.B. "How would you rate the comfort of the fabric?") */
.jdgm-rev__custom-form-question,
.jdgm-rev__custom-questions-summary > div > strong,
.jdgm-rev__custom-form-question-title {
  color: #e7e7ec !important;
  font-weight: 600 !important;
}

/* Answer-Wert (z.B. "Perfect fit", "Several times a week") */
.jdgm-rev__custom-form-answer,
.jdgm-rev__custom-questions-summary > div > span:not(.jdgm-rev__custom-form-question) {
  color: #cfcfcf !important;
}

/* --- Rating-Bars (Skalen 1-5, "Not likely / Very likely") ------------------ */
.jdgm-rev__custom-questions-rating-bar,
.jdgm-custom-form-rating,
.jdgm-rev__rating-bar {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scale-Min/Max-Labels ("1", "5", "Not likely", "Very likely") */
.jdgm-rev__custom-questions-rating-bar__min,
.jdgm-rev__custom-questions-rating-bar__max,
.jdgm-rev__custom-questions-rating-bar__min-text,
.jdgm-rev__custom-questions-rating-bar__max-text,
.jdgm-rating-scale-label,
.jdgm-rev__rating-bar__min,
.jdgm-rev__rating-bar__max {
  color: #b0b0b0 !important;
  font-size: 0.85em !important;
}

/* Aktiver Rating-Wert auf der Bar (z.B. "5/5") */
.jdgm-rev__custom-questions-rating-bar__value,
.jdgm-rev__rating-value {
  color: #e8b84a !important;
  font-weight: 600 !important;
}

/* Rating-Bar Fill-Color */
.jdgm-rev__custom-questions-rating-bar__fill,
.jdgm-custom-form-rating__fill {
  background: linear-gradient(135deg, #c6912e 0%, #e8b84a 100%) !important;
}

/* --- Timestamp & Location -------------------------------------------------- */
.jdgm-rev__timestamp,
.jdgm-rev__location,
.jdgm-rev__product-link {
  color: #a0a0a0 !important;
}

/* --- Reply-Box (Antwort vom Shop) ------------------------------------------ */
.jdgm-rev__reply,
.jdgm-rev__reply *,
.jdgm-rev__reply-content,
.jdgm-rev__reply-body {
  color: #d4d4d4 !important;
}

.jdgm-rev__replier,
.jdgm-rev__reply-name,
.jdgm-rev__reply > strong {
  color: #e8b84a !important;
  font-weight: 600 !important;
}

/* --- "Antwort von ..."-Header --------------------------------------------- */
.jdgm-rev__reply-header,
.jdgm-rev__reply-prefix {
  color: #e8b84a !important;
  font-weight: 600 !important;
}

/* --- Verifiziert-Badge (falls Text noch dunkel) --------------------------- */
.jdgm-rev__buyer-badge,
.jdgm-rev__buyer-badge * {
  color: #e8b84a !important;
}

/* --- "More photos"-Counter-Overlay ---------------------------------------- */
.jdgm-rev__pic--more-overlay,
.jdgm-rev__pic-more-count {
  color: #ffffff !important;
  background-color: rgba(12, 11, 16, 0.7) !important;
}

/* ==========================================================================
   ENDE JUDGE.ME DARK THEME TEXT-FIX
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME V2 WIDGET — SPACING FIX (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen.
   Ziel: Das neue Judge.me v2-Widget (Klassen `jm-*`) hat zu grosse interne
         Abstände über CSS-Variablen `--jm-space-*`. Hier werden diese
         gezielt enger gesetzt, ohne das Widget zu eng zu machen.
   ========================================================================== */

/* --- Outer-Container: kompakteres Padding -------------------------------- */
#judgeme_product_reviews.jdgm-widget,
.jdgm-widget.jdgm-widget-revamp {
  padding: 20px 24px !important;
}

/* --- jm-space-Variablen innerhalb des Widgets reduzieren ----------------- */
/* Diese Variablen werden von Judge.me v2 als Inline-Styles via --52156a25
   referenziert. Wenn wir die jm-space-Werte überschreiben, cascadiert das
   auf alle inneren Stacks und Cluster. */
#judgeme_product_reviews,
#judgeme_product_reviews .jm-review-widget,
#judgeme_product_reviews .jm-stack,
#judgeme_product_reviews .jm-cluster {
  --jm-space-100: 2px !important;
  --jm-space-200: 6px !important;
  --jm-space-300: 10px !important;
  --jm-space-400: 14px !important;
  --jm-space-500: 16px !important;
  --jm-space-600: 18px !important;
  --jm-space-800: 22px !important;
  --jm-space-1000: 28px !important;
}

/* --- Spezifische Header-Struktur: Title + Subtitle näher zusammen -------- */
#judgeme_product_reviews .jm-review-widget-minimal-header__title {
  margin-bottom: 2px !important;
}

#judgeme_product_reviews .jm-review-widget-minimal-header .jm-stack--space-200 {
  gap: 4px !important;
}

/* --- Cluster (Header-Reihe mit Title links + Buttons rechts) ------------- */
#judgeme_product_reviews .jm-review-widget-minimal-header .jm-cluster {
  --cluster-space: 16px !important;
  align-items: center !important;
}

/* --- Header → Body Abstand (zwischen "Kundenbewertungen" und Reviews) ---- */
#judgeme_product_reviews .jm-review-widget__header-and-body {
  gap: 16px !important;
}

/* --- Stack zwischen Header-Block und Filter-Container ------------------- */
#judgeme_product_reviews .jm-review-widget__header.jm-stack--space-600 {
  --52156a25: 16px !important;
}

/* --- Review-Body / Body-Stack ------------------------------------------- */
#judgeme_product_reviews .jm-review-widget__body {
  gap: 14px !important;
}

/* --- Empty-State (für 0 Reviews): kompakter ----------------------------- */
#judgeme_product_reviews .jm-no-reviews-state {
  padding: 12px 0 !important;
}

#judgeme_product_reviews .jdgm-empty-state {
  padding: 8px 0 !important;
}

/* --- Mobile Anpassungen: noch etwas enger ------------------------------- */
@media (max-width: 749px) {
  #judgeme_product_reviews.jdgm-widget,
  .jdgm-widget.jdgm-widget-revamp {
    padding: 16px !important;
  }

  #judgeme_product_reviews,
  #judgeme_product_reviews .jm-review-widget,
  #judgeme_product_reviews .jm-stack,
  #judgeme_product_reviews .jm-cluster {
    --jm-space-300: 8px !important;
    --jm-space-400: 10px !important;
    --jm-space-600: 14px !important;
    --jm-space-1000: 20px !important;
  }

  #judgeme_product_reviews .jm-review-widget__header-and-body {
    gap: 12px !important;
  }
}

/* ==========================================================================
   ENDE JUDGE.ME V2 SPACING FIX
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME V2 WIDGET — DIRECT FIXES (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen.
   Ziel: Zwei direkte Probleme im v2-Widget per CSS lösen, ohne dass eine
         Einstellung in Judge.me oder ein Support-Ticket nötig ist.
   ========================================================================== */

/* HINWEIS: Hide-when-empty wird primär über das Theme-Editor-Setting des
   Review-Widget-Blocks gesteuert ("If no reviews show: Don't show widget").
   ABER: Shopify rendert die wrapping shopify-section weiter, und mein
   Dark-Theme-CSS gibt dem leeren Widget-Container Border/Padding/Background.
   Daher dieser Cleanup: leere Widget-Container UND alle Wrapper verstecken. */

/* Widget-Container selbst, falls er :empty ist (nur Vue-Comment drin) */
#judgeme_product_reviews:empty,
.jdgm-widget:empty {
  display: none !important;
}

/* Alle Wrapper-Ebenen verstecken: shopify-block, page-width, shopify-section */
.shopify-app-block:has(#judgeme_product_reviews:empty),
.shopify-block:has(#judgeme_product_reviews:empty),
.page-width:has(#judgeme_product_reviews:empty),
.shopify-section:has(#judgeme_product_reviews:empty) {
  display: none !important;
}

/* Backup: falls der Container nicht :empty ist aber data-empty-state="hide_widget"
   gesetzt UND keine v1/v2-Body-Klasse vorhanden ist */
#judgeme_product_reviews[data-empty-state="hide_widget"]:not(:has(.jm-review-widget__body, .jdgm-rev-widg__body)),
.shopify-section:has(#judgeme_product_reviews[data-empty-state="hide_widget"]:not(:has(.jm-review-widget__body, .jdgm-rev-widg__body))) {
  display: none !important;
}

/* --- 1. Header-Cluster: Top-Alignment statt Bottom -------------------------- */
/* Macht "Kundenbewertungen"-Titel + "Bewertung schreiben"-Button auf gleicher
   Höhe (oben). Vorher: flex-end (untere Kante), führt zu Versatz wenn Titel
   mehrzeilig ist. */
#judgeme_product_reviews .jm-review-widget-minimal-header .jm-cluster,
#judgeme_product_reviews .jm-cluster {
  --cluster-align: flex-start !important;
  align-items: flex-start !important;
}

/* --- 3. Filter-Buttons-Container: Margin-Top für visuelle Balance ---------- */
/* Da der Title-Block 2 Zeilen hat (Titel + Rating), muss der Buttons-Container
   rechts einen kleinen Margin-Top haben, damit Buttons und der erste Title
   visuell auf einer Linie sitzen. */
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container {
  margin-top: 2px !important;
}

/* --- 4. Optionale visuelle Polishes ---------------------------------------- */
/* Header-Title: leicht vergrössern und prominenter machen */
#judgeme_product_reviews .jm-review-widget-minimal-header__title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* "4.1 15 Bewertungen" Untertitel-Text: subtiler und kompakter */
#judgeme_product_reviews .jm-review-widget-minimal-header .jm-cluster + * .jm-text,
#judgeme_product_reviews .jm-rating-summary-text {
  color: #b0b0b0 !important;
  font-size: 0.9rem !important;
}

/* ==========================================================================
   ENDE JUDGE.ME V2 DIRECT FIXES
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME V2 — TOP SPACING SIMPLE FIX (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen.
   Ziel: Den zu grossen Abstand zwischen Widget-Top-Border und dem Titel
         "Kundenbewertungen" reduzieren — nur das, sonst nichts.
   ========================================================================== */

/* Outer-Container: Padding-Top minimal halten */
#judgeme_product_reviews.jdgm-widget,
.jdgm-widget.jdgm-widget-revamp {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Inner Review-Widget: alle Top-Spacings raus */
#judgeme_product_reviews .jm-review-widget,
#judgeme_product_reviews > .jm-stack {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Header-Section: kein zusätzliches Top-Spacing */
#judgeme_product_reviews .jm-review-widget__header,
#judgeme_product_reviews .jm-review-widget-minimal-header,
#judgeme_product_reviews .jm-review-widget__header-and-body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Title selbst: kein margin-top */
#judgeme_product_reviews .jm-review-widget-minimal-header__title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Header → Body Abstand: enger */
#judgeme_product_reviews .jm-review-widget__header-and-body {
  gap: 14px !important;
}

/* ==========================================================================
   ENDE TOP SPACING SIMPLE FIX
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME V2 — SORT BUTTON WIDTH FIX (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen.
   Ziel: Die Sort-Dropdown im Header (rechts neben dem Filter-Icon) zeigt
         nur "Ne" statt "Neueste zuerst" — Button hat zu wenig Breite.
   ========================================================================== */

/* Filter-Container: nicht stauchen, kein Wrap */
#judgeme_product_reviews .jm-review-widget-minimal-header__button-and-filters,
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container {
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

/* Sort-Dropdown selbst: Mindestbreite, Text nicht abschneiden */
#judgeme_product_reviews .jm-sort-dropdown,
#judgeme_product_reviews .jm-review-widget__sort,
#judgeme_product_reviews [class*="sort-dropdown"],
#judgeme_product_reviews [class*="sort_dropdown"],
#judgeme_product_reviews button[class*="sort"],
#judgeme_product_reviews [data-testid*="sort"] {
  min-width: 150px !important;
  width: auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 8px 14px !important;
}

/* Falls der Sort-Button als generischer jm-button gerendert wird */
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container .jm-button,
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container button {
  min-width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Generelle Text-Innen-Elemente in Buttons: nicht abschneiden */
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container button span,
#judgeme_product_reviews .jm-review-widget-minimal-header__filter-container [role="combobox"] span {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ==========================================================================
   ENDE SORT BUTTON WIDTH FIX
   ========================================================================== */
/* ==========================================================================
   JUDGE.ME V2 — MOBILE SORT BUTTON FIX (Mai 2026)
   ==========================================================================
   Anwendung: Diesen Block ans ENDE von boosterbox-custom.css anhängen.
   Ziel: Auf Mobile passt der Sort-Button "Neueste zuerst" nicht in den
         Header. Lösung: auf Mobile ausblenden (User sortiert dort selten).
   
   AKTIV: Option B (Sort auf Mobile ausblenden)
   ALTERNATIVEN: A (Wrap) und C (Kompakt) sind unten auskommentiert —
                 einfach umkehren (Block aktivieren + B deaktivieren).
   ========================================================================== */

/* === OPTION B (AKTIV): Sort-Dropdown auf Mobile ausblenden ================ */
@media (max-width: 749px) {
  #judgeme_product_reviews .jm-sort-dropdown,
  #judgeme_product_reviews .jm-review-widget__sort,
  #judgeme_product_reviews [class*="sort-dropdown"],
  #judgeme_product_reviews button[class*="sort"]:not([class*="filter"]),
  #judgeme_product_reviews [data-testid*="sort"] {
    display: none !important;
  }

  /* Filter-Container: kein erzwungener min-width mehr auf Mobile */
  #judgeme_product_reviews .jm-review-widget-minimal-header__button-and-filters,
  #judgeme_product_reviews .jm-review-widget-minimal-header__filter-container {
    flex-wrap: nowrap !important;
    flex-shrink: 1 !important;
  }
}

/* === OPTION A (alternativ): Wrap auf neue Zeile auf Mobile ================ */
/* Aktivieren: Block-Kommentar entfernen + Option B oben deaktivieren
@media (max-width: 749px) {
  #judgeme_product_reviews .jm-review-widget-minimal-header .jm-cluster,
  #judgeme_product_reviews .jm-cluster {
    flex-wrap: wrap !important;
  }

  #judgeme_product_reviews .jm-review-widget-minimal-header__button-and-filters,
  #judgeme_product_reviews .jm-review-widget-minimal-header__filter-container {
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 8px !important;
    justify-content: flex-start !important;
  }

  #judgeme_product_reviews .jm-sort-dropdown,
  #judgeme_product_reviews [class*="sort-dropdown"],
  #judgeme_product_reviews button[class*="sort"] {
    min-width: 130px !important;
    max-width: 100% !important;
  }
}
*/

/* === OPTION C (alternativ): Sort kompakt nur als Icon auf Mobile ========== */
/* Aktivieren: Block-Kommentar entfernen + Option B oben deaktivieren
@media (max-width: 749px) {
  #judgeme_product_reviews .jm-sort-dropdown,
  #judgeme_product_reviews [class*="sort-dropdown"],
  #judgeme_product_reviews button[class*="sort"] {
    min-width: auto !important;
    width: 36px !important;
    padding: 8px !important;
    font-size: 0 !important;
  }

  #judgeme_product_reviews .jm-sort-dropdown::before,
  #judgeme_product_reviews [class*="sort-dropdown"]::before {
    content: "↕" !important;
    font-size: 16px !important;
    color: #e7e7ec !important;
  }
}
*/

/* ==========================================================================
   ENDE MOBILE SORT BUTTON FIX
   ========================================================================== */

/* ==========================================================================
   BB TRUST NETWORK SECTION
   (WhatsApp / Cardmarket / Trustpilot / Google — gold-akzentuiert)
   ========================================================================== */

.bb-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bb-trust-card {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 32px 20px 24px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Dezenter Gold-Glow im Hintergrund beim Hover */
.bb-trust-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(198, 145, 46, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.bb-trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-gold-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.bb-trust-card:hover::after {
  opacity: 1;
}

/* Icon-Kreis */
.bb-trust-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-bg-elevated);
  border-radius: 50%;
  border: 1px solid var(--bb-border);
  margin-bottom: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.bb-trust-card:hover .bb-trust-card__icon {
  border-color: var(--bb-gold-border);
  background: var(--bb-gold-subtle);
  transform: scale(1.06);
}

.bb-trust-card__icon svg {
  width: 32px;
  height: 32px;
  color: var(--bb-gold-light);
  transition: color 0.3s ease;
}

.bb-trust-card:hover .bb-trust-card__icon svg {
  color: var(--bb-gold-bright);
}

/* Falls Tobi später eigene Logos hochlädt */
.bb-trust-card__img,
.bb-trust-card__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Texte */
.bb-trust-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--bb-text);
  line-height: 1.3;
}

.bb-trust-card__label {
  font-size: 12px;
  color: var(--bb-text-muted);
  line-height: 1.45;
  max-width: 95%;
}

.bb-trust-card__cta {
  font-size: 11px;
  color: var(--bb-gold-light);
  margin-top: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  transition: color 0.3s ease, transform 0.3s ease;
}

.bb-trust-card:hover .bb-trust-card__cta {
  color: var(--bb-gold-bright);
  transform: translateY(-1px);
}

/* WhatsApp-Card: dezenter zusätzlicher Gold-Akzent als CTA-Hint */
.bb-trust-card--whatsapp {
  background:
    linear-gradient(180deg, rgba(198, 145, 46, 0.05) 0%, transparent 50%),
    var(--bb-bg-card);
}

.bb-trust-card--whatsapp .bb-trust-card__icon {
  background: var(--bb-gold-subtle);
  border-color: var(--bb-gold-border);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .bb-trust-card {
    padding: 24px 14px 20px;
  }
  .bb-trust-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
  }
  .bb-trust-card__icon svg {
    width: 28px;
    height: 28px;
  }
  .bb-trust-card__img,
  .bb-trust-card__icon img {
    width: 34px;
    height: 34px;
  }
  .bb-trust-card__name {
    font-size: 14px;
  }
  .bb-trust-card__label {
    font-size: 11px;
  }
  .bb-trust-card__cta {
    font-size: 10px;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .bb-trust-grid {
    gap: 10px;
  }
  .bb-trust-card {
    padding: 20px 10px 16px;
  }
}

/* ==========================================================================
   ENDE BB TRUST NETWORK SECTION
   ========================================================================== */