/* ==========================================================
   BaB Merch-Shop – PrestaShop Classic Theme
   Farben aus dem Logo:
   Violett: #6469AA
   Grün:    #7BAE76
   Schwarz: #111111
   ========================================================== */

:root {
  --bab-purple: #6469aa;
  --bab-purple-dark: #4f548f;
  --bab-purple-light: #ececf6;

  --bab-green: #7bae76;
  --bab-green-dark: #5f915b;
  --bab-green-light: #edf5ec;

  --bab-black: #111111;
  --bab-gray: #6d6d6d;
  --bab-light: #f7f7f4;
  --bab-white: #ffffff;

  --bab-radius: 10px;
  --bab-shadow: 0 5px 18px rgba(17, 17, 17, 0.09);
  --bab-transition: 0.2s ease;
}


/* ==========================================================
   GRUNDLAYOUT
   ========================================================== */

body {
  background: var(--bab-light);
  color: var(--bab-black);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

#wrapper {
  background: var(--bab-light);
}

a {
  color: var(--bab-purple);
  transition:
    color var(--bab-transition),
    background-color var(--bab-transition),
    border-color var(--bab-transition);
}

a:hover,
a:focus {
  color: var(--bab-purple-dark);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bab-black);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-header h1,
.h1,
h1 {
  font-size: 2rem;
}

.card,
.block-categories,
#search_filters,
.product-information,
.tabs,
.cart-grid-body .card,
.cart-grid-right .card {
  border: 0;
  border-radius: var(--bab-radius);
  box-shadow: var(--bab-shadow);
}


/* ==========================================================
   OBERER INFOBEREICH
   ========================================================== */

#header .header-nav {
  background: var(--bab-black);
  border-bottom: 0;
  color: var(--bab-white);
}

#header .header-nav a,
#header .header-nav .user-info a,
#header .header-nav .language-selector,
#header .header-nav .currency-selector {
  color: var(--bab-white);
}

#header .header-nav a:hover {
  color: var(--bab-green);
}

#header .header-top {
  background: var(--bab-white);
  padding-top: 18px;
  padding-bottom: 18px;
}

#header .logo {
  max-height: 105px;
  width: auto;
}


/* ==========================================================
   HAUPTNAVIGATION
   ========================================================== */

#header .header-top .menu {
  margin-top: 10px;
}

#header .header-top .menu > ul > li > a,
.top-menu a[data-depth="0"] {
  color: var(--bab-black);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 12px 15px;
  border-radius: 8px;
}

#header .header-top .menu > ul > li > a:hover,
.top-menu a[data-depth="0"]:hover,
.top-menu .current > a {
  background: var(--bab-purple-light);
  color: var(--bab-purple-dark);
}

.top-menu .sub-menu {
  border: 0;
  border-radius: var(--bab-radius);
  box-shadow: var(--bab-shadow);
}


/* ==========================================================
   SUCHFELD
   ========================================================== */

#search_widget form {
  position: relative;
}

#search_widget form input {
  height: 44px;
  background: var(--bab-light);
  border: 2px solid transparent;
  border-radius: 22px;
  padding-left: 18px;
  padding-right: 45px;
}

#search_widget form input:focus {
  background: var(--bab-white);
  border-color: var(--bab-purple);
  outline: none;
}

#search_widget form button {
  color: var(--bab-purple);
  right: 10px;
}

#search_widget form button:hover {
  color: var(--bab-green-dark);
}


/* ==========================================================
   WARENKORB UND BENUTZERKONTO
   ========================================================== */

#header .header-top a,
#header .header-top .material-icons {
  color: var(--bab-black);
}

#header .header-top a:hover,
#header .header-top a:hover .material-icons {
  color: var(--bab-purple);
}

#header .blockcart {
  background: var(--bab-purple);
  border-radius: 22px;
  padding: 10px 16px;
}

#header .blockcart a,
#header .blockcart .material-icons {
  color: var(--bab-white);
}

#header .blockcart:hover {
  background: var(--bab-purple-dark);
}

#header .blockcart.cart-preview.active {
  background: var(--bab-green-dark);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn,
button {
  border-radius: 8px;
  font-weight: 700;
  text-transform: none;
  transition:
    transform var(--bab-transition),
    box-shadow var(--bab-transition),
    background-color var(--bab-transition);
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--bab-purple);
  border-color: var(--bab-purple);
  color: var(--bab-white);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover {
  background: var(--bab-purple-dark);
  border-color: var(--bab-purple-dark);
  color: var(--bab-white);
  box-shadow: 0 4px 12px rgba(100, 105, 170, 0.28);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bab-green);
  border-color: var(--bab-green);
  color: var(--bab-black);
}

.btn-secondary:hover {
  background: var(--bab-green-dark);
  border-color: var(--bab-green-dark);
  color: var(--bab-white);
}

.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--bab-purple);
  color: var(--bab-purple);
}

.btn-outline-primary:hover {
  background: var(--bab-purple);
  color: var(--bab-white);
}


/* ==========================================================
   PRODUKTLISTEN UND PRODUKTKARTEN
   ========================================================== */

.products {
  align-items: stretch;
}

.product-miniature {
  margin-bottom: 25px;
}

.product-miniature .thumbnail-container {
  height: 100%;
  background: var(--bab-white);
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: var(--bab-radius);
  box-shadow: 0 3px 12px rgba(17, 17, 17, 0.06);
  overflow: hidden;
  transition:
    transform var(--bab-transition),
    box-shadow var(--bab-transition);
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.13);
}

.product-miniature .product-thumbnail {
  background: var(--bab-white);
}

.product-miniature .product-thumbnail img {
  transition: transform 0.35s ease;
}

.product-miniature .thumbnail-container:hover .product-thumbnail img {
  transform: scale(1.035);
}

.product-miniature .product-description {
  background: var(--bab-white);
  padding: 15px 14px 17px;
}

.product-miniature .product-title a {
  color: var(--bab-black);
  font-size: 0.95rem;
  font-weight: 700;
}

.product-miniature .product-title a:hover {
  color: var(--bab-purple);
}

.product-price-and-shipping {
  color: var(--bab-purple-dark);
  font-size: 1.05rem;
  font-weight: 700;
}

.regular-price {
  color: var(--bab-gray);
}

.discount-percentage,
.discount-amount {
  background: var(--bab-green-dark);
  border-radius: 5px;
  color: var(--bab-white);
}


/* ==========================================================
   PRODUKT-BADGES
   ========================================================== */

.product-flags li.product-flag {
  background: var(--bab-purple);
  border-radius: 0 6px 6px 0;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
}

.product-flags li.product-flag.new {
  background: var(--bab-green-dark);
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
  background: var(--bab-black);
}

.product-flags li.product-flag.out_of_stock {
  background: #555555;
}


/* ==========================================================
   QUICK-VIEW
   ========================================================== */

.highlighted-informations {
  background: rgba(255, 255, 255, 0.96);
}

.highlighted-informations .quick-view {
  color: var(--bab-purple);
  font-weight: 700;
}

.highlighted-informations .quick-view:hover {
  color: var(--bab-purple-dark);
}


/* ==========================================================
   PRODUKTDETAILSEITE
   ========================================================== */

.product-cover img,
.product-images > li.thumb-container > .thumb {
  border-radius: var(--bab-radius);
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border: 3px solid var(--bab-purple);
}

.product-prices .current-price {
  color: var(--bab-purple-dark);
  font-size: 1.9rem;
  font-weight: 800;
}

.product-information {
  background: var(--bab-white);
  padding: 22px;
}

.product-actions .add-to-cart {
  min-height: 48px;
  padding-left: 24px;
  padding-right: 24px;
}

.product-actions .add-to-cart .material-icons {
  color: var(--bab-white);
}

.product-quantity #quantity_wanted {
  border: 2px solid #dedede;
  border-radius: 8px 0 0 8px;
  height: 48px;
}

.product-variants > .product-variants-item select {
  background-color: var(--bab-white);
  border: 2px solid #dedede;
  border-radius: 8px;
}

.product-variants > .product-variants-item select:focus {
  border-color: var(--bab-purple);
}


/* Varianten als Farbfelder */

.input-color:checked + span,
.input-color:hover + span,
.input-radio:checked + span,
.input-radio:hover + span {
  border: 3px solid var(--bab-purple);
}


/* ==========================================================
   TABS AUF DER PRODUKTSEITE
   ========================================================== */

.tabs {
  background: var(--bab-white);
  padding: 5px 20px 20px;
}

.tabs .nav-tabs {
  border-bottom: 1px solid #dddddd;
}

.tabs .nav-tabs .nav-link {
  color: var(--bab-gray);
  font-weight: 700;
  text-transform: none;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border-bottom: 3px solid var(--bab-purple);
  color: var(--bab-purple);
}


/* ==========================================================
   KATEGORIEN UND FILTER
   ========================================================== */

.block-categories,
#search_filters {
  background: var(--bab-white);
  padding: 20px;
}

.block-categories .category-sub-menu li > a {
  color: var(--bab-black);
}

.block-categories .category-sub-menu li > a:hover {
  color: var(--bab-purple);
}

#search_filters .facet .facet-title {
  color: var(--bab-black);
  font-weight: 700;
}

.custom-checkbox input[type="checkbox"] + span {
  border: 2px solid #bdbdbd;
  border-radius: 4px;
}

.custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--bab-purple);
  border-color: var(--bab-purple);
}

.custom-radio input[type="radio"]:checked + span {
  background: var(--bab-purple);
  border-color: var(--bab-purple);
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

#wrapper .breadcrumb {
  background: transparent;
  padding: 12px 0;
}

#wrapper .breadcrumb li a {
  color: var(--bab-gray);
}

#wrapper .breadcrumb li:last-child,
#wrapper .breadcrumb li a:hover {
  color: var(--bab-purple);
}


/* ==========================================================
   FORMULARE
   ========================================================== */

.form-control,
.input-group .form-control {
  background: var(--bab-white);
  border: 2px solid #dedede;
  border-radius: 8px;
  min-height: 44px;
}

.form-control:focus,
.input-group .form-control:focus {
  border-color: var(--bab-purple);
  box-shadow: 0 0 0 3px rgba(100, 105, 170, 0.14);
  outline: none;
}

.form-control-label {
  color: var(--bab-black);
  font-weight: 700;
}

.input-group .input-group-btn > .btn {
  min-height: 44px;
}


/* ==========================================================
   WARENKORB UND CHECKOUT
   ========================================================== */

.cart-summary {
  background: var(--bab-white);
}

.cart-summary-line .value {
  color: var(--bab-black);
  font-weight: 700;
}

.cart-summary-line.cart-total {
  border-top: 2px solid var(--bab-purple-light);
  color: var(--bab-purple-dark);
  font-size: 1.1rem;
}

.cart-item {
  border-bottom: 1px solid #e6e6e6;
  padding-top: 15px;
  padding-bottom: 15px;
}

.checkout-step {
  border: 0;
  border-radius: var(--bab-radius);
  box-shadow: var(--bab-shadow);
  margin-bottom: 16px;
}

body#checkout section.checkout-step .step-title {
  color: var(--bab-black);
  font-weight: 700;
}

body#checkout section.checkout-step.-current .step-title {
  color: var(--bab-purple);
}

body#checkout section.checkout-step .step-number {
  background: var(--bab-purple-light);
  border-radius: 50%;
  color: var(--bab-purple-dark);
}

body#checkout section.checkout-step.-complete .step-number {
  background: var(--bab-green);
  color: var(--bab-white);
}


/* ==========================================================
   MELDUNGEN
   ========================================================== */

.alert {
  border: 0;
  border-radius: 8px;
}

.alert-success {
  background: var(--bab-green-light);
  border-left: 5px solid var(--bab-green-dark);
  color: #355632;
}

.alert-info {
  background: var(--bab-purple-light);
  border-left: 5px solid var(--bab-purple);
  color: var(--bab-purple-dark);
}

.alert-warning {
  border-left: 5px solid #d59b25;
}

.alert-danger {
  border-left: 5px solid #b43e3e;
}


/* ==========================================================
   PAGINIERUNG
   ========================================================== */

.pagination .page-list li a {
  color: var(--bab-black);
  border-radius: 5px;
  padding: 7px 11px;
}

.pagination .page-list li.current a,
.pagination .page-list li a:hover {
  background: var(--bab-purple);
  color: var(--bab-white);
}


/* ==========================================================
   NEWSLETTER
   ========================================================== */

.block_newsletter {
  background: var(--bab-purple-light);
  border-radius: var(--bab-radius);
  padding: 30px;
}

.block_newsletter h3,
.block_newsletter p {
  color: var(--bab-black);
}

.block_newsletter form input[type="email"] {
  border-radius: 8px 0 0 8px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

#footer {
  background: var(--bab-black);
  color: var(--bab-white);
  margin-top: 50px;
  padding-top: 40px;
}

#footer .footer-container {
  background: var(--bab-black);
  box-shadow: none;
}

#footer h3,
#footer h4,
#footer .h3,
#footer .h4,
#footer .block-contact-title {
  color: var(--bab-white);
}

#footer a{
 color: var(--bab-white);
}
#footer .footer-container li a,
#footer .block-contact {
  color: #dddddd;
}

#footer a:hover,
#footer .footer-container li a:hover {
  color: var(--bab-green);
}

#footer .block-social ul li {
  border-radius: 50%;
}

#footer .block-social ul li:hover {
  background-color: var(--bab-purple);
}


/* ==========================================================
   STARTSEITEN-BANNER UND CONTENT
   ========================================================== */

.carousel {
  border-radius: var(--bab-radius);
  box-shadow: var(--bab-shadow);
  overflow: hidden;
}

.carousel .carousel-item .caption {
  background: rgba(17, 17, 17, 0.72);
  border-radius: 8px;
  padding: 16px 20px;
}

.carousel .carousel-item .caption h2,
.carousel .carousel-item .caption p {
  color: var(--bab-white);
}

.banner img {
  border-radius: var(--bab-radius);
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 767px) {
  #header .header-nav {
    background: var(--bab-black);
  }

  #header .header-top {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #header .logo {
    max-height: 70px;
  }

  #mobile_top_menu_wrapper {
    background: var(--bab-white);
  }

  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    border-bottom: 1px solid #eeeeee;
    border-radius: 0;
    padding: 14px 10px;
  }

  .product-information {
    padding: 16px;
  }

  .product-prices .current-price {
    font-size: 1.6rem;
  }

  .block_newsletter {
    padding: 20px 15px;
  }
}