/* =========================================================================
   Rhino on the Road — Shop & Header Redesign
   Brand-Referenz: Mara Brand-One-Pager (Inbox ID 21)
   Farben:  Schwarz #1A1A1A · Gold #D4A017 (nur Akzent) · Creme #E8E0CC
   Fonts:   Oswald (Headlines/Nav) · IBM Plex Sans (Body)
   Theme:   Inspiro (Superfish-Menü: ul.nav.navbar-nav.sf-menu)
   HINWEIS FLOW: Selektoren an Live-Markup geprüft (Stand shop.html 2026-06-10),
   bitte nach Deploy visuell gegenchecken (Hero-/Transparent-Header-Seiten!).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --rhino-black:  #1A1A1A;
  --rhino-gold:   #D4A017;
  --rhino-cream:  #E8E0CC;
  --rhino-green:  #4A7C59;
  --rhino-white:  #FFFFFF;
}

/* ============================ 1. HEADER (alle Seiten) ===================== */
header#masthead.site-header{
  background-color: var(--rhino-black) !important;
  border-bottom: 2px solid var(--rhino-gold);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Logo: weiße/goldene Variante setzen (in WP Customizer -> Logo).
   CSS kann das Bild nicht tauschen — Flow: weißes Logo hinterlegen.
   Fallback, falls dunkles Logo bleibt: invertieren. */
header#masthead .custom-logo{
  /* filter: brightness(0) invert(1);  <- nur aktivieren, falls Logo dunkel bleibt */
}

/* Primäre Navigation */
nav.primary-menu-wrapper .navbar-nav > li > a,
nav.primary-menu-wrapper .navbar-nav > li > a:link{
  color: var(--rhino-gold) !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
nav.primary-menu-wrapper .navbar-nav > li > a:hover,
nav.primary-menu-wrapper .navbar-nav > li.current-menu-item > a{
  color: var(--rhino-cream) !important;
}
/* Dropdown-Pfeil-Icon ebenfalls gold */
nav.primary-menu-wrapper .navbar-nav .svg-icon{ fill: var(--rhino-gold); }

/* ============================ 2. DROPDOWN / MEGA-MENÜ ==================== */
nav.primary-menu-wrapper .sf-menu ul.sub-menu{
  background-color: var(--rhino-black) !important;
  border-top: 2px solid var(--rhino-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 240px;
}
nav.primary-menu-wrapper .sf-menu ul.sub-menu li a{
  color: var(--rhino-cream) !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  border-bottom: 1px solid rgba(212,160,23,.15);
}
nav.primary-menu-wrapper .sf-menu ul.sub-menu li a:hover{
  color: var(--rhino-gold) !important;
  background: rgba(212,160,23,.08);
}

/* Marktplatz als Mega-Menü (Spalten). */
#menu-item-394876.menu-item-has-children > ul.sub-menu{
  display: flex; flex-wrap: wrap; gap: 0;
  width: min(720px, 92vw); padding: 12px;
}
#menu-item-394876 > ul.sub-menu > li{ flex: 1 1 200px; }
#menu-item-394876 > ul.sub-menu > li > a{
  color: var(--rhino-gold) !important;
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  border-bottom: 1px solid var(--rhino-gold);
}
/* dynamisch eingehängte Unterkategorien (Level 2) */
#menu-item-394876 ul.sub-menu ul.sub-menu{
  position: static; box-shadow: none; border-top: none;
  min-width: 0; background: transparent !important;
}

/* ============================ 3. SCHWEBENDER WARENKORB =================== */
#rhino-cart-fab{ display: none; }
body.woocommerce-shop      #rhino-cart-fab,
body.post-type-archive-product #rhino-cart-fab,
body.tax-product_cat       #rhino-cart-fab,
body.single-product        #rhino-cart-fab,
body.woocommerce-cart      #rhino-cart-fab,
body.woocommerce-account   #rhino-cart-fab{
  display: flex;
}
#rhino-cart-fab{
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  width: 64px; height: 64px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--rhino-black);
  border: 2px solid var(--rhino-gold);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
#rhino-cart-fab:hover{ transform: scale(1.06); box-shadow: 0 8px 26px rgba(0,0,0,.55); }
#rhino-cart-fab img{ width: 38px; height: 38px; object-fit: contain; }
#rhino-cart-fab .fab-empty{ display: block; }
#rhino-cart-fab .fab-full { display: none; }
#rhino-cart-fab.has-items .fab-empty{ display: none; }
#rhino-cart-fab.has-items .fab-full { display: block; }
#rhino-cart-fab .fab-count{
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--rhino-gold); color: var(--rhino-black);
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px;
  border-radius: 11px; display: none; align-items: center; justify-content: center;
}
#rhino-cart-fab.has-items .fab-count{ display: flex; }

/* ============================ 4. BESTSELLER / EMPFOHLEN ================== */
.rhino-feature-row{
  display: flex; flex-wrap: wrap; gap: 24px;
  margin: 0 auto 36px; max-width: 1100px;
}
.rhino-feature-card{
  flex: 1 1 320px; position: relative;
  background: var(--rhino-cream);
  border: 1px solid rgba(26,26,26,.08); border-radius: 10px;
  overflow: hidden;
}
.rhino-feature-card .rhino-badge{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .05em;
  padding: 6px 12px; border-radius: 4px;
  background: var(--rhino-gold); color: var(--rhino-black);
}
.rhino-feature-card.is-empfohlen .rhino-badge{
  background: var(--rhino-black); color: var(--rhino-gold);
  border: 1px solid var(--rhino-gold);
}
.rhino-feature-card h3{
  font-family: 'Oswald', sans-serif; color: var(--rhino-black);
}
.rhino-feature-card .button{
  background: var(--rhino-black) !important; color: var(--rhino-gold) !important;
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
}
.rhino-feature-card .button:hover{ background: var(--rhino-gold) !important; color: var(--rhino-black) !important; }

/* ============================ 5. MOBILE ================================= */
@media (max-width: 768px){
  #rhino-cart-fab{ width: 56px; height: 56px; right: 16px; bottom: 16px; }
  #menu-item-394876.menu-item-has-children > ul.sub-menu{ width: 100%; display: block; }
  nav.mobile-menu-wrapper .menu-item > a{ color: var(--rhino-gold) !important; font-family:'Oswald',sans-serif; }
}