﻿.container-semi-compressed {
  width: 100%;
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
  margin-right: auto;
  margin-left: auto
}


@media(min-width: 768px) {
  .container-semi-compressed {
      max-width:75%
  }
}

@media(min-width: 992px) {
  .container-semi-compressed {
      max-width:75%
  }
}

@media(min-width: 1200px) {
  .container-semi-compressed {
      max-width:75%
  }
}

@media(min-width: 1400px) {
  .container-semi-compressed {
      max-width:75%
  }
}

@media(min-width: 1600px) {
  .container-semi-compressed {
      max-width:60%
  }
}



.menu_shop .icon-auto-svg{
	width: 100px!important;
	height: auto!important;
}



.dropdown-toggle.hover-underline-animation-center:after{
	border: 0;
  background-color: var(--swift-accent-color);
    bottom: 7px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .25s ease-out;
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out, -webkit-transform .25s ease-out;
    width: 100%;
  	margin: 0;
}

.dropdown-toggle.hover-underline-animation-center,
.hover-underline-animation-center.hover-underline-animation-center{
  text-decoration: none !important;
}

.dropdown-toggle.hover-underline-animation-center:hover:after{
	content:"";
  	-webkit-transform: scaleX(.85);
    transform: scaleX(.85);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link span{
	position: relative;
	width:auto!important;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link h6{
	position: relative;
	width:auto!important;
	display: inline-block;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link h6:after,
.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link span:after {
    background-color: var(--swift-accent-color);
    bottom: -2px;
    content: "";
    height: 2px;
    left: 0px;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .25s ease-out;
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out, -webkit-transform .25s ease-out;
    width: 100%;
	-webkit-transform-origin: left;
    transform-origin: left;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link:hover h6:after,
.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link:hover span:after {
	-webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover.nav-link{
	padding: 0.15rem 0.5rem!important;
}

.item_swift_megamenu .dropdown-menu .text-decoration-underline-hover{
	position: relative;
	text-decoration: none!important;
}


.megamenu-product-group-image-col .nav-link{
    text-decoration: none!important;
}

.item_swift_slider a{
	text-decoration: none;
}

.image-item img{
  width: 100%;
  height: auto;
}

.item_swift_productfielddisplaygroups a{
  text-decoration: none;
}

/* Fix link bug*/

.slider-container>* {
  position: relative;
}

.brands-filter-buttons{
  display: inline-block;
}

.brands-filter{
  display: block;
}

.brands-filter a.btn{
  display: block;
  padding: 2rem;
}

.brands-filter-buttons p{
  border:1px solid transparent;
  border-radius: 0;
}

.brands-filter-buttons.active:hover p,
.brands-filter-buttons.active p{
  border-color: black;
  border-radius: 1.5rem;
}

.badge.sale.rounded-circle{
    width: 75px;
    height: 75px;
    font-size: 18px;
    text-align: center;
    align-content: center;
}

.brands-search{
  border-radius: 1.5rem;
}

.brand-letters{
  grid-column: span 6;
  padding-bottom: 1em;
  padding-top: 2em;
}

.brand-letters:first-of-type{
  padding-top: 1em;
}

.brand-letters h5{
  border-bottom: 1px solid #d9d9d9 !important;
    padding-bottom: 0.5em;
}

.brand-list-item a{
  font-weight: bold;
  text-decoration: none;
}

.brand-list-item .hover-underline-animation-left:hover:after{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.swiffy-slider.slider-item-show8 {
  --swiffy-slider-item-count: 8;
}


.defaultImage_customBadge .badge-container{
  height: 60px;
  margin-top: -20px;
}


.js-facets-selector .dropdown-menu.show {
  max-height: 600px;
  overflow: auto;
  z-index: 9999;
}

@media (min-width: 62rem) {
  .swiffy-slider.slider-item-show8:not(.slider-item-snapstart) .slider-container>* {
      scroll-snap-align:unset
  }

 .swiffy-slider.slider-item-show8:not(.slider-item-snapstart) .slider-container>::before {
      content: " ";
      display: block;
      position: absolute;
      left: calc((var(--swiffy-slider-item-gap)/2)*-1);
      top: 0;
      width: 1px;
      height: 1px;
      scroll-snap-align: var(--swiffy-slider-snap-align)
  }
}

@media (max-width: 62rem) {
  .swiffy-slider.slider-item-show8 .slider-container {
    grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3))
  }

  .swiffy-slider.slider-item-show8.slider-item-reveal .slider-container {
    grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem)
  }

  .swiffy-slider.slider-item-show8.slider-item-reveal .slider-container>* {
    scroll-snap-align: unset
  }

  .swiffy-slider.slider-item-show8.slider-item-reveal .slider-container>::before {
    content: " ";
    display: block;
    position: absolute;
    left: calc((var(--swiffy-slider-item-gap)/2)*-1);
    top: 0;
    width: 1px;
    height: 1px;
    scroll-snap-align: center
  }
}

@media (max-width: 48rem) {
  .swiffy-slider.slider-item-show8 .slider-container {
      grid-auto-columns:calc(50% - (var(--swiffy-slider-item-gap)/ 2))
  }

  .swiffy-slider.slider-item-show8.slider-item-reveal .slider-container {
      grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem)
  }
}

@media (max-width: 62rem) {

  .slider-item-mobile-show2 .swiffy-slider{
    --swiffy-slider-item-count: 2;
  }

  .slider-item-mobile-show2 .swiffy-slider img{
    width: 100%;
    max-width: 250px !important;
  }

  .slider-item-mobile-show2 .swiffy-slider .slider-container > li::before{
      content: " ";
      display: block;
      position: absolute;
      left: calc((var(--swiffy-slider-item-gap) / 2)* -1);
      top: 0;
      width: 1px;
      height: 1px;
      scroll-snap-align: var(--swiffy-slider-snap-align);
  }

}


@media (max-width: 62rem){
  .brands-filter-container{
    overflow: auto;
    max-width: 100vw;
  }
  
  .brands-filter-container .brands-filter{
    display: flex;
    flex-direction: row !important;
  }

  .brand-list-item{
    grid-column: span 3;
  }
}


/* QUick Fix for CSS Decorations */
.background-parallax{
  background-attachment: fixed;
 }
 
 .hover-color:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
 .hover-effect img {
     width: 100%; /* Adjust as needed */
     transition: background-color 0.3s ease;
 }
 
 .hover-effect img:hover {
     background-color: rgba(255, 0, 0, 0.5); /* Red color with opacity */
     mix-blend-mode: multiply;
 }
 
 .justify-content-row-center .flex-row{
   justify-content:center;
 }
 
 .text-beautyclub{
  color:#d761b8;
}

/* in article on list fix width to fit favorits and "add to cart" button */
@media (min-width: 1400px) and (max-width: 1599px) {
  .flex-grow-0 + .flex-grow-1 button .d-inline {display: inline !important;}
  .flex-grow-0 + .flex-grow-1 button .d-none {display: none !important;}
}
@media (min-width: 992px) and (max-width: 1399px) {
  .product-list .grid .g-col-lg-2 {grid-column: auto/span 3;}
}


/* batch size fix */
.defaultImage_customBadge .badge-container {
	container-type: size;
}
.defaultImage_customBadge .badge-container>div{
	max-width: 33%;
	aspect-ratio: 1;
}
.badge.sale.rounded-circle {
	max-width: 100%;
	max-height: 100%;
	font-size: clamp(9px,8cqi,18px);
}