/*!
 * Repack much Core – gemeinsame Gestaltung aller Bausteine im Shop (Preisseiten, Produktseite,
 * Warenkorb, Shop-Übersicht). Farben und Schrift wie die Seite (Theme Anvogue, Elementor-Kit):
 * Grün #91b713, Braun #8d4411, Beige #f3eee8, Schrift Instrument Sans. Alles unter .rmc gekapselt,
 * damit das Theme nicht hineinfunkt und umgekehrt. Kontraste mindestens WCAG AA.
 * Hausregeln: keine Schlagschatten (Abgrenzung nur über Linien und Flächen), keine dunkle Schrift
 * auf grünen Flächen (grün gefüllt heißt weiße Schrift auf #5f7d0c).
 */

.rmc {
  --rmc-gruen: #91b713;
  --rmc-gruen-knopf: #5f7d0c;
  --rmc-gruen-knopf-hover: #4e690a;
  --rmc-gruen-text: #4f6a08;
  --rmc-gruen-hell: #f2f7e4;
  --rmc-gruen-rand: #dbe8b6;
  --rmc-braun: #8d4411;
  --rmc-beige: #f3eee8;
  --rmc-beige-2: #faf7f3;
  --rmc-linie: #ebe4dc;
  --rmc-feldrand: #d6cdc2;
  --rmc-text: #1f1f1f;
  --rmc-text-2: #5f6266;
  --rmc-radius: 20px;
  --rmc-radius-m: 14px;
  --rmc-stark: "InstrumentSans-SemiBold", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rmc-text-2);
  text-align: left;
}

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

/* Grundlagen gegen die Theme-Vorgaben (h3 40px, p margin 24px, Tabellen-Abstände, Großbuchstaben-Knöpfe) */
.rmc p { margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }
.rmc p:last-child { margin-bottom: 0; }
.rmc h3,
.rmc h4 { font-family: var(--rmc-stark); font-weight: 700; color: var(--rmc-text); letter-spacing: normal; text-transform: none; padding: 0; }
.rmc ul,
.rmc ol { margin: 0; padding: 0; list-style: none; }
.rmc li { margin: 0; }
.rmc table { margin: 0; width: 100%; }
.rmc th,
.rmc td { padding: 0; border: 0; background: none; font-size: inherit; line-height: 1.4; text-align: left; vertical-align: middle; }
.rmc strong { font-family: var(--rmc-stark); font-weight: 400; color: var(--rmc-text); }
.rmc s { text-decoration-thickness: 1px; }
.rmc a { transition: color .15s ease; }
.rmc img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.rmc button { font-family: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; }
.rmc [hidden] { display: none !important; }

.rmc .rmc-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rmc .rmc-icon { flex: none; width: 24px; height: 24px; }
.rmc .rmc-gruen { color: var(--rmc-gruen-text); }

.rmc .rmc-dach {
  margin: 0 0 6px;
  font-family: var(--rmc-stark);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rmc-gruen-text);
}

.rmc .rmc-h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }

.rmc a:focus-visible,
.rmc button:focus-visible,
.rmc summary:focus-visible { outline: 3px solid var(--rmc-text); outline-offset: 2px; }

/* Knöpfe */
.rmc .rmc-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 11px 22px;
  border: 2px solid var(--rmc-gruen-knopf);
  border-radius: 15px;
  background: var(--rmc-gruen-knopf);
  color: #fff;
  font-family: var(--rmc-stark);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.rmc .rmc-knopf:hover { background: var(--rmc-gruen-knopf-hover); border-color: var(--rmc-gruen-knopf-hover); color: #fff; }
.rmc .rmc-knopf:active { transform: translateY(1px); }
.rmc .rmc-knopf[disabled] { opacity: .65; cursor: progress; }
.rmc .rmc-knopf .rmc-icon { width: 20px; height: 20px; }
/* Heller Knopf: zartes Grün mit grünem Rand; beim Darüberfahren dunkelgrün mit weißer Schrift
   (Marcel 15.10.: nie Braun). !important, weil das Theme Knöpfen bei :hover und :focus Braun gibt
   (button:focus, bleibt nach dem Antippen stehen). */
.rmc .rmc-knopf--hell { background: var(--rmc-gruen-hell); border-color: var(--rmc-gruen-knopf); color: var(--rmc-gruen-text); }
.rmc .rmc-knopf--hell:focus { background: var(--rmc-gruen-hell) !important; border-color: var(--rmc-gruen-knopf) !important; color: var(--rmc-gruen-text) !important; }
.rmc .rmc-knopf:not(.rmc-knopf--hell):focus { background: var(--rmc-gruen-knopf) !important; border-color: var(--rmc-gruen-knopf) !important; color: #fff !important; }
.rmc.rmc-mini-gutschein button:not(.rmc-knopf):focus { background: none !important; }
.rmc .rmc-knopf--hell:hover,
.rmc .rmc-knopf--hell:focus-visible,
.rmc .rmc-knopf--hell:active { background: var(--rmc-gruen-knopf) !important; border-color: var(--rmc-gruen-knopf) !important; color: #fff !important; }
.rmc .rmc-knopf:not(.rmc-knopf--hell):hover { background: var(--rmc-gruen-knopf-hover) !important; border-color: var(--rmc-gruen-knopf-hover) !important; color: #fff !important; }
.rmc .rmc-knopf--klein { min-height: 44px; padding: 8px 16px; font-size: 15px; }

.rmc .rmc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--rmc-text);
  font-family: var(--rmc-stark);
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rmc .rmc-link:hover { color: var(--rmc-gruen-text); }
.rmc .rmc-link .rmc-icon { width: 18px; height: 18px; transition: transform .15s ease; }
.rmc .rmc-link:hover .rmc-icon { transform: translateX(3px); }

/* Felder */
.rmc .rmc-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--rmc-stark);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--rmc-text);
}
.rmc .rmc-select,
.rmc .rmc-eingabe,
.rmc .rmc-suche-eingabe,
.rmc .rmc-menge-feld {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--rmc-feldrand);
  border-radius: 12px;
  background-color: #fff;
  color: var(--rmc-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: none;
}
.rmc .rmc-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.rmc .rmc-select:focus,
.rmc .rmc-eingabe:focus,
.rmc .rmc-suche-eingabe:focus,
.rmc .rmc-menge-feld:focus {
  border-color: var(--rmc-gruen-knopf);
  outline: 3px solid rgba(145, 183, 19, .4);
  outline-offset: 0;
}
.rmc .rmc-eingabe::placeholder,
.rmc .rmc-suche-eingabe::placeholder { color: #75787c; opacity: 1; }

.rmc .rmc-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--rmc-gruen-knopf);
  color: #fff;
  font-family: var(--rmc-stark);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
/* „Bestseller“ wie das Etikett des Themes (Farbe aus den Theme-Einstellungen), mit dunkler Schrift */
.rmc .rmc-badge--bestseller { background: var(--pls-woocommece-featured-label-color, #ecb018); color: #1f1f1f; }