/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/*
 :root {
  --bs-breakpoint-xxs: 0;
  --bs-breakpoint-xs: 360px;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}
*/
 /* #header{ background: red !important; } */
 body {
    background-color: #ffffff;
 }
 .header {
    /* Grey header
    --header-top-bg:#42423f;
    --header-bg: #5f5f5b;
    */
    --header-top-bg:#371043;
    --header-bg: #662878;
    
 }

 .header-block__badge {
  background: dodgerblue;
 }
.header-top {
    background: #371043;
  --header-top-border-bottom: 0px;
  --header-bottom-border-bottom: 0px;
}

.header-bottom {
    background: #662878;
  --header-top-border-bottom: 0px;
  --header-bottom-border-bottom: 0px;
}

 .footer {
    --footer-background-color: #42423f;
 }

.card {
    background-color: #ffffff;
}

.product-miniature .product-miniature__image-container {
  background-color: #ffffff;
}


.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xs, .offcanvas-xxl {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: #42423f;
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

.ps-mainmenu__mobile-toggle .menu-toggle .material-icons {
    color: #ffffff;
}
.ps-mainmenu__back-button .btn-close {
    color: #ffffff;
}


.header a:not(.dropdown-item):not(.btn) {
  color: #ffffff;
}
.header a:not(.dropdown-item):not(.btn):hover,
.header a:not(.dropdown-item):not(.btn):hover i {
  color: #dad700;
}

.header-block__action-btn, .header-block__action-btn:focus, .header-block__action-btn:hover {
  color: #ffffff;
}


.carousel .carousel-caption {
  bottom: inherit;
  max-width: 1500px;
  text-align: left;
  top: 40%;
  transform: translateY(-50%);
}
.ratio-homeSlider {
  /*--bs-aspect-ratio: 42.85714%;*/
  --bs-aspect-ratio: 70%;
}
.carousel .carousel-caption .h2, .carousel .carousel-caption h2 {
  font-size: 2rem;
}
.carousel .carousel-caption .caption-description .h3, .carousel .carousel-caption .caption-description h3 {
  font-size: 1.5rem;
}
.carousel .carousel-caption .caption-description p {
  font-size: 1rem;
}
@media (min-width: 768px) {
  .ratio-homeSlider {
    /*--bs-aspect-ratio: 23.33333%;*/
    --bs-aspect-ratio: 60%;
  }
  .carousel .carousel-caption .h2, .carousel .carousel-caption h2 {
  font-size: 3em;
  }
  .carousel .carousel-caption .caption-description .h3, .carousel .carousel-caption .caption-description h3 {
    font-size: 2rem;
  }
  .carousel .carousel-caption .caption-description p {
    font-size: 1rem;
  }
 
}
@media (min-width: 960px) {
  .ratio-homeSlider {
    /*--bs-aspect-ratio: 23.33333%;*/
    --bs-aspect-ratio: 60%;
  }
  .carousel .carousel-caption .h2, .carousel .carousel-caption h2 {
    font-size: 4rem;
  }
  .carousel .carousel-caption .caption-description .h3, .carousel .carousel-caption .caption-description h3 {
    font-size: 3rem;
  }
  .carousel .carousel-caption .caption-description p {
    font-size: 2rem;
  }
}
.carousel-caption {
  color: #ffffff;
}
.carousel .carousel-control-prev {
  left: 1rem;
}
.carousel .carousel-control-next {
  right: 1rem;
}


.carousel .carousel-caption .caption-description {
  max-width: 30rem;
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio:before {
  content: "";
  display: block;
  padding-top: var(--bs-aspect-ratio);
}
.ratio > * {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 100%;
}

.breadcrumb__wrapper {
  background: #FAF8F4;
  margin-bottom: 2rem;
}
.email-subscription {
  background-color: #FAF8F4;
  padding: 2.5rem 1rem;
}
/**************************************************************
*
* Pages
*
***************************************************************/
.note {
      background: #e3d9c1;
      border-left: 4px solid #111827;
      padding: 14px 16px;
      margin: 18px 0;
}

/**************************************************************
*
* Product
*
***************************************************************/
.custom-checkbox input[type="checkbox"] + span.color, .variant-links .color, label .color {
  background-size: contain;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  height: 4.5rem;
  margin: .3125rem .5rem .3125rem 0;
  transition: .25s ease-out;
  width: 4.5rem;
}