body.noScroll {
  overflow: hidden;
  position: fixed;
  inset: 0;
}

@keyframes dot-animation {
  0% {
    background-color: rgba(29, 29, 27, 0.4);
  }
  50% {
    background-color: rgba(29, 29, 27, 0.7);
  }
  100% {
    background-color: #1d1d1b;
  }
}
.batcom--loading {
  display: inline-block;
  width: 10px;
  height: 10px;
  position: relative;
  background-color: grey;
  animation: dot-animation 1.2s infinite;
  animation-delay: 0.8s;
  border-radius: 50%;
}
.batcom--loading::before, .batcom--loading::after {
  border-radius: 50%;
  content: "";
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1d1d1b;
  animation: dot-animation 1.2s infinite;
}
.batcom--loading::before {
  animation-delay: 0.4s;
  left: -20px;
}
.batcom--loading::after {
  animation-delay: 1.2s;
  right: -20px;
}

.batcom__loading-container {
  position: relative;
}
.batcom__loading-container .batcom--loading {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.batcom__loading-container.loading {
  pointer-events: none;
  opacity: 0.3;
}
.batcom__loading-container.loading .batcom--loading {
  display: inline-block;
}

.batcom-overlay__shorthand {
  position: relative;
  z-index: 0;
}

/* doc
---
title: z-index
name: nn-z-index
category: functions
---

Because z-indices can get tricky we manage them in the theme.scss globally.

Always use this mixin to set set a z-index.

Read the Best Practice to get an full documentation:
https://projects.netcentric.biz/wiki/display/FRONTEND/z-index+management+with+SCSS

## Live Template abbreviations
---
-z

## Parameters
---
@parameter $element = Name of the element (normally this will be the module name for the main stack)
@parameter $list = Name of the list (default $z-indices). Must be only set for stack context
@parameter $min = Set a minimum z-index which will be added to the list.

## Dependencies
---
$z-indices variable in the theme.scss

## Example
---

```html_example

// In the SASS theme file

$z-indices: slider, modal, dialog, navigation;

// In the SASS module file

.modal {
    &__base {
        position: absolute;
        z-index: nn-z-index(modal);
    }
}
```

## Source
---
http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
*/
/*
* Mixin used to create the arrows for the menu items.
*/
/* doc
---
title: Clearfix
name: clearfix
category: mixins
---

Clears after floating element

Use this mixin only inside media queries where you can't use the
abstract/extends/utils/_clearfix version, which adds less code to css

## Live Template abbreviations
---

## Example
---

```html_example
@include clearfix;
```

## Source
---
<https://css-tricks.com/snippets/css/clear-fix/>
*/
/*
lt0 = (default) 1 column at a 100%
lt1 = 2 columns (50%, 50%)
lt2 = 2 columns (33%, 66%)
lt3 = 2 columns (66%, 33%)
lt4 = 3 columns (33%, 33%, 33%)
lt5 = 4 columns (25%, 25%, 25%, 25%)

## Parameters
@parameter $layout-type = lt0 | lt1 | lt2 | lt3 | lt4 | lt5
*/
/* doc
---
title: Component Normalize / item Normalize
name: font
category: mixins
---
Use this mixing to regular AEM wrappers and normalization.
*/
/* stylelint-disable max-nesting-depth */
/* stylelint-disable media-feature-name-no-vendor-prefix */
/* doc
---
title: Font
name: font
category: mixins
---

Use this mixing to add fonts and normalization.

Documentation:

- https://projects.netcentric.biz/wiki/display/FRONTEND/CSS+-+Font+Normalization
- https://projects.netcentric.biz/wiki/display/FRONTEND/SCSS+-+Font+management

## Parameters
---
@param $font-type
@param $normalize

## Dependencies
---
/abstract/functions/nn-px-to-em
/abstract/functions/nn-px-to-rem
/abstract/functions/nn-px-to-unitless
/abstract/mixins/font-icon
*/
/*
* This mixin is used to set styles for elements according to typography in their respective viewport.
* It uses the variables defined in the typography
* @include typography("button") will enable the font size and lineheight according to typography button tokens in all the 3 viewports
*/
/* doc
---
title: Visibility
name: visibility
category: mixins
---

Mixin to add visibility to control to elements

---

## Example
---

```html_example
.container {
  &__base {
    @include visible;

    @include breakpoint($b-01) {
      @include hidden;
    }
  }
}
```
*/
/*
* This mixin is used to style headings of any level in a responsive way.
* It uses the variables defined in the typography map to style the headings so
* the levels it can effectively style are 1 to 6.
* It also styles the use of spans and links inside the headings.
*
* @param {number} $level - The heading level to style.
* @param {string} $weight - The font weight to use for the heading. By default it uses the weight defined in the typography map.
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
* This mixin is used to set styles for name, price, button label elements in:
* batcom-algolia-bw-productsearch.clientlibs.scss
* batcom-bff-dynamiclist.clientlibs.scss
* product-list.clientlibs.scss
*/
/**
* Reverse container
*/
.batcom-productcomparison-v2 {
  --pc-columns: 3;
  --pc-label-column: 170px;
  --pc-accent: #e54800;
  --pc-bg: #000;
  --pc-panel: #0b0b0b;
  --pc-panel-raised: #1b1b1b;
  --pc-border: #242424;
  --pc-border-soft: #171717;
  --pc-text: #fff;
  --pc-muted: #b8b8b8;
  --pc-bg-alt: #040404;
  overflow: hidden;
  color: var(--pc-text);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: 20px;
}
.batcom-productcomparison-v2,
.batcom-productcomparison-v2 * {
  box-sizing: border-box;
}
.batcom-productcomparison-v2--cols-2 {
  --pc-columns: 2;
}
.batcom-productcomparison-v2--cols-3 {
  --pc-columns: 3;
}
.batcom-productcomparison-v2__scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #555 #151515;
  scrollbar-width: thin;
}
.batcom-productcomparison-v2__grid {
  display: block;
  width: 100%;
  min-width: calc(var(--pc-label-column) + var(--pc-columns) * 280px);
}
.batcom-productcomparison-v2__rowgroup {
  display: block;
  width: 100%;
}
.batcom-productcomparison-v2__row {
  display: grid;
  grid-template-columns: var(--pc-label-column) repeat(var(--pc-columns), minmax(0, 1fr));
  min-height: 100px;
}
.batcom-productcomparison-v2__row:nth-child(even) .batcom-productcomparison-v2__cell {
  background: var(--pc-bg-alt);
}
.batcom-productcomparison-v2__row[hidden] {
  display: none;
}
.batcom-productcomparison-v2__row--header {
  min-height: 385px;
  background: var(--pc-bg);
}
.batcom-productcomparison-v2__row--header .batcom-productcomparison-v2__label-col {
  background: var(--pc-bg);
}
.batcom-productcomparison-v2__label-col, .batcom-productcomparison-v2__col, .batcom-productcomparison-v2__cell {
  min-width: 0;
  border-right: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border-soft);
}
.batcom-productcomparison-v2__label-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 20px;
  background: var(--pc-panel);
}
.batcom-productcomparison-v2__label-col--empty {
  background: var(--pc-bg);
  border-bottom-color: var(--pc-border);
}
.batcom-productcomparison-v2__col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 26px 20px 40px;
  background: var(--pc-bg);
  border-bottom-color: var(--pc-border);
  text-align: center;
}
.batcom-productcomparison-v2--cols-2 .batcom-productcomparison-v2__col:nth-of-type(n + 4), .batcom-productcomparison-v2--cols-2 .batcom-productcomparison-v2__cell:nth-of-type(n + 4), .batcom-productcomparison-v2--cols-3 .batcom-productcomparison-v2__col:nth-of-type(n + 5), .batcom-productcomparison-v2--cols-3 .batcom-productcomparison-v2__cell:nth-of-type(n + 5) {
  display: none;
}
.batcom-productcomparison-v2__image {
  width: 100%;
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}
.batcom-productcomparison-v2__image--placeholder {
  background: #f5f5f5;
}
.batcom-productcomparison-v2__product-title {
  position: relative;
  width: 100%;
}
.batcom-productcomparison-v2__name, .batcom-productcomparison-v2__subtitle {
  margin: 0;
}
.batcom-productcomparison-v2__name {
  overflow: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batcom-productcomparison-v2__subtitle {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: #a5a5a5;
  font-size: 10px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.batcom-productcomparison-v2__switcher {
  display: flex;
  width: 100%;
  min-height: 55px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--pc-text);
  background: var(--pc-panel-raised);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.batcom-productcomparison-v2__switcher:hover, .batcom-productcomparison-v2__switcher:focus-visible, .batcom-productcomparison-v2__switcher.is-open {
  background: #242424;
  border-color: #383838;
}
.batcom-productcomparison-v2__switcher-text {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-width: 0;
}
.batcom-productcomparison-v2__switcher-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  margin-left: 8px;
  color: var(--pc-accent);
  border: 1px solid #383838;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  place-items: center;
  transition: transform 0.2s ease;
}
.batcom-productcomparison-v2__switcher-chevron::after {
  content: url("../../../../../../etc.clientlibs/batcom/base/clientlibs/publish/resources/icons/chevron-down-orange.svg");
}
.batcom-productcomparison-v2__switcher.is-open .batcom-productcomparison-v2__switcher-chevron {
  transform: rotate(180deg);
}
.batcom-productcomparison-v2__switcher-list {
  position: fixed;
  z-index: 1000;
  display: flex;
  overflow-y: auto;
  max-height: min(360px, 100vh - 32px);
  margin: 0;
  padding: 6px;
  flex-direction: column;
  list-style: none;
  background: var(--pc-panel-raised);
  border: 1px solid #2f2f2f;
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
.batcom-productcomparison-v2__switcher-list[hidden] {
  display: none;
}
.batcom-productcomparison-v2__switcher-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.batcom-productcomparison-v2__switcher-option:hover, .batcom-productcomparison-v2__switcher-option:focus-visible, .batcom-productcomparison-v2__switcher-option[aria-selected=true] {
  background: #2b2b2b;
  outline: none;
}
.batcom-productcomparison-v2__switcher-option + .batcom-productcomparison-v2__switcher-option {
  margin-top: 2px;
}
.batcom-productcomparison-v2__switcher-option-image {
  width: 48px;
  height: 48px;
  flex: none;
  -o-object-fit: contain;
     object-fit: contain;
  background: #000;
  border-radius: 8px;
}
.batcom-productcomparison-v2__switcher-option-text {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.batcom-productcomparison-v2__switcher-option-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batcom-productcomparison-v2__switcher-option-subtitle {
  overflow: hidden;
  color: #a5a5a5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batcom-productcomparison-v2__col > .batcom-productcomparison-v2__swatches:empty {
  display: none;
}
.batcom-productcomparison-v2__attr-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
}
.batcom-productcomparison-v2__attr-desc {
  font-size: 14px;
  line-height: 18px;
}
.batcom-productcomparison-v2__cell {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  background: var(--pc-bg);
  text-align: center;
}
.batcom-productcomparison-v2__cell-value {
  font-size: 14px;
  line-height: 1.35;
}
.batcom-productcomparison-v2__cell-value small {
  display: block;
  margin-top: 7px;
  color: #d1d1d1;
  font-size: 9px;
  line-height: 1.4;
}
.batcom-productcomparison-v2__cell-icon {
  max-width: 160px;
  max-height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
}
.batcom-productcomparison-v2__swatches {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.batcom-productcomparison-v2__swatch {
  position: relative;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  background: var(--swatch-color);
  border: 1px solid rgb(99, 99, 99);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: outline-color 0.2s ease, transform 0.2s ease;
}
.batcom-productcomparison-v2__swatch:hover {
  transform: scale(1.12);
}
.batcom-productcomparison-v2__swatch.is-selected {
  border-color: var(--pc-accent);
  border-width: 2px;
  width: 25px;
  height: 25px;
}
.batcom-productcomparison-v2__swatch.is-selected:hover {
  transform: scale(1);
}
.batcom-productcomparison-v2__swatch.is-oos {
  cursor: not-allowed;
}
.batcom-productcomparison-v2__swatch.is-oos::before {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background: rgb(99, 99, 99);
  content: "";
  transform: rotate(-45deg);
}
.batcom-productcomparison-v2__swatch.is-oos:hover {
  transform: scale(1);
}
.batcom-productcomparison-v2__price {
  min-height: 20px;
  font-weight: 700;
}
.batcom-productcomparison-v2__price .product-card__price-wrap,
.batcom-productcomparison-v2__price .product-card__price-final--price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.batcom-productcomparison-v2__price .product-card__price-suffix-text,
.batcom-productcomparison-v2__price .product-card__price-final--price-suffix-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--pc-muted);
}
.batcom-productcomparison-v2__row--footer {
  min-height: 176px;
}
.batcom-productcomparison-v2__label-col--footer, .batcom-productcomparison-v2__cell--footer {
  border-bottom: 0;
}
.batcom-productcomparison-v2__label-col--footer {
  background: var(--pc-bg);
}
.batcom-productcomparison-v2__cell--footer {
  padding: 20px 48px;
}
.batcom-productcomparison-v2__buy {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.batcom-productcomparison-v2__buy > * {
  width: 100%;
}
.batcom-productcomparison-v2__qty {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  min-height: 41px;
  border: 2px solid currentcolor;
  border-radius: 24px;
}
.batcom-productcomparison-v2__qty[hidden] {
  display: none;
}
.batcom-productcomparison-v2__qty-minus, .batcom-productcomparison-v2__qty-plus, .batcom-productcomparison-v2__qty-input {
  min-width: 44px;
  min-height: 41px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: center;
}
.batcom-productcomparison-v2__qty-minus:disabled, .batcom-productcomparison-v2__qty-plus:disabled, .batcom-productcomparison-v2__qty-input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.batcom-productcomparison-v2__qty-input {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.batcom-productcomparison-v2__qty-input::-webkit-inner-spin-button, .batcom-productcomparison-v2__qty-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}
.batcom-productcomparison-v2__add {
  min-height: 41px;
  padding: 8px 18px;
  color: var(--pc-bg);
  background: var(--pc-accent);
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  margin: 0;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.batcom-productcomparison-v2__add:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.batcom-productcomparison-v2__add.is-disabled {
  pointer-events: none;
  opacity: 0.4;
  filter: grayscale(1);
}
.batcom-productcomparison-v2__showmore {
  display: flex;
  width: 100%;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: var(--pc-bg);
  border: 0;
  border-top: 1px solid var(--pc-border);
}
.batcom-productcomparison-v2__showmore-button {
  background-color: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.batcom-productcomparison-v2__showmore-icon::before {
  display: inline-grid;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  color: var(--pc-accent);
  border: 1px solid var(--pc-border);
  border-radius: 50%;
  content: url("../../../../../../etc.clientlibs/batcom/base/clientlibs/publish/resources/icons/chevron-down-orange.svg");
  place-items: center;
  transition: transform 0.2s ease;
}
.batcom-productcomparison-v2__showmore-button[aria-expanded=true] .batcom-productcomparison-v2__showmore-icon::before {
  transform: rotate(180deg);
}
.batcom-productcomparison-v2 :is(button, select, input):focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 3px;
}
.batcom-productcomparison-v2.is-loading {
  opacity: 0.7;
}
.batcom-productcomparison-v2 .product-card__price-regular--price {
  margin-left: 8px;
  text-decoration: line-through;
}
.batcom-productcomparison-v2 .batcom-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 767px) {
  .batcom-productcomparison-v2__scroll {
    overflow-x: hidden;
    border-radius: 13px 13px 0 0;
  }
  .batcom-productcomparison-v2__grid {
    min-width: 0;
  }
  .batcom-productcomparison-v2__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .batcom-productcomparison-v2__row--header {
    min-height: 260px;
  }
  .batcom-productcomparison-v2__label-col {
    grid-column: 1/-1;
    padding: 16px;
    min-height: 50px;
  }
  .batcom-productcomparison-v2__label-col--empty, .batcom-productcomparison-v2__label-col--footer {
    display: none;
  }
  .batcom-productcomparison-v2__switcher {
    padding: 8px;
  }
  .batcom-productcomparison-v2__col {
    padding: 16px 8px;
  }
  .batcom-productcomparison-v2__col:nth-of-type(n + 4), .batcom-productcomparison-v2__cell:nth-of-type(n + 4) {
    display: none;
  }
  .batcom-productcomparison-v2__image {
    height: 140px;
  }
  .batcom-productcomparison-v2__name {
    font-size: 14px;
  }
  .batcom-productcomparison-v2__subtitle {
    font-size: 10px;
    line-height: 1.3;
  }
  .batcom-productcomparison-v2__cell {
    min-height: 55px;
  }
  .batcom-productcomparison-v2__cell-icon {
    max-width: 105px;
    max-height: 60px;
  }
  .batcom-productcomparison-v2__cell--footer {
    padding: 16px;
  }
  .batcom-productcomparison-v2__buy {
    flex-flow: row wrap;
    gap: 12px;
  }
  .batcom-productcomparison-v2__price {
    flex: 1 1 100%;
  }
  .batcom-productcomparison-v2__qty {
    flex: 0 0 auto;
    width: auto;
  }
  .batcom-productcomparison-v2__qty-minus, .batcom-productcomparison-v2__qty-plus, .batcom-productcomparison-v2__qty-input {
    min-width: 32px;
    min-height: 40px;
  }
  .batcom-productcomparison-v2__add {
    flex: 1 1 auto;
    width: auto;
    min-height: 40px;
    padding: 8px;
  }
  .batcom-productcomparison-v2__showmore {
    min-height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .batcom-productcomparison-v2 *,
  .batcom-productcomparison-v2 *::before,
  .batcom-productcomparison-v2 *::after {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}