@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Roboto:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');

/* Media queries thresholds used: */
/* - 768 */
/* - 1000 */

:root {
  --logo-image: url('../images/logo-dark.png');
  /* --color-primary: #e8de25; */
  --color-primary: #0195ea;
  --color-bg-page: #fff;
  --color-bg-primary: #ebebeb;
  --color-primary-text: #000;
  --sprd-main1: #000 !important;
  --sprd-main2: #0195ea !important;
  --sprd-main3: #fff !important;
  --sprd-sub2: #000 !important;
  --sprd-sub3: #fff !important;
  --theme-switcher-icon: url('/images/icon-switcher-dark.svg');
  --plyr-color-main: #d53134;

  @media screen and (min-width: 768px) {
    --theme-switcher-icon: url('/images/icon-switcher-light.svg');
  }

  #sprd-navigation {
    --sprd-sub2: #000 !important;
    --sprd-main2: #000 !important;
  }

  .sprd-startpage-teaser__subcaption,
  .sprd-startpage-cols {
    --color-primary: #e8de25;
  }

  #sprd-startpage-promotion {
    --sprd-cta-text-color: #000;
    --sprd-main2: #fff !important;
  }
}

[data-theme="dark"] {
  --logo-image: url('../images/logo-light.png');
  --color-primary: #e8de25;
  --color-bg-page: #000;
  --color-bg-primary: #1a1a1a;
  --color-primary-text: #fff;
  --sprd-main1: #fff !important;
  --sprd-main2: #e8de25 !important;
  --sprd-main3: #000 !important;
  --sprd-sub2: #fff !important;
  --sprd-sub3: #000 !important;
  --theme-switcher-icon: url('/images/icon-switcher-light.svg');

  @media screen and (min-width: 768px) {
    --theme-switcher-icon: url('/images/icon-switcher-dark.svg');
  }

  #sprd-navigation {
    --sprd-sub2: #000 !important;
    --sprd-main2: #000 !important;
  }

  #sprd-startpage-promotion {
    --sprd-cta-text-color: #fff;
    --sprd-main2: #000 !important;
  }

}

body {
  background-color: var(--color-bg-page);
  font-family: Roboto, sans-serif;
}

/* Header section */

.SprdMain .sprd-header {
  align-items: center;
  position: relative;
}

.sprd-header__image {
  background: var(--logo-image) 0 50%/contain no-repeat;
  box-sizing: border-box;
  height: 34px;
}

.sprd-header__image img {
  display: none !important;
}

.SprdMain .sprd-department-filter__menu,
.SprdMain .sprd-department-filter__openmenu:hover>.sprd-nav-link {
  background-color: var(--color-primary)
}

.SprdMain .sprd-promo-header {
  background-color: var(--color-bg-primary);
  color: #8b8b8b !important;
}

.SprdMain #sprd-basket-button {
  align-items: center;
  background-color: var(--color-bg-primary);
  border-radius: 100%;
  box-sizing: border-box;
  color: var(--color-primary);
  justify-content: center;
  height: 50px;
  width: 50px;
}

.SprdMain #sprd-basket-button svg {
  height: 30px;
  margin: 0;
  width: 30px;
}

a#themeSwitcher {
  background: var(--theme-switcher-icon) 50% 50% no-repeat;
  display: block;
  height: 30px;
  position: absolute;
  right: 70px;
  text-indent: -10000em;
  transition: all .3s ease-in-out;
  top: 10px;
  width: 30px;
  z-index: 10;
}

a#themeSwitcher:hover {
  transform: rotate(180deg);
}

/* Intro section  */

body .SprdMain .sprd-startpage-teaser__content {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.SprdMain .sprd-startpage-teaser__image {
  background-image: url('../images/intro-bg-1-large.jpg') !important;
}

.SprdMain .sprd-startpage-teaser__caption {
  font-family: "Teko", sans-serif;
  font-weight: 600;
}

body .SprdMain .sprd-startpage-teaser__subcaption {
  display: none;
}

body .SprdMain .sprd-startpage-teaser__subcaption a {
  color: var(--color-primary);
}

body .SprdMain .sprd-startpage-teaser__caption::after {
  display: none;
}

body .SprdMain .sprd-startpage-teaser__cta {
  display: none;
}

/* Promotion */

#sprd-startpage-promotion {
  border: 4px solid var(--color-primary);
}

/* Browse by categories and product preview sections */

body .SprdMain .sprd-startpage-collection-preview,
body .SprdMain .sprd-startpage-preview-tiles,
body .SprdMain .sprd-startpage-dewipro {
  display: flex;
  flex-direction: column;
}

/* body .SprdMain .sprd-startpage-collection-preview .sprd-startpage-cols, */
body .SprdMain .sprd-startpage-preview-tiles .sprd-startpage-preview-tiles__previews,
body .SprdMain .sprd-startpage-dewipro__section {
  order: 1;
}

/* body .SprdMain .sprd-startpage-collection-preview .sprd-startpage-collection-preview__cta, */
body .SprdMain .sprd-startpage-preview-tiles .sprd-startpage-preview-tiles__cta,
body .SprdMain .sprd-startpage-dewipro__button {
  margin-bottom: 2em;
  order: 0;
}

body .SprdMain .sprd-startpage .sprd__caption {
  font: 500 3.75em/1 "Teko", sans-serif;
  margin-bottom: 0;
}

body .SprdMain .sprd-startpage-collection-preview .sprd-startpage-collection-preview__caption {
  margin-bottom: 2rem;
}

body .SprdMain .sprd-startpage .sprd-btn-primary,
body .SprdMain .sprd-startpage .sprd-startpage-col .sprd__sub-caption:after {
  background: transparent;
  border: 2px solid var(--color-primary);
  border-radius: 2px;
  color: var(--color-primary);
  font: 700 1rem Roboto, sans-serif;
  min-width: 0;
  padding: .2em .4em;
  transition: .2s ease-in-out;
}

body .SprdMain .sprd-startpage .sprd-btn-primary:hover {
  transform: scale(1.1);
}

body .SprdMain .sprd-startpage .sprd-startpage-col {
  padding-bottom: 0;
  position: relative;
}

body .SprdMain .sprd-startpage .sprd-startpage-col .sprd__sub-caption {
  align-items: flex-start;
  aspect-ratio: 2 / 1;
  backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, .7);
  box-sizing: border-box;
  color: #fff;
  font: 600 3em/.8 "Teko", sans-serif;
  justify-content: center;
  left: 0;
  padding-top: 20px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateY(100%);
  transition: padding .3s ease-in-out, backdrop-filter .3s ease-in-out;
  width: 100%;
  z-index: 1;
}

body .SprdMain .sprd-startpage .sprd-startpage-col:hover .sprd__sub-caption {
  backdrop-filter: blur(0);
  padding-top: 30px;
}

body .SprdMain .sprd-startpage .sprd-startpage-col .sprd__sub-caption:after {
  content: 'Show all';
  display: block;
  margin: 20px auto 0;
  width: max-content;
}

body .SprdMain .sprd-startpage .sprd-startpage-col .sprd-startpage-col__cols {
  margin-bottom: 2.5rem;
}

body .SprdMain .sprd-startpage .sprd-startpage-col .sprd-startpage-col__cols .sprd-startpage-col__designCount {
  display: none;
}



/* body .SprdMain .sprd-startpage .sprd-startpage-col .sprd__sub-caption:after { */
/*   content: ""; */
/*   display: block; */
/*   padding-bottom: 100%; */
/* } */

/* About the shop section */

#sprd-startpage-about-us {
  background: var(--color-bg-primary);
  box-sizing: border-box;
  padding: 20px;
}

#sprd-startpage-about-us .sprd-media__video {
  display: none;
  order: 2;
}

#sprd-startpage-about-us .plyr {
  margin-bottom: 2rem;
}

#sprd-startpage-about-us .sprd-startpage-about-us__textsection {
  background: transparent;
}


#sprd-startpage-about-us p.sprd__text {
  display: block;
}

#sprd-startpage-about-us p.sprd__text a {
  color: var(--color-primary);
}

/* Trust the quality section */

.sprd-startpage-trust-elements__sections {
  margin-top: 30px;
}

.sprd-startpage-trust-elements__sections .sprd-startpage-trust-elements__subcaption {
  font-family: "Teko", sans-serif;
}

.sprd-startpage-trust-elements__section {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 75px;
  padding-top: 90px;
}

.sprd-startpage-trust-elements__section:first-child {
  background-image: url('/images/icon-tshirt.svg');
  background-position: 50% 10px;
}

.sprd-startpage-trust-elements__section:nth-child(2) {
  background-image: url('/images/icon-box.svg');
}

.sprd-startpage-trust-elements__section:nth-child(3) {
  background-image: url('/images/icon-star.svg');
  background-position: 50% 10px;
}

[data-theme="dark"] {
  .sprd-startpage-trust-elements__section:first-child {
    background-image: url('/images/icon-tshirt-yellow.svg');
  }

  .sprd-startpage-trust-elements__section:nth-child(2) {
    background-image: url('/images/icon-box-yellow.svg');
  }

  .sprd-startpage-trust-elements__section:nth-child(3) {
    background-image: url('/images/icon-star-yellow.svg');
  }
}

.sprd-startpage-trust-elements__section svg {
  display: none;
}

/* Footer */
#sprd-footer .sprd-bg-m1 {
  background-color: var(--color-bg-primary);
}

#sprd-footer .sprd-c-s3 {
  color: var(--color-primary-text);
}

@media screen and (min-width: 768px) {
  .sprd-header__image {
    background: var(--logo-image) 0 50%/contain no-repeat;
    box-sizing: border-box;
    height: 112px;
  }

  a#themeSwitcher {
    right: 10px;
    top: 144px;
  }

  body .SprdMain .sprd-startpage-teaser__content {
    padding-bottom: 0;
    padding-top: 0;
  }

  body .SprdMain .sprd-startpage-teaser__subcaption {
    display: block;
    font-weight: 400;
    text-align: left;
  }

  .sprd-startpage-trust-elements__sections .sprd-startpage-trust-elements__subcaption {
    font-size: 1.875rem !important;
  }

  #sprd-startpage-about-us {
    padding: 50px;
  }

  #sprd-startpage-about-us .sprd-media__video {
    display: block;
  }

  #sprd-startpage-about-us .plyr {
    display: none;
  }

  #sprd-startpage-about-us .sprd-startpage-about-us__textsection * {
    text-align: left;
  }
}

@media screen and (min-width: 1000px) {
  body .SprdMain .sprd-startpage-teaser__link {
    align-items: stretch;
    display: flex;
    height: 540px;
    justify-content: space-between;
    min-height: 0;
  }

  body .SprdMain .sprd-startpage-teaser__image {
    flex: 0 0 536px;
    height: auto;
    position: static;
    width: auto;
  }

  body .SprdMain .sprd-startpage-teaser__content {
    align-items: flex-start;
    background: url('../images/intro-bg-2.jpg') 0 0 no-repeat;
    flex: 1 1 auto;
    font-weight: 400;
    height: auto;
    padding-left: 60px;
    padding-right: 60px;
    position: static;
    width: auto;
  }

  body .SprdMain .sprd-startpage-teaser__caption {
    display: block !important;
    text-align: left !important;
  }


  body .SprdMain .sprd-startpage-teaser__subcaption p:first-child {
    margin-top: 0;
  }
}