:root {
  /** theme overrides */
  --color-light-green: #b0d0c6;

  --color-base-border: var(--color-content-subtle, var(--color-primary));

  --page-width: 1530px;

  /** extension vars **/
  --font-family-100: 'spirits-neutral', serif;
  --font-family-200: var(--typeface_primary);
  --font-family-300: var(--typeface_secondary);
  --font-family-500: var(--typeface_tertiary);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
hide breadcrumbs on startpage
*/

.template__index .breadcrumbs {
  display: none;
}

/**
Sliders
*/

.slider-container .hero-banner__content > div {
  text-align: left;
  align-items: flex-start;
}

.slider-container .hero-banner__content,
.slider-container .hero-banner__content > div {
  height: 100%;
}

.slider-container button.swiper-pagination-bullet {
  --swiper-pagination-bullet-inactive-color: transparent;
  border: 1px solid;
}
/* slide media */
.slider-container picture img,
.slider-container video,
.video-thumb {
  border-radius: var(--border-default-radius);
  aspect-ratio: 5 / 9;
}

/* controls */
.slider-container .carousel-viewport > .left-0,
.slider-container .carousel-viewport > .right-0 {
  display: none;
  top: calc(50% - 24px);
}

@media (pointer: fine) {
  .slider-container .carousel-viewport > .left-0 {
    display: block;
    left: 10px;
  }

  .slider-container .carousel-viewport > .right-0 {
    display: block;
    right: 10px;
  }
}

@media (min-width: 768px) {
  .slider-container picture img,
  .slider-container video,
  .video-thumb {
    aspect-ratio: 147 / 166;
  }

  .slider-container .hero-banner__content > div > div > a:nth-child(1) {
    font-size: 3rem;
  }

  .slider-container .hero-banner__content > div > div > a:nth-child(1) {
    font-size: 3rem;
  }

  .slider-container .carousel-viewport > .left-0 {
    left: 56px;
  }

  .slider-container .carousel-viewport > .right-0 {
    right: 56px;
  }
}

.btn--tertiary:has(img, svg) {
  gap: 0.5em;
  text-wrap: nowrap;
}

.btn--tertiary > svg > path {
  fill: var(--button-color);
}

.btn--tertiary:hover > svg > path,
.btn--tertiary:focus > svg > path {
  fill: var(--button-color);
}

.btn:before,
.btn:after {
  transition: none;
}

/* typography  */

.text_display_md,
.text_display_md button {
  font-family: var(--font_display_md);
  font-weight: var(--font_display_md_weight);
  font-size: var(--font_display_md_size);
  letter-spacing: var(--font_display_md_letter);
  line-height: var(--font_display_md_line);
  text-transform: var(--font_display_md_text_transform);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .text_display_md,
  .text_display_md button {
    font-size: var(--font_display_md_size_md);
  }
}

.text_heading_2xl {
  font-family: var(--font_heading_2xl);
  font-weight: var(--font_heading_2xl_weight);
  font-size: var(--font_heading_2xl_size);
  letter-spacing: var(--font_heading_2xl_letter);
  line-height: var(--font_heading_2xl_line);
  text-transform: var(--font_heading_2xl_text_transform);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .text_heading_2xl {
    font-size: var(--font_heading_2xl_size_md);
  }
}

.text_heading_xl {
  font-family: var(--font_heading_xl);
  font-weight: var(--font_heading_xl_weight);
  font-size: var(--font_heading_xl_size);
  letter-spacing: var(--font_heading_xl_letter);
  line-height: var(--font_heading_xl_line);
  text-transform: var(--font_heading_xl_text_transform);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .text_heading_xl {
    font-size: var(--font_heading_xl_size_md);
  }
}

.text_heading_lg {
  font-family: var(--font_heading_lg);
  font-weight: var(--font_heading_lg_weight);
  font-size: var(--font_heading_lg_size);
  letter-spacing: var(--font_heading_lg_letter);
  line-height: var(--font_heading_lg_line);
  text-transform: var(--font_heading_lg_text_transform);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .text_heading_lg {
    font-size: var(--font_heading_lg_size_md);
  }
}

.text_heading_md {
  font-family: var(--font_heading_md);
  font-weight: var(--font_heading_md_weight);
  font-size: var(--font_heading_md_size);
  letter-spacing: var(--font_heading_md_letter);
  line-height: var(--font_heading_md_line);
  text-transform: var(--font_heading_md_text_transform);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .text_heading_md {
    font-size: var(--font_heading_md_size_md);
  }
}

.text_body_lg {
  font-family: var(--font_body_lg);
  font-weight: var(--font_body_lg_weight);
  font-size: var(--font_body_lg_size);
  letter-spacing: var(--font_body_lg_letter);
  line-height: var(--font_body_lg_line);
  text-transform: var(--font_body_lg_text_transform);
}

@media (min-width: 768px) {
  .text_body_lg {
    font-size: var(--font_body_lg_size_md);
  }
}

:is(.text_body_md, body) {
  font-family: var(--font_body_md);
  font-weight: var(--font_body_md_weight);
  font-size: var(--font_body_md_size);
  letter-spacing: var(--font_body_md_letter);
  line-height: var(--font_body_md_line);
  text-transform: var(--font_body_md_text_transform);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  :is(.text_body_md, body) {
    font-size: var(--font_body_md_size_md);
  }
}

.text_body_sm {
  font-family: var(--font_body_sm);
  font-weight: var(--font_body_sm_weight);
  font-size: var(--font_body_sm_size);
  letter-spacing: var(--font_body_sm_letter);
  line-height: var(--font_body_sm_line);
  text-transform: var(--font_body_sm_text_transform);
}

@media (min-width: 768px) {
  .text_body_sm {
    font-size: var(--font_body_sm_size_md);
  }
}

.text_body_xs {
  font-family: var(--font_body_xs);
  font-weight: var(--font_body_xs_weight);
  font-size: var(--font_body_xs_size);
  letter-spacing: var(--font_body_xs_letter);
  line-height: var(--font_body_xs_line);
  text-transform: var(--font_body_xs_text_transform);
}

@media (min-width: 768px) {
  .text_body_xs {
    font-size: var(--font_body_xs_size_md);
  }
}

.text_button-styles {
  font-family: var(--font_button);
  font-weight: var(--font_button_weight);
  letter-spacing: var(--font_button_letter);
  line-height: var(--font_button_line);
  text-transform: var(--font_button_text_transform);
}

.text_button-size {
  font-size: var(--font_button_size);
}

@media (min-width: 768px) {
  .text_button-size {
    font-size: var(--font_button_size_md);
  }
}

.text_navigation_lg {
  font-family: var(--font_navigation_lg);
  font-weight: var(--font_navigation_lg_weight);
  font-size: var(--font_navigation_lg_size);
  letter-spacing: var(--font_navigation_lg_letter);
  line-height: var(--font_navigation_lg_line);
  text-transform: var(--font_navigation_lg_text_transform);
}

@media (min-width: 768px) {
  .text_navigation_lg {
    font-size: var(--font_navigation_lg_size_md);
  }
}

:is(.text_navigation_md) {
  font-family: var(--font_navigation_md);
  font-weight: var(--font_navigation_md_weight);
  font-size: var(--font_navigation_md_size);
  letter-spacing: var(--font_navigation_md_letter);
  line-height: var(--font_navigation_md_line);
  text-transform: var(--font_navigation_md_text_transform);
}

@media (min-width: 768px) {
  :is(.text_navigation_md) {
    font-size: var(--font_navigation_md_size_md);
  }
}

.text_navigation_sm {
  font-family: var(--font_navigation_sm);
  font-weight: var(--font_navigation_sm_weight);
  font-size: var(--font_navigation_sm_size);
  letter-spacing: var(--font_navigation_sm_letter);
  line-height: var(--font_navigation_sm_line);
  text-transform: var(--font_navigation_sm_text_transform);
}

@media (min-width: 768px) {
  .text_navigation_sm {
    font-size: var(--font_navigation_sm_size_md);
  }
}

/* pdp description */
.description--expanded .product-description {
  -webkit-line-clamp: unset !important;
  max-height: unset !important;
}

/* non theme settings */

.text-heading-5 {
  font-family: var(--font-family-100);
  font-size: 1.3rem;
  line-height: 26.4px;
}

@media (min-width: 1350px) {
  .text-heading-5 {
    line-height: 31px;
    font-size: 1.5rem;
  }
}

.text-article-heading {
  font-family: var(--font-family-100);
  font-size: 3rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .text-article-heading {
    font-size: 4rem;
  }
}

.text-article-heading-3 {
  font-family: var(--font-family-100);
  font-size: 1.5rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .text-article-heading-3 {
    font-size: 2rem;
  }
}

.text-article-heading-4 {
  font-family: var(--font-family-100);
  font-size: 1.3rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .text-article-heading-3 {
    font-size: 1.5rem;
  }
}

.non-mac__navigation-button {
  --color-bg: var(--color-surface);
  --color-text: var(--color-content-subtle);
  position: absolute;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text);
  background: var(--color-background);
  border-radius: 1.25rem;
  cursor: pointer;
  z-index: 50;
  padding-left: var(--padding-sm-xs);
  padding-right: var(--padding-sm-xs);
  place-items: center;
}

.non-mac__navigation-button:hover {
  --color-bg: var(--color-background);
  --color-text: var(--color-primary-on);
}

.non-mac__navigation-button {
  left: 2rem;
}

.non-mac__navigation-button--right {
  left: unset;
  right: 2rem;
}

.non-mac__navigation-button {
  display: none;
}

@media (pointer: fine) {
  .platform-windows .non-mac__navigation-button--right,
  .platform-linux .non-mac__navigation-button--right,
  .platform-unkown .non-mac__navigation-button--right {
    display: grid;
  }
}

.non-mac__navigation-icon-container {
  width: 1.5rem;
  height: 1.5rem;
}

.non-mac__navigation-icon-container--left {
  transform: rotate(90deg);
}

.non-mac__navigation-icon-container--right {
  transform: rotate(-90deg);
}

.non-mac__navigation-icon {
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .slider-container picture img,
  .slider-container video,
  .video-thumb {
    aspect-ratio: 16 / 9;
  }
}

.ios-kb-proxy {
  position: absolute;
  top: -100px;
}