/* ============================================================
   Header & Footer (Layout) – token-basiert, gescopet
   ------------------------------------------------------------
   Nachbau von retourenmaster24.com:
   Servicezeile (dunkel) → Hauptheader (weiß) → Kategorienav.
   Footer dunkel (Markenverlauf) als roter Faden.
   Greift nur, wenn KEIN Elementor-Header/-Footer zugewiesen ist.
   ============================================================ */

/* ---------- Header-Gerüst ---------- */
.rm-header {
  position: sticky;
  top: 0;
  z-index: var(--rm-z-header);
  background: var(--rm-header-bg);
  box-shadow: var(--rm-shadow);
}

/* ---------- Servicezeile ---------- */
.rm-topbar {
  background: var(--rm-topbar-bg);
  color: var(--rm-topbar-ink);
  font-size: var(--rm-fs-300);
}

.rm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-4);
  min-height: 30px;
  padding-block: var(--rm-space-1);
}

.rm-topbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2) var(--rm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-topbar li {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
}

.rm-topbar__usps {
  gap: var(--rm-space-2) var(--rm-space-3);
}

.rm-topbar__usps li + li::before {
  content: "|";
  margin-right: var(--rm-space-3);
  opacity: .5;
}

.rm-topbar a {
  color: inherit;
  text-decoration: none;
}

.rm-topbar a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------- Hauptheader ---------- */
.rm-header__inner {
  display: flex;
  align-items: center;
  gap: var(--rm-space-5);
  min-height: var(--rm-header-h);
  padding-block: var(--rm-space-3);
}

.rm-header__brand {
  flex: 0 0 auto;
}

.rm-logo img,
.rm-header__brand img,
.rm-header__brand .custom-logo {
  display: block;
  width: auto;
  max-height: 96px;
}

.rm-logo--text {
  font-weight: var(--rm-weight-bold);
  font-size: var(--rm-fs-600);
  color: var(--rm-header-ink);
  text-decoration: none;
}

.rm-header__search {
  flex: 0 1 560px;
  max-width: 560px;
  margin-inline: auto;
}

.rm-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--rm-space-5);
  margin-left: auto;
}

/* Konto / generische Aktion */
.rm-action {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  color: var(--rm-primary);
  text-decoration: none;
  font-size: var(--rm-fs-400);
  font-weight: var(--rm-weight-bold);
  line-height: 1.2;
}

/* „Mein Konto"-Schriftzug explizit in Beere */
.rm-action__label {
  color: var(--rm-primary);
}

.rm-action:hover,
.rm-cart:hover {
  color: var(--rm-primary);
}

/* Warenkorb */
.rm-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  color: var(--rm-header-ink);
  text-decoration: none;
}

.rm-cart__icon {
  position: relative;
  display: inline-flex;
}

.rm-cart__count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--rm-weight-bold);
  line-height: 18px;
  text-align: center;
}


/* Such-Formular – heller Beere-Pill, Input wächst, Beere-Button bündig rechts */
.rm-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--rm-radius-btn);
  background: var(--rm-primary-soft);
  overflow: hidden;
}

.rm-search__field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: var(--rm-space-3) var(--rm-space-5);
  font: inherit;
  color: var(--rm-ink);
  background: transparent;
}

.rm-search__field::placeholder {
  color: var(--rm-muted);
}

.rm-search__field:focus {
  outline: none;
}

.rm-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  border: 0;
  border-radius: 0;
  background: var(--rm-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s;
}

.rm-search__submit:hover {
  background: var(--rm-primary-deep);
}

.rm-header__search .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Burger (mobil) ---------- */
.rm-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--rm-tap);
  height: var(--rm-tap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rm-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--rm-header-ink);
  transition: transform .2s, opacity .2s;
}

/* ---------- Kategorienavigation + Mega-Menü ---------- */
.rm-nav {
  position: relative;             /* Bezug für das full-width Mega-Panel */
  background: var(--rm-nav-bg);
  border-top: 1px solid var(--rm-nav-border);
  border-bottom: 1px solid var(--rm-nav-border);
}

.rm-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* statisch, damit das Mega-Panel sich auf .rm-nav (volle Breite) bezieht */
.rm-nav__list > li {
  position: static;
}

.rm-nav__list > li > a {
  display: inline-block;
  padding: var(--rm-space-4);
  color: var(--rm-header-ink);
  font-size: var(--rm-fs-300);
  font-weight: var(--rm-weight-bold);
  text-decoration: none;
  letter-spacing: .01em;
  border-radius: 0;
  transition: background-color .15s, color .15s;
}

/* Caret bei Punkten mit Untermenü */
.rm-nav__list > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Hover/aktiv: Item komplett in Beere gefüllt (weißer Text).
   current-menu-ancestor = Oberkategorie, wenn man auf einer Unterkategorie ist. */
.rm-nav__list > li:hover > a,
.rm-nav__list > li:focus-within > a,
.rm-nav__list > li.current-menu-item > a,
.rm-nav__list > li.current-menu-ancestor > a {
  background: var(--rm-primary);
  color: #fff;
}

/* ---- Mega-Panel (Untermenü) ---- */
.rm-nav .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--rm-z-header);
  margin: 0;
  list-style: none;
  background: var(--rm-mega-bg);
  box-shadow: var(--rm-shadow-lg);
  /* Inhalt auf Container-Breite zentrieren */
  padding: var(--rm-space-6) max(var(--rm-space-4), calc((100% - var(--rm-container)) / 2));
  /* Mehrspaltiges Raster */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--rm-space-2) var(--rm-space-6);
}

.rm-nav__list > li:hover > .sub-menu,
.rm-nav__list > li:focus-within > .sub-menu,
.rm-nav__list > li.is-open > .sub-menu {
  display: grid;
}

.rm-nav .sub-menu a {
  display: inline-block;
  padding: var(--rm-space-2) 0;
  color: var(--rm-mega-ink);
  font-size: var(--rm-fs-400);
  font-weight: var(--rm-weight-medium);
  text-decoration: none;
}

.rm-nav .sub-menu a:hover {
  color: var(--rm-mega-hover);
  text-decoration: underline;
}

/* Ebene 3 im Desktop-Mega-Menü: als statische, eingerückte Unterliste
   unter ihrem Ebene-2-Punkt (kein zweites Overlay) – ergibt saubere,
   gruppierte Spalten statt überlappender Panels. */
.rm-nav .sub-menu .sub-menu {
  display: block;
  position: static;
  z-index: auto;
  margin: var(--rm-space-1) 0 var(--rm-space-3);
  padding: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: none;
}

.rm-nav .sub-menu .menu-item-has-children > a {
  font-weight: var(--rm-weight-bold);
}

.rm-nav .sub-menu .sub-menu a {
  font-size: var(--rm-fs-300);
  opacity: .9;
  padding: var(--rm-space-1) 0;
}

/* Drawer-Elemente nur mobil sichtbar */
.rm-nav__head,
.rm-nav__toggle {
  display: none;
}

/* Backdrop fürs Mobilmenü (per JS getoggelt) */
.rm-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.rm-nav__backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---------- Footer (hell) ---------- */
.rm-footer {
  background: var(--rm-footer-bg);
  color: var(--rm-footer-ink);
}

.rm-footer__grid {
  display: grid;
  grid-template-columns: auto 1.4fr 1.6fr 1.2fr;
  align-items: start;
  gap: var(--rm-space-6);
  padding-block: var(--rm-space-6);
}

.rm-footer__brand {
  display: flex;
  align-items: center;
}

.rm-footer__logo {
  display: block;
  width: auto;
  max-height: 64px;
}

.rm-footer__logo-text {
  font-weight: var(--rm-weight-bold);
  font-size: var(--rm-fs-500);
  color: var(--rm-footer-ink);
}

.rm-footer__title {
  margin: 0 0 var(--rm-space-4);
  font-size: var(--rm-fs-400);
  font-weight: var(--rm-weight-bold);
  color: var(--rm-footer-ink);
}

.rm-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-footer__contact li {
  margin-bottom: var(--rm-space-2);
  font-size: var(--rm-fs-300);
  color: var(--rm-footer-muted);
}

/* Rechtliches: untereinander (verträgt beliebig viele Punkte, kein Überlauf) */
.rm-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-footer__menu li {
  font-size: var(--rm-fs-300);
}

.rm-footer a {
  color: var(--rm-footer-ink);
  text-decoration: none;
}

.rm-footer a:hover {
  text-decoration: underline;
}

.rm-social {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  font-size: var(--rm-fs-300);
  font-weight: var(--rm-weight-medium);
}

/* ============================================================
   Off-Canvas-Warenkorb (Side-Cart)
   ============================================================ */
.rm-no-scroll {
  overflow: hidden;
}

.rm-sidecart {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
}

.rm-sidecart.is-open {
  visibility: visible;
}

.rm-sidecart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s ease;
}

.rm-sidecart.is-open .rm-sidecart__backdrop {
  opacity: 1;
}

.rm-sidecart__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 92vw);
  height: 100%;
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow-lg);
  transform: translateX(100%);
  transition: transform .3s ease;
}

.rm-sidecart.is-open .rm-sidecart__panel {
  transform: translateX(0);
}

.rm-sidecart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rm-space-4) var(--rm-space-5);
  background: var(--rm-primary);
  color: #fff;
}

.rm-sidecart__title {
  font-size: var(--rm-fs-500);
  font-weight: var(--rm-weight-bold);
}

.rm-sidecart__close {
  display: inline-flex;
  padding: var(--rm-space-1);
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: var(--rm-radius);
}

.rm-sidecart__close:hover {
  background: rgba(255, 255, 255, .15);
}

.rm-sidecart__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--rm-space-5);
}

/* ---- WooCommerce-Mini-Cart im Panel ---- */
.rm-sidecart__body .woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-sidecart,
.rm-sidecart * {
  box-sizing: border-box;
}

.rm-sidecart__body .woocommerce-mini-cart-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-1) var(--rm-space-3);
  padding: var(--rm-space-3) 28px var(--rm-space-3) 0;
  border-bottom: 1px solid var(--rm-border);
}

.rm-sidecart__body .woocommerce-mini-cart-item a:not(.remove) {
  display: flex;
  align-items: center;
  gap: var(--rm-space-3);
  flex: 1 1 auto;
  min-width: 0;
  color: var(--rm-ink);
  font-weight: var(--rm-weight-medium);
  text-decoration: none;
}

.rm-sidecart__body .woocommerce-mini-cart-item a:not(.remove):hover {
  color: var(--rm-primary);
}

.rm-sidecart__body .woocommerce-mini-cart-item img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--rm-radius);
  border: 1px solid var(--rm-border);
}

.rm-sidecart__body .woocommerce-mini-cart-item .quantity {
  flex: 0 0 100%;
  padding-left: 68px;
  font-size: var(--rm-fs-300);
  color: var(--rm-muted);
}

/* Entfernen-Button als kleines Kreuz oben rechts */
.rm-sidecart__body .woocommerce-mini-cart-item .remove,
.rm-sidecart__body a.remove {
  position: absolute;
  top: var(--rm-space-3);
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-primary-soft);
  color: var(--rm-primary) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.rm-sidecart__body a.remove:hover {
  background: var(--rm-primary);
  color: #fff !important;
}

.rm-sidecart__body .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--rm-space-4) 0;
  padding-top: var(--rm-space-4);
  font-size: var(--rm-fs-500);
  color: var(--rm-primary);
  font-weight: var(--rm-weight-bold);
}

.rm-sidecart__body .woocommerce-mini-cart__total strong,
.rm-sidecart__body .woocommerce-mini-cart__total .amount,
.rm-sidecart__body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--rm-primary);
  font-weight: var(--rm-weight-bold);
}

.rm-sidecart__body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-3);
  margin: 0;
}

.rm-sidecart__body .woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--rm-space-2) var(--rm-space-4);
  border-radius: var(--rm-radius-btn);
  text-align: center;
  font-size: var(--rm-fs-300);
  font-weight: var(--rm-weight-bold);
  text-decoration: none;
}

/* „Warenkorb ansehen" = Outline, „Kasse" = gefüllte Beere */
.rm-sidecart__body .woocommerce-mini-cart__buttons .button {
  border: 2px solid var(--rm-primary) !important;
  background: transparent !important;
  color: var(--rm-primary) !important;
}

.rm-sidecart__body .woocommerce-mini-cart__buttons .button:hover {
  background: var(--rm-primary-soft) !important;
  color: var(--rm-primary) !important;
}

.rm-sidecart__body .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--rm-primary) !important;
  border-color: var(--rm-primary) !important;
  color: #fff !important;
}

.rm-sidecart__body .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--rm-primary-deep) !important;
  border-color: var(--rm-primary-deep) !important;
  color: #fff !important;
}

.rm-sidecart__body .woocommerce-mini-cart__empty-message {
  color: var(--rm-muted);
  text-align: center;
  padding: var(--rm-space-6) 0;
}

/* Robuster Fallback: JEDER Button im Side-Cart bekommt das Marken-Design –
   unabhängig vom Wrapper (manche WC-/Elementor-Versionen nutzen nur `.buttons`
   bzw. abweichende Klassen → graue Standard-Buttons nebeneinander). */
.rm-sidecart__body .buttons,
.rm-sidecart__body .woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rm-space-3) !important;
  margin: var(--rm-space-4) 0 0 !important;
}

.rm-sidecart__body .buttons .button,
.rm-sidecart__body a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: var(--rm-space-2) var(--rm-space-4) !important;
  border: 2px solid var(--rm-primary) !important;
  border-radius: var(--rm-radius-btn) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rm-primary) !important;
  font-weight: var(--rm-weight-bold) !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
}

.rm-sidecart__body .buttons .button.checkout,
.rm-sidecart__body a.button.checkout,
.rm-sidecart__body a.checkout {
  background: var(--rm-primary) !important;
  border-color: var(--rm-primary) !important;
  color: #fff !important;
}

/* Produktnamen-Links in Beere (statt brauner Kit-Link-Farbe), ohne Unterstrich */
.rm-sidecart__body a:not(.button):not(.remove) {
  color: var(--rm-primary) !important;
  text-decoration: none !important;
}

.rm-sidecart__body a:not(.button):not(.remove):hover {
  color: var(--rm-primary-deep) !important;
}

/* Maximaler Markup-unabhängiger Fallback: Produktbilder im Side-Cart immer
   klein (manche Cart-Varianten rendern sie sonst in voller Breite). */
.rm-sidecart__body img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: cover !important;
  border-radius: var(--rm-radius) !important;
  border: 1px solid var(--rm-border);
}

/* Artikelzeilen als Flex (Bild links, Text daneben) – egal welche Klasse */
.rm-sidecart__body .cart_list > li,
.rm-sidecart__body .product_list_widget > li,
.rm-sidecart__body .woocommerce-mini-cart > li {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-1) var(--rm-space-3);
  position: relative;
  padding: var(--rm-space-3) 28px var(--rm-space-3) 0 !important;
  border-bottom: 1px solid var(--rm-border);
  list-style: none;
}

/* ============================================================
   Elementor-Menü-Warenkorb im Theme-Side-Cart aufs Marken-Design ziehen
   ------------------------------------------------------------
   Der Side-Cart-Inhalt nutzt Elementors Markup (.elementor-menu-cart__*,
   .elementor-button) statt des WC-Standard-Mini-Carts – daher hier gezielt.
   ============================================================ */
.rm-sidecart__body .elementor-menu-cart__products {
  display: block;
  margin: 0;
  padding: 0;
}

/* Artikel: Bild links, Name + Preis daneben, Entfernen oben rechts */
.rm-sidecart__body .elementor-menu-cart__product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name remove"
    "thumb price price";
  align-items: center;
  column-gap: var(--rm-space-3);
  row-gap: 2px;
  padding: var(--rm-space-3) 0;
  margin: 0;
  border-bottom: 1px solid var(--rm-border);
}

.rm-sidecart__body .elementor-menu-cart__product-image {
  grid-area: thumb;
}

.rm-sidecart__body .elementor-menu-cart__product-image img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: cover;
  border-radius: var(--rm-radius);
  border: 1px solid var(--rm-border);
}

.rm-sidecart__body .elementor-menu-cart__product-name {
  grid-area: name;
  align-self: end;
}

.rm-sidecart__body .elementor-menu-cart__product-name a {
  color: var(--rm-primary) !important;
  font-weight: var(--rm-weight-medium);
  line-height: 1.25;
  text-decoration: none !important;
}

.rm-sidecart__body .elementor-menu-cart__product-price {
  grid-area: price;
  align-self: start;
  color: var(--rm-muted);
  font-size: var(--rm-fs-300);
}

.rm-sidecart__body .elementor-menu-cart__product-price .amount {
  color: var(--rm-primary);
  font-weight: var(--rm-weight-bold);
}

/* Entfernen-Button als kleines Beere-Kreuz (eines der zwei Links zeigen) */
.rm-sidecart__body .elementor-menu-cart__product-remove {
  grid-area: remove;
  justify-self: end;
  align-self: start;
}

.rm-sidecart__body .elementor-menu-cart__product-remove a + a {
  display: none !important;
}

.rm-sidecart__body .elementor-menu-cart__product-remove a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-primary-soft);
  color: var(--rm-primary) !important;
  text-decoration: none !important;
}

.rm-sidecart__body .elementor-menu-cart__product-remove a::before {
  content: "\00d7";
  font-size: 16px;
  line-height: 1;
}

.rm-sidecart__body .elementor-menu-cart__product-remove a:hover {
  background: var(--rm-danger);
  color: #fff !important;
}

/* Zwischensumme */
.rm-sidecart__body .elementor-menu-cart__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-3);
  margin: var(--rm-space-4) 0;
  padding-top: var(--rm-space-4);
  font-size: var(--rm-fs-500);
  color: var(--rm-primary);
}

.rm-sidecart__body .elementor-menu-cart__subtotal strong,
.rm-sidecart__body .elementor-menu-cart__subtotal .amount {
  color: var(--rm-primary);
  font-weight: var(--rm-weight-bold);
}

/* Footer-Buttons: untereinander, „Warenkorb ansehen" Outline, „Kasse" gefüllt */
.rm-sidecart__body .elementor-menu-cart__footer-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rm-space-3) !important;
  margin: 0;
}

.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: var(--rm-space-2) var(--rm-space-4) !important;
  border: 2px solid var(--rm-primary) !important;
  border-radius: var(--rm-radius-btn) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rm-primary) !important;
  font-weight: var(--rm-weight-bold) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button .elementor-button-text {
  color: inherit !important;
}

/* „Warenkorb ansehen" (Outline): Hover = zarte Beere-Fläche */
.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button:hover {
  background: var(--rm-primary-soft) !important;
  color: var(--rm-primary) !important;
}

.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--rm-primary) !important;
  border-color: var(--rm-primary) !important;
  color: #fff !important;
}

.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button--checkout .elementor-button-text {
  color: #fff !important;
}

/* „Kasse" (gefüllt): Hover = dunklere Beere */
.rm-sidecart__body .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--rm-primary-deep) !important;
  border-color: var(--rm-primary-deep) !important;
  color: #fff !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .rm-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 782px) {
  /* Servicezeile mobil komplett ausblenden */
  .rm-topbar {
    display: none;
  }

  .rm-burger {
    display: flex;
    order: 3;
  }

  .rm-header__inner {
    flex-wrap: wrap;
  }

  .rm-header__brand {
    order: 1;
    margin-right: auto;
  }

  /* Logo im Sticky-Header mobil deutlich kompakter (war bis 96px hoch) */
  .rm-logo img,
  .rm-header__brand img,
  .rm-header__brand .custom-logo {
    max-height: 52px;
  }

  .rm-header__actions {
    order: 2;
    gap: var(--rm-space-4);
  }

  /* Such-Leiste in eigene Zeile unter Logo/Aktionen */
  .rm-header__search {
    order: 4;
    flex: 1 0 100%;
    max-width: none;
  }

  .rm-action__label {
    display: none;
  }

  /* Desktop-Kategorienavigation auf dem Handy ausblenden – der Burger
     öffnet stattdessen den eigenständigen Drill-Down-Drawer (.rm-mobilenav,
     per JS gebaut, siehe unten). */
  .rm-nav {
    display: none;
  }

  /* Burger-Animation bei offenem Menü */
  .rm-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .rm-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .rm-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 560px) {
  .rm-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--rm-space-5);
  }
}

/* ============================================================
   Mobiles Menü – Drill-Down-Drawer „rm-mobilenav" (App-Stil)
   ------------------------------------------------------------
   Eigenständiges Overlay, per JS aus dem Hauptmenü gebaut
   (unabhängig vom Desktop-Mega-Menü). Ebene 1 = Kategorien;
   Tipp auf eine Kategorie schiebt deren Unterebene herein
   („‹ Zurück"). Slide-in von rechts mit abgedunkeltem Backdrop.
   ============================================================ */
.rm-mobilenav {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  overflow: hidden;            /* off-screen Panel darf keinen Seiten-Scroll erzeugen */
}

.rm-mobilenav.is-open {
  visibility: visible;
}

.rm-mobilenav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 18, 27, .5);
  opacity: 0;
  transition: opacity .32s ease;
}

.rm-mobilenav.is-open .rm-mobilenav__backdrop {
  opacity: 1;
}

.rm-mobilenav__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;                 /* Full-Width-Drawer */
  max-width: 100%;
  height: 100%;
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow-lg);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.rm-mobilenav.is-open .rm-mobilenav__panel {
  transform: translateX(0);
}

/* ---- Kopf (Markenverlauf): Zurück | Titel | Schließen ---- */
.rm-mobilenav__head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--rm-space-2);
  min-height: 60px;
  padding: var(--rm-space-2) var(--rm-space-3);
  background: var(--rm-gradient-dark);
  color: #fff;
}

.rm-mobilenav__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: var(--rm-fs-500);
  font-weight: var(--rm-weight-bold);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-mobilenav__back,
.rm-mobilenav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: var(--rm-weight-bold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rm-mobilenav__back {
  gap: 7px;
  min-width: 40px;
  padding: 0 var(--rm-space-3) 0 var(--rm-space-2);
  border-radius: var(--rm-radius);
}

.rm-mobilenav__back[hidden] {
  display: none;
}

.rm-mobilenav__back-icon {
  width: 9px;
  height: 9px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}

.rm-mobilenav__close {
  width: 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--rm-radius-pill);
}

.rm-mobilenav__back:active,
.rm-mobilenav__close:active {
  background: rgba(255, 255, 255, .3);
}

/* ---- Viewport + gestapelte Ebenen-Panels (beliebige Tiefe) ---- */
.rm-mobilenav__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Jede Ebene ist ein eigenes Panel, das den Viewport füllt und für sich
   scrollt. Standard = außerhalb rechts; .is-active = sichtbar; .is-left =
   nach links geschoben (liegt im Stack „unter" der aktiven Ebene). */
.rm-mobilenav__level {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0 0 var(--rm-space-6);
  list-style: none;
  overflow-x: hidden;          /* kein horizontales Scrollen innerhalb einer Ebene */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--rm-bg);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.rm-mobilenav__level.is-active {
  transform: translateX(0);
}

.rm-mobilenav__level.is-left {
  transform: translateX(-100%);
}

/* ---- Einträge ---- */
.rm-mobilenav__item {
  margin: 0;
}

.rm-mobilenav__item + .rm-mobilenav__item {
  border-top: 1px solid var(--rm-nav-border);
}

.rm-mobilenav__link {
  box-sizing: border-box;      /* <a> (Leaf) und <button> (Parent) exakt gleich hoch */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-3);
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: var(--rm-space-3) var(--rm-space-5);
  background: transparent;
  border: 0;
  text-align: left;
  /* !important: schlägt die globale Kit-Link-Farbe (.elementor-kit-… a),
     die sonst die <a>-Punkte (ohne Untermenü) braun färbt. */
  color: var(--rm-primary) !important;
  font-family: inherit;
  font-size: var(--rm-fs-500);
  font-weight: var(--rm-weight-bold);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

.rm-mobilenav__link:active {
  background: var(--rm-primary-soft);
}

/* Langer Text bricht um, statt horizontal überzulaufen */
.rm-mobilenav__link,
.rm-mobilenav__link > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Hauptpunkte (Ebene 1) mit UND ohne Untermenü exakt gleich groß –
   der Parent-Button (und sein <span>) darf nicht kleiner rendern als
   ein einfacher <a>-Punkt. */
.rm-mobilenav__level--root .rm-mobilenav__link,
.rm-mobilenav__level--root .rm-mobilenav__link > span {
  font-size: var(--rm-fs-500);
  font-weight: var(--rm-weight-bold);
  line-height: 1.25;
}

/* Unterpunkte (ab Ebene 2) etwas leichter als die Hauptkategorien */
.rm-mobilenav__level:not(.rm-mobilenav__level--root) .rm-mobilenav__link,
.rm-mobilenav__level:not(.rm-mobilenav__level--root) .rm-mobilenav__link > span {
  font-size: var(--rm-fs-400);
  font-weight: var(--rm-weight-medium);
}

/* „Alle … anzeigen" hervorgehoben oben in der Unterebene */
.rm-mobilenav__link--all {
  font-weight: var(--rm-weight-bold) !important;
  color: var(--rm-primary);
  background: var(--rm-primary-soft);
}

/* aktuelle Seite markieren */
.rm-mobilenav__item.is-current > .rm-mobilenav__link {
  box-shadow: inset 3px 0 0 var(--rm-primary);
  background: var(--rm-primary-soft);
}

/* Chevron › bei Kategorien mit Unterebene */
.rm-mobilenav__chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid var(--rm-primary);
  border-right: 2.5px solid var(--rm-primary);
  transform: rotate(45deg);
}

/* Auf großen Screens ist der Drawer komplett inaktiv */
@media (min-width: 783px) {
  .rm-mobilenav {
    display: none;
  }
}