/* ==========================================================================
   Navigation / Header
   ========================================================================== */

header {
	margin-top: 37px;
	box-shadow: 0px 2px 4px -1px #0000000f !important
}

header:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 37px;
  background: #a1978d;
  transform: translateY(-100%);
}

/* Mega-menu / submenu container next to nav link */
nav > ul > li > a + div {
  position: fixed !important;
  width: 100% !important;
  max-width: 1400px !important;
  top: 125px !important;
  left: 50% !important;
  border: 1px solid #ddd;
  -webkit-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  border-radius: .5em;
}

#logo {
	filter: contrast(0.5);
}

/* ==========================================================================
   Banner Overlay (modal-like overlay / CTA)
   ========================================================================== */

div[data-testid*="banner-overlay"] {
  padding: 0 !important;
}

div[data-testid*="banner-overlay"] > div {
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.52);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(123, 109, 96, 30%) 90%
  );
  height: 100%;
  width: 100vw;
  max-width: unset;
  max-height: unset;
  margin: 0 !important;
  border-radius: 0 !important;
}

div[data-testid*="banner-overlay"] > div a {
  margin: 1.5em auto 0;
  padding: 1em 0;
  width: 340px;
  min-width: 340px;
  font-size: 1.5em;
}

/* ==========================================================================
   Layout / Containers
   ========================================================================== */

.max-w-screen-2xl {
  max-width: 1466px !important;
}

.bg-primary-500, .bg-primary-500:active, .bg-primary-500:focus, span[data-testid="wishlist-badge"], span[data-testid="cart-badge"] {
    background-color: rgb(251 119 0) !important;
}

.bg-primary-500:hover {
    background-color: rgb(255 134 24) !important;
}

/* ==========================================================================
   Category / Listing
   ========================================================================== */

#category-headline {
  font-size: 3rem !important;
  line-height: 3.5rem !important;
  margin-bottom: 0.25em;
}

div[data-testid="product-card"] > div + div {
  padding: 2em;
}

a[data-testid="productcard-name"] {
  font-size: 1rem;
  line-height: 1.5rem;
  height: 48px !important;
  max-height: 48px !important;
  text-overflow: ellipsis;
  overflow: hidden;
}

span[data-testid="product-card-vertical-price"] {
  font-size: 1.25rem;
  line-height: 2rem;
  padding: 0;
}

/* ==========================================================================
   Product Detail
   ========================================================================== */

h1[data-testid="product-name"] {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

span[data-testid="price"] {
  display: block;
  margin-top: 0.5em;
  font-size: 1.75rem;
  line-height: 2.25rem;
}

/* Product slider (product detail carousel) */
div[data-testid="product-slider"] > div {
  min-width: calc((1400px / 4) - 16px);
}

div[data-testid="product-slider"] > div a[as="image"] {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

div[data-testid=product-slider] > div button {
	display:none;
}

/* ==========================================================================
   Footer / Contact
   ========================================================================== */

footer[data-testid="footer"] .text-lg {
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 1em;
}

.phone,
.mail {
  position: relative;
  padding-left: 30px;
}

.phone:after,
.mail:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 20px;
  width: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

.phone:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}

.mail:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}

@media (min-width: 768px) and (max-width: 1399px) {
    footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   Product Detail: Accordion / Technical Data / Reviews
   ========================================================================== */

div[data-testid="item-text-block"],
div[data-testid="technical-data-block"],
div[data-testid="reviews-accordion"] {
  border-bottom: 1px solid #cecece;
}

details[data-testid="item-text"] > summary,
details[data-testid="technical-data"] > summary,
details[data-testid="accordion-item"] > summary,
details[data-testid="item-text"] > summary + div,
details[data-testid="technical-data"] > summary + div,
details[data-testid="accordion-item"] > summary + div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

details[data-testid="item-text"] > summary > svg,
details[data-testid="technical-data"] > summary > svg,
details[data-testid="accordion-item"] > summary > svg {
  height: 2rem;
  width: 2rem;
}

div[data-testid="gallery"] div,
div[data-testid="gallery"] .gallery-image img {
  height: auto !important
}

/* ==========================================================================
   Multi Grid / Image Teasers
   ========================================================================== */

div[data-testid="multi-grid-column"] {
  padding: 1.5em !important;
}

/* ==========================================================================
   Purchase Card / Add to cart
   ========================================================================== */

form[data-testid="purchase-card"] section {
  padding: 0 !important;
}

div[data-testid="product-attributes"] {
  display: flex;
  gap: 1em;
  width: 100%;
  margin-top: 0.5em;
}

div[data-testid="product-attributes"] > div {
  flex: 1;
}

div[data-testid="quantity-selector"] input {
  height: 100%;
}

button[type="submit"].text-base {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

button[type="submit"] {
  height: 55px;
}

button[type="submit"] > div {
  gap: 0.5em;
}

/* ==========================================================================
   Footer Layout
   ========================================================================== */

footer {
  padding-top: 3.5em !important;
}

footer > div > div > div:nth-child(4) {
  min-width: 320px;
}

/* ==========================================================================
   Theme / Global Typography
   ========================================================================== */


body header nav > ul > li > a:hover, body header nav > ul > li > a:focus,
body header nav > ul > li > a + div li > a:hover {
  background-color: rgb(160 150 141 / 50%) !important;
}

body header nav > ul > li > a:active {
  background-color: rgb(160 150 141 / 50%) !important;
}

summary > h2,
p[data-testid="no-review-text"],
div[data-testid="legal-information"] p {
  font-weight: normal !important;
}

/* ==========================================================================
   Images / Cards
   ========================================================================== */

div[data-testid="image-block"] {
  overflow: hidden;
  border-radius: 0.5em;
}

div[data-testid="multi-grid-structure"] div[data-testid="image-block"] {
  margin-top: -2.5em;
}

div[data-testid="multi-grid-column"] div[data-testid="image-block"] div[data-testid="image-link"] + div {
  color: #fff !important;
  background: #111;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(123, 109, 96, 99%) 70%
  );
  position: absolute;
  bottom: 0;
  height: 320px;
  top: unset;
  gap: 2em;
  text-shadow: 0 5px 10px #00000045;
}

div[data-testid="multi-grid-column"] div[data-testid="image-block"] div[data-testid="image-link"] + div h2 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.25em;
}

div[data-testid="multi-grid-column"] div[data-testid="image-block"] div[data-testid="image-link"] + div span,
div[data-testid="multi-grid-column"] div[data-testid="image-block"] div[data-testid="image-link"] + div a {
  font-size: 1.25em;
}

div[data-testid="multi-grid-column"] div[data-testid="image-block"] div[data-testid="image-link"] + div > div {
  max-width: 550px;
}

/* ==========================================================================
   Header Layout (Nav width + Search)
   ========================================================================== */

nav > ul > li > a {
  margin-right: 0 !important;
}

form[role="search"] {
  max-width: 400px;
}

form[role="search"] + nav > button:first-of-type {
  display: none;
}

form[role="search"] + nav > *:nth-child(1) {
  order: 1;
}

/* Language */
form[role="search"] + nav > *:nth-child(2) {
  order: 3;
}

/* Wishlist */
form[role="search"] + nav > *:nth-child(3) {
  order: 4;
}

/* Cart */
form[role="search"] + nav > *:nth-child(4) {
  order: 2;
}

/* Account */

header > div > div > a {
  margin-right: 0 !important;
}

header > div > *:nth-child(2) {
  margin-left: auto;
}

header > div > div a {
  width: 15em !important;
}

form[role="search"] + nav > button > .w-6,
form[role="search"] + nav > a > .w-6 {
  width: 1.85rem;
}

form[role="search"] + nav > button > .h-6,
form[role="search"] + nav > a > .h-6 {
  height: 1.85rem;
}


header nav > ul > li > a:hover,
header nav > ul > li > a:active,
header nav > ul > li > a:focus {
  background-color: #022132 !important;
}

header nav > ul > li > a > span {
  color: inherit;
}

.custom-topbar {
	position: absolute;
  width: 100%;
  height: 37px;
  padding-inline: 15px;
  background: #a1978d;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  z-index: 1;
  transform: translateY(-100%);
}

.custom-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.topbar-usp {
  white-space: nowrap;
  opacity: 0.95;
  font-weight: 500;
}

.topbar-usp.usp-check:after,
.topbar-usp.usp-right:after {
  content: "";
  float: left;
  display: block;
  height: 13px;
  width: 13px;
  margin-right: 0.5em;
}

.topbar-usp.usp-check:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 15px;
}

.topbar-usp.usp-right:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 13px;
}

.topbar-usp.usp-right {
  margin-right: auto;
}

.custom-topbar-inner,
header > div,
header > nav,
.max-w-screen-3xl {
  max-width: 1466px;
}

.custom-topbar-inner,
header > div,
header > nav {
  margin: 0 auto;
}

@media(min-width: 1399px) {
	header nav > ul {
	  background: transparent !important;
	  border: none !important;
	  margin-top: -50px;
	  position: relative;
	  left: 230px;
	  top: -20px;
	}
	nav > ul {
	  width: calc(100% - 230px) !important;
	  max-width: 720px !important;
	}
}

@media(min-width: 1399px) and (max-width: 1599px) {
	form[role=search] {
	    max-width: 300px;
	}
}

@media(min-width: 991px) and (max-width: 1399px) {
	header nav > ul {	
	  border-top: 1px solid #EEE;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center;
	}
	form[role=search] {
			width: 100% !important;
	    max-width: 100%;
	}
}

@media (max-width: 768px) {
  .custom-topbar-inner {
    gap: 14px;
    font-size: 12px;
  }
	form[role=search] {
			width: 100% !important;
	    max-width: 100%;
	}
}

/* ==========================================================================
   Slider / Swiper (hero slider)
   ========================================================================== */

.swiper-slide[aria-roledescription="Slide"] *[class*="typography-"] {
  text-shadow: 0 5px 50px #000000b5;
}

.swiper-slide[aria-roledescription="Slide"] .router-link-active {
  box-shadow: 0 5px 50px #000000b5;
}

.swiper-slide[aria-roledescription="Slide"] .typography-display-3,
.swiper-slide[aria-roledescription="Slide"] .typography-text-sm {
  max-width: 800px;
}
	

@media(min-width: 991px) {
	.swiper-slide[aria-roledescription="Slide"] .typography-text-sm {
	  margin-top: 0.25em;
	  font-size: 1.7rem;
	  line-height: 2rem;
	}
	.swiper-slide {
		height: 75dvh !important;
	}
	#carousel-0 .swiper-slide div, #carousel-0 .swiper-slide div img {
		height: 100% !important;
	}
}

@media(max-width: 992px) {
	.swiper-slide[aria-roledescription="Slide"] .typography-display-3 {
	  font-size: 2.75rem;	
	  line-height: 2.75rem;
	}
	.swiper-slide[aria-roledescription="Slide"] .typography-text-sm {
	  margin-top: 0.125em;
	  font-size: 1.5rem;
	  line-height: 1.7rem;
	}
	div[data-testid*=banner-overlay] > div a {
	  font-size: 1.25rem;
	}
}

@media (max-width: 768px) {
	#carousel-0 .swiper-slide {
		height: 100dvh !important;
	}
	#carousel-0 .swiper-slide div {
		height: 100% !important;
	}
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

nav[data-testid="breadcrumbs"] li span {
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Brand Slider (Homepage)
   ========================================================================== */

div[data-testid="text-content"] {
	width: 100%;
}

.brands-list {
	display: flex;
	justify-content: space-between;
}