/*
Theme Name: BIGmount Industrial
Theme URI: https://bigmount.example
Description: Child-Theme von Storefront im technisch-industriellen BIGmount-Look (dunkler Hintergrund, orange Akzentfarbe, dezente Animationen) für den BIGmount WooCommerce-Shop.
Author: BIGmount
Template: storefront
Version: 1.5.0
Text Domain: bigmount-industrial
*/

/* =========================================================
   BIGmount Industrial – Farb- und Grundvariablen
   ========================================================= */
:root{
  --bm-bg:#0f1216;
  --bm-surface:#171b21;
  --bm-surface-2:#1d222a;
  --bm-text:#eef1f4;
  --bm-muted:#9aa5b1;
  --bm-accent:#ff7a1a;
  --bm-accent-contrast:#0f1216;
  --bm-line:#262c34;
  --bm-radius:4px;
}

/* =========================================================
   Grundlayout / Typografie
   ========================================================= */
body{
  background:var(--bm-bg) !important;
  color:var(--bm-text);
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
}
a{ color:var(--bm-text); }
a:hover{ color:var(--bm-accent); }

#page{
  background:var(--bm-bg);
  position:relative;
  z-index:1;
}

/* dezentes animiertes Gitter im Hintergrund (an Mockup angelehnt) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,122,26,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,122,26,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  animation:bmDriftGrid 30s linear infinite;
}
@keyframes bmDriftGrid{ from{background-position:0 0;} to{background-position:480px 480px;} }

/* =========================================================
   B2B-Only-Hinweisbalken (über dem Header und im Footer)
   ========================================================= */
.bm-b2b-bar{
  position:relative;
  z-index:2;
  background:var(--bm-accent);
  color:var(--bm-accent-contrast);
  text-align:center;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.2px;
  padding:9px 16px;
  line-height:1.5;
}
.bm-b2b-bar strong{
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-right:4px;
}
@media (max-width:600px){
  .bm-b2b-bar{ font-size:11.5px; padding:8px 12px; }
}
.bm-b2b-footer-note{
  max-width:1240px;
  margin:0 auto 8px;
  padding:0 40px;
  color:var(--bm-muted);
  font-size:11.5px;
  text-align:center;
  border-top:1px solid var(--bm-line);
  padding-top:16px;
}

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  background:rgba(15,18,22,0.92) !important;
  border-bottom:1px solid var(--bm-line);
  backdrop-filter:blur(6px);
}
.site-header .site-branding img{
  max-height:34px;
  width:auto;
}
.site-header-cart .cart-contents,
.main-navigation ul li > a{
  color:var(--bm-text) !important;
  text-transform:uppercase;
  font-weight:600;
  font-size:13px;
  letter-spacing:.3px;
}
.main-navigation ul li > a{
  position:relative;
}
.main-navigation ul li > a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--bm-accent);
  transition:width .25s ease;
}
.main-navigation ul li > a:hover::after{ width:100%; }
.main-navigation ul.menu > li.current-menu-item > a{ color:var(--bm-accent) !important; }

/* =========================================================
   Buttons (WooCommerce + Storefront)
   ========================================================= */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-page a.button{
  background:var(--bm-accent) !important;
  border:none !important;
  color:var(--bm-accent-contrast) !important;
  border-radius:var(--bm-radius) !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:13px !important;
  padding:12px 22px !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover{
  background:var(--bm-accent) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,122,26,0.35);
}
.button.bm-secondary,
.woocommerce a.button.bm-secondary{
  background:transparent !important;
  border:1px solid var(--bm-line) !important;
  color:var(--bm-text) !important;
}
.button.bm-secondary:hover{ border-color:var(--bm-accent) !important; color:var(--bm-accent) !important; box-shadow:none; }

/* =========================================================
   Hero-Bereich (per Shortcode/Widget in Startseite einsetzbar:
   [bigmount_hero] – siehe functions.php)
   ========================================================= */
.bm-hero{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto;
  padding:70px 20px 50px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:50px;
  align-items:center;
}
@media (max-width:800px){
  .bm-hero{ grid-template-columns:1fr; }
}
.bm-hero .bm-kicker{
  color:var(--bm-accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.bm-hero h1{
  font-size:38px;
  line-height:1.15;
  margin:0 0 18px;
  color:var(--bm-text);
}
.bm-hero h1 span{ color:var(--bm-accent); }
.bm-hero p{
  color:var(--bm-muted);
  font-size:16px;
  line-height:1.65;
  margin-bottom:26px;
  max-width:520px;
}
.bm-hero-visual{
  position:relative;
  height:300px;
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  background:linear-gradient(160deg, var(--bm-surface) 0%, var(--bm-surface-2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.bm-hero-visual img{ width:55%; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.5)); position:relative; z-index:2; }
.bm-hero-visual .bm-ring{
  position:absolute;
  border:1px solid rgba(255,122,26,0.18);
  border-radius:50%;
}
.bm-hero-visual .bm-ring.r1{ width:200px; height:200px; }
.bm-hero-visual .bm-ring.r2{ width:280px; height:280px; }

.bm-badges{ display:flex; gap:26px; flex-wrap:wrap; color:var(--bm-muted); font-size:13px; }
.bm-badges div{ display:flex; align-items:center; gap:9px; }
.bm-badges .bm-dot{ width:8px; height:8px; border-radius:50%; background:var(--bm-accent); box-shadow:0 0 0 4px rgba(255,122,26,0.15); }

/* Tablet (Storefront-Breakpoint) */
@media (max-width:800px){
  .bm-hero{ padding:50px 20px 36px; gap:30px; }
  .bm-hero h1{ font-size:30px; }
  .bm-hero p{ max-width:none; }
  .bm-hero-visual{ height:220px; }
  .bm-hero-visual img{ width:45%; }
  .bm-hero-visual .bm-ring.r1{ width:150px; height:150px; }
  .bm-hero-visual .bm-ring.r2{ width:210px; height:210px; }
}

/* Smartphone */
@media (max-width:480px){
  .bm-hero{ padding:36px 16px 28px; }
  .bm-hero .bm-kicker{ font-size:11px; letter-spacing:1.5px; }
  .bm-hero h1{ font-size:24px; }
  .bm-hero p{ font-size:14px; }
  .bm-hero .button{ display:block; width:100%; text-align:center; margin-bottom:10px; }
  .bm-badges{ flex-direction:column; gap:10px; font-size:12px; }
  .bm-ticker span{ font-size:11px; letter-spacing:1px; }
}

/* Laufband mit Kategorien: [bigmount_ticker text="..."] */
.bm-ticker-wrap{
  border-top:1px solid var(--bm-line);
  border-bottom:1px solid var(--bm-line);
  background:var(--bm-surface);
  overflow:hidden;
  padding:12px 0;
  margin-bottom:10px;
}
.bm-ticker{
  display:flex;
  white-space:nowrap;
  animation:bmMarquee 22s linear infinite;
  gap:60px;
}
.bm-ticker span{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bm-muted);
}
@keyframes bmMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================================
   Shop- / Produktübersicht
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--bm-surface);
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  padding:14px !important;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease, border-color .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product.bm-in-view{ opacity:1; transform:translateY(0); }
.woocommerce ul.products li.product:hover{
  border-color:var(--bm-accent);
  box-shadow:0 10px 28px rgba(0,0,0,0.4);
  transform:translateY(-4px);
}
.woocommerce ul.products li.product img{
  border-radius:2px;
  border-bottom:2px solid var(--bm-accent);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--bm-text);
  font-size:15px;
  margin-top:10px;
}
.woocommerce ul.products li.product .price{
  color:var(--bm-text) !important;
  font-weight:800;
}
.woocommerce ul.products li.product .price ins{ color:var(--bm-accent); }

.woocommerce-page .widget-area .widget{
  background:var(--bm-surface);
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  padding:18px;
  margin-bottom:20px;
}
.woocommerce-page .widget-area .widget-title{
  color:var(--bm-text);
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.5px;
}

/* =========================================================
   Produktdetailseite
   ========================================================= */

/* Meta-Zeile unten (Artikelnummer, EAN, Kategorie) – Tags/Schlagwörter
   werden im angepassten Template woocommerce/single-product/meta.php
   nicht mehr ausgegeben. */
.woocommerce div.product .product_meta{
  border-top:1px solid var(--bm-line);
  margin-top:24px;
  padding-top:16px;
  font-size:12.5px;
  color:var(--bm-muted);
}
.woocommerce div.product .product_meta > span{
  display:block;
  margin-bottom:6px;
}
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta .bm-ean,
.woocommerce div.product .product_meta .posted_in a{
  color:var(--bm-text);
  font-weight:600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--bm-muted);
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.4px;
  font-weight:700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--bm-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{ border-color:var(--bm-line) !important; }

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color:var(--bm-line) !important;
  color:var(--bm-muted);
}
.woocommerce table.shop_table th{ color:var(--bm-text); }

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--bm-text) !important;
  font-size:26px;
  font-weight:800;
}

/* B2B-Hinweisleiste unter dem Preis: [bigmount_b2b_badges] */
.bm-product-badges{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  color:var(--bm-muted);
  font-size:12px;
  margin:18px 0;
}
.bm-product-badges div{ display:flex; align-items:center; gap:8px; }
@media (max-width:480px){
  .bm-product-badges{ flex-direction:column; gap:10px; }
}

/* =========================================================
   Keine Blog-Seitenleiste im ganzen Theme
   Storefront zeigt standardmäßig die Blog-Widgets (Suche,
   Neueste Beiträge, Kommentare, Archive) auf Shop-, Kategorie-,
   Produkt- UND normalen Seiten (z. B. Startseite) an. Da BIGmount
   keinen Blog nutzt, blenden wir die Seitenleiste überall aus und
   nutzen die volle Breite für Inhalt/Produktraster.
   ========================================================= */
.content-area{
  width:100% !important;
  float:none !important;
}
.widget-area,
.sidebar{
  display:none !important;
}

/* =========================================================
   Baukasten-Ablauf: [bigmount_system_steps]
   4 Schritte (Fahrzeughalterung -> Verbinder -> Basisplatte ->
   Geräteträger), verlinkt auf die jeweilige Kategorie.
   ========================================================= */
.bm-steps{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto 40px;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--bm-surface);
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  overflow:hidden;
}
.bm-steps .bm-step{
  padding:22px 18px;
  border-right:1px solid var(--bm-line);
  position:relative;
  color:var(--bm-text);
}
.bm-steps .bm-step:last-child{ border-right:none; }
.bm-steps-note{
  max-width:820px;
  margin:14px auto 0;
  padding:0 20px;
  color:var(--bm-muted);
  font-size:12.5px;
  line-height:1.6;
  text-align:center;
}
.bm-steps .bm-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  background:var(--bm-accent);
  color:var(--bm-accent-contrast);
  font-weight:700;
  font-size:13px;
  border-radius:50%;
  margin-bottom:12px;
}
.bm-steps h3{ margin:0 0 6px; font-size:15px; }
.bm-steps p{ margin:0; color:var(--bm-muted); font-size:12.5px; line-height:1.5; }
.bm-steps .bm-step-arrow{
  position:absolute;
  right:-11px; top:50%;
  transform:translateY(-50%);
  width:22px; height:22px;
  background:var(--bm-bg);
  border:1px solid var(--bm-line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--bm-accent);
  font-size:11px;
  z-index:2;
}
@media (max-width:800px){
  .bm-steps{ grid-template-columns:1fr; }
  .bm-steps a.bm-step{ border-right:none; border-bottom:1px solid var(--bm-line); }
  .bm-steps .bm-step-arrow{ display:none; }
}

/* =========================================================
   Kugelgröße-Filterleiste: [bigmount_kugel_filter]
   Ersetzt das Sidebar-Attribut-Widget (Sidebar ist überall
   ausgeblendet), wird oberhalb des Produktrasters eingesetzt.
   ========================================================= */
.bm-filter-group{ position:relative; z-index:1; margin:0 0 24px; }
.bm-filter-bar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:var(--bm-surface-2);
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  padding:14px 18px;
  margin:0 0 10px;
}
.bm-filter-bar:last-child{ margin-bottom:0; }
.bm-filter-bar .bm-filter-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--bm-muted);
  margin-right:2px;
}
.bm-filter-bar a.bm-filter-chip{
  border:1px solid var(--bm-line);
  background:transparent;
  color:var(--bm-text);
  font-size:13px;
  padding:6px 14px;
  border-radius:20px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.bm-filter-bar a.bm-filter-chip:hover{ border-color:var(--bm-accent); color:var(--bm-accent); }
.bm-filter-bar a.bm-filter-chip.is-active{
  border-color:var(--bm-accent);
  background:var(--bm-accent);
  color:var(--bm-accent-contrast);
  font-weight:600;
}
.bm-filter-bar a.bm-filter-chip.is-disabled{
  border-style:dashed;
  color:var(--bm-muted);
  pointer-events:none;
  opacity:.6;
}

/* Kugelgröße-Badge auf Produktkarten und Produktdetailseite */
.bm-ball-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:20px;
  margin-bottom:8px;
  letter-spacing:.2px;
}
.bm-ball-badge.bm-ball-b{ background:rgba(255,122,26,.15); color:var(--bm-accent); border:1px solid var(--bm-accent); }
.bm-ball-badge.bm-ball-c{ background:rgba(154,165,177,.12); color:var(--bm-muted); border:1px solid var(--bm-muted); }
.bm-ball-badge.bm-ball-d{ background:rgba(154,165,177,.12); color:var(--bm-muted); border:1px dashed var(--bm-muted); }

/* Bauteil-Übersicht auf der Produktdetailseite: [siehe bigmount_render_product_specs] */
.bm-spec-panel{
  background:var(--bm-surface);
  border:1px solid var(--bm-line);
  border-radius:var(--bm-radius);
  padding:16px 20px;
  margin:18px 0;
}
.bm-spec-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--bm-accent);
  font-weight:700;
  margin-bottom:10px;
}
.bm-spec-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bm-spec-items li{
  position:relative;
  padding-left:18px;
  color:var(--bm-text);
  font-size:13.5px;
  line-height:1.5;
}
.bm-spec-items li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--bm-accent);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--bm-surface) !important;
  border-top:1px solid var(--bm-line);
  color:var(--bm-muted);
}
.site-footer a{ color:var(--bm-muted); }
.site-footer a:hover{ color:var(--bm-accent); }