/* =========================================================================
   bm-tokens.css — VERBINDLICHE DESIGN-QUELLE fuer buchundmehrammarkt.de
   Wird als LETZTES Stylesheet geladen. Neue Design-Regeln entstehen NUR hier.
   Grundlage: Entwurfsvorlagen des Betreibers + Design-Review 08.08.2026
   ========================================================================= */

:root{
  /* Flaechen */
  --bm-bg:        #faf9f5;   /* Seitenhintergrund */
  --bm-bg-2:      #f2f1ea;   /* Boxen, Chips, Hinweisfelder */
  --bm-card:      #ffffff;   /* Karten */
  --bm-line:      #e5e3dc;   /* Rahmen */

  /* Text */
  --bm-tp:        #1c1c1a;   /* primaer */
  --bm-ts:        #6b6a64;   /* sekundaer */
  --bm-tm:        #9a988f;   /* tertiaer / meta */

  /* Marke */
  --bm-navy:      #1a2e52;
  --bm-navy-dark: #14243f;
  --bm-red:       #c8102e;
  --bm-gold:      #e8a33d;
  --bm-green:     #3b6d11;

  /* Abstandsleiter — andere Werte sind nicht erlaubt */
  --bm-s1: 4px;  --bm-s2: 8px;  --bm-s3: 12px; --bm-s4: 16px;
  --bm-s5: 24px; --bm-s6: 32px; --bm-s7: 48px;

  /* Radien */
  --bm-r-sm: 6px; --bm-r-md: 8px; --bm-r-lg: 12px; --bm-r-xl: 14px;

  /* Typografie — genau fuenf Stufen */
  --bm-fs-h1:   26px;
  --bm-fs-h2:   20px;
  --bm-fs-body: 15px;
  --bm-fs-card: 14px;
  --bm-fs-meta: 12px;
  --bm-fs-mini: 11px;

  /* Layout */
  --bm-max:     1080px;
  --bm-gap:     var(--bm-s4);
  --bm-sidebar: 220px;
}

/* ------------------------------------------------------------------ Basis */
body{
  background: var(--bm-bg) !important;
  color: var(--bm-tp);
  font-family: "Poppins", Arial, sans-serif;
  font-size: var(--bm-fs-body);
  line-height: 1.6;
}

/* Inhaltsbreite — gilt shopweit */
.site-content .ast-container,
.ast-container{
  max-width: var(--bm-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* --------------------------------------------------- Sektionsueberschriften */
.bm-sec-title,
h2.bm-sec-title,
.bm-cat-page h2,
h2.sec{
  font-size: var(--bm-fs-h2) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--bm-gold) !important;
  padding-left: 10px !important;
  margin: var(--bm-s7) 0 var(--bm-s5) 0 !important;
}

/* ------------------------------------------------------------ Buttonregel */
/* Primaer: Navy in Ruhe, Rot im Hover */
.bm-uc-atc,
.bm-btn-primary,
button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout a.checkout-button{
  background: var(--bm-navy) !important;
  background-color: var(--bm-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--bm-r-md) !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 9px var(--bm-s4) !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease-in-out;
}
.bm-uc-atc:hover,
.bm-btn-primary:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover{
  background: var(--bm-red) !important;
  background-color: var(--bm-red) !important;
  color: #ffffff !important;
}

/* Sekundaer: neutral mit Rahmen */
.bm-btn-secondary,
.woocommerce a.button:not(.alt):not(.bm-uc-atc),
.woocommerce button.button:not(.alt){
  background: transparent !important;
  color: var(--bm-navy) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
}
.bm-btn-secondary:hover,
.woocommerce a.button:not(.alt):not(.bm-uc-atc):hover,
.woocommerce button.button:not(.alt):hover{
  border-color: var(--bm-navy) !important;
  color: var(--bm-navy) !important;
}

/* Textaktion (Merken, Entfernen) — nie ein Button-Look */
.bm-uc-wl-btn,
.bm-textaction{
  background: transparent !important;
  border: none !important;
  color: var(--bm-ts) !important;
  font-size: var(--bm-fs-meta) !important;
  font-weight: 400 !important;
  padding: var(--bm-s2) 0 0 0 !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer;
}
.bm-uc-wl-btn:hover,
.bm-textaction:hover{ color: var(--bm-navy) !important; }

/* Ausnahme: Header-Sonderfaelle bleiben Rot */
.bm-allcat-toggle, .bm-hdr-cart{
  background: var(--bm-red) !important;
  color: #ffffff !important;
}
.bm-allcat-toggle:hover, .bm-hdr-cart:hover{
  background: #a80d26 !important;
}

/* Newsletter-Button: Navy statt Rot (Rot bleibt Akzent) */
.bm-ft-news button, .bm-ft-news input[type="submit"]{
  background: var(--bm-navy) !important;
  color: #fff !important;
  border-radius: var(--bm-r-md) !important;
}
.bm-ft-news button:hover, .bm-ft-news input[type="submit"]:hover{
  background: var(--bm-red) !important;
}

/* -------------------------------------------------------- Produktkachel */
.bm-uc{
  background: var(--bm-card) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-lg) !important;
  padding: var(--bm-s3) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: border-color .15s ease-in-out;
}
.bm-uc:hover{ border-color: var(--bm-red) !important; cursor: pointer; }

.bm-uc-img-wrap{
  display: block !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: var(--bm-r-sm) !important;
  overflow: hidden !important;
  margin-bottom: var(--bm-s3) !important;
  background: var(--bm-bg-2) !important;
}
.bm-uc-img-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.bm-uc-cat{
  font-size: var(--bm-fs-mini) !important;
  color: var(--bm-tm) !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}
.bm-uc-title-link{
  font-size: var(--bm-fs-card) !important;
  font-weight: 600 !important;
  color: var(--bm-tp) !important;
  text-decoration: none !important;
  margin: var(--bm-s1) 0 !important;
  /* immer zwei Zeilen reservieren -> gleiche Kachelhoehen */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(2 * 1.35 * var(--bm-fs-card)) !important;
}
.bm-uc-autor{ font-size: var(--bm-fs-meta) !important; color: var(--bm-ts) !important; }

/* Format in der Kachel entfaellt — gehoert auf die Produktseite */
.bm-uc-format{ display: none !important; }

/* Preis in Navy: Buchpreise sind gebunden, Rot bleibt echten Reduzierungen */
.bm-uc-price-wrap{ margin: var(--bm-s1) 0 var(--bm-s2) 0 !important; }
.bm-uc-price-wrap .price,
.bm-uc-price,
.bm-uc-price-wrap .woocommerce-Price-amount{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--bm-navy) !important;
}
.bm-uc-shipping,
.bm-uc-price-wrap a{
  display: block !important;
  font-size: var(--bm-fs-mini) !important;
  color: var(--bm-tm) !important;
  font-weight: 400 !important;
}
/* Nur echte Rabatte duerfen rot sein */
.bm-uc-discount, .bm-uc-price-wrap ins{ color: var(--bm-red) !important; }
.bm-uc-price-wrap del{ color: var(--bm-tm) !important; font-weight: 400 !important; }

/* Der Button sitzt immer unten, egal wie lang der Titel ist */
.bm-uc-atc{ margin-top: auto !important; width: 100% !important; display: block !important; }

/* -------------------------------------------------------------- Raster */
ul.products, .bm-shared-grid, .bm-srp-grid, .bm-wl-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--bm-gap) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.products > li, .bm-uc-li{
  list-style: none !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  border: none !important;
  padding: 0 !important;
}
@media (max-width: 900px){
  ul.products, .bm-shared-grid, .bm-srp-grid, .bm-wl-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px){
  ul.products, .bm-shared-grid, .bm-srp-grid, .bm-wl-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------ Kategorieseiten-Gerüst */
.bm-cat-layout{
  display: grid !important;
  grid-template-columns: var(--bm-sidebar) minmax(0, 1fr) !important;
  gap: var(--bm-s5) !important;
  align-items: start !important;
}
.bm-cat-sidebar{
  background: var(--bm-card) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-lg) !important;
  padding: var(--bm-s2) var(--bm-s4) var(--bm-s3) !important;
  font-size: 13px !important;
}
.bm-cat-topbar{
  background: var(--bm-card) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-md) !important;
  padding: 10px var(--bm-s4) !important;
  margin-bottom: var(--bm-s4) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
@media (max-width: 900px){
  .bm-cat-layout{ grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------- SVG-Schutzregel */
/* Verhindert bildschirmgrosse Icons bei SVGs ohne Groessenangabe */
.bm-uc svg, .bm-empty svg, .bm-wl-empty svg,
.bm-sc-icon, .bm-icon, .bm-textaction svg, .bm-uc-wl-btn svg{
  width: 1em !important;
  height: 1em !important;
  max-width: 24px !important;
  max-height: 24px !important;
  vertical-align: -0.125em;
}
/* Leerzustaende: Symbol dezent, nie dominierend */
.bm-wl-empty svg, .bm-empty svg{
  max-width: 48px !important;
  max-height: 48px !important;
  opacity: .35;
}

/* ------------------------------------------------ Warenkorb und Kasse */
/* Kasse: bei Menge 1 nur einen Preis zeigen */
.wc-block-components-order-summary-item__individual-prices{ display: none !important; }

/* Bestellübersicht ruhig halten */
.wc-block-components-order-summary-item__description p,
.wc-block-components-order-summary-item__description{
  color: var(--bm-ts) !important;
  font-size: var(--bm-fs-meta) !important;
}
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.woocommerce-Price-amount{
  color: var(--bm-navy) !important;
  font-weight: 600 !important;
}
.wc-block-components-totals-item__value{ color: var(--bm-tp) !important; }

/* Warenkorb-Seite: Karten-Optik statt nackter Tabelle */
.wp-block-woocommerce-cart .wc-block-cart__sidebar > *,
.woocommerce-cart-form__contents{
  background: var(--bm-card) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-lg) !important;
  padding: var(--bm-s4) !important;
}

/* ------------------------------------------------------------ Usability */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--bm-navy) !important;
  outline-offset: 2px !important;
}

/* =========================================================================
   TEIL 2 — Fixes nach Browser-Messung 08.08.2026
   Alle Selektoren aus der Messung, nichts geraten.
   ========================================================================= */

/* ---------------------------------------------------- A1 Hero-Slider
   Ursache (gemessen): .swiper-wrapper hat width 1040px statt n x 1040px,
   transform verschiebt den aktiven Slide auf left -2783px. Der Slider wurde
   initialisiert, bevor die 1080px-Begrenzung wirkte. Der Hero soll laut
   Entwurf ohnehin ueber die volle Breite laufen -> von der Begrenzung
   ausnehmen und Swiper-Breiten neutralisieren. */
.bm-hero-swiper,
.bm-hero-swiper .swiper-wrapper,
.bm-hero-swiper .swiper-slide,
.bm-hero-slide{
  max-width: none !important;
}
.bm-hero-swiper{ width: 100% !important; overflow: hidden !important; }
.bm-hero-swiper .swiper-wrapper{
  width: auto !important;
  display: flex !important;
}
.bm-hero-swiper .swiper-slide,
.bm-hero-slide{
  width: 100% !important;
  flex: 0 0 100% !important;
}
.bm-hero-swiper a.bm-slide-link{
  display: block !important;
  width: 100% !important;
  min-height: 280px !important;
}

/* ------------------------------------------- A3 CTA-Buttons sichtbar machen
   Gemessen: background rgba(0,0,0,0), color rgb(51,51,51) — unsichtbar auf
   Navy. Auf Navy-Flaechen heller Akzentbutton, auf weissen Flaechen Navy. */
a.bm-editorial-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--bm-s2) !important;
  background: var(--bm-gold) !important;
  color: #3a2a06 !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  min-height: 40px !important;
  text-decoration: none !important;
}
a.bm-editorial-btn:hover{ background: #f0b45c !important; }

a.bm-fokus-entdecken-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--bm-s2) !important;
  background: var(--bm-navy) !important;
  color: #ffffff !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  min-height: 40px !important;
  text-decoration: none !important;
}
a.bm-fokus-entdecken-btn:hover{ background: var(--bm-red) !important; }

/* --------------------------------------------- A6 Emojis in der Trust-Leiste
   Gemessen: 3x span.bm-trust-item mit Emoji im Text. CSS kann Text nicht
   entfernen — das erledigt der PHP-Teil des Auftrags. Hier nur Typografie. */
span.bm-trust-item{
  font-size: var(--bm-fs-meta) !important;
  letter-spacing: .2px !important;
}

/* ------------------------------------------------- B1 Preisfilter als Chips
   Gemessen: a.bm-price-group-btn display inline, margin 0, padding 0. */
a.bm-price-group-btn{
  display: inline-block !important;
  margin: 0 var(--bm-s1) var(--bm-s1) 0 !important;
  padding: 4px 10px !important;
  background: var(--bm-bg-2) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: 20px !important;
  font-size: var(--bm-fs-meta) !important;
  color: var(--bm-ts) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
a.bm-price-group-btn:hover{
  border-color: var(--bm-navy) !important;
  color: var(--bm-navy) !important;
}
button.bm-price-btn{
  display: block !important;
  width: 100% !important;
  margin-top: var(--bm-s3) !important;
  padding: 9px var(--bm-s4) !important;
  background: var(--bm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bm-r-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
}
button.bm-price-btn:hover{ background: var(--bm-red) !important; }

/* --------------------------------------------------- B2 Zaehler abtrennen
   Gemessen: span.bm-subcat-count display inline, margin 2px 0 0. */
span.bm-subcat-count{
  display: inline-block !important;
  margin-left: var(--bm-s2) !important;
  color: var(--bm-tm) !important;
  font-size: var(--bm-fs-mini) !important;
  font-weight: 400 !important;
}

/* ------------------------------------------------------- B3 Sidebar-Ruhe
   Gemessen: div.bm-filter-box margin-bottom 0, kein Abstand. */
aside.bm-cat-sidebar{
  font-size: 13px !important;
  padding: var(--bm-s3) var(--bm-s4) var(--bm-s4) !important;
}
aside.bm-cat-sidebar div.bm-filter-box{
  margin-bottom: 0 !important;
  padding: var(--bm-s4) 0 !important;
  border-bottom: 1px solid var(--bm-line) !important;
}
aside.bm-cat-sidebar div.bm-filter-box:last-child{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
aside.bm-cat-sidebar h4,
aside.bm-cat-sidebar .bm-filter-title{
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 var(--bm-s2) 0 !important;
}
aside.bm-cat-sidebar a{
  display: block !important;
  padding: 3px 0 !important;
  color: var(--bm-ts) !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
}
aside.bm-cat-sidebar a:hover{ color: var(--bm-navy) !important; }
a.bm-back-link{
  font-weight: 600 !important;
  color: var(--bm-navy) !important;
  margin-bottom: var(--bm-s2) !important;
}

/* ---------------------------------------- C1 Leere Bloecke im Warenkorb weg
   Gemessen: div.wp-block-woocommerce-germanized-cart-summary-item und
   div.wc-block-cart__payment-options sind leer, 34px hoch, mit Rahmen. */
div.wp-block-woocommerce-germanized-cart-summary-item:empty,
div.wc-block-cart__payment-options:empty,
div.probox:empty,
div.proinput:empty{
  display: none !important;
}

/* --------------------------- C2 + D1 Beschreibungs-Fetzen in Korb und Kasse
   Gemessen: p in div.wc-block-components-product-metadata__description. */
div.wc-block-components-product-metadata__description{
  display: none !important;
}

/* ------------------------------------------------- E1 PDP-Preis auf Navy
   Gemessen: bdi in span.bm-sp4-fmt-price = rgb(200,16,46), 33.6px. */
span.bm-sp4-fmt-price,
span.bm-sp4-fmt-price bdi,
span.bm-sp4-fmt-price .woocommerce-Price-amount{
  color: var(--bm-navy) !important;
}
/* Nur echte Reduzierungen bleiben rot */
span.bm-sp4-fmt-price ins bdi{ color: var(--bm-red) !important; }
span.bm-sp4-fmt-price del bdi{ color: var(--bm-tm) !important; }

/* ------------------------------------ E2 PDP-Trust-Kachel ohne 3-Zeilen-Bruch
   Gemessen: div.bm-sp4-trust-item width 186.66px, font 12px, 3 Zeilen. */
div.bm-sp4-trust-item{
  font-size: var(--bm-fs-mini) !important;
  line-height: 1.35 !important;
  padding: var(--bm-s2) var(--bm-s2) !important;
  min-height: 0 !important;
  height: auto !important;
  hyphens: auto;
}

/* --------------------------------------- Abschlussband am Seitenende (Navy)
   Selektor in der Messung nicht eindeutig erfasst; deshalb breit gefasst
   ueber die bekannten Klassen der Abschluss-Sektion. */
.bm-bigcta, .bm-final-cta, .bm-closing-band{
  background: var(--bm-navy) !important;
  color: #ffffff !important;
  border-radius: var(--bm-r-xl) !important;
  text-align: center !important;
  padding: var(--bm-s6) var(--bm-s5) !important;
  margin: var(--bm-s7) 0 !important;
}
.bm-bigcta h2, .bm-final-cta h2, .bm-closing-band h2{
  color: #ffffff !important;
  border-left: none !important;
  padding-left: 0 !important;
  font-size: var(--bm-fs-h1) !important;
  margin: 0 0 var(--bm-s1) 0 !important;
}
.bm-bigcta p, .bm-final-cta p, .bm-closing-band p{
  color: #c9cfe0 !important;
  margin: 0 0 var(--bm-s4) 0 !important;
}

/* --------------------------- Cover, das nicht laedt: neutrale Flaeche statt
   springendem Leerraum (kein Smiley, kein Text) */
.bm-uc-img-wrap{ background: var(--bm-bg-2) !important; }
.bm-uc-img-wrap img[src=""],
.bm-uc-img-wrap img:not([src]){ visibility: hidden !important; }