/* color */
/* typography */
/* button */
/* panel */
/* label+input */
/* table */
/* badge */
/*
Structure
================================
The variables define the widths for the different viewports.

**Structure**<br/>
`$phoneLandscapeViewportWidth` - viewport phone-landscape width *(default: 480px)*<br/>
`$tabletViewportWidth` - viewport tablet width *(default: 768px)*<br/>
`$tabletLandscapeViewportWidth` - viewport tablet-landscape width *(default: 1024px)*<br/>
`$desktopViewportWidth` - viewport desktop width *(default: 1260px)*<br/>
*/
/*
Icons
================================
These variables define the character for each icon.

You can use them in your less instead of the `icon--`-classes.

The variable name is always that of the icon prefixed with `sw-`.

Example:
```less
content: $sw-icon-grid;
content: $sw-icon-facebook;
```

The variable `$sw-icon-fontname` contains the name of the font which will be
used for all icons.

For an overview of available variables, visit the
<a href="https://developers.shopware.com/styletile/components.html#icon-set">docs on available icons</a>.
*/
/*
Z-Index
================================
The z-index variables list all different values for the z-index layers used inside the Shopware responsive theme.

**badge.scss**<br/>
`$zindex-badge` - *(default: 500)*<br/>

**checkbox.scss**<br/>
`$zindex-checkbox-state` - *(default: 60)*<br/>
`$zindex-checkbox-element` - *(default: 65)*<br/>

**collapse.scss**<br/>
`$zindex-collapse-content` - *(default: 1000)*<br/>
`$zindex-collapse-header` - *(default: 1100)*<br/>
`$zindex-collapse-content-collapsed` - *(default: 1200)*<br/>
`$zindex-collapse-header-active` - *(default: 1300)*<br/>

**collapse-cart.scss**<br/>
`$zindex-collapse-cart` - *(default: 3000)*<br/>
`$zindex-collapse-cart-offcanvas` - *(default: 8000)*<br/>

**datepicker.scss**<br/>
`$zindex-datepicker` - *(default: 8100)*<br/>

**emotions.scss**<br/>
`$zindex-emotion-mapping-link` - *(default: 110)*<br/>
`$zindex-emotion-image-slider-title` - *(default: 100)*<br/>
`$zindex-emotion-product-slider-content` - *(default: 400)*<br/>
`$zindex-emotion-product-slider-title` - *(default: 500)*<br/>
`$zindex-emotion-overlay` - *(default: 1000)*<br/>
`$zindex-emotion-video-element` - *(default: 1000)*<br/>
`$zindex-emotion-video-text` - *(default: 1100)*<br/>
`$zindex-emotion-video-play-btn` - *(default: 1200)*<br/>
`$zindex-emotion-video-cover` - *(default: 1300)*<br/>

**filter-panel.scss**<br/>
`$zindex-filter-panel-flyout` - *(default: 500)*<br/>
`$zindex-filter-panel-flyout-collapsed` - *(default: 800)*<br/>
`$zindex-filter-panel-checkbox` - *(default: 65)*<br/>
`$zindex-filter-panel-checkbox-state` - *(default: 60)*<br/>
`$zindex-filter-panel-radio` - *(default: 65)*<br/>
`$zindex-filter-panel-radio-state` - *(default: 60)*<br/>
`$zindex-filter-panel-media-checkbox` - *(default: 65)*<br/>
`$zindex-filter-panel-rating-star` - *(default: 65)*<br/>


**image-gallery.scss**<br/>
`$zindex-image-gallery-button` - *(default: 1)*<br/>

**image-slider.scss**<br/>
`$zindex-image-slider` - *(default: 1000)*<br/>
`$zindex-image-slider-arrow` - *(default: 1000)*<br/>

**image-zoom.scss**<br/>
`$zindex-image-zoom-flyout` - *(default: 2500)*<br/>

**loading-indicator.scss**<br/>
`$zindex-loading-indicator` - *(default: 6000)*<br/>

**menu-scroller.scss**<br/>
`$zindex-menu-scoller-arrow` - *(default: 750)*<br/>

**modal.scss**<br/>
`$zindex-modalbox` - *(default: 7000)*<br/>

**offcanvas-menu.scss**<br/>
`$zindex-offcanvas` - *(default: 8000)*<br/>
`$zindex-offcanvas-higher-viewport` - *(default: 1000)*<br/>

**overlay.scss**<br/>
`$zindex-overlay` - *(default: 5000)*<br/>

**panel.scss**<br/>
`$zindex-panel-arrow` - *(default: 2000)*<br/>
`$zindex-panel-link` - *(default: 2000)*<br/>

**product-slider.scss**<br/>
`$zindex-product-slider` - *(default: 750)*<br/>

###Modules

**cart.scss**<br/>
`$zindex-cart-product-image-element` - *(default: 500)*<br/>
`$zindex-cart-premium-product-badge` - *(default: 750)*<br/>

**compare.scss**<br/>
`$zindex-compare-list` - *(default: 4000)*<br/>

**configuration.scss**<br/>
`$zindex-configurator-option-label` - *(default: 500)*<br/>
`$zindex-configurator-option-input` - *(default: 1000)*<br/>

**configurator.scss**<br/>
`$zindex-configurator-option-label` - *(default: 500)*<br/>
`$zindex-configurator-option-input` - *(default: 1000)*<br/>

**detail.scss**<br/>
`$zindex-detail-notification-field-focus` - *(default: 1)*<br/>

**footer.scss**<br/>
`$zindex-footer-newsletter-field-focus` - *(default: 1)*<br/>

**header.scss**<br/>
`$zindex-header-search-form` - *(default: 3000)*<br/>
`$zindex-header-search-button` - *(default: 2)*<br/>
`$zindex-header-search-results` - *(default: 3500)*<br/>
`$zindex-header-language-flag` - *(default: 900)*<br/>
`$zindex-header-service-list` - *(default: 3500)*<br/>

**listing.scss**<br/>
`$zindex-listing-filter-header` - *(default: 1100)*<br/>
`$zindex-listing-filter-header-active` - *(default: 1300)*<br/>

**product-box.scss**<br/>
`$zindex-product-box-image-element` - *(default: 500)*<br/>
`$zindex-product-box-product-badge` - *(default: 750)*<br/>

**sidebar.scss**<br/>
`$zindex-sidebar-language-flag` - *(default: 900)*<br/>
`$zindex-sidebar-offcanvas-overlay` - *(default: 1200)*<br/>
`$zindex-sidebar-offcanvas-overlay-background` - *(default: 1100)*<br/>
`$zindex-sidebar-offcanvas-higher-viewport` - *(default: 1000)*<br/>

*/
/*
Clear form button mixin
========================
This mixin removes styles from the button element and makes it look like a text link.
*/
/*
Clearfix mixin
================================
The clearfix mixin allows the easy integration of the floating-solution method.

The clearfix resolves the problem that occurs when two floating elements are nested inside a parent element, then sometimes the parent elements height disappears.

Add the `.clearfix` class to the parent element.

######Example:
`.clearfix();`

*/
/*
Unitize mixin
================================================
The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself.

######Syntax:
`$property` = the property that should be unitized.<br/>
`$value` = pixel-value<br/>
`$baseValue` (optional) = default browser font-size ($remScaleFactor in most cases)<br/>

######Example Unitize mixin with custom property
`.unitize($property, $value);`<br/>
`.unitize(font-size, 16);`

######Specific built-in functions
In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/>
<br/>

`.unitize-height($value)`<br/>
`.unitize-width($value)`<br/>
`.unitize-max-height($value)`<br/>
`.unitize-max-width($value)`<br/>
`.unitize-min-width($value)`<br/>
`.unitize-padding($topValue, $rightValue: $topValue, $bottomValue: $topValue, $leftValue: $rightValue)`<br/>
`.unitize-margin($topValue, $rightValue: $topValue, $bottomValue: $topValue, $leftValue: $rightValue)`<br/>
`.unitize-variable($value)`<br/>
*/
/*
Image slider element
============================================
Defines the styles for the image slider element that is a part of the basic Shopware 5 shopping world elements.

The element can be added by using the Shopware 5 backend shopping world editor.

The element contains thumbnail image previews, navigation dots and navigation arrows to change the current active image.

It contains the viewport specific styles inside media queries.
*/
.image-slider {
  backface-visibility: hidden;
  display: block;
  z-index: 1000;
  position: relative;
}
.image-slider:after {
  content: "";
  display: table;
  clear: both;
}

.force--3d {
  backface-visibility: hidden;
}

.image-slider--container {
  backface-visibility: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.image-slider--container .arrow {
  width: 1.875rem;
  height: 4.375rem;
  margin-top: -2.1875rem;
  line-height: 4.25rem;
  font-size: 1rem;
  user-select: none;
  -webkit-touch-callout: none;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  z-index: 1000;
  font-family: "shopware";
  text-align: center;
  color: var(--text-color);
  cursor: pointer;
  display: none;
}
.image-slider--container .arrow.is--left {
  left: 0rem;
  border-radius: 0 3px 3px 0;
}
.image-slider--container .arrow.is--left:before, .image-slider--container .arrow.is--left::before {
  content: "\e611";
}
.image-slider--container .arrow.is--right {
  right: 0rem;
  border-radius: 3px 0 0 3px;
}
.image-slider--container .arrow.is--right:before {
  content: "\e60f";
}
.image-slider--container .arrow:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.image-slider--container.is--dragging .image-slider--item {
  cursor: move;
}

.image-slider--slide {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 0;
  -ms-touch-action: pan-y;
}
.image-slider--slide:after {
  content: "";
  display: table;
  clear: both;
}

.image-slider--item {
  backface-visibility: hidden;
  display: inline-block;
  height: 100%;
  width: 100%;
  position: relative;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}
.image-slider--item .image--element {
  display: inline-block;
  max-width: 100%;
  height: 100%;
}
.image-slider--item .image--media {
  margin: 0 auto;
  text-align: center;
}
.image-slider--item .image--media.image--svg img {
  height: 100%;
}

.image-slider--dots {
  padding: 0.625rem 0rem 0.625rem 0rem;
  text-align: center;
}

.image-slider--thumbnails {
  height: 4.375rem;
  top: 27.5rem;
  display: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
}
.image-slider--thumbnails .thumbnail--link {
  width: 4.375rem;
  height: 4.375rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  margin: 0rem 0.625rem 0rem 0rem;
  line-height: 3.5625rem;
  display: inline-block;
  text-align: center;
  border: 1px solid var(--border-color);
}
.image-slider--thumbnails .thumbnail--link.is--active {
  border-color: var(--brand-primary);
}
.image-slider--thumbnails .thumbnail--image {
  display: inline;
  vertical-align: middle;
}
.image-slider--thumbnails .thumbnails--arrow {
  width: 1.25rem;
  height: 4.375rem;
  line-height: 4.375rem;
  font-size: 0.875rem;
  user-select: none;
  -webkit-touch-callout: none;
  background: linear-gradient(#ffffff, var(--gray-light));
  display: none;
  position: absolute;
  z-index: 1000;
  font-family: "shopware";
  text-align: center;
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.85);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
}
.image-slider--thumbnails .thumbnails--arrow:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.image-slider--thumbnails .thumbnails--arrow.is--top, .image-slider--thumbnails .thumbnails--arrow.is--bottom {
  font-size: 0.5rem;
  width: 4.375rem;
  height: 1.5rem;
  padding: 0.125rem 0rem 0rem 0rem;
  line-height: 1.125rem;
  left: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--top {
  border-radius: 0 0 3px 3px;
  top: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--top::before {
  content: "\e610";
}
.image-slider--thumbnails .thumbnails--arrow.is--bottom {
  border-radius: 3px 3px 0 0;
  bottom: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--bottom::before {
  content: "\e612";
}
.image-slider--thumbnails .thumbnails--arrow.is--left {
  border-radius: 0 3px 3px 0;
  width: 1.5rem;
  top: 0;
  left: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--left::before {
  content: "\e611";
}
.image-slider--thumbnails .thumbnails--arrow.is--right {
  border-radius: 3px 0 0 3px;
  width: 1.5rem;
  top: 0;
  right: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--right::before {
  content: "\e60f";
}
.image-slider--thumbnails .thumbnails--arrow.is--active {
  display: block;
}

@media screen and (min-width: 48em) {
  .image-slider--container .arrow {
    display: block;
  }
}
@media screen and (min-width: 64em) {
  .image-slider--thumbnails {
    display: block;
  }
  .image-slider--container.no--thumbnails {
    margin-bottom: 0;
  }
  .image-slider--container.no--image .image-slider--item {
    cursor: default;
  }
  .image-slider--dots {
    top: 25.3125rem;
    position: absolute;
    width: 100%;
  }
}
@media screen and (min-width: 78.75em) {
  .image-slider--thumbnails {
    width: 4.375rem;
    height: 100%;
    margin: 0rem 1.25rem 0rem 0rem;
    position: relative;
    top: 0;
    left: 0;
    float: left;
    display: flex;
    align-items: center;
  }
  .image-slider--thumbnails .thumbnail--link {
    margin: 0rem 0rem 1.25rem 0rem;
    display: block;
  }
  .image-slider--dots {
    padding: 0.625rem 0rem 0.625rem 5.625rem;
    position: relative;
    top: auto;
    display: block;
  }
}
/*
Last-seen products element
=======================================================
The Last-seen products element fetches the recently viewed articles of the user and displays them inside a slider-element.

The slider contains a title element and a product box with the article-image and price.
*/
.last-seen-products {
  margin: 0.625rem 0rem 0rem 0rem;
  clear: both;
}
.last-seen-products:after {
  content: "";
  display: table;
  clear: both;
}
.last-seen-products .last-seen-products--title {
  padding: 0.625rem 0rem 0.625rem 0rem;
  border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-accent-stack);
  font-size: var(--font-size-accent);
  display: block;
  font-weight: var(--font-bold-weight);
  color: var(--text-color-dark);
}

.last-seen-products--slider {
  height: auto;
}
.last-seen-products--slider .product--box .product--title {
  text-align: center;
  margin: 0;
  padding: 0;
}

.last-seen-products--slider,
.last-seen-products--container {
  position: relative;
  overflow: hidden;
}

.last-seen-products--container {
  padding: 0.625rem 0rem 0.625rem 0rem;
}

.last-seen-products-item--image {
  line-height: 7.5rem;
  display: block;
}

.last-seen-products--item {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}

@media screen and (min-width: 48em) {
  .last-seen-products {
    margin: 1.875rem 0rem 0rem 0rem;
  }
}
/*
Breadcrumb
=================================
Defines the styling for the content breadcrumb elements that display the page location.

Every breadcrumb entry is followed by a breadcrumb separator list-entry with an arrow icon.

The main breadcrumb is positioned below the main navigation bar.

```
<nav class="content--breadcrumb">
    <ul class="breadcrumb--list" role="menu">
        <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="breadcrumb--link" href="" itemprop="url">
                <span class="breadcrumb--title" itemprop="title">
                     Breadcrumb entry 1
                </span>
            </a>
        </li>

        <li class="breadcrumb--separator">
            <i class="icon--arrow-right"></i>
        </li>

        <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="breadcrumb--link" href="" itemprop="url">
                <span class="breadcrumb--title" itemprop="title">
                     Breadcrumb entry 2
                </span>
            </a>
        </li>
    </ul>
</nav>
```
*/
.content--breadcrumb {
  font-size: var(--font-size-small);
  display: block;
  float: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-header-bg);
}
.content--breadcrumb .breadcrumb--list {
  overflow: hidden;
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
}
.content--breadcrumb .breadcrumb--entry,
.content--breadcrumb .breadcrumb--separator {
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 48em) {
  .content--breadcrumb .breadcrumb--entry:not(:last-child),
  .content--breadcrumb .breadcrumb--separator:not(:last-child) {
    display: none;
  }
}
.content--breadcrumb .breadcrumb--link,
.content--breadcrumb .breadcrumb--separator {
  line-height: 1.5rem;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.content--breadcrumb .breadcrumb--separator {
  font-size: 0.5625rem;
}
.content--breadcrumb .breadcrumb--link {
  display: block;
  color: var(--text-color);
}
.content--breadcrumb .breadcrumb--link:hover {
  color: var(--link-color);
}
.content--breadcrumb .is--active .breadcrumb--link {
  color: var(--brand-primary);
}
.content--breadcrumb .breadcrumb--button {
  padding: 0.625rem 0rem 0.625rem 0.625rem;
  display: inline-block;
  float: left;
  list-style: none;
}
.content--breadcrumb .breadcrumb--button .breadcrumb--title {
  padding-right: 1.25rem;
  border-right: 1px solid var(--border-color);
}
.content--breadcrumb .breadcrumb--button .icon--arrow-left {
  font-size: 0.5625rem;
  margin-right: 0.625rem;
}

@media screen and (min-width: 48em) {
  .content--breadcrumb .breadcrumb--button {
    margin-right: 0.625rem;
    padding: 0.625rem 1.875rem 0.625rem 0.625rem;
  }
  .content--breadcrumb .breadcrumb--button .breadcrumb--title {
    padding-right: 0rem;
    border-right: 0 none;
  }
}
/*
Global
==========================================
Defines the global styles of Shopware.

It contains the global modifier classes that help working with the Shopware elements and the typographic styles.

######Global modifier classes
Add a `is--` class to an element to easily change the properties.

`.is--rounded` - changes the border-radius to 3pxgi<br/>
`.is--block` - sets element to display: block<br/>
`.is--inline` - sets element to display: inline<br/>
`.is--inline-block` - sets element to display: inline-block<br/>
`.is--hidden` - sets element to display: none<br/>
`.is--invisible` - sets element to  visibility: none<br/>

`.is--align-left` - sets element to text-align: left;<br/>
`.is--align-right` - sets element to text-align: right<br/>
`.is--align-center` - sets element to text-align: center<br/>
`.is--underline` - sets element to text-decoration: underline<br/>
`.is--line-through` - sets element to text-decoration: line-through<br/>
`.is--uppercase` - sets element to text-transform: uppercase<br/>
`.is--strong` - sets element to font-weight: $font-bold-weight<br/>
`.is--bold` - sets element to font-weight: $font-bold-weight<br/>
`.is--italic` - sets element to font-style: italic<br/>
`.is--nowrap` - sets element to white-space: nowrap<br/>

`.is--dark` - changes color to $text-color-dark<br/>
`.is--light` - changes color to darken($gray-dark, 20%)<br/>
`.is--soft` - changes color to $gray-dark<br/>
*/
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
html.no--scroll {
  position: relative;
  overflow: hidden;
}
html.no--scroll body {
  overflow: hidden;
}

body {
  font-size: var(--font-size-base);
  font-family: var(--font-base-stack);
  font-weight: var(--font-base-weight);
  color: var(--text-color);
  background: var(--body-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}

.product--rating i[class^=icon] {
  color: var(--rating-star-color);
}
.product--rating i.icon--star-empty {
  color: var(--border-color);
}

h1, h2, h3, h4, h5, h6 {
  margin: 1.75rem 0rem 0.625rem 0rem;
  font-family: var(--font-headline-stack);
  font-weight: var(--font-bold-weight);
  color: var(--text-color-dark);
}

h1, h2, h3 {
  line-height: 1.15;
}

h1 {
  font-size: var(--font-size-h1);
  margin: 2.125rem 0rem 1.25rem 0rem;
  color: var(--text-color-dark);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

p {
  margin: 0rem 0rem 1.25rem 0rem;
  marign-bottom: 1rem;
}

blockquote {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
  background: var(--gray);
  text-align: left;
  margin: 0;
}

.ajax-loader {
  display: none;
}

.left {
  float: left;
}

.right {
  float: right;
}

::-moz-placeholder {
  color: var(--input-placeholder-color);
}

::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
}

:-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

.page-wrap {
  min-width: 20rem;
}

.content-main:after,
.content--wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.content-main--inner {
  padding: var(--font-size-large);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.content {
  width: 100%;
  float: left;
}

@media screen and (min-width: 48em) {
  .content-main:not(.is--small) {
    min-height: 46.875rem;
  }
  .content-main--inner {
    width: 100%;
  }
}
@media screen and (min-width: 78.75em) {
  .content-main:not(.is--small) {
    min-height: 43.75rem;
  }
}
/*
Detail
=======================================
Defines the styling for the Shopware 5 detail page elements.

It contains the product actions, the product information such as pictures and details and the user ratings of the product.
*/
.product--details .product--actions {
  margin: 0rem 0rem 0.625rem 0rem;
  padding: 0rem 0rem 0.625rem 0rem;
  border-top: 0 none;
  border-bottom: 1px solid var(--border-color);
  display: flex;
}
.product--details .product--actions .js--off-canvas-button {
  display: inline-block;
}
.product--details .product--header {
  padding: 0.625rem 0rem 0.625rem 0rem;
  min-height: 4.375rem;
  box-sizing: content-box;
}
.product--details .product--header:after {
  content: "";
  display: table;
  clear: both;
}
.product--details .product--header .product--title {
  margin: 0;
  padding: 0;
  font-weight: var(--font-bold-weight);
  color: var(--text-color-dark);
  font-family: var(--font-accent-stack);
  font-size: var(--font-size-huge);
}
.product--details .product--header .product--title .product--variant-name {
  color: var(--brand-primary);
}
.product--details .product--rating-container {
  width: 50%;
}
.product--details .product--rating-link {
  display: inline-block;
}
.product--details .product--rating-link.js--off-canvas-button {
  border: none;
  margin: unset;
  padding: unset;
}
.product--details .product--rating {
  font-size: var(--font-size-regular);
  display: block;
  letter-spacing: -1px;
  color: var(--text-color);
}
.product--details .product--rating:after {
  content: "";
  display: table;
  clear: both;
}
.product--details .product--rating .rating--count-wrapper {
  font-size: var(--font-size-regular);
  margin-left: 0.625rem;
  line-height: 1.5625rem;
  vertical-align: text-top;
  letter-spacing: 1px;
}
.product--details .product--rating-container {
  margin: 0.3125rem 0rem 0rem 0rem;
  float: left;
}
.product--details .alert {
  margin: 0rem 0rem 0.625rem 0rem;
}
.product--details .product--tax {
  font-size: var(--font-size-small);
  margin: 0;
}
.product--details .product--detail-upper {
  display: flex;
  flex-wrap: wrap;
}
.product--details .product--image-container,
.product--details .product--buybox {
  flex: 1 0 50%;
  min-width: 300px;
}
.product--details .product--image-container .image-slider--slide img {
  max-height: 90vh;
  margin: auto;
}
.product--details .product--foodspecs-logos {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55px;
}
.product--details .product--foodspecs-logos img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
}
.product--details .product--buybox {
  margin: auto 0;
  padding: 1rem;
}
.product--details .product--buybox .product--supplier {
  text-align: center;
}
@media screen and (min-width: 30em) {
  .product--details .product--buybox .product--supplier {
    text-align: left;
  }
}
.product--details .product--buybox .product--supplier-link {
  display: inline-block;
}
.product--details .product--buybox .product--supplier-link img {
  max-height: 4rem;
  width: auto;
  max-width: 10rem;
}
.product--details .product--buybox .product--header {
  padding: 0;
  margin: ~"calc(0.25 * var(--font-size-huge))" 0 ~"calc(0.5 * var(--font-size-huge))" 0;
}
.product--details .product--buybox .product--price {
  margin: 0;
}
.product--details .product--buybox .product--package-price {
  line-height: 1.1;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 0 1rem;
}
.product--details .product--buybox .product--package-price .package-price--price-cat,
.product--details .product--buybox .product--package-price .package-price--minpurchase {
  grid-column: 2;
}
.product--details .product--buybox .product--package-price .package-price--minpurchase {
  grid-row: 1;
}
.product--details .product--buybox .product--package-price .package-price--price-cat {
  grid-row: 2;
}
.product--details .product--buybox .product--package-price .package-price--content {
  grid-column: 1;
  grid-row: ~"1/3";
}
.product--details .product--buybox .price--price-cat {
  display: block;
}
.product--details .product--buybox .price--price-cat,
.product--details .product--buybox .package-price--minpurchase {
  font-size: var(--font-size-small);
}
.product--details .product--buybox .package-price--content {
  display: block;
  font-size: var(--font-size-large);
  font-weight: 300;
}
.product--details .product--buybox .package-price--content .price--line-through {
  font-size: var(--font-size-small);
  font-weight: 500;
}
.product--details .product--buybox .price--label {
  font-weight: var(--font-bold-weight);
}
.product--details .product--buybox .price--line-through {
  text-decoration: line-through;
}
.product--details .product--buybox .price--discount .price--content {
  color: var(--badge-discount-bg);
}
.product--details .product--buybox .price--content {
  font-size: var(--font-size-large);
  white-space: nowrap;
  color: var(--text-color-dark);
  font-weight: var(--font-bold-weight);
  display: inline-block;
  line-height: 1;
}
.product--details .product--buybox .content--discount {
  font-size: var(--font-size-small);
  padding: 0.25rem 0rem 0.25rem 0rem;
  white-space: nowrap;
  display: inline-block;
}
.product--details .product--buybox .price--regulation {
  font-size: var(--font-size-small);
  padding: 0.25rem 0rem 0.25rem 0rem;
  white-space: nowrap;
}
.product--details .product--buybox .price--discount-icon {
  padding: 0.375rem 0.4375rem 0.375rem 0.4375rem;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  font-size: var(--font-size-small);
  border-radius: 0.1875rem;
  display: inline-block;
  position: relative;
  background: var(--badge-discount-bg);
  color: var(--badge-discount-color);
  text-align: center;
  font-weight: var(--font-bold-weight);
  vertical-align: top;
}
.product--details .product--buybox .tv-product--container--buybox-info {
  display: flex;
  flex-wrap: wrap;
}
.product--details .product--buybox .tv-product--container--buybox-info p, .product--details .product--buybox .tv-product--container--buybox-info hr {
  flex: 0 0 100%;
}
.product--details .product--buybox .tv-product--container--buybox-info p {
  margin: 0;
  font-size: var(--font-size-small);
}
.product--details .product--buybox .tv-product--container--buybox-info p a {
  color: var(--brand-secondary);
  text-decoration: underline;
}
.product--details .product--buybox .tv-product--container--buybox-info img {
  filter: brightness(1.25) grayscale(1);
  margin: auto 0.5rem auto 0;
}
.product--details .product--configurator .reset--configuration {
  margin: 0rem 0rem 1.25rem 0rem;
  white-space: nowrap;
}
.product--details .product--configurator .alert {
  margin: 0.625rem 0rem 0rem 0rem;
}
.product--details .buybox--form {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.product--details .buybox--button-container {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 30em) {
  .product--details .buybox--button-container {
    flex-direction: row;
  }
}
.product--details .buybox--quantity {
  flex: 1;
}
.product--details .buybox--quantity .select-field select {
  font-size: var(--font-size-regular);
  font-weight: var(--font-bold-weight);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.product--details .buybox--button {
  flex: 1;
  font-size: var(--font-size-regular);
  white-space: nowrap;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media screen and (min-width: 30em) {
  .product--details .buybox--button {
    flex: 1;
  }
}
.product--details .product--base-info {
  margin: 0.625rem 0rem 0.625rem 0rem;
  font-size: var(--font-size-regular);
}
.product--details .product--base-info .entry--label {
  margin: 0rem 0.5rem 0rem 0rem;
  width: 35%;
  display: inline-block;
}
.product--details .content--description,
.product--details .content--product-reviews,
.product--details .content--related-products,
.product--details .content--similar-products {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.product--details .product--properties {
  --props-columns:1;
  margin: 0rem 0rem 0.625rem 0rem;
  margin-top: 0;
  margin-bottom: 2rem;
  column-count: var(--props-columns);
  column-gap: 3em;
}
@media screen and (min-width: 30em) {
  .product--details .product--properties {
    --props-columns: 2;
  }
}
@media screen and (min-width: 48em) {
  .product--details .product--properties {
    --props-columns: 3;
  }
}
@media screen and (min-width: 64em) {
  .product--details .product--properties {
    --props-columns: 4;
  }
}
.product--details .product--properties .product--property {
  break-inside: avoid;
  border-top: 1px solid var(--gray-dark);
  margin-bottom: 1em;
}
.product--details .product--properties-label {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 0.25em;
}
.product--details .product--properties-value {
  margin: 0;
  font-size: var(--font-size-regular);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
}
.product--details .product--properties-value div {
  width: 100%;
}
.product--details .product--properties-value :last-child {
  margin-left: auto;
}
.product--details .product--nutrition {
  font-size: 0.8em;
  border-bottom: 1px solid var(--gray);
}
.product--details .product--nutrition th {
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}
.product--details .product--nutrition th[colspan] {
  font-weight: 700;
}
.product--details .product--nutrition th, .product--details .product--nutrition td {
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  padding: 0.5em 0;
}
.product--details .product--nutrition tr:not(.ingredients, .fat + .fatacid, .carbon + .sugar) > * {
  border-top: 1px solid var(--gray);
}
.product--details .product--nutrition td:not(:only-child) {
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0;
}
.product--details .product--nutrition th:only-child {
  padding-bottom: 0;
}
.product--details .product--nutrition th.ingredients {
  border-top-style: none;
}
.product--details .content--title {
  font-size: var(--font-size-large);
  font-family: var(--font-accent-stack);
  margin: 0.625rem 0rem 0.3125rem 0rem;
  font-weight: 700;
  color: var(--text-color-dark);
}
.product--details .content--title.title--description-supplier {
  margin-top: 1.5625rem;
}
.product--details .content--link [class^=icon] {
  font-size: var(--font-size-tiny);
  margin: -0.125rem 0.5rem 0rem 0rem;
}
.product--details .block-prices--container {
  margin: 0rem 0rem 0.75rem 0rem;
  display: block;
}
.product--details .block-prices--container .block-prices--table {
  width: 100%;
}
.product--details .block-prices--container .block-prices--table td, .product--details .block-prices--container .block-prices--table th {
  padding: 0.25rem 0.625rem 0.25rem 0.625rem;
}
.product--details .block-prices--container .block-prices--table th {
  color: #fff;
  text-align: left;
}
.product--details .listing .product--box .panel--body {
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
}
.product--details .action--link {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-regular);
  margin: 0rem 2.1875rem 0.3125rem 0rem;
  color: var(--text-color);
  white-space: nowrap;
}
.product--details .action--link.action--compare {
  display: none;
}
.product--details .action--link:last-child {
  margin-right: 0;
}
.product--details .action--link:hover {
  color: var(--brand-primary);
}
.product--details .action--link *[class^=icon] {
  font-size: var(--font-size-tiny);
  margin: 0rem 0.3125rem 0rem 0rem;
}
.product--details .action--link *[class=icon--star] {
  font-size: var(--font-size-small);
  margin: 0rem 0.3125rem 0rem 0rem;
}
.product--details .action--compare {
  display: none;
}
.product--details .link--notepad:focus {
  outline: none;
}
.product--details .link--notepad.js--is-saved {
  color: var(--highlight-success);
}
.product--details .price--unit {
  font-size: var(--font-size-small);
}
.product--details .product--delivery {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.product--details .delivery--text {
  font-size: var(--font-size-regular);
}
.product--details .similar--content .product-slider,
.product--details .viewed--content .product-slider,
.product--details .bought--content .product-slider,
.product--details .related--content .product-slider,
.product--details .product-streams--content .product-slider {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  min-height: 16.875rem;
}
.product--details .similar--content .product-slider--arrow.arrow--prev,
.product--details .viewed--content .product-slider--arrow.arrow--prev,
.product--details .bought--content .product-slider--arrow.arrow--prev,
.product--details .related--content .product-slider--arrow.arrow--prev,
.product--details .product-streams--content .product-slider--arrow.arrow--prev {
  border-left: 0 none;
}
.product--details .similar--content .product-slider--arrow.arrow--next,
.product--details .viewed--content .product-slider--arrow.arrow--next,
.product--details .bought--content .product-slider--arrow.arrow--next,
.product--details .related--content .product-slider--arrow.arrow--next,
.product--details .product-streams--content .product-slider--arrow.arrow--next {
  border-right: 0 none;
}

.product--navigation {
  display: none;
}

.review--form .review--field {
  margin: 0rem 0rem 0.625rem 0rem;
  width: 100%;
}
.review--form .review--notice {
  font-size: var(--font-size-small);
}

.product--description {
  margin-top: 0;
  margin-bottom: 2rem;
}
@media screen and (min-width: 78.75em) {
  .product--description {
    max-width: 55rem;
  }
}
.product--description * {
  font-size: var(--font-size-medium);
  font-weight: 300;
  line-height: 1.5;
}
.product--description ol, .product--description ul {
  margin: 0rem 1rem 1rem 1rem;
  padding: 0;
}
.product--description ol li, .product--description ul li {
  margin: 0rem 0rem 0rem 0.375rem;
}

.review--entry {
  border-radius: 3px;
  margin: 0rem 0rem 1.5625rem 0rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  font-size: var(--font-size-regular);
  background: #fff;
  border: 1px solid var(--border-color);
}
.review--entry.is--last {
  margin: 0rem 0rem 1.875rem 0rem;
}
.review--entry.has--answer {
  border-radius: 3px 3px 0 0;
  margin: 0;
}
.review--entry .entry--header, .review--entry .product--rating {
  margin-bottom: 0.625rem;
}
.review--entry .content--label {
  margin: 0rem 0.5rem 0rem 0rem;
  float: left;
}
.review--entry .content--field:after {
  content: "";
  display: table;
  clear: both;
}
.review--entry .content--title {
  font-size: var(--font-size-regular);
}
.review--entry .review--content {
  font-size: var(--font-size-regular);
  margin: 0;
}

.review--entry.is--answer {
  margin: 0rem 0.625rem 1.875rem 0.625rem;
  padding: 1.25rem 0.625rem 1.25rem 0.625rem;
  border-radius: 0 0 3px 3px;
  background: var(--gray);
  border-top: 0;
}
.review--entry.is--answer .entry--header {
  position: relative;
  border: 0 none;
}
.review--entry.is--answer .entry--header::after {
  transform: rotate(225deg);
  top: -0.5625rem;
  background: var(--gray);
}

.content--product-reviews .alert {
  margin: 0rem 0rem 1rem 0rem;
}
.content--product-reviews .captcha--notice {
  font-size: var(--font-size-small);
  line-height: 1.2;
}

.product--rating-count {
  margin-left: 0.5rem;
  padding: 0.125rem 0.4375rem 0.125rem 0.4375rem;
  border-radius: 3px;
  background: var(--brand-secondary);
  color: #fff;
  font-weight: var(--font-bold-weight);
}

.product--notification {
  margin: 0rem 0rem 1rem 0rem;
}
.product--notification .alert {
  margin: 0rem 0rem 0.5rem 0rem;
  word-wrap: break-word;
}
.product--notification .notification--field {
  border-radius: 3px 0 0 3px;
  margin: 0rem 0rem 0.625rem 0rem;
  position: relative;
  width: 80%;
}
.product--notification .notification--field:focus {
  z-index: 1;
}
.product--notification .notification--button {
  padding: 0.1875rem 0.625rem 0.1875rem 0.625rem;
  margin: 0rem 0rem 0.625rem 0rem;
  border-radius: 0 3px 3px 0;
  margin-left: -0.0625rem;
  position: relative;
  width: 20%;
}
.product--notification .notification--button .icon--mail {
  font-size: var(--font-size-small);
}
.product--notification .notification--captcha img {
  display: inline;
}
.product--notification .privacy-information {
  margin: 0rem 0rem 0rem 0rem;
}

.configurator--form {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.configurator--label {
  margin: 0.375rem 0rem 0.25rem 0rem;
  font-size: var(--font-size-regular);
  font-weight: var(--font-bold-weight);
}

.is--ctl-detail .content-main--inner {
  background: #fff;
  position: relative;
}

.link--prev-button,
.link--next-button {
  display: none;
}

.base-info--entry {
  margin: 0rem 0rem 0.3125rem 0rem;
}

.tab--navigation {
  display: none;
}

.tab--title {
  color: var(--text-color);
  font-weight: var(--font-bold-weight);
}
.tab--title:hover {
  color: var(--link-color);
}
.tab--title:after {
  right: 0.625rem;
  font-size: var(--font-size-regular);
  position: absolute;
  top: 50%;
  margin-top: -9px;
  content: "";
  font-family: "shopware";
}

@media screen and (min-width: 30em) {
  .tab-menu--product .tab--container-list .tab--container {
    border-style: none;
  }
  .tab-menu--product .tab--container-list .tab--container .content--description {
    padding-left: 0;
    padding-right: 0;
  }
}

.tab-menu--cross-selling .tab--container {
  margin: 0rem 0rem 0.625rem 0rem;
  border-style: none;
  display: none;
}
.tab-menu--cross-selling .tab--container.has--content {
  display: block;
}
.tab-menu--cross-selling .tab--container:last-child {
  margin: 0rem 0rem 0rem 0rem;
}
@media screen and (min-width: 48em) {
  .tab-menu--cross-selling.js--tab-menu .tab--container-list .tab--container {
    border-style: none;
  }
}
@media screen and (min-width: 48em) {
  .tab-menu--cross-selling .tab--content {
    border-top: 1px solid var(--panel-border);
  }
}
.tab-menu--cross-selling .tab--headline {
  font-family: var(--font-accent-stack);
  font-size: var(--font-size-accent);
  display: none;
}
@media screen and (min-width: 48em) {
  .tab-menu--cross-selling .tab--headline {
    display: block;
  }
}
.tab-menu--cross-selling .tab--header.is--active {
  border-bottom: 1px solid var(--panel-border);
}
.tab-menu--cross-selling .tab--header.is--active .tab--title:after {
  content: "\e68e";
}
.tab-menu--cross-selling .tab--title {
  padding: 0.625rem 2.375rem 0.625rem 0.625rem;
  line-height: 1.25rem;
  position: relative;
  display: block;
}
.tab-menu--cross-selling .tab--title:after {
  content: "\e68f";
}

@media screen and (min-width: 30em) {
  .product--details .configurator--form .select-field {
    height: 2.375rem;
  }
  .product--details .configurator--form .select-field select {
    line-height: 2.25rem;
  }
  .product--details .configurator--form .select-field:after {
    height: 2.25rem;
  }
  .tab-menu--product {
    margin: 0rem 0rem 0.625rem 0rem;
  }
  .tab-menu--product .tab--header,
  .tab-menu--product .tab--preview {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .product--details .product--header {
    padding: 1.875rem 0rem 1.25rem 0rem;
  }
  .product--details .action--link.action--compare {
    display: inline-block;
  }
  .product--details .product--rating-container {
    width: 80%;
    float: left;
  }
  .product--details .product--base-info .entry--label {
    margin: 0rem 0.5rem 0rem 0rem;
  }
  .product--details .content--description,
  .product--details .content--product-reviews {
    padding: 1.875rem 1.875rem 1.875rem 1.875rem;
  }
  .product--details .content--related-products,
  .product--details .content--similar-products {
    padding: 1.25rem 2.1875rem 1.25rem 2.1875rem;
  }
  .product--details .block-prices--container {
    margin-top: 0.75rem;
  }
  .product--details .tab--header,
  .product--details .tab--preview {
    display: none;
  }
  .product--details .review--entry {
    padding: 1.875rem 1.875rem 1.875rem 1.875rem;
  }
  .product--details .review--entry.is--answer {
    padding: 1.875rem 1.25rem 1.875rem 1.25rem;
  }
  .product--details .tab--container {
    margin: 0rem 0rem 0rem 0rem;
  }
  .product--details .tab-menu--product {
    margin: 0rem 0rem 1.875rem 0rem;
  }
  .product--details .review--form-container {
    width: 80%;
  }
}
@media screen and (min-width: 64em) {
  .product--details .configurator--form {
    padding: 0.625rem 0rem 0.625rem 0rem;
  }
  .product--details .buybox--inner {
    width: 100%;
    float: none;
  }
  .product--details .product--base-info {
    margin: 0.625rem 0rem 1.25rem 0rem;
    padding: 0;
    width: 100%;
    float: none;
  }
  .product--details .action--link {
    margin-right: 1.5625rem;
  }
  .product--details .review--form-container {
    width: 70%;
  }
  .product--details .product--actions {
    padding: 0rem 0rem 0.3125rem 0rem;
    border-bottom: 1px solid var(--border-color);
  }
  .product--details .product--buybox {
    border-bottom: 0 none;
  }
}
@media screen and (min-width: 78.75em) {
  .is--ctl-detail .content-main {
    overflow-x: hidden;
  }
  .product--details .product--header {
    padding-top: 2.8125rem;
  }
  .product--details .review--form-container {
    width: 60%;
  }
  .product--navigation {
    display: block;
    position: relative;
  }
  .product--navigation .navigation--link {
    top: 8.75rem;
    display: none;
    position: absolute;
  }
  .product--navigation .link--prev-button,
  .product--navigation .link--next-button {
    width: 2.5rem;
    height: 15.9375rem;
    line-height: 15.9375rem;
    transition: background 0.3s ease;
    background: rgba(red(@brand-secondary), green(@brand-secondary), blue(@brand-secondary), 0.1);
    text-align: center;
    color: #fff;
    display: block;
  }
  .product--navigation .link--prev-button .link--prev-inner,
  .product--navigation .link--prev-button .link--next-inner,
  .product--navigation .link--next-button .link--prev-inner,
  .product--navigation .link--next-button .link--next-inner {
    display: none;
  }
  .product--navigation .image--wrapper {
    padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    width: 12.5rem;
    height: 15.9375rem;
    float: left;
    background: #fff;
    position: relative;
  }
  .product--navigation .image--container {
    transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1);
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }
  .product--navigation .link--prev-button {
    border-radius: 3px 0 0 3px;
    float: left;
  }
  .product--navigation .link--prev-button:before {
    font-family: "shopware";
    content: "\e611";
  }
  .product--navigation .link--next-button {
    border-radius: 0 3px 3px 0;
    float: right;
  }
  .product--navigation .link--next-button:before {
    font-family: "shopware";
    content: "\e60f";
  }
  .product--navigation .link--prev,
  .product--navigation .link--next {
    transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1);
  }
  .product--navigation .link--prev:hover .link--prev-button,
  .product--navigation .link--prev:hover .link--next-button,
  .product--navigation .link--next:hover .link--prev-button,
  .product--navigation .link--next:hover .link--next-button {
    background: rgba(red(@brand-secondary), green(@brand-secondary), blue(@brand-secondary), 0.2);
  }
  .product--navigation .link--prev {
    left: -2.5rem;
  }
  .product--navigation .link--prev .image--container {
    left: 3.125rem;
  }
  .product--navigation .link--prev.can--slide:hover {
    left: -8.75rem;
  }
  .product--navigation .link--prev.can--slide:hover .image--container {
    left: 0;
  }
  .product--navigation .link--next {
    right: -2.5rem;
  }
  .product--navigation .link--next .image--container {
    right: 3.125rem;
  }
  .product--navigation .link--next.can--slide:hover {
    right: -8.75rem;
  }
  .product--navigation .link--next.can--slide:hover .image--container {
    right: 0;
  }
  .content--description,
  .content--product-reviews {
    padding: 0.625rem 2.8125rem 2.8125rem 2.8125rem;
  }
  .content--related-products,
  .content--similar-products {
    padding: 1.875rem 2.8125rem 1.25rem 2.8125rem;
  }
  .product--notification {
    margin: 0rem 0rem 1.25rem 0rem;
  }
  .product--notification .alert {
    margin: 0rem 0rem 0.625rem 0rem;
  }
}
/*
Header
==========================================
Defines the styles of the Shopware storeview header and its components.

It contains the viewport specific styles inside media queries.

The header sizes are defined by the unitize mixin.

More precise designations are commented inside the document.
*/
.header-main {
  --logo-size:175px;
  --grid-gap:0.0rem;
  --grid-areas:
  	"logo ."
  	"tools tools"
  	"search search";
  --grid-columns: var(--logo-size) 1fr;
  background: #fff;
  border-bottom: 1px solid var(--brand-primary);
}
@media screen and (min-width: 30em) {
  .header-main {
    --grid-areas:
    	"logo search"
    	"tools tools";
  }
}
@media screen and (min-width: 48em) {
  .header-main {
    --logo-size:210px;
    --grid-gap:1rem;
    --grid-areas:
    	"logo search tools topbar";
    --grid-columns: var(--logo-size) 1fr max-content;
  }
}
@media screen and (min-width: 78.75em) {
  .header-main {
    --grid-gap:2rem;
  }
}
.header-main .top-bar {
  display: none;
}
.header-main .logo-main .logo--supportinfo {
  display: none;
}
.header-main .header--navigation {
  position: relative;
  display: grid;
  grid-template-areas: var(--grid-areas);
  grid-template-columns: var(--grid-columns);
  grid-gap: var(--grid-gap);
  align-items: center;
  padding: 0.625rem 0rem 0.625rem 0rem;
}
@media screen and (min-width: 48em) {
  .header-main .header--navigation {
    padding-top: ~"calc(0.5 * var(--grid-gap))";
    padding-bottom: var(--grid-gap);
  }
}
.header-main .header--navigation > .top-bar {
  grid-area: topbar;
}
.header-main .header--navigation > .logo-main {
  grid-area: logo;
}
.header-main .header--navigation > .main-search--wrap {
  grid-area: search;
  position: relative;
}
.header-main .header--navigation > .shop--navigation {
  grid-area: tools;
}

.is--ctl-checkout.is--minimal-header .header-main,
.is--ctl-register.is--minimal-header .header-main,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main {
  border-bottom: 1px solid var(--brand-primary);
  grid-template-areas: "logo logo logo logo";
}
.is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
  display: none;
}
.is--ctl-checkout.is--minimal-header .header-main .logo-main,
.is--ctl-register.is--minimal-header .header-main .logo-main,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
  display: flex;
  flex-direction: column;
  grid-column: ~"1/-1";
}
.is--ctl-checkout.is--minimal-header .header-main .logo-main::before,
.is--ctl-register.is--minimal-header .header-main .logo-main::before,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main::before {
  content: none;
}
@media screen and (min-width: 30em) {
  .is--ctl-checkout.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
    flex-direction: row;
  }
}
.is--ctl-checkout.is--minimal-header .header-main .logo--shop,
.is--ctl-register.is--minimal-header .header-main .logo--shop,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop {
  min-width: var(--logo-size);
  max-width: var(--logo-size);
  margin: auto 0;
}
.is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
  float: none;
  width: auto;
  margin: auto auto auto 1rem;
}
.is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
.is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
  grid-area: "back";
  margin-top: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 1rem auto auto;
}

.shop--navigation {
  position: relative;
  display: flex;
}
.shop--navigation .navigation--list {
  display: flex;
  flex: 1 0;
}
@media screen and (min-width: 48em) {
  .shop--navigation .navigation--list {
    margin-left: auto;
    flex: 0 0;
  }
}
.shop--navigation .navigation--entry {
  margin-right: 0.3125rem;
  display: inline-block;
  min-width: max-content;
}
.shop--navigation .navigation--entry .btn {
  height: 2.5rem;
  width: 2.5rem;
  vertical-align: middle;
}
.shop--navigation .navigation--entry .cart--link {
  padding: 0.125rem 0.625rem 0.125rem 0.375rem;
}
.shop--navigation .navigation--entry .account--link {
  padding: 0.125rem 0.625rem 0.125rem 0.5rem;
}
.shop--navigation .navigation--entry .account--link.account--user-loggedin:after {
  width: 1rem;
  height: 1rem;
  top: -0.3125rem;
  right: -0.3125rem;
  line-height: 1.125rem;
  font-size: 0.5rem;
  border-radius: 50%;
  content: "\e60c";
  display: inline-block;
  position: absolute;
  background: var(--highlight-success);
  font-family: "shopware";
  color: #fff;
}
.shop--navigation .navigation--entry .icon--basket,
.shop--navigation .navigation--entry .icon--account {
  font-size: 1.3125rem;
  display: inline;
  position: relative;
  vertical-align: middle;
  top: 0;
  left: 0;
}
.shop--navigation .navigation--entry .icon--heart {
  font-size: 1.125rem;
  vertical-align: middle;
}
.shop--navigation .navigation--entry .icon--search {
  font-size: 1.375rem;
  vertical-align: middle;
}
.shop--navigation .cart--quantity,
.shop--navigation .notes--quantity {
  top: -0.25rem;
  left: 1.4375rem;
  position: absolute;
  margin: 0;
}
.shop--navigation .entry--link {
  text-align: center;
  text-decoration: none;
}
.shop--navigation .main-search--form,
.shop--navigation .account--display,
.shop--navigation .cart--display,
.shop--navigation .cart--amount,
.shop--navigation .search--display {
  display: none;
}
.shop--navigation .entry--search .is--active.btn {
  background: var(--btn-default-hover-bg);
  color: var(--btn-default-hover-text-color);
  border-color: var(--btn-default-hover-border-color);
}
.shop--navigation .entry--account {
  position: relative;
}
.shop--navigation .entry--cart {
  margin-right: 0.75rem;
  position: relative;
}
.shop--navigation .entry--menu-left {
  display: block;
  font-weight: var(--font-bold-weight);
  text-align: left;
  margin-right: auto;
}
.shop--navigation .entry--menu-left .btn {
  padding-left: 3rem;
  line-height: 2.1875rem;
  font-size: 1.0625rem;
  height: 2.5rem;
  color: var(--brand-secondary);
  width: auto;
  background: 0 none;
  border: 0 none;
}
.shop--navigation .entry--menu-left .icon--menu {
  font-size: 1.25rem;
}

.main-search--wrap {
  margin: 0.625rem 0.625rem 0.625rem 0.625rem;
}
@media screen and (max-width: 30em) {
  .main-search--wrap:not(.is--active) {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .main-search--wrap {
    margin: 0;
  }
}
.main-search--wrap.is--active + .shop--navigation .entry--search .btn {
  background: var(--btn-default-hover-bg);
  color: var(--btn-default-hover-text-color);
  border-color: var(--btn-default-hover-border-color);
}

.main-search--form {
  z-index: 3000;
  display: none;
}
.is--active-searchfield .main-search--form {
  display: block;
}
@media screen and (min-width: 30em) {
  .main-search--form {
    display: block;
  }
}
.main-search--form .main-search--field {
  padding: 0.5625rem 2.375rem 0.5625rem 0.5625rem;
  height: 2.5rem;
  background: #fff;
  vertical-align: middle;
  width: 100%;
  position: relative;
}
.main-search--form .main-search--button {
  appearance: none;
  top: 0.625rem;
  bottom: 0.625rem;
  right: 0.625rem;
  font-size: 1.25rem;
  padding: 0rem 0.625rem 0rem 0.625rem;
  line-height: 1;
  position: absolute;
  z-index: 2;
  border: 0 none;
  background: transparent;
  color: var(--text-color);
  outline: none;
}
.main-search--form .main-search--text {
  display: none;
}
.main-search--form .form--ajax-loader {
  display: none !important;
}

.account--menu.is--personalized .navigation--logout-personalized {
  display: inline-block;
}
.account--menu.is--personalized .navigation--logout {
  display: block;
}
.account--menu.is--personalized .navigation--link.navigation--personalized {
  padding-top: 0.5625rem;
  padding-left: 1.4375rem;
  padding-bottom: 0.5625rem;
  line-height: 1.25rem;
  position: relative;
  color: var(--text-color);
  font-weight: var(--font-base-weight);
}
.account--menu.is--personalized .navigation--link.navigation--personalized:before, .account--menu.is--personalized .navigation--link.navigation--personalized::before {
  width: 1rem;
  height: 1rem;
  left: 0.125rem;
  content: "\e614";
  font-family: "shopware";
  position: absolute;
}
.account--menu.is--personalized .navigation--link.navigation--personalized [class^=icon--] {
  margin: 0rem 0.3125rem 0rem 0rem;
  display: inline-block;
}
.account--menu.is--personalized .navigation--link.navigation--personalized .icon--logout {
  position: relative;
  top: 0.625rem;
}
.account--menu.is--personalized .navigation--link.navigation--personalized:hover {
  color: var(--brand-primary);
}

.off-canvas .account--menu.is--personalized .navigation--signin {
  border-bottom: none;
}

.account--dropdown-navigation {
  display: none;
  text-align: left;
}
.account--dropdown-navigation .navigation--logout-personalized {
  display: inline-block;
}
.account--dropdown-navigation .navigation--logout {
  display: block;
}
.account--dropdown-navigation .navigation--signin {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  margin-top: 0.4375rem;
  border-bottom: 1px solid var(--border-color);
  display: block;
  text-align: center;
}
.account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn {
  margin-bottom: 0.3125rem;
  width: 95%;
  text-align: center;
}
.account--dropdown-navigation .navigation--register {
  font-size: 0.8125rem;
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized {
  line-height: 1.25rem;
  padding-left: 2.0625rem;
  color: var(--text-color);
  font-weight: var(--font-base-weight);
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:before, .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized::before {
  left: 0.625rem;
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:hover {
  color: var(--brand-primary);
}
.account--dropdown-navigation.off-canvas {
  background: var(--gray);
}
.account--dropdown-navigation.off-canvas .account--menu,
.account--dropdown-navigation.off-canvas .sidebar--navigation {
  text-align: left;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry,
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry {
  display: block;
  margin: 0;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized,
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized [class^=icon--],
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized [class^=icon--] {
  margin: 0rem 0.3125rem 0rem 0rem;
  display: inline-block;
}
.account--dropdown-navigation.off-canvas .account--close-off-canvas {
  color: #fff;
  font-weight: var(--font-bold-weight);
}

.has--csstransforms .entry--search .entry--trigger.is--active::after {
  transform: rotate(-45deg);
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 0.5rem;
  margin-left: 0.0625rem;
  background: var(--gray-dark);
  content: "";
  display: block;
}

.entry--search.is--active .main-search--form {
  background: var(--gray-dark);
  display: block;
}

.main-search--results {
  margin-top: 0.625rem;
  position: absolute;
  width: 100%;
  text-align: left;
  z-index: 3500;
  display: none;
  min-width: 320px;
}

.results--list {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  box-shadow: 0 10px 25px -15px #000;
  border: 1px solid var(--border-color);
  background: #fff;
  -ms-touch-action: manipulation;
}
.results--list::after {
  transform: rotate(135deg);
  width: 0.75rem;
  height: 0.75rem;
  top: -0.375rem;
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  left: 48%;
  border: 1px solid var(--border-color);
  border-top: 0 none;
  border-right: 0 none;
}
.results--list .list--entry,
.results--list .entry--all-results {
  display: block;
}
.results--list .entry--all-results.is--active {
  font-weight: var(--font-bold-weight);
}
.results--list .entry--all-results.is--active .entry--all-results-number {
  font-weight: var(--font-bold-weight);
}
.results--list .list--entry {
  line-height: 1.875rem;
  border-bottom: 1px solid var(--border-color);
}
.results--list .list--entry:last-child {
  border: 0 none;
}
.results--list .entry--no-results {
  width: 100%;
  text-align: center;
  list-style: none;
  font-weight: var(--font-base-weight);
}
.results--list .is--active,
.results--list .list--entry:hover {
  color: var(--link-color);
}
.results--list .is--active .entry--name,
.results--list .is--active .entry--price,
.results--list .list--entry:hover .entry--name,
.results--list .list--entry:hover .entry--price {
  color: var(--link-color);
}
.results--list .search-result--link {
  padding: 0.375rem 0rem 0.375rem 0rem;
  display: block;
}
.results--list .entry--name,
.results--list .entry--all-results-link,
.results--list .entry--all-results-number {
  height: 1.875rem;
  line-height: 1.875rem;
  display: block;
}
.results--list .price--unit {
  font-size: 0.6875rem;
  line-height: 1.125rem;
  float: right;
}
.results--list .entry--media {
  height: 1.875rem;
  width: 10%;
  min-width: 10%;
  position: relative;
  text-align: center;
}
.results--list .entry--media .media--image {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.results--list .entry--name {
  padding-left: 0.625rem;
  width: 60%;
  color: var(--text-color);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.results--list .entry--price,
.results--list .entry--all-results-number {
  width: 30%;
  text-align: right;
  color: var(--text-color);
  white-space: nowrap;
}
.results--list .entry--all-results {
  padding: 0.375rem 0.3125rem 0.375rem 0.3125rem;
  font-weight: var(--font-base-weight);
}
.results--list .entry--all-results-link {
  width: 70%;
  padding: 0;
}
.results--list .entry--all-results-link .icon--arrow-right {
  top: -0.0625rem;
  margin: 0rem 0.5rem 0rem 0rem;
  position: relative;
}
.results--list .entry--all-results-number {
  font-weight: var(--font-base-weight);
  color: var(--link-color);
}

.off-canvas .mobile--switches .navigation--entry {
  padding: 0;
  border: none;
  background: none;
}

@media screen and (min-width: 30em) {
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    width: auto;
  }
  .entry--search.is--active .main-search--form {
    top: 0;
    display: inline-block;
  }
  .entry--search .entry--trigger {
    display: none;
  }
  .entry--search .main-search--form {
    box-shadow: 0 0 0 transparent;
    border-bottom: 0 none;
    padding: 0;
    display: inline-block;
    position: relative;
  }
  .entry--search .main-search--form .main-search--field {
    background: var(--input-bg);
  }
  .entry--search .main-search--form .main-search--field:focus {
    background: #fff;
  }
  .entry--search .main-search--form .main-search--button {
    top: 0rem;
    bottom: 0rem;
    right: 0rem;
    padding: 0rem 0.625rem 0rem 0.625rem;
    height: 2.5rem;
  }
  .results--list {
    border: 1px solid var(--border-color);
    background: #fff;
  }
}
@media screen and (min-width: 48em) {
  .header-main {
    padding-bottom: 0;
    border-bottom: 0 none;
  }
  .header-main .container::after {
    content: none;
  }
  .header-main .top-bar {
    padding: 0.25rem 0rem 0.25rem 0rem;
    display: block;
  }
  .header-main .top-bar--navigation {
    width: auto;
    float: right;
  }
  .header-main .top-bar--navigation .navigation--entry {
    padding: 0rem 0.9375rem 0rem 0.9375rem;
    line-height: 1.5625rem;
    float: left;
    display: block;
  }
  .header-main .top-bar--navigation .navigation--entry li {
    line-height: normal;
  }
  .header-main .top-bar--navigation .navigation--entry,
  .header-main .top-bar--navigation .navigation--link {
    color: var(--text-color);
    cursor: pointer;
  }
  .header-main .top-bar--navigation .navigation--entry:hover,
  .header-main .top-bar--navigation .navigation--link:hover {
    color: var(--brand-primary);
  }
  .header-main .top-bar--navigation .field--select,
  .header-main .top-bar--navigation .navigation--entry {
    height: 1.5625rem;
  }
  .header-main .top-bar--navigation .field--select {
    position: relative;
  }
  .header-main .top-bar--navigation .select-field {
    height: 1.5625rem;
  }
  .header-main .top-bar--navigation .select-field select {
    border-radius: 0;
    padding: 0rem 1.125rem 0rem 0rem;
    line-height: 1.5625rem;
    background: none;
    border: 0 none;
  }
  .header-main .top-bar--navigation .select-field:after {
    height: 1.5625rem;
    line-height: 1.5rem;
    width: auto;
    border: 0 none;
  }
  .header-main .top-bar--navigation .top-bar--language .select-field {
    width: 2rem;
  }
  .header-main .top-bar--navigation .top-bar--language .select-field select {
    text-indent: -9999px;
  }
  .header-main .top-bar--navigation .top-bar--language .language--flag {
    margin-top: -0.375rem;
    position: absolute;
    z-index: 900;
    top: 50%;
    left: 0;
    pointer-events: none;
  }
  .header-main .top-bar--navigation .entry--service {
    position: relative;
  }
  .header-main .top-bar--navigation .entry--service:after, .header-main .top-bar--navigation .entry--service::after {
    top: -0.1875rem;
    margin-left: 0.3125rem;
    content: "\e612";
    font-family: "shopware";
    position: relative;
  }
  .header-main .top-bar--navigation .entry--service.js--is--dropdown-active {
    color: var(--brand-primary);
  }
  .header-main .top-bar--navigation .service--list {
    min-width: 9.375rem;
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    top: 2rem;
    right: 0.75rem;
    text-align: left;
    position: absolute;
    display: none;
    list-style: none;
    background: #fff;
    z-index: 3500;
    border: 1px solid var(--border-color);
  }
  .header-main .top-bar--navigation .service--list::after {
    transform: rotate(135deg);
    width: 0.5rem;
    height: 0.5rem;
    top: -0.3125rem;
    right: 1.125rem;
    content: "";
    display: block;
    position: absolute;
    background: #fff;
    border-color: var(--border-color);
    border-width: 0 0 1px 1px;
    border-style: solid;
  }
  .header-main .top-bar--navigation .service--list .service--link {
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
    display: block;
    color: var(--text-color);
  }
  .header-main .top-bar--navigation .service--list .service--link:hover {
    color: var(--brand-primary);
  }
  .header-main .top-bar--navigation .js--is--dropdown-active .service--list {
    display: block;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 var(--border-color);
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
    width: 100%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    display: block;
  }
  .shop--navigation .navigation--entry {
    border: 0 none;
    width: auto;
    float: none;
    display: inline-block;
  }
  .shop--navigation .entry--cart .entry--link {
    padding: 0;
    display: inline-block;
  }
  .shop--navigation .entry--link {
    font-weight: var(--font-base-weight);
  }
  .shop--navigation .entry--menu-left {
    display: none;
  }
  .shop--navigation .cart--quantity,
  .shop--navigation .search--display,
  .shop--navigation .entry--account {
    display: inline-block;
  }
  .shop--navigation .entry--search {
    font-size: 0.875rem;
    background: #fff;
    padding: 0;
    border: 0 none;
  }
  .shop--navigation .entry--search .entry--trigger {
    display: none;
  }
  .shop--navigation .main-search--form {
    box-shadow: 0 0 0 transparent;
    display: block;
    padding: 0;
    border: 0 none;
  }
  .main-search--form {
    left: auto;
  }
  .account--dropdown-navigation {
    min-width: 12.5rem;
    max-width: 15.625rem;
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    top: 2.8125rem;
    display: none;
    position: absolute;
    right: 0;
    z-index: 3500;
    text-align: left;
  }
  .js--is--dropdown-active .account--dropdown-navigation {
    display: block;
  }
  .account--dropdown-navigation .navigation--signin {
    padding-bottom: 0.375rem;
    margin-bottom: 0.375rem;
    margin-top: 0.3125rem;
    padding-top: 0;
  }
  .account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn {
    width: 100%;
    margin-bottom: 0;
  }
  .account--dropdown-navigation .navigation--smartphone {
    display: none;
  }
  .account--dropdown-navigation .account--menu {
    text-align: left;
    background: #fff;
  }
  .account--dropdown-navigation .account--menu::after {
    transform: rotate(135deg);
    width: 0.5rem;
    height: 0.5rem;
    right: 1.125rem;
    content: "";
    display: block;
    position: absolute;
    background: #fff;
    border-color: var(--border-color);
    border-width: 0 0 1px 1px;
    border-style: solid;
    top: 0;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation {
    text-align: left;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--entry {
    display: block;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--link {
    padding: 0.1875rem 0rem 0.1875rem 0rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout {
    padding: 0.625rem 0rem 0rem 1.4375rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout:before {
    left: 0.125rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--abort {
    padding-top: 0rem;
    margin-top: 0rem;
    border-top: 0 none;
    white-space: nowrap;
  }
}
@media screen and (min-width: 64em) {
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 var(--border-color);
  }
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    display: inline-block;
    float: right;
  }
  .navigation--list .navigation--entry .btn {
    width: auto;
  }
  .navigation--list .entry--cart .cart--link {
    padding-left: 3.125rem;
  }
  .navigation--list .entry--cart .cart--link .cart--quantity {
    display: inline-block;
  }
  .navigation--list .entry--cart .cart--link .cart--amount {
    display: inline-block;
    color: var(--brand-primary);
    font-weight: var(--font-bold-weight);
  }
  .navigation--list .entry--cart .icon--basket {
    left: 0.5rem;
    display: block;
    position: absolute;
    top: 50%;
  }
  .navigation--list .entry--account .account--link {
    padding-left: 2.25rem;
  }
  .navigation--list .entry--account .account--link.account--user-loggedin:after {
    content: none;
    display: none;
  }
  .navigation--list .entry--account .icon--account {
    left: 0.5rem;
    display: block;
    position: absolute;
    top: 50%;
  }
  .navigation--list .account--display {
    display: inline-block;
  }
  .navigation--list .account--display.navigation--personalized {
    line-height: 1rem;
    font-size: 0.75rem;
    max-width: 5.625rem;
    margin-top: 0.125rem;
    text-align: left;
  }
  .navigation--list .account--display.navigation--personalized .account--display-greeting {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: var(--font-bold-weight);
  }
}
@media screen and (min-width: 78.75em) {
  .header-main .top-bar {
    margin-bottom: 0.125rem;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 var(--border-color);
  }
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    display: inline-block;
    float: right;
  }
  .shop--navigation .navigation--link {
    padding: 0.5rem 1rem 1rem 1rem;
  }
  .shop--navigation .entry--link {
    font-size: 0.875rem;
  }
  .shop--navigation .entry--trigger {
    margin-right: 0.875rem;
  }
  .shop--navigation .entry--search {
    width: 40%;
  }
  .shop--navigation .entry--cart {
    margin-right: 0;
  }
  .account--menu.is--personalized .navigation--link.navigation--personalized {
    padding-bottom: 0;
  }
  .header-main .top-bar--navigation .service--list {
    right: 0;
  }
  .header-main .top-bar--navigation .navigation--entry:last-child {
    padding-right: 0;
  }
  .cart--display {
    margin: 0rem 1.5625rem 0rem 0.3125rem;
    font-weight: var(--font-bold-weight);
    color: var(--text-color);
  }
}
/*
Register
==========================================
Contains the styles of the registration process form and its components.

The user can see the registration steps, advantages and required information.
*/
.is--ctl-register .content-main--inner > .content--wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  grid-template-rows: min-content min-content 1fr;
}
@media screen and (min-width: 48em) {
  .is--ctl-register .content-main--inner > .content--wrapper {
    grid-row: ~"2/4";
    grid-template-columns: 1fr 2fr;
  }
}
.is--ctl-register .content-main--inner > .content--wrapper::before, .is--ctl-register .content-main--inner > .content--wrapper::after {
  content: none;
}

.register--message {
  grid-column: ~"1/-1";
}

.register--content {
  width: 100%;
  display: none;
}
@media screen and (min-width: 48em) {
  .register--content {
    grid-column: 2;
    grid-row: ~"2/4";
  }
}
.register--content.is--collapsed {
  display: block;
}
.register--content .alert {
  margin: 1.25rem 1.125rem 1.25rem 1.125rem;
}
.register--content .register--check {
  padding-bottom: 0.5rem;
}
.register--content .register--action {
  margin: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.register--content .register--action .register--submit {
  width: 100%;
  text-align: center;
}
.register--content .register--required-info {
  padding-bottom: 1.875rem;
  margin: 0rem 1.625rem 1rem 1.625rem;
  font-size: 0.875rem;
}
.register--content .select-field {
  margin-bottom: 0.625rem;
  max-width: 100%;
}
.register--content .register--field {
  margin-bottom: 0.625rem;
  width: 100%;
}
.register--content .register--customertype {
  display: block;
}
.register--content .register--zip-city .register--field-zipcode {
  width: 28%;
  float: left;
}
.register--content .register--zip-city .register--field-city {
  width: 70%;
  float: left;
}
.register--content .register--zip-city .register--field-city:after {
  content: "";
  display: table;
  clear: both;
}
.register--content .register--zip-city .register--spacer {
  margin-right: 2%;
}
.register--content .birthday--label {
  margin: 0rem 0rem 0.3125rem 0rem;
  display: block;
  font-weight: var(--font-bold-weight);
}
.register--content .birthday--label:after {
  content: "";
  display: table;
  clear: both;
}
.register--content .register--password-description {
  padding-bottom: 1.25rem;
}
.register--content .register--birthdate .select-field {
  margin-bottom: 0.9375rem;
  max-width: 100%;
  float: left;
}
.register--content .register--birthdate .datepicker {
  margin-bottom: 0.9375rem;
  width: 100%;
  max-width: 100%;
  float: left;
}
.register--content .register--birthdate .register--birthyear,
.register--content .register--birthdate .register--birthyear.select-field {
  margin-right: 0rem;
}
.register--content .register--privacy {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  margin: 0rem 1.25rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-color);
}
.register--content .register--privacy input[type=checkbox] {
  margin: 0rem 0.625rem 0rem 0rem;
}
.register--content .register--personal {
  padding-bottom: 0.625rem;
}
.register--content .register--personal:after {
  content: "";
  display: table;
  clear: both;
}
.register--content #billingCountryBlockedAlert {
  margin-top: 0;
  margin-left: 0;
}

.register--login {
  grid-column: 1;
  float: none;
  width: auto;
}
@media screen and (min-width: 48em) {
  .register--login {
    grid-row: 2;
  }
}
.register--login .register--new-customer {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.register--login .register--new-customer .new-customer-btn {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
}
.register--login .register--new-customer .new-customer-btn:after {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  margin-top: -0.5rem;
  font-size: 0.375rem;
  right: 0.625rem;
  position: absolute;
  font-family: "shopware";
  font-weight: var(--font-base-weight);
  content: "\e612";
  color: inherit;
  top: 50%;
}
.register--login .register--new-customer .new-customer-btn.is--active:after {
  content: "\e610";
}
.register--login .register--login-description {
  padding-bottom: 1.25rem;
}
.register--login .register--login-lostpassword {
  padding-bottom: 1.25rem;
}
.register--login .register--login-btn {
  width: 100%;
  text-align: center;
}

.register--advantages {
  display: none;
  grid-column: 1;
}
@media screen and (min-width: 48em) {
  .register--advantages {
    grid-row: 3;
  }
}

.password--success {
  margin: 0.625rem 0rem 1.25rem 0rem;
}

.steps--container {
  background: transparent;
}

.steps--content {
  padding-top: 1rem;
  display: table;
  border-top: 1px solid var(--border-color);
  width: 100%;
}
.steps--content .steps--list {
  display: table-row;
}
.steps--content .steps--list:after {
  content: "";
  display: table;
  clear: both;
}
.steps--content .steps--entry {
  padding: 0rem 0.625rem 0rem 0.625rem;
  display: table-cell;
  list-style: none;
  vertical-align: top;
  text-align: center;
}
.steps--content .steps--spacer {
  display: none;
  vertical-align: middle;
}
.steps--content .steps--entry .icon {
  border-radius: 22px;
  padding: 0.625rem 1rem 0.625rem 1rem;
  width: 2.875rem;
  font-size: 1.25rem;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: var(--font-bold-weight);
}
.steps--content .is--active .icon {
  color: #fff;
}
.steps--content .steps--entry .text {
  margin: 0rem 0rem 0rem 0.625rem;
  height: 3.25rem;
  position: relative;
  top: -2px;
  display: none;
  vertical-align: middle;
}
.steps--content .steps--entry .text::after {
  content: "";
  height: 100%;
}
.steps--content .is--active .text {
  color: var(--brand-primary);
  display: inline-block;
  font-weight: var(--font-bold-weight);
}
.steps--content .steps--entry .text--inner, .steps--content .steps--entry .text::after {
  display: inline-block;
  vertical-align: middle;
}

.account--change-payment .payment--method {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.account--change-payment .payment--selection-input {
  width: 2.5rem;
  float: left;
  text-align: center;
}
.account--change-payment .payment--selection-label,
.account--change-payment .payment--description,
.account--change-payment .payment--content {
  padding: 0rem 0rem 0rem 2.5rem;
  width: 100%;
}
.account--change-payment .payment--content input {
  max-width: 100%;
}

@media screen and (min-width: 48em) {
  .register--content {
    display: block;
  }
  .register--content .select-field {
    margin-bottom: 0.9375rem;
  }
  .register--content .select-field .register--birthday {
    margin-right: 2%;
  }
  .register--content .register--field {
    margin-bottom: 0.9375rem;
  }
  .register--content .register--check {
    padding-bottom: 0.5rem;
  }
  .register--content .select-field {
    max-width: 18.125rem;
  }
  .register--content .register--birthdate .select-field {
    width: 32%;
    margin-right: 2%;
  }
  .register--content .register--action {
    text-align: right;
  }
  .register--content .register--action .register--submit {
    width: 35%;
  }
  .steps--content {
    padding: 1.875rem 0rem 1.5rem 0rem;
    background: transparent;
    border: none;
  }
  .steps--content .steps--spacer {
    width: 5rem;
    display: table-cell;
    text-align: center;
  }
  .steps--content .steps--entry .text {
    margin: 0rem 0.625rem 0rem 0.625rem;
    display: inline-block;
    font-weight: var(--font-bold-weight);
  }
  .register--login .register--new-customer {
    display: none;
  }
  .register--login .register--login-field {
    margin-bottom: 0.9375rem;
  }
  .register--login .register--login-btn {
    width: auto;
    text-align: left;
  }
  .register--advantages {
    display: block;
  }
  .register--advantages .panel--title {
    margin: 0rem 0rem 0.625rem 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  .steps--content .steps--entry.step--payment {
    width: 30%;
  }
  .steps--content .steps--entry .text {
    margin: 0rem 0rem 0rem 0.625rem;
    width: 70%;
    text-align: left;
  }
  .steps--content .steps--spacer {
    width: 15%;
  }
}
/*
Main navigation
==========================================
Contains the styles of the main navigation of the Shopware storefront.

The main navigation is positioned above the content section.

It contains the viewport specific styles inside media queries.
*/
.navigation-main {
  background: #fff;
  display: none;
}

/*
*/
.navigation-main {
  position: sticky;
  border-top: 1px solid var(--gray-dark);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 48em) {
  .navigation-main {
    display: block;
  }
}
.navigation-main .navigation--list {
  border-left: 1px solid var(--gray-dark);
  border-right: 1px solid var(--gray-dark);
  display: flex;
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.025em;
}
.navigation-main .navigation--entry {
  display: block;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
}
.navigation-main .navigation--entry:not(:last-child) {
  border-right: 1px solid var(--gray-dark);
}
.navigation-main .navigation--link {
  color: var(--brand-secondary);
  padding: 0.33rem 1.125rem 0.5rem 1.125rem;
  display: flex;
  flex: 1 0;
  height: 100%;
  align-items: center;
}
.navigation-main .navigation--link > * {
  margin: auto;
}
.navigation-main .is--active .navigation--link {
  color: #fff;
  background-color: var(--brand-primary);
  font-weight: 600;
}

/*
Footer
==========================================
Defines the styles for the storefront footer and its components.

Contains the footer columns, the navigation elements and the vat notice/logo at the bottom of the page.

It contains the viewport specific styles inside media queries.

The footer element sizes are defined with the unitize mixin.
*/
.footer-main {
  background: #fff;
  border-top: 1px solid var(--border-color);
  background-color: var(--panel-header-bg);
  padding-top: 1rem;
}
.footer-main .footer--phone-link {
  font-size: var(--font-size-accent);
  font-weight: var(--font-bold-weight);
  color: var(--brand-secondary);
}
.footer-main .footer--bottom,
.footer-main .footer--logobar {
  padding: var(--font-size-regular) ~"max(var(--font-size-large), var(--font-size-large) + 50vw - var(--container-max-width) * 0.5)";
}
.footer-main .footer--columns {
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  background-color: var(--body-bg);
  display: flex;
  flex-direction: column;
  padding: 0 ~"calc(50vw - var(--container-max-width) * 0.5)";
}
@media screen and (min-width: 48em) {
  .footer-main .footer--columns {
    border-top: 1px solid var(--border-color);
  }
}
@media screen and (min-width: 48em) {
  .footer-main .footer--columns {
    padding-top: var(--font-size-large);
    padding-bottom: var(--font-size-large);
  }
}
@media screen and (min-width: 64em) {
  .footer-main .footer--columns {
    flex-direction: row;
  }
}
.footer-main .footer--column {
  border-top: 1px solid var(--border-color);
  min-width: 300px;
  flex: 1 1 var(--flex-basis, 100%);
  float: none;
  width: auto;
}
@media screen and (min-width: 48em) {
  .footer-main .footer--column {
    --flex-basis: 0%;
  }
}
.footer-main .column--headline,
.footer-main .column--content {
  padding-left: var(--font-size-large);
  padding-right: var(--font-size-large);
}
.footer-main .column--headline {
  user-select: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  margin: 0;
  font-weight: var(--font-bold-weight);
  color: var(--brand-primary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.625rem;
}
@media screen and (min-width: 64em) {
  .footer-main .column--headline {
    padding-top: 0;
  }
}
.footer-main .column--headline.is--active::after {
  content: "\e68e";
}
.footer-main .column--headline::after {
  font-size: 1.125rem;
  font-family: "shopware";
  color: var(--text-color);
  font-weight: var(--font-bold-weight);
  content: "\e68f";
  float: right;
}
.footer-main .column--content {
  display: none;
}
.footer-main .column--content.is--active {
  display: block;
}
.footer-main .footer--bottom {
  border-top: 1px solid var(--border-color);
  background-color: var(--panel-header-bg);
  font-size: var(--font-size-tiny);
  text-align: center;
}
.footer-main .footer--logo {
  font-size: 1.75rem;
  color: #009fe3;
}
.footer-main .navigation--list {
  padding: 0rem 0rem 1rem 0rem;
}
.footer-main .navigation--list .is--level1 {
  padding-bottom: 0.625rem;
}
.footer-main .navigation--list .is--level1 .navigation--entry {
  margin-left: 0.625rem;
}
.footer-main .service--list {
  list-style-type: none;
  padding: 0 0 2rem 0;
  margin: 0;
}
.footer-main .service--list .service--link {
  color: var(--brand-secondary);
  display: inline-block;
  padding: 0.5rem 0.5rem 0.5rem 0; /* touchable */
}
@media screen and (min-width: 48em) {
  .footer-main .service--list .service--link {
    padding: 0;
  }
}
.footer-main .service--list .service--link:hover {
  color: var(--brand-primary);
}
.footer-main .service--list .service--link::before {
  content: "\e6d8";
  font-family: var(--font-icon-stack);
}
.footer-main .navigation--link {
  padding: 0.625rem 0rem 0.625rem 0rem;
  display: block;
  color: var(--text-color);
  cursor: pointer;
}
.footer-main .navigation--link:hover {
  color: var(--brand-primary);
}
.footer-main .newsletter--form {
  padding: 0rem 0rem 1rem 0rem;
}
.footer-main .newsletter--form:after {
  content: "";
  display: table;
  clear: both;
}
.footer-main .newsletter--field {
  border-radius: 3px 0 0 3px;
  margin: 0rem 0rem 0.625rem 0rem;
  position: relative;
  width: 87.5%;
  float: left;
}
.footer-main .newsletter--field:focus {
  z-index: 1;
}
.footer-main .newsletter--button {
  box-shadow: none;
  border-radius: 0 3px 3px 0;
  margin: 0rem 0rem 0.625rem 0rem;
  padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem;
  -1: calc(16rem / margin-left);
  position: relative;
  width: 12.5%;
  text-align: center;
  float: left;
}
.footer-main .newsletter--button .icon--mail {
  font-size: 0.875rem;
  margin-right: 0rem;
}
.footer-main .newsletter--button .button--text {
  display: none;
}
.footer-main .footer--logo {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.footer-main .footer--logobar {
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: dense;
  grid-gap: 0.5rem 1rem;
  text-align: left;
  background-color: var(--body-bg);
}
@media screen and (min-width: 30em) {
  .footer-main .footer--logobar {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media screen and (min-width: 48em) {
  .footer-main .footer--logobar {
    grid-template-columns: repeat(16, 1fr);
  }
}
@media screen and (min-width: 64em) {
  .footer-main .footer--logobar {
    grid-template-columns: repeat(20, 1fr);
  }
}
@media screen and (min-width: 78.75em) {
  .footer-main .footer--logobar {
    grid-template-columns: repeat(24, 1fr);
    background-color: #ffffff;
  }
}
.footer-main .footer--logobar .g-1-1 {
  grid-column: span min(1, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-1-2 {
  grid-column: span min(1, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-1-3 {
  grid-column: span min(1, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-1-4 {
  grid-column: span min(1, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-2-1 {
  grid-column: span min(2, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-2-2 {
  grid-column: span min(2, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-2-3 {
  grid-column: span min(2, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-2-4 {
  grid-column: span min(2, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-3-1 {
  grid-column: span min(3, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-3-2 {
  grid-column: span min(3, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-3-3 {
  grid-column: span min(3, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-3-4 {
  grid-column: span min(3, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-4-1 {
  grid-column: span min(4, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-4-2 {
  grid-column: span min(4, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-4-3 {
  grid-column: span min(4, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-4-4 {
  grid-column: span min(4, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-5-1 {
  grid-column: span min(5, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-5-2 {
  grid-column: span min(5, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-5-3 {
  grid-column: span min(5, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-5-4 {
  grid-column: span min(5, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-6-1 {
  grid-column: span min(6, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-6-2 {
  grid-column: span min(6, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-6-3 {
  grid-column: span min(6, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-6-4 {
  grid-column: span min(6, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-7-1 {
  grid-column: span min(7, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-7-2 {
  grid-column: span min(7, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-7-3 {
  grid-column: span min(7, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-7-4 {
  grid-column: span min(7, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar .g-8-1 {
  grid-column: span min(8, 8);
  grid-row: span 1;
}
.footer-main .footer--logobar .g-8-2 {
  grid-column: span min(8, 8);
  grid-row: span 2;
}
.footer-main .footer--logobar .g-8-3 {
  grid-column: span min(8, 8);
  grid-row: span 3;
}
.footer-main .footer--logobar .g-8-4 {
  grid-column: span min(8, 8);
  grid-row: span 4;
}
.footer-main .footer--logobar img,
.footer-main .footer--logobar > * {
  display: block;
  margin-bottom: auto;
}

.footer-vat {
  margin-top: 0.625rem;
  padding: 0rem 0.3125rem 0rem 0.3125rem;
  background: transparent;
}

.footer--vat-info .vat-info--text {
  margin-bottom: 0.625rem;
  text-align: center;
}

.footer-minimal {
  font-size: 0.8125rem;
  padding: 2.5rem 0.625rem 1.25rem 0.625rem;
  background: transparent;
  text-align: center;
}
.footer-main .footer-minimal {
  padding: 0;
}
.footer-minimal .footer--vat-info {
  margin: 0.9375rem 0rem 0.625rem 0rem;
}
.footer-minimal .footer--vat-info .vat-info--text {
  line-height: 1.125rem;
  margin: 0;
}

@media screen and (min-width: 48em) {
  .footer-main .footer-minimal {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .footer-main .column--headline {
    cursor: text;
  }
  .footer-main .column--headline::after {
    display: none;
  }
  .footer-main .footer--column {
    border: 0 none;
  }
  .footer-main .column--content {
    display: block;
  }
  .footer-main .navigation--list .is--level1 {
    display: none;
  }
  .footer-main .navigation--entry {
    padding: 0;
  }
  .footer-main .navigation--link {
    line-height: 1.7;
    padding: 0;
  }
  .footer-main .newsletter--field {
    width: 80%;
  }
  .footer-main .newsletter--button {
    width: 20%;
  }
  .footer-vat {
    padding: 0;
  }
}
:root {
  --border-radius:3px;
  --container-max-width:1260px;
  --font-icon-stack:"shopware";
  /* typgraphy */
  --font-size-huge:2rem;
  --font-size-large:1.33rem;
  --font-size-accent:1.2rem;
  --font-size-medium:1.2rem;
  --font-size-regular:1rem;
  --font-size-small:0.75rem;
  --font-size-tiny:0.625rem;
}
@media screen and (min-width: 30em) {
  :root {
    --font-size-huge:3rem;
    --font-size-large:2rem;
  }
}
@media screen and (min-width: 64em) {
  :root {
    --font-size-huge:3.5rem;
    --font-size-large:2.2rem;
    --font-size-accent:1.5rem;
  }
}
html {
  scroll-behavior: smooth;
}

@media screen and (min-width: 30em) and (max-width: 48em) {
  .emotion--column-2 .tv-main-teaser.col-s-2, .emotion--column-3 .tv-main-teaser.col-s-3, .emotion--column-4 .tv-main-teaser.col-s-4, .emotion--column-5 .tv-main-teaser.col-s-5, .emotion--column-6 .tv-main-teaser.col-s-6, .emotion--column-7 .tv-main-teaser.col-s-7, .emotion--column-8 .tv-main-teaser.col-s-8, .emotion--column-9 .tv-main-teaser.col-s-9, .emotion--column-10 .tv-main-teaser.col-s-10, .emotion--column-11 .tv-main-teaser.col-s-11, .emotion--column-12 .tv-main-teaser.col-s-12 {
    --title-font-size: 1.75rem;
  }
}
@media screen and (min-width: 48em) and (max-width: 64em) {
  .emotion--column-2 .tv-main-teaser.col-m-2, .emotion--column-3 .tv-main-teaser.col-m-3, .emotion--column-4 .tv-main-teaser.col-m-4, .emotion--column-5 .tv-main-teaser.col-m-5, .emotion--column-6 .tv-main-teaser.col-m-6, .emotion--column-7 .tv-main-teaser.col-m-7, .emotion--column-8 .tv-main-teaser.col-m-8, .emotion--column-9 .tv-main-teaser.col-m-9, .emotion--column-10 .tv-main-teaser.col-m-10, .emotion--column-11 .tv-main-teaser.col-m-11, .emotion--column-12 .tv-main-teaser.col-m-12 {
    --title-font-size: 2.25rem;
  }
}
@media screen and (min-width: 64em) and (max-width: 78.75em) {
  .emotion--column-2 .tv-main-teaser.col-l-2, .emotion--column-3 .tv-main-teaser.col-l-3, .emotion--column-4 .tv-main-teaser.col-l-4, .emotion--column-5 .tv-main-teaser.col-l-5, .emotion--column-6 .tv-main-teaser.col-l-6, .emotion--column-7 .tv-main-teaser.col-l-7, .emotion--column-8 .tv-main-teaser.col-l-8, .emotion--column-9 .tv-main-teaser.col-l-9, .emotion--column-10 .tv-main-teaser.col-l-10, .emotion--column-11 .tv-main-teaser.col-l-11, .emotion--column-12 .tv-main-teaser.col-l-12 {
    --title-font-size: 2.75rem;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--column-2 .tv-main-teaser.col-xl-2, .emotion--column-3 .tv-main-teaser.col-xl-3, .emotion--column-4 .tv-main-teaser.col-xl-4, .emotion--column-5 .tv-main-teaser.col-xl-5, .emotion--column-6 .tv-main-teaser.col-xl-6, .emotion--column-7 .tv-main-teaser.col-xl-7, .emotion--column-8 .tv-main-teaser.col-xl-8, .emotion--column-9 .tv-main-teaser.col-xl-9, .emotion--column-10 .tv-main-teaser.col-xl-10, .emotion--column-11 .tv-main-teaser.col-xl-11, .emotion--column-12 .tv-main-teaser.col-xl-12 {
    --title-font-size: 3.25rem;
  }
}
.tv-main-teaser {
  --title-font-size: 1.5rem;
  --background-color: #fff;
  --background: var(--background-color);
  --color: var(--brand-secondary);
  --accent-color: var(--brand-primary);
  --shadow-color:#556a;
}
@media screen and (min-width: 30em) {
  .tv-main-teaser {
    --title-font-size: 1.5rem;
  }
}
@media screen and (min-width: 48em) {
  .tv-main-teaser {
    --title-font-size: 1.5rem;
  }
}
@media screen and (min-width: 64em) {
  .tv-main-teaser {
    --title-font-size: 1.75rem;
  }
}
@media screen and (min-width: 78.75em) {
  .tv-main-teaser {
    --title-font-size: 2.25rem;
  }
}
.tv-main-teaser.tv-red {
  --background-color: var(--brand-secondary-dark);
  --background:
  	~"conic-gradient( from 0deg at -75vw 95%, rgba(255,255,255,0.0) 70deg, rgba(225,245,255,0.15) 85deg, rgba(255,255,255,0) 100deg), linear-gradient(to bottom, var(--brand-secondary-dark) 0%, #000000 100%)";
  --color: var(--gray-light);
  --accent-color: var(--brand-primary);
  --shadow-color:#ffffff60;
}
.tv-main-teaser.tv-white {
  --background:
  	~"conic-gradient(from 0deg at -75vw 150%, rgba(255,255,255,0.0) 60deg, rgba(85,145,135,0.25) 75deg, rgba(255,255,255,0) 90deg), linear-gradient(to bottom, #def 0%, var(--gray) 100%)";
  --color: var(--brand-secondary-dark);
  --accent-color: var(--brand-primary);
  --shadow-color:#fff;
}
.tv-main-teaser.tv-rose {
  --background:linear-gradient(to bottom, #fcf6f0 0%, #f6e4e0 100%);
  --background-color:#f6e4e0;
  --shadow-color:#f06421aa;
}
.tv-main-teaser.tv-bubble {
  --background-color:#faf6d0;
  --background:
  	linear-gradient(to bottom, #fcfcf0 0%, #faf6d0 100%);
}
.tv-main-teaser .product--info {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 30em) {
  .tv-main-teaser .product--info {
    grid-template-columns: 1fr 2fr;
  }
}
.emotion--mode-rows .tv-main-teaser .emotion--product {
  height: auto;
}
.tv-main-teaser .emotion--product .product--box {
  background: var(--background);
  color: var(--color);
  border: 1px solid var(--background-color);
}
.tv-main-teaser .emotion--product .box--content {
  padding: 0;
}
.tv-main-teaser .emotion--product .tv-before-product--title {
  color: var(--accent-color);
  font-size: ~"calc(0.5 * var(--title-font-size))";
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.tv-main-teaser .emotion--product .product--title {
  color: var(--color);
  line-height: 1.2;
  height: auto;
  font-size: var(--title-font-size);
}
@media screen and (max-width: 30em) {
  .tv-main-teaser .emotion--product .product--title {
    hyphens: auto;
  }
}
.tv-main-teaser .emotion--product .product--title .vintage {
  font-weight: 300;
  line-height: 1;
}
.tv-main-teaser .emotion--product .product--image {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 30em) {
  .tv-main-teaser .emotion--product .product--image {
    width: 50%;
  }
}
.tv-main-teaser .emotion--product .image--element img {
  position: static;
  padding: 20px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tv-main-teaser .emotion--product .image--media {
  display: block;
  height: 100%;
}
.tv-main-teaser .emotion--product .product--details {
  flex: 1 1 50%;
  position: relative;
  width: auto;
  max-width: ~"calc(12 * var(--title-font-size))";
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20rem;
}
@media screen and (min-width: 30em) {
  .tv-main-teaser .emotion--product .product--details {
    min-height: 20rem;
  }
}
@media screen and (min-width: 64em) {
  .tv-main-teaser .emotion--product .product--details {
    min-height: 30rem;
  }
}
@media screen and (min-width: 78.75em) {
  .tv-main-teaser .emotion--product .product--details {
    min-height: 40rem;
  }
}
.tv-main-teaser .emotion--product .product--price-info {
  margin-right: auto;
}
.tv-main-teaser .emotion--product .product--price {
  height: auto;
}
.tv-main-teaser .emotion--product .price--default {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-color);
}
@media screen and (min-width: 30em) {
  .tv-main-teaser .emotion--product .price--default {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 64em) {
  .tv-main-teaser .emotion--product .price--default {
    font-size: 2rem;
  }
}
@media screen and (min-width: 78.75em) {
  .tv-main-teaser .emotion--product .price--default {
    font-size: 2.25rem;
  }
}
.tv-main-teaser .emotion--product .price--default.is--discount {
  color: var(--accent-color);
}
.tv-main-teaser .emotion--product .product--price-info {
  height: auto;
}

.tv-main-teaser:not(.tv-img-crop):not(.tv-img-wide) .product--image .image--element img {
  object-position: 0;
}
@media screen and (min-width: 30em) {
  .tv-main-teaser:not(.tv-img-crop):not(.tv-img-wide) .product--image .image--element img {
    object-position: 50%;
  }
}
@media screen and (min-width: 48em) {
  .tv-main-teaser:not(.tv-img-crop):not(.tv-img-wide) .product--image .image--element img {
    object-position: 80%;
  }
}
.tv-img-crop .product--image .image--element img {
  --translate-x:-17vw;
  width: 50%;
  height: 100%;
  object-fit: contain;
  transform: scale(2) rotate(-8deg) translate(var(--translate-x), 3rem);
  padding: 0px;
}
@media screen and (min-width: 30em) {
  .tv-img-crop .product--image .image--element img {
    --translate-x:0;
  }
}
.tv-img-glow .product--image .image--element img {
  filter: drop-shadow(0 -4px 12px var(--shadow-color));
}

.foodspec--bio {
  display: flex;
  flex-direction: column;
  max-width: 55px;
}
.foodspec--bio-logo {
  width: 100%;
}
.foodspec--bio-control {
  font-size: var(--font-size-tiny);
  font-weight: 700;
  white-space: nowrap;
}
.foodspec--bio-label {
  color: var(--text-color);
  font-weight: 700;
  margin-right: auto;
}
.product--image > .foodspec--bio {
  max-width: 35px;
  position: absolute;
  bottom: 0;
  z-index: 500;
}

.tv-atoz-groups {
  --columns: 1;
}
@media screen and (min-width: 30em) {
  .tv-atoz-groups {
    --columns: 2;
  }
}
@media screen and (min-width: 48em) {
  .tv-atoz-groups {
    --columns: 3;
  }
  .tv-atoz-groups:first-child {
    margin-top: 2rem;
  }
}
@media screen and (min-width: 64em) {
  .tv-atoz-groups {
    --columns: 4;
  }
}
.tv-atoz-groups-nav {
  display: grid;
  grid-auto-flow: column;
}
.tv-atoz-groups-nav a {
  color: var(--text-color);
  font-weight: 300;
  font-size: 22px;
}

.tv-atoz-title {
  font-family: var(--font-accent-stack);
  font-size: var(--font-size-huge);
  margin-top: 1.25rem;
}

.tv-atoz-intro {
  font-size: var(--font-size-medium);
  font-weight: 300;
  line-height: 1.5;
}

.tv-atoz-group--name {
  font-family: var(--font-accent-stack);
  font-size: var(--font-size-large);
  color: var(--brand-secondary);
}

.tv-atoz-show-images .tv-atoz-items {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: 10px;
}
.tv-atoz-groups:not(.tv-atoz-show-images) .tv-atoz-items {
  columns: var(--columns);
  line-height: 1.8;
}

.tv-atoz-item {
  break-inside: avoid;
}
.tv-atoz-show-images .tv-atoz-item {
  padding: 10px 30px;
  border: 1px solid var(--border-color);
}

.tv-atoz-item--image {
  display: block;
  height: 80px;
  object-fit: contain;
  object-position: center;
  width: 100%;
  margin-bottom: 10px;
}
.tv-atoz-item--image + .tv-atoz-item--name {
  text-align: center;
  display: block;
}
.tv-atoz-item--image.tv-image-placeholder {
  text-align: center;
  font-family: var(--font-accent-stack);
}
.tv-atoz-item--image.tv-image-placeholder::before {
  content: "?";
  font-size: 60px;
  line-height: 1.1;
  color: var(--border-color);
}

.tv-atoz-item--name {
  color: var(--text-color);
  font-weight: 300;
}

.tv-atoz-item--count {
  font-size: 0.8em;
  font-style: italic;
}

hr {
  color: var(--border-color);
  border-style: solid;
  border-bottom: none;
}

.advanced-menu .item--level-0 {
  padding-bottom: 1.5rem;
}

.categories--navigation.is--level0 > .navigation--entry > .navigation--link {
  font-weight: bold;
}

.advanced-menu .teaser--image {
  background-size: contain;
}

.listing--package-price {
  font-size: 0.625rem;
}

.listing--package-price .price--discount {
  text-decoration: line-through;
}

.listing--sidebar {
  padding-top: 2.8125rem;
}

.sidebar-main {
  padding-top: 0;
}

.sidebar-filter {
  margin-bottom: 1.25rem;
}

body.js--overlay-relative .cookie-permission-edit-link,
.page-wrap--cookie-permission:not(.is--hidden) ~ .cookie-permission-edit-link {
  visibility: hidden;
  bottom: -5rem;
}

.page-wrap--cookie-permission.is--hidden ~ .cookie-permission-edit-link {
  bottom: 1rem;
}

.cookie-permission-edit-link {
  position: fixed;
  left: 1rem;
  z-index: 800;
  transition: bottom 0.4s ease-out;
}
.cookie-permission-edit-link a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 50em;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.cookie-permission-edit-link a svg {
  display: block;
  width: 32px;
  height: auto;
}
.cookie-permission-edit-link a svg path {
  fill: #ffffff;
}
.cookie-permission-edit-link a svg + * {
  display: none;
  line-height: 1;
  margin: 0 0.5rem;
}
.cookie-permission-edit-link a:hover svg + *, .cookie-permission-edit-link a:focus svg + * {
  display: block;
}

.newsletter--additional-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0.625rem;
}

@keyframes dots {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
[data-src]:empty::before {
  content: "";
  display: block;
  margin: auto;
  font-size: 32px;
  width: 32px;
  height: 32px;
  animation: dots 1s infinite linear;
  opacity: 0.5;
  transform-origin: center center;
  text-align: left;
  line-height: 0.33;
}

/* sticky navigation */
@media screen and (min-width: 48em) {
  .navigation-main {
    position: sticky;
    top: -3px;
    z-index: 1001;
  }
}
.tv-newsletter-form {
  display: grid;
  grid-gap: 0.625rem;
  grid-template-areas: "intro intro" "email email" "name name" "info submit";
}
@media screen and (min-width: 64em) {
  .tv-newsletter-form {
    padding: 0 0.625rem;
    grid-template-columns: 1fr 2fr 0.5fr;
    grid-template-areas: "intro intro intro" "email name submit" "info info info";
  }
}
.tv-newsletter-form * {
  margin: 0;
}
.tv-newsletter-form .input--field {
  margin: 0 !important;
}
.tv-newsletter-form .newsletter-widget--intro {
  grid-area: intro;
}
.tv-newsletter-form .newsletter--email {
  grid-area: email;
}
.tv-newsletter-form .newsletter--additional-form {
  grid-area: name;
}
.tv-newsletter-form .newsletter--required-info {
  grid-area: info;
  font-size: 0.6875rem;
  line-height: 1.2;
}
.tv-newsletter-form .newsletter--action {
  grid-area: submit;
}
.tv-newsletter-form .newsletter--action .btn {
  width: 100%;
  text-align: center;
}

/*
.newsletter--firstname
.newsletter--lastname
*/