/*
 * Boxenshop – Design (Farbschema nach www.boxenshop-chemnitz.de)
 * Die Farben werden zusätzlich aus den Moduleinstellungen als :root-Variablen gesetzt.
 * Schrift: Inter (SIL Open Font License 1.1, siehe ../fonts/OFL-Inter.txt), lokal eingebunden.
 */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --bx-cream: #F5EFE5;       /* Seitenhintergrund */
  --bx-cream-dark: #E8DECD;  /* Linien, Rahmen auf Creme */
  --bx-brown: #2D2419;       /* Text */
  --bx-brown-soft: #6B5D4A;  /* Menü, Nebentext */
  --bx-green: #5C7F4F;       /* Primärfarbe (Buttons, Links, Produkttitel) */
  --bx-green-dark: #3E5C36;  /* Hover */
  --bx-gold: #D4A574;        /* Akzent (Footer-Links) */
  --bx-footer: #212529;      /* Footer */

  --bs-body-bg: var(--bx-cream);
  --bs-body-color: var(--bx-brown);
  --bs-link-color: var(--bx-green);
  --bs-link-color-rgb: 92, 127, 79;
  --bs-link-hover-color: var(--bx-green-dark);
  --bs-link-hover-color-rgb: 62, 92, 54;
  --bs-primary: var(--bx-green);
  --bs-primary-rgb: 92, 127, 79;
  --bs-border-color: var(--bx-cream-dark);
  --bs-tertiary-bg: var(--bx-cream);
}

body {
  background-color: var(--bx-cream);
  color: var(--bx-brown);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  color: var(--bx-brown);
  font-weight: 600;
}

/* Kopfzeile */
#top {
  background-color: var(--bx-cream);
  border-bottom: 1px solid var(--bx-cream-dark);
}
#top .list-inline-item > a, #top .list-inline-item .dropdown > a, #top .list-inline-item .dropdown > span {
  color: var(--bx-brown);
}

/* Hauptmenü: ohne blauen Balken, braune Schrift wie im alten Shop.
   #menu trägt zusätzlich die Bootstrap-Klasse bg-primary (mit !important). */
#menu.bg-primary {
  background-color: transparent !important;
}
#menu {
  background: transparent;
  background-image: none;
  border: 0;
  border-top: 1px solid var(--bx-cream-dark);
  border-bottom: 1px solid var(--bx-cream-dark);
  border-radius: 0;
}
#menu .navbar-nav > li > a {
  color: var(--bx-brown-soft);
  text-shadow: none;
  font-weight: 500;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a.show {
  color: var(--bx-green);
  background: transparent;
}
#menu #category {
  color: var(--bx-brown);
  text-shadow: none;
}
#menu .navbar-toggler i {
  color: var(--bx-brown);
}

/* Eingabefelder bleiben weiß */
.form-control, .form-select, .input-group-text {
  background-color: #fff;
}

/* Suche und Warenkorb */
#search .form-control {
  border-color: var(--bx-brown-soft);
  background: #fff;
}
#search .btn-light {
  background: #fff;
  border-color: var(--bx-brown-soft);
  color: var(--bx-brown);
  text-shadow: none;
}
#cart > .btn, #header-cart .btn-inverse, #cart .btn-dark {
  background-color: var(--bx-green);
  border-color: var(--bx-green);
  color: #fff;
}
#cart > .btn:hover, #cart .btn-dark:hover {
  background-color: var(--bx-green-dark);
  border-color: var(--bx-green-dark);
}
#cart .dropdown-menu {
  background: #fff;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--bx-green);
  --bs-btn-border-color: var(--bx-green);
  --bs-btn-hover-bg: var(--bx-green-dark);
  --bs-btn-hover-border-color: var(--bx-green-dark);
  --bs-btn-active-bg: var(--bx-green-dark);
  --bs-btn-active-border-color: var(--bx-green-dark);
  --bs-btn-disabled-bg: var(--bx-green);
  --bs-btn-disabled-border-color: var(--bx-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--bx-green);
  --bs-btn-border-color: var(--bx-green);
  --bs-btn-hover-bg: var(--bx-green);
  --bs-btn-hover-border-color: var(--bx-green);
  --bs-btn-active-bg: var(--bx-green-dark);
}
.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--bx-cream-dark);
  --bs-btn-hover-bg: var(--bx-cream);
}
.form-check-input:checked {
  background-color: var(--bx-green);
  border-color: var(--bx-green);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bx-green);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* Breadcrumb */
.breadcrumb {
  background-color: transparent;
  border: 0;
}
.breadcrumb > li + li:before {
  color: var(--bx-brown-soft);
}
.breadcrumb > li:after {
  border-color: transparent;
}

/* Produktkacheln */
.product-thumb {
  background: #fff;
  border: 1px solid var(--bx-cream-dark);
  border-radius: 6px;
  overflow: hidden;
}
.product-thumb h4 a {
  color: var(--bx-green);
  font-weight: 400;
}
.product-thumb .price-new, .price-new {
  color: var(--bx-brown);
  font-weight: 700;
}
.product-thumb .button-group {
  border-top: 1px solid var(--bx-cream-dark);
  background: #fff;
}
.product-thumb .button-group button {
  color: var(--bx-green);
  background: #fff;
}
.product-thumb .button-group button:hover {
  color: #fff;
  background: var(--bx-green);
}

/* Karten, Tabellen, Listen */
.card, .list-group-item, .table {
  --bs-card-bg: #fff;
  background-color: #fff;
}

/* Footer */
footer {
  background-color: var(--bx-footer);
  border-top: 0;
  color: #fff;
}
footer h5 {
  color: #fff;
  font-weight: 600;
}
footer a {
  color: var(--bx-gold);
}
footer a:hover {
  color: #fff;
}
footer hr {
  border-color: rgba(255, 255, 255, .15);
}
#boxenshop-widerruf .btn-outline-primary {
  --bs-btn-color: var(--bx-gold);
  --bs-btn-border-color: var(--bx-gold);
  --bs-btn-hover-bg: var(--bx-gold);
  --bs-btn-hover-color: var(--bx-brown);
}

/* Bausteine, in denen das OpenCart-Bootstrap die Primärfarbe #229ac8 fest einträgt */
:root {
  --bs-primary-text-emphasis: var(--bx-green-dark);
  --bs-primary-bg-subtle: var(--bx-cream);
  --bs-primary-border-subtle: var(--bx-cream-dark);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
}
.list-group {
  --bs-list-group-active-bg: var(--bx-green);
  --bs-list-group-active-border-color: var(--bx-green);
  --bs-list-group-action-hover-bg: var(--bx-cream);
  --bs-list-group-action-hover-color: var(--bx-green-dark);
}
.pagination {
  --bs-pagination-color: var(--bx-green);
  --bs-pagination-hover-color: var(--bx-green-dark);
  --bs-pagination-focus-color: var(--bx-green-dark);
  --bs-pagination-active-bg: var(--bx-green);
  --bs-pagination-active-border-color: var(--bx-green);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.dropdown-menu, .dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--bx-green);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bx-green);
}
.nav-link {
  --bs-nav-link-color: var(--bx-green);
  --bs-nav-link-hover-color: var(--bx-green-dark);
}
.progress, .progress-stacked {
  --bs-progress-bar-bg: var(--bx-green);
}
.form-check-input:focus, .form-range:focus::-webkit-slider-thumb {
  border-color: var(--bx-green);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bx-green);
  border-color: var(--bx-green);
}
.form-range::-webkit-slider-thumb, .form-range::-moz-range-thumb {
  background-color: var(--bx-green);
}

/* Breite Logos nicht unter die Suche laufen lassen */
#logo img {
  max-width: min(100%, 200px); /* OpenCart-Grenze 200px beibehalten, aber nie breiter als die Spalte */
  height: auto;
}


/* Startseite (HTML-Modul „Startseite“) – Klassen bx-* */
.bx-home {
  margin: 2rem 0 1rem;
  font-size: 1rem; /* OpenCart setzt für Fließtext nur 12px */
}
.bx-home p {
  font-size: inherit;
}
.bx-home section {
  margin-bottom: 3rem;
}
.bx-intro {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bx-intro h1 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin-bottom: 1rem;
}
.bx-intro p {
  color: var(--bx-brown-soft);
  line-height: 1.7;
}
.bx-intro .bx-lead {
  color: var(--bx-brown);
  font-size: 1.1rem;
}

/* Vorteile */
.bx-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 991px) {
  .bx-usp { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .bx-usp { grid-template-columns: 1fr; }
}
.bx-usp-item {
  background: #fff;
  border: 1px solid var(--bx-cream-dark);
  border-radius: 8px;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.bx-usp-item h3 {
  font-size: 1.05rem;
  margin: .75rem 0 .5rem;
}
.bx-usp-item p {
  color: var(--bx-brown-soft);
  font-size: .95rem;
  margin: 0;
}
/* Icons per CSS (der Editor entfernt leere <i>-Tags) – Font Awesome 7 ist im Shop lokal vorhanden */
.bx-usp-item::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
  background: var(--bx-green);
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  display: inline-block;
}
.bx-icon-gravur::before    { content: "\f5ad"; } /* pen-nib */
.bx-icon-chemnitz::before  { content: "\f3c5"; } /* location-dot */
.bx-icon-lieferzeit::before{ content: "\f48b"; } /* truck-fast */
.bx-icon-versand::before   { content: "\f466"; } /* box */

/* Schritte */
.bx-steps h2, .bx-cta h2 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
.bx-steps ol {
  list-style: none;
  counter-reset: bx-step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  .bx-steps ol { grid-template-columns: 1fr; }
}
.bx-steps li {
  counter-increment: bx-step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
  background: #fff;
  border: 1px solid var(--bx-cream-dark);
  border-radius: 8px;
}
.bx-steps li::before {
  content: counter(bx-step);
  position: absolute;
  left: 1.25rem;
  top: 1.15rem;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--bx-gold);
}
.bx-steps li strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: .25rem;
}
.bx-steps li span {
  color: var(--bx-brown-soft);
  font-size: .95rem;
}

/* Aufruf */
.bx-cta {
  background: var(--bx-green);
  color: #fff;
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.bx-cta h2 {
  color: #fff;
  margin-bottom: .75rem;
}
.bx-cta p {
  max-width: 680px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}
.bx-cta .btn-primary {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--bx-green-dark);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--bx-cream);
  --bs-btn-hover-color: var(--bx-green-dark);
  --bs-btn-hover-border-color: var(--bx-cream);
  font-weight: 600;
}

/* Slider auf der Startseite: Bilder randlos und abgerundet */
#common-home .carousel, #common-home .swiper-viewport {
  border-radius: 8px;
  overflow: hidden;
}

/* Cookie-Hinweis: OpenCart setzt eine feste Höhe von 150px – auf dem Handy werden dann die Buttons abgeschnitten */
#cookie {
  height: auto;
  padding: .5rem 0 1rem;
}
#cookie p {
  margin-bottom: .75rem;
}
@media (max-width: 575px) {
  #cookie div { font-size: 14px; }
}