/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/styles/basic.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
/* Sprykers Struktur-Reset — aber an der richtigen Stelle: VOR dem
MS-Design-System.

Bis T-60 stand `@include basic-reset` am Ende von basic.scss, also nach
dem @use des Design-Systems. Bei gleicher Spezifitaet gewann damit der
Reset. Sichtbar wurde das an `.custom-element { display: block }` gegen
`.pop { display: none }`: der Staffelpreis-Popover stand auf dem Handy
dauerhaft als Blatt am unteren Rand, ohne dass ihn jemand geoeffnet
hatte. (Derselbe Mechanismus zwang T-59 dazu, Sprykers
$setting-font-family umzulegen, statt `body { font-family: var(--ff) }`
wirken zu lassen.)

Warum eine eigene Datei: Sass verlangt alle @use-Zeilen vor jeder
anderen Anweisung. Ein `@include basic-reset` in basic.scss kann
deshalb nie vor dem `@use 'ms/ms-design-system'` stehen — ein Modul,
das beim Laden emittiert, schon.

Was der Reset liefert: box-sizing, margin/padding/border auf 0,
`font`/`color: inherit`, Listen ohne Punkte, `border-collapse`,
Fokusring. Keine Farbe, keine Schrift, kein Raster — damit kollidiert
er nicht mit dem Design-System, er raeumt nur davor auf. Was sein
`* { font: inherit }` an Semantik abraeumt, stellt ms-base wieder her. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
*:hover, *:active, *:focus {
  outline: 0;
}
*:focus-visible {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
*::before, *::after {
  box-sizing: border-box;
  color: inherit;
}

html,
body {
  height: 100%;
}

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
form,
main {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before,
q::after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.custom-element {
  display: block;
}

/* DIN Pro — Hausschrift laut Design Manual (Update 07/2025) und Figma-Tokens.
   Quelle: Webfonts von www.ms-motorservice.com (/_nuxt/fonts/DINPro-*.ttf), nach woff2
   konvertiert, 2026-09-16. Lokal gehostet, kein CDN. Lizenz liegt beim Kunden; fuer den
   Pitch nutzen wir seine eigene Auslieferung.

   Die Dateien liegen unter frontend/assets/global/default/fonts/ und NICHT neben
   diesem Partial. Grund (T-59, gemessen): Der Frontend-Builder schreibt url()-Werte
   unveraendert ins gebaute CSS — sie werden relativ zu
   public/Yves/assets/current/default/css/ aufgeloest. Kopiert wird nur
   frontend/assets/global/<theme>/ nach public/Yves/assets/current/<theme>/. Ein
   url("./fonts/…") neben dem Partial zeigt deshalb auf .../css/fonts/… und liefert
   404 — genau daran ist die Icon-Schrift gescheitert. Richtig ist "../fonts/…". */
@font-face {
  font-family: "DIN Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/DINPro-Light.woff2") format("woff2");
}
@font-face {
  font-family: "DIN Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DINPro-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DIN Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/DINPro-Bold.woff2") format("woff2");
}
/* ===========================================================
Motorservice OnlineShop — Design-System
Herkunft: Klickprototyp docs/intake/wireframe-flow/styles.css,
Tokenbasis seit T-59 die Figma-Variablen aus
docs/design-specs/figma-tokens.json (Datei rttIsr4GZG8Qjgn79TdfRf,
"Design System Light v0.3"). Rangfolge laut Entscheidung Oliver
2026-09-16: Figma vor Design Manual, Handout und Prototyp.

Übernommene Anpassungen ggü. dem Original-Prototyp:

1) Breakpoints vereinheitlicht (Feature-Release 202608).
   Das Original trug drei ältere, mit responsive.css/js nicht mehr
   abgestimmte Werte (1100px, 860px, 620px). responsive.css/js
   kennen nur noch zwei Stufen — 759px (mobil) und 1180px
   (Tablet/Desktop-Grenze) — daher hier umgestellt:
     max-width: 1100px  →  max-width: 1180px  (Tablet-Grenze)
     max-width: 860px   →  max-width: 759px   (Mobil-Grenze)
     max-width: 620px   →  max-width: 759px   (Mobil-Grenze)
   Ausnahme: `.modal--wide { max-width: 860px }` ist keine
   Media-Query, sondern eine Komponentenbreite, und blieb
   unverändert.

2) T-59: Farben, Textfarbe, Radien und Schrift auf die Figma-Tokens
   umgestellt (Tabelle unten je Token). Die Icon-Ligaturschrift
   (Material Symbols Rounded, 3 MB, wurde nie ausgeliefert) ist
   ersatzlos raus; Icons kommen aus dem inline eingebetteten
   Lucide-Sprite, siehe components/atoms/ms-icon-sprite/.

3) Was NICHT aus Figma kommt und deshalb unverändert bleibt: die
   Verfügbarkeitsfarben (--green/--orange/--red/--light-blue, Design
   Manual), --blue-shadow (Prototyp-Schatten), --word-grey (nur noch
   die Wortmarke, nicht mehr der Fließtext) und --shell (Container-
   breite; das Gutter-Modell 80/1568 aus Figma kommt mit T-60).
=========================================================== */
:root {
  /* Marke — color/blue aus Figma */
  --blue-dark: #00406e; /* blue/700 · text/brand, icon/primary, button.secondary.bg */
  --blue: #0f72b5; /* blue/500 · bg/brand, button.primary.bg, border/brand (war #007ec1) */
  --blue-600: #0c5b90; /* button.primary.bg-hover */
  --blue-800: #003358; /* button.secondary.bg-hover, bg/brand-darker */
  --blue-200: #b8dcff; /* bg/avatar */
  --blue-shadow: #000824; /* nicht in Figma — Schattenfarbe des Prototyps */
  --word-grey: #3e3d40; /* RM Wortmarke; NUR für die Marke, Text nutzt --text */
  /* Text und Zustände — text/* und system/* aus Figma */
  --text: #181818; /* text/primary  (= --n8) */
  --text-muted: #636365; /* text/secondary (= --n6) */
  --focus: #0f72b5; /* focus/ring — nur an Elementen ohne eigenen Fokusstil */
  --success: #00a900; /* text/success — ersetzt --green NICHT */
  /* Sekundärfarben (Verfügbarkeit) — Design Manual, in Figma nicht vorhanden */
  --green: #44a12b; /* R 09 Grün    — verfügbar */
  --yellow: #ffcc00; /* R 03 Gelb    — teilverfügbar */
  --red: #d10019; /* R 05 Rot     — nicht verfügbar (= system/error) */
  --light-blue: #43b0e0; /* R 07 Hellblau— ungeprüft */
  --orange: #f7a800; /* R 04 Orange  */
  /* Neutrale Skala — Werte aus color/gray. Die Namen --n0…--n8 bleiben,
     weil sie an über 300 Stellen in dieser Datei stehen; neuer Code nimmt
     --text / --text-muted / --grey-*. */
  --n0: #ffffff; /* base/white, bg/primary */
  --n1: #f4f4f4; /* gray/50  · bg/secondary */
  --n2: #e7e7e7; /* gray/100 · bg/tertiary, border/subtle */
  --n3: #d8d8d9; /* gray/200 · border/default */
  --n4: #c2c2c3; /* gray/300 */
  --n5: #a3a3a5; /* gray/400 · border/on-dark-muted */
  --n6: #636365; /* gray/600 · text/secondary */
  --n7: #48484a; /* gray/700 */
  --n8: #181818; /* gray/900 · text/primary */
  /* Figma-Namen derselben Werte, für neuen Code zu bevorzugen */
  --grey-50: var(--n1);
  --grey-100: var(--n2);
  --grey-200: var(--n3);
  --blue-tint: #ebf5ff; /* bg/icon-tile (war #e8f2f9) */
  --green-tint: #ecf5e9; /* nicht in Figma — Verfügbarkeitsfläche */
  --yellow-tint: #fff8e0; /* nicht in Figma — Warnfläche */
  --red-tint: #fdeaec; /* nicht in Figma — Fehlerfläche */
  /* Radien — Figma kennt nur 0, 2 und voll rund. Eckig, flach, blau. */
  --radius: 0; /* radius/default (war 3px) */
  --radius-lg: 2px; /* radius/card    (war 5px) */
  --radius-card: 2px; /* Figma-Name desselben Werts */
  --radius-full: 9999px; /* radius/round — Pillen, Badges */
  --shadow-1: 0 1px 2px rgba(0,8,36,.06);
  --shadow-2: 0 4px 16px rgba(0,8,36,.10);
  --shadow-3: 0 12px 40px rgba(0,8,36,.18);
  /* Abstandsskala aus Figma (spacing 0…96, Index = Wert/4). Für neuen
     Code; die bestehenden Pixelangaben in dieser Datei bleiben stehen. */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-15: 60px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-24: 96px;
  /* Schrift — DIN Pro, lokal, @font-face in _ms-fonts.scss */
  --ff: "DIN Pro", Arial, sans-serif;
  --ff-num: "DIN Pro", Arial, sans-serif;
  --shell: 1360px;
}

/* ===========================================================
   Typografie-Stufen aus Figma (font.styles in figma-tokens.json)
   Größe / Zeilenhöhe / Gewicht kommen aus der JSON, nichts davon ist
   geschätzt. Hier stehen nur Mixins — sie erzeugen kein CSS, bis eine
   Komponente sie einbindet:

     @use '~ShopUi/styles/ms/ms-design-system' as ms;
     .meine-zeile { @include ms.body-md; }

   T-59 legt sie nur an. Verbaut werden sie mit den Stationen (T-60 ff.),
   damit die Umstellung nicht in einem Zug Tokens UND Typografie dreht.
   =========================================================== */
/* label/subline: wie label-sm, aber ohne Versalien */
/* heading/h2-section — Abschnittstitel, Versalien, erstes Wort Regular,
   Rest Bold (<b> im Markup), darunter die Akzentlinie 60×3 in bg/brand.
   Maße belegt in docs/design-specs/figma/frames/192-400.md, Knoten
   226:633 / 226:636: Section Header vertical, gap 12, Headline
   "DIN Pro 400 36.0px/40 upper", Akzentlinie "60×3 fill #0f72b5".
   Mobil 24/32 (font.styles heading/h2-section-mobile). */
/* highlight/* — Balken in bg/brand hinter dem Text, Text weiß. Der Balken
   entsteht über box-decoration-break, damit er bei Umbruch je Zeile sitzt. */
/* highlight-white: weißer Balken, Text in text/brand */
* {
  box-sizing: border-box;
}

/* Das hidden-Attribut muss stärker sein als jede display-Regel, sonst
   bleiben ausgeblendete Blöcke sichtbar (Flex- und Grid-Container). */
[hidden] {
  display: none !important;
}

/* ===========================================================
   0 · Icons — Lucide als inline eingebettetes SVG-Sprite
   Bis T-59 lag hier ein @font-face auf "Material Symbols Rounded"
   (3 MB) samt html.no-mi-Notbehelf für den Fall, dass die Schrift
   nicht lädt. Die Schrift wurde nie ausgeliefert (404: sie lag unter
   styles/ms/fonts/, also ausserhalb des Asset-Copy-Baums), und Figma
   schreibt ohnehin 24-px-Stroke-Icons im Lucide-Schema vor.

   Jetzt: <svg class="icn"><use href="#ic-<slug>"></use></svg>, gerendert
   von atom('ms-icon'); die <symbol>-Definitionen kommen aus
   atom('ms-icon-sprite'), einmal je Seite in page-layout-main. Damit
   gibt es keinen Ladepfad und keinen Fehlerzustand mehr — der komplette
   Fallback-Block ist deshalb ersatzlos entfallen.

   Gefärbt wird über currentColor, gemessen wird in px (kein font-size).
   =========================================================== */
.icn {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-user-select: none;
          user-select: none;
}

.icn--xs {
  width: 14px;
  height: 14px;
}

.icn--sm {
  width: 17px;
  height: 17px;
}

.icn--lg {
  width: 24px;
  height: 24px;
}

.icn--xl {
  width: 40px;
  height: 40px;
}

/* Beschriftung, die im Prototyp nur ohne Icon-Schrift einsprang. Das
   Markup trägt sie weiter (Screenreader lesen sie nicht, aria-label
   sitzt am Knopf); sichtbar wird sie nur noch, wo eine Komponente es
   ausdrücklich will. */
.fb {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 14px;
  line-height: 1.5;
  color: var(--n8);
  background: var(--n1);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 24px;
}

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

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Kommunikative Headline: DIN Pro, Versalien — ein Wort Bold, Rest Light */
.kh {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 300;
  color: var(--blue-dark);
}

.kh b {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ===========================================================
   1 · Prototyp-Rahmen
   =========================================================== */
/* Kernbotschaft-Streifen unter dem Shop-Header */
.msg-strip {
  background: var(--blue-dark);
  color: #fff;
}

.msg-strip-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.msg-strip .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--light-blue);
  flex: none;
}

.msg-strip .txt {
  font-size: 14px;
  font-weight: 600;
}

.msg-strip .reqs {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.msg-strip .req {
  font-size: 10.5px;
  font-family: var(--ff-num);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* ===========================================================
   2 · Shop-Header
   =========================================================== */
.topline {
  background: var(--blue-shadow);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11.5px;
}

.topline-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 30px;
}

.topline .sp {
  margin-left: auto;
}

.topline a {
  color: rgba(255, 255, 255, 0.8);
}

/* Kundenidentität links: Name sichtbar, Details im Flyout.
   Kundennummer und Klasse bleiben absichtlich aus der Leiste heraus. */
.cust {
  position: relative;
}

.cust-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 7px 10px 7px 0;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cust-btn:hover {
  color: var(--light-blue);
}

.cust-btn .caret {
  transition: transform 0.15s;
}

.cust.open .cust-btn .caret {
  transform: rotate(180deg);
}

.cust-flyout {
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 120;
  min-width: 320px;
  background: #fff;
  color: var(--n8);
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
}

.cust.open .cust-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cf-row {
  display: flex;
  gap: 14px;
  padding: 5px 16px;
  font-size: 12.5px;
}

.cf-row .k {
  color: var(--n6);
  flex: none;
  width: 118px;
}

.cf-row .v {
  font-weight: 600;
}

.cf-foot {
  margin-top: 5px;
  padding: 9px 16px 4px;
  border-top: 1px solid var(--n2);
  display: flex;
  gap: 16px;
  font-size: 12.5px;
}

.topline .claim {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}

.topline .claim b {
  color: var(--light-blue);
  font-weight: 700;
}

.shophead {
  background: #fff;
  border-bottom: 1px solid var(--n3);
}

/* Drei Spalten, die äußeren gleich breit: damit sitzt die Suchleiste
   optisch mittig, egal wie breit Logo und Kopf-Werkzeuge sind. */
.shophead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Absendermarke ist laut Design Manual das Rheinmetall-Logo,
   der Applikationsname steht daneben — wie im heutigen Shop. */
.logo {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
  justify-self: start;
}

.logo img {
  display: block;
  width: 152px;
  height: auto;
}

/* Die Wortbildmarke ragt oben über die Wortmarke hinaus: deren optische Mitte
   liegt bei 66 % der Bildhöhe, nicht bei 50 %. Der Applikationsname wird
   deshalb um die Differenz nach unten gesetzt, sonst steht er zu hoch. */
.logo .appname {
  font-size: 15px;
  font-weight: 400;
  color: var(--n6);
  padding-left: 13px;
  border-left: 1px solid var(--n4);
  line-height: 1.1;
  transform: translateY(6px);
}

.headsearch {
  width: 560px;
  max-width: 100%;
  justify-self: center;
}

/* Startseite: kein Suchfeld im Kopf, dafür Logo links und Werkzeuge rechts. */
.shophead-inner--plain {
  grid-template-columns: 1fr auto;
}

.headtools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  justify-self: end;
  flex-wrap: wrap;
}

.htool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 11px;
  border-radius: var(--radius);
  color: var(--n7);
  font-size: 10.5px;
  border: 1px solid transparent;
  background: none;
}

.htool:hover {
  background: var(--n1);
  border-color: var(--n3);
  text-decoration: none;
}

.htool .ic {
  font-size: 17px;
  line-height: 1;
}

.htool.is-cart {
  border-color: var(--n3);
  background: var(--n1);
}

.htool .cnt {
  position: absolute;
  top: 1px;
  right: 3px;
  background: var(--blue);
  color: #fff;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.htool .cnt.bump {
  animation: bump 0.45s ease;
}

@keyframes bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.45);
  }
  100% {
    transform: scale(1);
  }
}
.htool.is-on {
  background: var(--blue-tint);
  border-color: #b9d9ec;
  color: var(--blue-dark);
}

/* ===========================================================
   2b · Flyout an einem Auslöser
   Ein Muster für Staffelpreise, Referenzen und Standortbestände —
   damit dieselbe Information überall gleich erscheint.
   =========================================================== */
.pop {
  position: absolute;
  z-index: 250;
  display: none;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  min-width: 296px;
  max-width: 460px;
}

.pop.open {
  display: block;
}

.pop-hd {
  padding: 10px 15px;
  border-bottom: 1px solid var(--n2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pop-hd .no {
  font-family: var(--ff-num);
  letter-spacing: 0.02em;
  color: var(--blue-dark);
}

.pop-bd {
  padding: 11px 15px 14px;
}

.pop-ft {
  padding: 9px 15px;
  border-top: 1px solid var(--n2);
  background: var(--n1);
  font-size: 11.5px;
  color: var(--n6);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Hauptnavigation — Struktur aus dem heutigen Shop (Start · Produktsuche ·
   Mein Konto) plus Service. Produkt-, Konto- und Servicewelt getrennt;
   die Unterpunkte kommen aus der Funktionalen Dokumentation Kap. 8 und 10. */
/* Eine Linie, nicht zwei: der Unterstrich des aktiven Punkts deckt die
   Trennlinie exakt ab, statt daneben zu liegen. */
.mainnav {
  background: #fff;
  border-bottom: 1px solid var(--n3);
}

.mainnav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 2px;
}

.navitem {
  position: relative;
}

.mainnav a, .navitem > button {
  display: block;
  background: none;
  border: 0;
  padding: 12px 15px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--n7);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  /* line-height explizit fuer beide: <button> erbt sie nicht und faellt auf
     "normal" zurueck. Das machte die Punkte mit Flyout 4,5px flacher und
     ihre Beschriftung 2px hoeher als die reinen Links daneben. */
  line-height: 1.5;
}

.navitem > button {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mainnav a:hover, .navitem > button:hover {
  color: var(--blue-dark);
  text-decoration: none;
  background: var(--n1);
}

.mainnav a.active, .navitem.active > button {
  color: var(--blue-dark);
  border-bottom-color: var(--blue);
}

.navflyout {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  background: #fff;
  border: 1px solid var(--n3);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 16px 20px 18px;
  display: none;
  gap: 30px;
}

.navitem.open .navflyout {
  display: flex;
}

.navflyout .col {
  min-width: 190px;
}

.navflyout .ct {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n5);
  margin-bottom: 7px;
}

/* Ein Eintrag pro Zeile, ohne Umbruch - die Spalte richtet sich nach dem
   laengsten Namen. Flex und space-between bleiben stehen: kommt rechts wieder
   ein Zusatz dazu (Zahl, Marke), sitzt er ohne weitere Regel richtig. */
.navflyout .col a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--n7);
  border: 0;
  margin: 0;
  white-space: nowrap;
}

.navflyout .col a:hover {
  color: var(--blue);
  background: none;
}

/* Die Schnellerfassung sitzt rechts in der Leiste - dort, wo vorher Luft war.
   Sie ist ein Werkzeug, keine Kategorie, und tritt deshalb leiser auf. */
.mainnav .navtool {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--n6);
}

.mainnav .navtool:hover {
  color: var(--blue-dark);
}

/* Ihr Fahrzeug: die drei Stufen des heutigen Shops als Zeilen. Etikett links,
   Auswahl rechts - dasselbe Muster wie die Reiterleiste im Altsystem, nur
   senkrecht, damit der Pfad neben der Liste stehen bleibt. */
.vehtree {
  margin-bottom: 14px;
}

.vehtree .card-bd {
  padding-top: 4px;
  padding-bottom: 6px;
}

.vt-step + .vt-step {
  border-top: 1px solid var(--n2);
}

.vt-head {
  width: 100%;
  border: 0;
  background: none;
  padding: 9px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.vt-head .vt-lbl {
  color: var(--n6);
  flex: none;
}

.vt-head .vt-val {
  font-weight: 600;
  color: var(--n8);
  margin-left: auto;
  text-align: right;
}

.vt-head .caret {
  color: var(--n5);
  flex: none;
  transition: transform 0.15s;
}

.vt-head[aria-expanded=true] .caret {
  transform: rotate(180deg);
}

.vt-head:hover .vt-val {
  color: var(--blue-dark);
}

.vt-list {
  padding: 2px 0 8px;
}

.vt-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 4px 10px;
  font-size: 12.5px;
  color: var(--n7);
}

/* Ausgegraut heisst hier: es gibt den Wert, aber im Prototyp keine Artikel. */
.vt-opt.is-off {
  color: var(--n4);
}

.vt-opt.is-on {
  color: var(--blue-dark);
  font-weight: 600;
}

/* Stufe 3 ist bedienbar - dieselben sechs Fahrzeuge wie die Kacheln. */
button.vt-opt {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

button.vt-opt:hover {
  color: var(--blue);
  background: var(--n1);
}

/* ===========================================================
   3 · Layout
   =========================================================== */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 26px 24px 40px;
}

.shell--narrow {
  max-width: 900px;
}

.crumbs {
  font-size: 12px;
  color: var(--n6);
  margin-bottom: 18px;
}

.crumbs a {
  color: var(--n6);
}

.crumbs .sep {
  margin: 0 7px;
  color: var(--n4);
}

.crumbs .cur {
  color: var(--n8);
  font-weight: 600;
}

.cols {
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: 26px;
  align-items: start;
}

/* Ohne min-width: 0 wächst die Ergebnisspalte an ihrem breitesten Kind —
   die Slider-Spur würde die Spalte aufspannen statt zu scrollen. */
.cols > main {
  min-width: 0;
}

/* Bild ein Drittel, Kaufblock zwei Drittel. Das Motiv ist auf einer
   Ersatzteil-Detailseite Beleg, nicht Verkaufsargument — die Kaufzeile
   muss ohne Scrollen erreichbar sein. `align-items: start` sorgt dafür,
   dass die Galerie nicht mehr auf die Höhe des Kaufblocks gezogen wird. */
.cols--pdp {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 18px;
}

/* Die Galerie bleibt beim Scrollen stehen, solange der Kaufblock daneben
   läuft, und wandert am Ende der Zeile mit hinaus — das Bild begleitet
   also die Auswahl von Maßstufe, Preis und Menge, verschwindet aber,
   sobald die Reiterkarte übernimmt. Sticky wirkt hier auf dem Rasterfeld;
   deshalb sitzt es auf <main> und nicht auf .gallery, das die Höhe seines
   Inhalts hat und sich darin nicht bewegen könnte. */
.cols--pdp > main {
  position: sticky;
  top: 16px;
  align-self: start;
}

@media (max-width: 1180px) {
  .cols--pdp > main {
    position: static;
  }
}
.cols--cart {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 26px;
  align-items: start;
}

.card {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card-hd {
  padding: 13px 18px;
  border-bottom: 1px solid var(--n3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-hd h2, .card-hd h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.01em;
}

.card-hd .aside {
  margin-left: auto;
  font-size: 12px;
  color: var(--n6);
}

.card-bd {
  padding: 18px;
}

.card-bd--flush {
  padding: 0;
}

h1.page {
  margin: 0 0 6px;
  font-size: 25px;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
}

.page-sub {
  margin: 0 0 22px;
  color: var(--n6);
  font-size: 13.5px;
}

.sticky {
  position: sticky;
  top: 16px;
}

/* Wird die stehende Spalte höher als das Fenster, scrollt sie selbst.
   Sonst müsste man bis zum Seitenende, nur um den Weiter-Knopf zu sehen.
   Abzug: 16 oben, 16 unten. Früher waren hier 100 Pixel abgezogen, weil
   unten die Prototyp-Leiste lag — die ist entfernt, die Reserve war
   seitdem zu groß und hat die Filterspalte unnötig beschnitten. */
aside.sticky {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}

aside.sticky::-webkit-scrollbar {
  width: 8px;
}

aside.sticky::-webkit-scrollbar-thumb {
  background: var(--n4);
  border-radius: 4px;
}

aside.sticky::-webkit-scrollbar-track {
  background: transparent;
}

/* ===========================================================
   4 · Suche
   =========================================================== */
.searchbox {
  position: relative;
}

.searchfield {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--n4);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.searchfield.is-focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 126, 193, 0.14);
}

.searchfield--hero {
  border-width: 2px;
}

.searchfield .sf-ic {
  display: grid;
  place-items: center;
  padding: 0 4px 0 14px;
  color: var(--n5);
  font-size: 16px;
}

.searchfield input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  padding: 11px 10px;
  font-size: 15px;
  font-family: var(--ff-num);
  letter-spacing: 0.01em;
  color: var(--n8);
  min-width: 0;
}

.searchfield--hero input {
  padding: 15px 10px;
  font-size: 19px;
}

.searchfield input::placeholder {
  color: var(--n5);
  letter-spacing: 0;
}

.searchfield .sf-go {
  border: 0;
  background: var(--blue);
  color: #fff;
  padding: 0 22px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0 1px 1px 0;
}

.searchfield .sf-go:hover {
  background: var(--blue-600);
}

/* Das Zeichen im Suchknopf traegt nur die mobile Breite, siehe
   _ms-responsive.scss — am Desktop steht dort das Wort. */
.searchfield .sf-go .icn {
  display: none;
}

/* Formaterkennung */
.recog {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 10px;
  flex: none;
}

.recog-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-tint);
  border: 1px solid #b9d9ec;
  color: var(--blue-dark);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 2px;
  white-space: nowrap;
}

.recog-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

.recog-pill.is-empty {
  background: var(--n2);
  border-color: var(--n4);
  color: var(--n6);
  font-weight: 500;
}

.recog-pill.is-empty .dot {
  background: var(--n5);
}

.recog-pill:hover {
  border-color: var(--blue);
}

.recog-pill .caret {
  color: var(--blue);
  transition: transform 0.15s;
}

.recog-pill[aria-expanded=true] .caret {
  transform: rotate(180deg);
}

.recog-pill[aria-expanded=true] {
  border-color: var(--blue);
}

/* Auswahl der Sucharten (überschreibbar) */
.recog-alt {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: 380px;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 8px;
  display: none;
}

.recog-alt.open {
  display: block;
}

.recog-alt .ttl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n6);
  padding: 5px 8px 8px;
}

.recog-alt button {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 10px;
  align-items: baseline;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 2px;
  color: var(--n8);
  font-size: 13.5px;
  white-space: nowrap;
}

.recog-alt button:hover {
  background: var(--n1);
}

.recog-alt button.sel {
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-weight: 600;
}

.recog-alt button .hint {
  font-size: 11.5px;
  color: var(--n5);
  margin-left: auto;
  padding-left: 18px;
  font-family: var(--ff-num);
  white-space: nowrap;
  flex: none;
}

/* Suggest-Panel */
.suggest {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: none;
}

.suggest.open {
  display: block;
}

.sg-group {
  border-bottom: 1px solid var(--n2);
}

.sg-group:last-child {
  border-bottom: 0;
}

.sg-ttl {
  padding: 9px 14px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-ttl .n {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--n5);
}

.sg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent;
}

.sg-item:hover, .sg-item.hi {
  background: var(--blue-tint);
  border-left-color: var(--blue);
}

.sg-item .thumb {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--n3);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--n2) 0 5px, var(--n1) 5px 10px);
}

.sg-item .no {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--n8);
}

.sg-item .no mark {
  background: #fff3b0;
  color: inherit;
  padding: 0 1px;
}

.sg-item .nm {
  font-size: 12.5px;
  color: var(--n6);
}

.sg-item .tail {
  margin-left: auto;
  text-align: right;
  flex: none;
}

.sg-item .cnt {
  font-size: 11.5px;
  color: var(--n6);
}

.sg-item .ic {
  color: var(--n5);
  font-size: 14px;
  flex: none;
  width: 20px;
  text-align: center;
}

.sg-foot {
  padding: 8px 14px;
  background: var(--n1);
  border-top: 1px solid var(--n2);
  font-size: 11.5px;
  color: var(--n6);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

kbd {
  font-family: var(--ff-num);
  font-size: 10.5px;
  background: #fff;
  border: 1px solid var(--n4);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--n7);
}

/* Scan-Auslöser im Suchfeld — trägt vor allem mobil,
   im Desktop-Mock als Hinweis auf die Artikelnummern-Erfassung per Kamera. */
.sf-scan {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  border: 0;
  background: none;
  color: var(--n5);
  border-left: 1px solid var(--n3);
}

.sf-scan:hover {
  color: var(--blue-dark);
  background: var(--n1);
}

.searchfield--hero .sf-scan {
  width: 46px;
}

/* ===========================================================
   4b · Startseite
   Aufbau nach Funktionaler Dokumentation Kap. 3: primär Suche und
   Navigation, dazu Quicklinks, Banner/Meldung und Sachbearbeiter.
   =========================================================== */
/* ===========================================================
   Hero-Bühne: Motiv als Fläche, das Suchmodul liegt darüber
   Bauform der großen Buchungsportale. Das Bild trägt keine Aussage
   mehr, es trägt das Modul — die Suche ist damit auch optisch die
   primäre Anzeige, die Kapitel 3.1 der Funktionalen Dokumentation
   für den Startbildschirm verlangt. Volle Breite, damit das Motiv
   nicht als zweite Karte neben dem Modul liest.
   =========================================================== */
.herostage {
  position: relative;
  padding: 62px 24px 66px;
  /* Die Datei liegt unter frontend/assets/global/default/images/, nicht neben
     diesem Partial: url()-Werte landen unveraendert im gebauten CSS und werden
     relativ zu .../assets/current/default/css/ aufgeloest (T-59). Als
     url("banner.jpg") lieferte das Motiv 404. */
  background: url("../images/banner.jpg") center 58%/cover no-repeat #dfe5ea;
}

/* Leichter Schleier: das Motiv ist hell und kontrastarm, die weiße Karte
   braucht eine ruhige Auflage, damit ihre Kante trägt. */
.herostage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 8, 36, 0.1), rgba(0, 8, 36, 0.04) 50%, rgba(0, 8, 36, 0.12));
}

/* Meldungsplatz laut Kap. 3.2.1 und 13.8 */
.hs-msg {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 2;
  background: rgba(0, 8, 36, 0.84);
  color: #fff;
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Das Modul selbst */
.hs-card {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(0, 8, 36, 0.26);
  padding: 22px 26px 26px;
}

/* Blau-Blauer Balken an der Unterkante des Bildmaterials */
.hsbar {
  display: flex;
  height: 13px;
}

.hsbar i {
  display: block;
  background: var(--blue-dark);
  flex: 0 0 68%;
}

.hsbar i + i {
  background: var(--blue);
  flex: 1;
}

@media (max-width: 759px) {
  .herostage {
    padding: 30px 14px 36px;
  }
  .hs-card {
    padding: 4px 16px 18px;
  }
}
/* Suchblock im Modul: keine eigene Breitenbegrenzung mehr, die Karte
   gibt sie vor. Überschrift und Fließtext sind entfallen — das Modul
   erklärt sich über die Reiter und die Platzhalter im Feld. */
.hs-card .searchbox {
  max-width: none;
  margin: 0;
  text-align: left;
}

/* ===========================================================
   Sucharten als Reiter über dem Feld
   Kapitel 4 der Funktionalen Dokumentation führt die Suchvarianten
   einzeln auf. Statt sie in einem Dropdown zu verstecken, stehen die
   vier wichtigsten als Reiter da; beim Wechsel wandelt sich der Bereich
   unter dem Feld zum jeweiligen Formular. Es kommt keine Fläche dazu.
   =========================================================== */
/* Überschrift im Suchmodul. Sie steht dort, wo vorher die Sucharten-Reiter
   standen, und trägt deren Aussage weiter: es gibt mehrere Wege hinein,
   aber nur ein Feld. Die geführten Einstiege liegen in der Hauptnavigation
   unter Produktsuche, gefiltert wird auf der Trefferliste. */
.hs-h1 {
  margin: 12px 0 16px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
}

@media (max-width: 759px) {
  .hs-h1 {
    font-size: 20px;
    margin: 6px 0 14px;
  }
}
/* Formularbausteine der strukturierten Suche (Motorcode, Fahrzeug,
   Abmessungen nach Kap. 4.2, 4.3 und 4.6). Auf der Startseite nicht mehr
   im Einsatz — der Einstieg ist die Smart Search. Die Regeln bleiben
   stehen, weil dieselben Formulare auf der Trefferliste als erweiterter
   Filter vorgesehen sind. */
.sform {
  background: #fff;
  padding: 4px 0 0;
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
}

.sf-grid--steps {
  grid-template-columns: repeat(3, 1fr);
}

.ff label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--n7);
  margin-bottom: 5px;
}

.ff label .stp {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* background-color, nicht die background-Kurzform: die Kurzform würde den
   eigenen Chevron der Auswahlfelder wieder löschen. */
.sform input[type=text], .sform select {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--n8);
}

.sform input[type=text]:focus, .sform select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 126, 193, 0.12);
}

.ff-wrap {
  position: relative;
  display: block;
}

.ff-wrap--inline {
  display: inline-block;
  width: 210px;
}

.ff-tol, .ff-unit {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  font-weight: 700;
  pointer-events: none;
}

.ff-tol {
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 10px;
  padding: 2px 7px;
}

.ff-unit {
  color: var(--n6);
  font-weight: 400;
  font-size: 11.5px;
}

.ff-wrap input[type=text] {
  padding-right: 74px;
}

.ff-wrap--inline input[type=text] {
  padding-right: 11px;
}

.ff-note {
  font-size: 11px;
  color: var(--n6);
  margin-top: 4px;
  line-height: 1.4;
}

.ff-note b {
  color: var(--n7);
}

.ff-classes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ff-classes .ff-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--n7);
  margin-right: 4px;
}

.cls {
  font-size: 12.5px;
  color: var(--n7);
  padding: 6px 13px;
  border: 1px solid var(--n4);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}

.cls input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cls.is-on {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  font-weight: 600;
}

.sf-act {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--n2);
}

.sf-sp {
  flex: 1;
}

.sf-or {
  font-size: 12px;
  color: var(--n6);
}

.sf-cnt {
  font-size: 12.5px;
  color: var(--n6);
}

.sf-cnt b {
  color: var(--blue-dark);
  font-weight: 700;
}

.cbx {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--n7);
  cursor: pointer;
}

/* Im Formularmodus ist das freie Feld nicht sichtbar. */
.searchbox.is-form .searchfield--hero {
  display: none;
}

@media (max-width: 759px) {
  .stabs {
    flex-wrap: wrap;
  }
  .sf-grid, .sf-grid--steps {
    grid-template-columns: 1fr;
  }
  .ff-wrap--inline {
    width: 100%;
  }
}
/* Sachbearbeiter — laut Doku mit Name und Bild auf dem Startbildschirm */
.asp {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Platz für das Bild des Sachbearbeiters. Kapitel 3.2.2 der Funktionalen
   Dokumentation schreibt Name UND Bild vor, das Foto kommt aus dem
   gepflegten Bildverzeichnis. Deshalb ein erkennbarer Fotoplatzhalter mit
   Initialen statt einer leeren Kreisfläche. */
.asp .ph {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--n3);
}

.asp .ph--photo {
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(160deg, #dfe6ec, #cbd5dd);
  border: 1px solid var(--n4);
  color: var(--n5);
}

.asp .ph--photo .icn {
  opacity: 0.55;
}

.asp .ph--photo .ini {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: var(--blue-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: grid;
  place-items: center;
}

/* Ohne Icon-Schrift bleiben Kreis und Initialen stehen. */
.asp .nm {
  font-weight: 700;
  font-size: 13.5px;
}

.asp .rl {
  font-size: 12px;
  color: var(--n6);
}

.asp .cnt2 {
  margin-left: auto;
  display: flex;
  gap: 7px;
  flex: none;
}

/* ===========================================================
   5 · Filter
   =========================================================== */
.filters .fgroup {
  border-bottom: 1px solid var(--n2);
  padding: 12px 18px;
}

.filters .fgroup:last-child {
  border-bottom: 0;
}

.fgroup > .ft {
  font-size: 12px;
  font-weight: 700;
  color: var(--n8);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fgroup > .ft .caret {
  margin-left: auto;
  color: var(--n5);
  font-size: 10px;
}

.fopt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--n7);
  cursor: pointer;
}

.fopt input {
  margin: 0;
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
}

.fopt .n {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--n5);
  font-family: var(--ff-num);
}

.fopt.is-zero {
  color: var(--n5);
}

.fopt.is-zero input {
  pointer-events: none;
}

.fopt.is-zero .n {
  color: var(--n4);
}

.fopt:hover:not(.is-zero) {
  color: var(--blue-dark);
}

.active-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.afchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-tint);
  border: 1px solid #b9d9ec;
  color: var(--blue-dark);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 2px;
}

.afchip button {
  border: 0;
  background: none;
  color: var(--blue-dark);
  padding: 0;
  font-size: 13px;
  line-height: 1;
}

.af-clear {
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 12px;
  text-decoration: underline;
}

.range {
  padding-top: 2px;
}

.range input[type=range] {
  width: 100%;
  accent-color: var(--blue);
}

.range .vals {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--n6);
  font-family: var(--ff-num);
  margin-top: 2px;
}

.zero-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--n6);
  background: var(--n1);
  border-left: 2px solid var(--n4);
  padding: 7px 9px;
  line-height: 1.45;
}

/* ===========================================================
   6 · Trefferliste
   =========================================================== */
/* Toolbar in zwei Zeilen: oben der Befund, unten die Werkzeuge */
.list-toolbar {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  padding: 12px 16px;
}

.lt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lt-row--actions {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--n2);
  gap: 9px;
}

.list-toolbar .hits {
  font-size: 13px;
  color: var(--n7);
}

.list-toolbar .hits b {
  color: var(--n8);
}

.list-toolbar .sp {
  margin-left: auto;
}

.list-toolbar select {
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  padding: 6px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--n7);
  background-color: #fff;
}

/* Trefferzeile
   Gestaltungsregel: pro Zone genau ein visueller Anker.
   Artikel → Bezeichnung. Verfügbarkeit → Status. Preis → Betrag.
   Alles andere ist Sekundärtext und bleibt grau und unfett. */
.hit {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}

.hit.in-cart {
  border-left: 3px solid var(--green);
}

.hit-main {
  display: grid;
  grid-template-columns: 20px 80px minmax(0, 1fr) 224px 208px;
  gap: 18px;
  padding: 16px 18px;
  align-items: stretch;
}

/* Auswahlspalte: der Merkmalsvergleich läuft im heutigen Shop über
   angeklickte Positionen — dieselbe Mechanik, nur sichtbar gemacht. */
.hit-pick {
  padding-top: 3px;
}

.hit-pick input {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.hit.is-pick {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

/* Gruppenkopf: Treffer sind nach Produktgruppe gruppiert, darin nach
   Artikelnummer sortiert — so wie der heutige Shop sie ausgibt. */
.hit-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--n3);
}

.hit-group:first-child {
  margin-top: 2px;
}

.hit-group .gt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.hit-group .gn {
  font-size: 11.5px;
  color: var(--n6);
  font-family: var(--ff-num);
}

.hit-group .ga {
  margin-left: auto;
  font-size: 12px;
}

/* Abverkauf: Sale-Symbol als Overlay über dem Produktgruppenbild */
.hit-img .sale {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--red);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 2px 5px;
  border-radius: 0 2px 0 3px;
}

.hit-img {
  width: 80px;
  height: 80px;
  border: 1px solid var(--n3);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--n2) 0 6px, var(--n1) 6px 12px);
  position: relative;
  display: grid;
  place-items: center;
}

.hit-img .pg,
.teaser .pic .pg {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--n3);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--n6);
  padding: 1px 4px;
  border-radius: 2px;
}

.hit-img .glyph,
.teaser .pic .glyph {
  color: var(--n4);
}

/* Auf der großen Teaserfläche sitzt die Marke nicht 3px in der Ecke wie im
   80px-Kästchen der Trefferliste, sondern auf der Textkante der Kachel. */
.teaser .pic .pg {
  bottom: 10px;
  left: 15px;
}

.hit-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hit-info .brand {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n5);
  margin-bottom: 4px;
}

.hit-info h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.hit-info h3 a {
  color: var(--n8);
}

.hit-info h3 a:hover {
  color: var(--blue-dark);
  text-decoration: none;
}

/* Kennwerte: eine Zeile, ein Anker (die Artikelnummer), Rest grau */
.hit-meta {
  font-size: 12.5px;
  color: var(--n6);
  line-height: 1.6;
}

.hit-meta .id {
  font-family: var(--ff-num);
  font-weight: 600;
  color: var(--n8);
  letter-spacing: 0.02em;
}

.hit-meta .sep {
  color: var(--n4);
  margin: 0 7px;
}

/* Aktionen: ein Textlink, ein Icon. Nicht mehr. */
.hit-acts {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 10px;
}

.lnk {
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lnk:hover {
  text-decoration: underline;
}

.lnk .icn {
  transition: transform 0.15s;
}

.lnk[aria-expanded=true] .icn {
  transform: rotate(180deg);
}

/* Der Details-Umschalter ist ein Aufklapp-Element, kein Link:
   kein Unterstrich, der auch das Chevron mitnimmt — nur Farbwechsel. */
.lnk[data-details]:hover {
  text-decoration: none;
  color: var(--blue-dark);
}

.iconbtn {
  border: 0;
  background: none;
  padding: 5px;
  border-radius: 2px;
  color: var(--n5);
  display: inline-flex;
  margin-left: 10px;
}

.iconbtn:hover {
  background: var(--n1);
  color: var(--blue-dark);
}

.iconbtn.active {
  color: var(--red);
}

/* Aufklappbare Details — statt Modal, damit der Listenkontext bleibt */
.hit-details {
  border-top: 1px solid var(--n2);
  background: var(--n1);
  /* 18 Rand + 20 Auswahlspalte + 18 Spalt + 80 Bild + 18 Spalt = 154:
     damit beginnt „Technische Daten“ genau unter dem Artikelnamen. */
  padding: 18px 18px 18px 154px;
}

.hit-details[hidden] {
  display: none;
}

.hit-details .dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n6);
  margin-bottom: 8px;
}

.hit-details .dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 44px;
}

.hit-details .dl {
  font-size: 12.5px;
}

.hit-details .dl div {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--n2);
}

.hit-details .dl div:last-child {
  border-bottom: 0;
}

.hit-details .dl .k {
  color: var(--n6);
  flex: 1;
}

.hit-details .dl .v {
  font-family: var(--ff-num);
  font-weight: 600;
  color: var(--n8);
  text-align: right;
}

.hit-details .famlist {
  font-size: 12.5px;
}

.hit-details .famlist a {
  display: block;
  padding: 3px 0;
}

.hit-details .famlist .cur {
  color: var(--n6);
}

/* Sonderfall-Fußzeile: eine Zeile, sprengt die Zeilenhöhe nicht */
.hit-foot {
  border-top: 1px solid var(--n2);
  padding: 9px 18px 9px 116px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--yellow-tint);
  color: #7a4f00;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hit-foot .icn {
  color: var(--orange);
}

.hit-foot b {
  font-family: var(--ff-num);
  color: var(--n8);
}

.hit-foot .lnk {
  color: var(--blue-dark);
  font-weight: 600;
}

.hit-avail {
  padding-top: 2px;
}

.hit-price {
  display: flex;
  flex-direction: column;
  text-align: right;
  padding-top: 2px;
}

.fade-in {
  animation: fadein 0.3s ease both;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Verfügbarkeit — vier Stufen, immer gleich aufgebaut:
   Punkt + Status (der einzige Anker), darunter grauer Zusatz.
   Feste Spaltenbreite, damit nichts mitten im Sinn umbricht. */
.av {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 9px;
  font-size: 12.5px;
}

.av .pt {
  margin-top: 4px;
}

.av .t {
  font-weight: 600;
  line-height: 1.35;
}

.av .d {
  font-size: 12px;
  color: var(--n6);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 1px;
}

.av--ok .t {
  color: #2d6b1d;
}

.av--part .t {
  color: #8a5a00;
}

.av--no .t {
  color: var(--red);
}

.av--unk .t {
  color: var(--n7);
}

.av .d b {
  font-family: var(--ff-num);
  font-weight: 600;
  color: var(--n7);
}

.av .lnk {
  font-size: 12px;
  padding-top: 2px;
}

/* Verfügbarkeitsglyphe — vier Stufen, überall dieselbe Form:
   voll · halb · leer · Strich. Die Farbe bleibt der zweite Kanal,
   damit die Stufe auch ohne Farbwahrnehmung lesbar ist.
   Entspricht den vier dokumentierten Zuständen (Haken / Haken gelb,
   nur MSI / Kreuz / noch nicht geprüft). */
.pt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
  position: relative;
  border: 2px solid var(--n5);
  background: #fff;
  box-sizing: border-box;
}

.pt--ok, .av--ok > .pt {
  border-color: var(--green);
  background: var(--green);
}

.pt--part, .av--part > .pt {
  border-color: var(--orange);
  background: linear-gradient(90deg, var(--orange) 0 50%, #fff 50% 100%);
}

.pt--no, .av--no > .pt {
  border-color: var(--red);
  background: #fff;
}

.pt--unk, .av--unk > .pt {
  border-color: var(--light-blue);
  background: #fff;
}

.pt--unk::after, .av--unk > .pt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--light-blue);
}

.price .main {
  font-family: var(--ff-num);
  font-size: 21px;
  font-weight: 700;
  color: var(--n8);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.price .unit {
  font-size: 11.5px;
  color: var(--n6);
  margin-top: 2px;
}

/* Ausgelaufener Artikel: es gibt keinen Preis, und das soll man sehen —
   kein durchgestrichener Betrag, kein Preis des Nachfolgers an dieser Stelle. */
.price--none .nop {
  font-size: 14px;
  font-weight: 600;
  color: var(--n5);
  border: 1px dashed var(--n4);
  border-radius: 2px;
  padding: 5px 9px;
  display: inline-block;
}

.price .own {
  font-size: 11px;
  color: var(--n5);
  margin-top: 3px;
}

.price .scale {
  margin-top: 5px;
}

.price .scale .lnk {
  font-size: 12px;
}

.price .pfand {
  font-size: 11.5px;
  color: #8a5a00;
  margin-top: 4px;
}

.buyrow {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  justify-content: flex-end;
  align-items: center;
}

/* Mengen-Stepper */
.qty {
  display: flex;
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  background: #fff;
}

.qty button {
  border: 0;
  background: var(--n1);
  width: 30px;
  color: var(--n7);
  font-size: 15px;
  line-height: 1;
}

.qty button:hover {
  background: var(--n2);
}

.qty input {
  width: 52px;
  border: 0;
  border-left: 1px solid var(--n4);
  border-right: 1px solid var(--n4);
  text-align: center;
  font-family: var(--ff-num);
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  padding: 7px 2px;
  min-width: 0;
}

.qty--sm input {
  width: 44px;
  padding: 5px 2px;
  font-size: 13px;
}

.qty--sm button {
  width: 25px;
  font-size: 13px;
}

.vpe-hint {
  font-size: 11px;
  color: var(--n6);
  margin-top: 4px;
}

.vpe-hint b {
  color: var(--n7);
}

/* ===========================================================
   7 · Buttons, Chips, Badges
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--n4);
  background: #fff;
  color: var(--n8);
  padding: 9px 15px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.btn:hover {
  background: var(--n1);
  text-decoration: none;
}

/* Figma kennt genau zwei Knopffarben: button/primary (blue/500) und
   button/secondary (blue/700), beide mit eigenem Hover. --accent war im
   Prototyp das hellere Blau der Kaufaktion und faellt damit mit
   button/primary zusammen; der Name bleibt als Alias stehen, damit das
   bestehende Markup (hit, buybox) nicht angefasst werden muss.
   Bis T-59 hing --primary am Dunkelblau und --accent an einem Hartwert
   (#005a96 / #0090dc) — beides ist jetzt Token. */
.btn--primary,
.btn--accent {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn--primary:hover,
.btn--accent:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.btn--secondary {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.btn--secondary:hover {
  background: var(--blue-800);
  border-color: var(--blue-800);
}

.btn--ghost {
  border-color: transparent;
  background: none;
  color: var(--blue);
}

.btn--ghost:hover {
  background: var(--blue-tint);
}

.btn--lg {
  padding: 13px 22px;
  font-size: 14.5px;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 6px 11px;
  font-size: 12px;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--icon {
  padding: 8px 10px;
}

.chiprow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--n4);
  background: #fff;
  color: var(--n7);
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-family: var(--ff-num);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.chip.active {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.chip.active .sub {
  color: rgba(255, 255, 255, 0.72);
}

.chip .sub {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--n5);
}

/* Verfügbarkeit steht rechts hinter dem Wert, nicht davor:
   erst was ich wähle, dann ob es lieferbar ist. */
.chip .pt {
  width: 10px;
  height: 10px;
  border-width: 2px;
  margin-left: 3px;
}

.chip.is-off {
  opacity: 0.5;
}

.chip.is-off .sub {
  color: var(--n5);
}

.tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--n2);
  color: var(--n6);
}

.tag--blue {
  background: var(--blue-tint);
  color: var(--blue-dark);
}

.tag--green {
  background: var(--green-tint);
  color: #2d6b1d;
}

.tag--red {
  background: var(--red-tint);
  color: var(--red);
}

.tag--yellow {
  background: var(--yellow-tint);
  color: #8a5a00;
}

/* Hinweisboxen */
.note {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--n3);
  background: var(--n1);
  color: var(--n7);
}

.note .nt {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  color: var(--n8);
}

.note--blue {
  background: var(--blue-tint);
  border-color: #b9d9ec;
  color: var(--blue-dark);
}

.note--blue .nt {
  color: var(--blue-dark);
}

.note--yellow {
  background: var(--yellow-tint);
  border-color: #f0dfa0;
  color: #8a5a00;
}

.note--yellow .nt {
  color: #7a4f00;
}

.note--green {
  background: var(--green-tint);
  border-color: #bcdcb1;
  color: #2d6b1d;
}

.note--green .nt {
  color: #235715;
}

.note--red {
  background: var(--red-tint);
  border-color: #f2c2c8;
  color: #9e0013;
}

.note--red .nt {
  color: #9e0013;
}

.note--flow {
  background: #fff;
  border: 1px dashed var(--n4);
  color: var(--n6);
  font-size: 12px;
}

.note--flow .nt {
  color: var(--blue-dark);
}

/* ===========================================================
   8 · PDP
   =========================================================== */
.gallery {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
}

.gal-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
}

.gal-thumbs .t {
  width: 58px;
  height: 58px;
  border: 1px solid var(--n3);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--n2) 0 5px, var(--n1) 5px 10px);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--n5);
}

.gal-thumbs .t.sel {
  border-color: var(--blue-dark);
  border-width: 2px;
}

.gal-main {
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  aspect-ratio: 1/1;
  min-height: 0;
  background: repeating-linear-gradient(45deg, var(--n2) 0 8px, var(--n1) 8px 16px);
  display: grid;
  place-items: center;
  position: relative;
}

.gal-main .glyph {
  font-size: 76px;
  color: var(--n4);
}

/* Kaufblock zweispaltig: links Preis und Verfügbarkeit, rechts Menge und
   Warenkorb. Nutzt die Breite, die das kleinere Bild freigibt, und
   verkürzt den Block so weit, dass die Kaufzeile ohne Scrollen sichtbar
   bleibt — auf einer Ersatzteilseite ist das die eigentliche Aufgabe. */
.buygrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 376px);
  gap: 26px;
  align-items: start;
}

.bg-act {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bg-act .buyline {
  margin-top: 0;
}

.bg-act .buyfoot {
  margin-top: 0;
}

.bg-act .btn--lg {
  flex: 1;
}

@media (max-width: 1180px) {
  .buygrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* ===========================================================
   Fahrzeug-Slider auf der Trefferliste
   Zweiter Suchflow: die Suche nach einem Fahrzeug führt auf dieselbe
   Liste, darüber aber die Motorvarianten als Kacheln. Die Auswahl ist
   der gröbste Schnitt — sie bestimmt, welche Produktgruppen es
   überhaupt gibt —, deshalb steht sie über den aktiven Filtern.
   =========================================================== */
.vehslider {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 15px 16px 16px;
  margin-bottom: 14px;
}

.vs-hd {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 13px;
}

.vs-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
}

.vs-sub {
  font-size: 12.5px;
  color: var(--n7);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Anzahl der Varianten als graue Pille mit blauer Zahl — dieselbe Bauform
   wie die Zähler in der Navigation, damit Zahlen überall gleich aussehen. */
.vs-n {
  font-family: var(--ff-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--n2);
  padding: 1px 8px;
  border-radius: 9px;
  flex: none;
}

.vs-nav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
}

.vs-arrow {
  width: 30px;
  height: 30px;
  border: 1px solid var(--n4);
  background: #fff;
  border-radius: var(--radius);
  color: var(--n7);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.vs-arrow:hover {
  background: var(--n1);
  border-color: var(--blue);
  color: var(--blue-dark);
}

.vs-arrow .fb {
  display: none;
  font-size: 15px;
  line-height: 1;
}

/* Waagrecht scrollende Spur mit Einrasten. Die Kacheln sind so breit,
   dass die fünfte angeschnitten stehen bleibt — sonst sieht man nicht,
   dass es weitergeht. */
.vs-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.vs-track::-webkit-scrollbar {
  height: 7px;
}

.vs-track::-webkit-scrollbar-thumb {
  background: var(--n4);
  border-radius: 4px;
}

.vtile {
  flex: 0 0 206px;
  scroll-snap-align: start;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 0 0 11px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vtile:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-2);
}

.vt-pic {
  height: 88px;
  background: var(--n1);
  border-bottom: 1px solid var(--n2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.vt-cc {
  font-size: 26px;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.vt-lit {
  font-size: 11.5px;
  color: var(--n6);
}

.vt-bd {
  padding: 10px 13px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vt-kw {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--n8);
}

.vt-p {
  font-size: 11.5px;
  color: var(--n6);
}

.vt-n {
  font-size: 11.5px;
  color: var(--n6);
  margin-top: 4px;
}

.vt-n b {
  color: var(--blue-dark);
}

.vtile.is-on {
  border-color: var(--blue-dark);
  box-shadow: 0 0 0 2px rgba(0, 64, 110, 0.16);
}

.vtile.is-on .vt-pic {
  background: var(--blue-dark);
  border-bottom-color: var(--blue-dark);
}

.vtile.is-on .vt-cc {
  color: #fff;
}

.vtile.is-on .vt-lit {
  color: rgba(255, 255, 255, 0.75);
}

/* Passung an der Trefferzeile. Bewusst ohne Farbe und ohne Symbol — es ist
   eine Angabe wie Durchmesser oder Maßstufe, keine Warnung. */
.hit-fit {
  font-size: 11.5px;
  color: var(--n6);
  margin-top: 3px;
}

/* Fahrzeugname als Kontext, nicht als entfernbarer Filter */
.afchip.is-static {
  background: var(--n2);
  border-color: var(--n3);
  color: var(--n7);
  padding-right: 12px;
}

@media (max-width: 759px) {
  .vtile {
    flex-basis: 176px;
  }
}
/* Blättern durch die Trefferliste, ohne sie zu verlassen */
.crumbs .pager {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--n6);
}

.crumbs .pager .pos {
  font-family: var(--ff-num);
}

.pdp-title {
  margin: 0;
}

.buybox .pdp-title h1 {
  font-size: 21px;
}

/* Merken, Vergleichen und Teilen gehören zum Produktnamen */
.pdp-title .ttl-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pdp-title .ttl-icons {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 1px;
}

.pdp-title .ttl-icons .iconbtn {
  margin-left: 0;
}

.pdp-title .brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 5px;
}

.pdp-title h1 {
  margin: 0 0 9px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pdp-title .nos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  font-size: 12.5px;
  color: var(--n6);
}

.pdp-title .nos b {
  font-family: var(--ff-num);
  color: var(--n8);
  letter-spacing: 0.02em;
}

/* Variantenwahl: Label links, aktueller Wert rechts, darunter die Chips.
   Kein Erklärtext — der Punkt am Chip zeigt die Verfügbarkeit selbst. */
.vsel {
  padding: 14px 0 0;
}

.vsel:first-child {
  padding-top: 0;
}

.vsel + .vsel {
  border-top: 1px solid var(--n2);
  margin-top: 14px;
}

.vhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}

.vhead .vt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n6);
}

.vhead .vnow {
  margin-left: auto;
  font-size: 12px;
  color: var(--n7);
  text-align: right;
  font-family: var(--ff-num);
}

.vfoot {
  margin-top: 8px;
}

.vfoot .small {
  line-height: 1.45;
  display: block;
}

/* Ausgelaufene Maßstufe: statt Preis und Kaufbutton der Weg zum Nachfolger */
.succ {
  border: 1px solid #f0c98a;
  background: var(--yellow-tint);
  border-radius: var(--radius);
  padding: 13px 15px;
}

.succ .st {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a5a00;
  margin-bottom: 7px;
}

.succ p {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--n7);
}

.succ p b {
  font-family: var(--ff-num);
}

.buybox {
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
}

.buybox .bb-sec {
  padding: 16px 18px;
  border-bottom: 1px solid var(--n2);
}

.buybox .bb-sec:last-child {
  border-bottom: 0;
}

.buybox .bb-buy {
  background: var(--n1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.buybox .pr {
  font-family: var(--ff-num);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.buybox .pr-sub {
  font-size: 12px;
  color: var(--n6);
  margin-top: 3px;
}

/* Menge und Kaufbutton in einer Zeile */
.buyline {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Gesperrte Kaufzeile: sichtbar, aber eindeutig nicht bedienbar */
.buyline.is-locked {
  opacity: 0.5;
}

.buyline.is-locked .btn--primary,
.buyline.is-locked .btn--accent {
  background: var(--n4);
  border-color: var(--n4);
  color: var(--n7);
}

.buyline.is-locked button, .buyline.is-locked input {
  cursor: not-allowed;
}

.buyline .qty {
  flex: none;
}

.buyline .btn {
  flex: 1;
}

.buyfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--n3);
}

.buyfoot .buyicons {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex: none;
}

.buyfoot .iconbtn {
  margin-left: 0;
}

.pfand-line {
  font-size: 11.5px;
  color: #8a5a00;
  line-height: 1.45;
  display: block;
}

.pfand-line b {
  font-family: var(--ff-num);
}

.scaletable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.scaletable[hidden] {
  display: none;
}

.scaletable td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--n3);
  font-family: var(--ff-num);
}

.scaletable td:first-child {
  text-align: left;
  color: var(--n6);
}

.scaletable tr:last-child td {
  border-bottom: 0;
}

.scaletable tr.cur td {
  background: var(--blue-tint);
  font-weight: 700;
  color: var(--blue-dark);
}

/* Im Flyout bekommt jede Staffel einen Direktweg in den Warenkorb —
   die Menge, die den Preis auslöst, ist damit ein Klick entfernt. */
.scaletable--pop {
  margin-top: 0;
  font-size: 12.5px;
}

.scaletable--pop td {
  padding: 6px 8px;
}

.scaletable--pop .tcart {
  width: 34px;
  padding: 4px 4px 4px 0;
}

.scaletable--pop .tcart button {
  border: 1px solid var(--n4);
  background: #fff;
  color: var(--blue-dark);
  border-radius: 2px;
  padding: 3px 5px;
  display: inline-flex;
  line-height: 1;
}

.scaletable--pop .tcart button:hover {
  border-color: var(--blue);
  background: var(--blue-tint);
}

.scaletable--pop .tcart .fb {
  font-size: 11px;
  font-weight: 600;
}

/* Technische Daten (getypt) */
.techtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.techtable tr {
  border-bottom: 1px solid var(--n2);
}

.techtable tr:last-child {
  border-bottom: 0;
}

.techtable th {
  text-align: left;
  font-weight: 500;
  color: var(--n6);
  padding: 8px 12px 8px 0;
  width: 48%;
  vertical-align: top;
}

.techtable td {
  padding: 8px 0;
  font-family: var(--ff-num);
  font-weight: 600;
}

.techtable td .u {
  font-weight: 400;
  color: var(--n6);
  font-size: 12px;
}

.tech-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
}

/* Fußnoten: einzelne Merkmale tragen Erläuterungen, die unten stehen */
.techtable th .fn, .fnlist .fn {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--blue);
  vertical-align: super;
  margin-left: 2px;
}

.fnlist {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--n2);
  font-size: 11.5px;
  color: var(--n6);
}

.fnlist .fn {
  vertical-align: baseline;
  margin-right: 5px;
}

.techtable td .rc {
  font-family: var(--ff-num);
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid var(--n4);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--n6);
  margin-left: 4px;
}

/* Dokumentenliste bei umfangreichen Produktgruppen */
.doc-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.doc-filter select {
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  padding: 6px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--n7);
  background-color: #fff;
}

/* Abschnitt ohne Karte: die Überschrift sitzt auf dem Seitengrund,
   weiß sind nur die Karten darin. */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n3);
}

.sec-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.01em;
}

.sec-head .aside {
  margin-left: auto;
  font-size: 12px;
  color: var(--n6);
}

/* Ergänzende Artikel */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.rel-grid--flat .rel {
  background: var(--n1);
}

.rel .thumb--tall {
  height: 144px;
  font-size: 34px;
}

.rel {
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  padding: 13px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rel .rt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.rel .thumb {
  height: 144px;
  border: 1px solid var(--n3);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, var(--n2) 0 6px, var(--n1) 6px 12px);
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--n4);
}

.rel h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.rel .no {
  font-family: var(--ff-num);
  font-size: 11.5px;
  color: var(--n6);
}

.rel .pz {
  font-family: var(--ff-num);
  font-size: 15px;
  font-weight: 700;
  margin-top: auto;
}

.rel .add {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--n7);
  cursor: pointer;
}

.rel .add input {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  margin: 0;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--n3);
}

.tabs button {
  border: 0;
  background: none;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--n6);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.tabs button:hover {
  color: var(--blue-dark);
}

.tabs button.active {
  color: var(--blue-dark);
  border-bottom-color: var(--blue);
}

/* Reiterinhalte liegen gestapelt im selben Rasterfeld: die Karte ist so
   hoch wie der längste Reiter und springt beim Wechseln nicht mehr.
   Inaktive Reiter sind unsichtbar und damit auch nicht fokussierbar. */
.tabbody {
  display: grid;
}

.tabbody > .tabpane {
  grid-area: 1/1;
}

.tabpane {
  padding-top: 18px;
  visibility: hidden;
}

.tabpane.active {
  visibility: visible;
}

/* ===========================================================
   9 · Warenkorb
   =========================================================== */
.cart-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
}

.cart-toolbar .sp {
  margin-left: auto;
}

.cart-toolbar .selinfo {
  font-size: 12.5px;
  color: var(--n6);
}

.cart-toolbar .selinfo b {
  color: var(--n8);
}

.ctable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.ctable thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
  padding: 9px 10px;
  background: var(--n1);
  border-top: 1px solid var(--n3);
  border-bottom: 1px solid var(--n3);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ctable td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--n2);
  vertical-align: top;
}

.ctable tbody tr:hover {
  background: #fbfcfd;
}

.ctable tbody tr.is-sel {
  background: var(--blue-tint);
}

.ctable tbody tr.is-swap {
  background: var(--yellow-tint);
}

.ctable .c-chk {
  width: 34px;
}

.ctable .c-chk input {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
}

.ctable .c-pos {
  width: 40px;
  font-family: var(--ff-num);
  color: var(--n5);
  font-size: 12px;
}

.ctable .c-art {
  min-width: 250px;
}

.ctable .c-qty {
  width: 108px;
}

.ctable .c-av {
  width: 168px;
}

.ctable .c-up {
  width: 104px;
  text-align: right;
}

.ctable .c-tot {
  width: 112px;
  text-align: right;
}

.ctable .c-act {
  width: 40px;
  text-align: right;
}

.ctable .art-nm {
  font-weight: 600;
}

.ctable .art-no {
  font-family: var(--ff-num);
  font-size: 11.5px;
  color: var(--n6);
  margin-top: 2px;
}

.ctable .art-br {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}

.ctable .num {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
}

.ctable .num.b {
  font-weight: 700;
}

.ctable .del {
  border: 0;
  background: none;
  color: var(--n5);
  font-size: 15px;
  padding: 0 3px;
}

.ctable .del:hover {
  color: var(--red);
}

/* Kein innerer Scrollbereich: alle Positionen stehen untereinander.
   Der Kopf der Tabelle bleibt beim Scrollen stehen, die Seitenleiste auch. */
.ctable {
  border-left: 1px solid var(--n3);
  border-right: 1px solid var(--n3);
}

.cart-foot {
  padding: 11px 14px;
  background: var(--n1);
  border: 1px solid var(--n3);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 12.5px;
  color: var(--n7);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-foot .sp {
  margin-left: auto;
}

.cart-foot b {
  font-family: var(--ff-num);
}

/* Ansichtsumschalter: schlichte Liste oder Arbeitsmodus */
.viewbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--n1);
  border-left: 1px solid var(--n3);
  border-right: 1px solid var(--n3);
  border-bottom: 1px solid var(--n3);
}

.viewbar .vb-t {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n6);
}

.viewbar .vb-hint {
  font-size: 11.5px;
  color: var(--n5);
}

.seg {
  display: inline-flex;
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.seg button {
  border: 0;
  background: none;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--n6);
}

.seg button + button {
  border-left: 1px solid var(--n4);
}

.seg button.active {
  background: var(--blue-dark);
  color: #fff;
}

/* Filter- und Gruppierzeile des Arbeitsmodus */
.cart-filter {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--blue-tint);
  border-left: 1px solid var(--n3);
  border-right: 1px solid var(--n3);
  border-bottom: 1px solid var(--n3);
}

.cart-filter[hidden] {
  display: none;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-field--grow {
  flex: 1;
  min-width: 190px;
}

.cf-field .lb {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
}

.cf-field select, .cf-field input {
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  padding: 6px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--n7);
  background-color: #fff;
}

.cf-res {
  font-size: 12px;
  color: var(--blue-dark);
  font-weight: 600;
  padding-bottom: 7px;
}

/* Gruppenkopf in der Positionstabelle */
.ctable tr.grp td {
  padding: 0;
  background: var(--n2);
  border-bottom: 1px solid var(--n3);
}

.ctable tr.grp[hidden] {
  display: none;
}

.gh {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 12px;
  text-align: left;
}

.gh .caret {
  color: var(--n6);
  transition: transform 0.15s;
}

.gh[aria-expanded=false] .caret {
  transform: rotate(-90deg);
}

.gh .gl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-dark);
}

.gh .gc {
  font-size: 11.5px;
  color: var(--n6);
}

.gh .gv {
  margin-left: auto;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 12.5px;
}

/* Bemerkung je Position — heute über das dritte Importfeld möglich */
.posnote {
  margin-top: 5px;
}

.posnote .npt {
  font-size: 11.5px;
  padding: 2px 0;
}

.posnote .nf {
  margin-top: 4px;
}

.posnote .nf[hidden] {
  display: none;
}

.posnote .nf input {
  width: 100%;
  border: 1px solid var(--n4);
  border-radius: 2px;
  padding: 4px 7px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--n7);
}

.pf-hint {
  font-size: 11px;
  color: #8a5a00;
  margin-top: 3px;
}

.swap-inline {
  margin-top: 8px;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid #f0dfa0;
  border-left: 3px solid var(--yellow);
  border-radius: 2px;
  padding: 8px 10px;
  line-height: 1.5;
  color: #7a4f00;
}

.swap-inline b {
  font-family: var(--ff-num);
  color: var(--n8);
}

.swap-inline .acts {
  margin-top: 6px;
  display: flex;
  gap: 10px;
}

.swap-inline .acts button {
  border: 0;
  background: none;
  text-decoration: underline;
  font-size: 11.5px;
  color: var(--blue);
}

/* Summenblock */
.sums .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--n2);
}

.sums .row:last-of-type {
  border-bottom: 0;
}

/* Der Gesamtbetrag bringt seine eigene Linie mit — die Zeile darüber
   gibt ihre deshalb ab, sonst stehen dort zwei Striche. */
.sums .row.no-rule {
  border-bottom: 0;
}

.sums .row .k {
  color: var(--n7);
}

.sums .row .k small {
  display: block;
  color: var(--n5);
  font-size: 11px;
}

.sums .row .v {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.sums .row.disc .v {
  color: #2d6b1d;
}

.sums .row.sub {
  border-top: 1px solid var(--n3);
  margin-top: 4px;
  padding-top: 9px;
  font-weight: 600;
}

.sums .row.total {
  border-top: 2px solid var(--blue-dark);
  margin-top: 8px;
  padding-top: 11px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-dark);
}

.sums .row.total .v {
  font-size: 21px;
  letter-spacing: -0.01em;
}

.sums .info {
  font-size: 11px;
  color: var(--n5);
  margin-top: 3px;
}

/* Konditionen als eine Zeile, aufklappbar */
.sums .row--fold {
  align-items: center;
}

.sums-fold {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--n7);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.sums-fold:hover {
  color: var(--blue-dark);
}

.sums-fold .caret {
  color: var(--n5);
  transition: transform 0.15s;
}

.sums-fold[aria-expanded=true] .caret {
  transform: rotate(180deg);
}

/* Die Einzelkonditionen sind Beleg, nicht Aussage - eingerueckt und leiser */
.sums .row--in {
  padding-left: 12px;
}

.sums .row--in .k {
  color: var(--n6);
}

/* Doppellinien vermeiden: wo die naechste Zeile ihre eigene Linie mitbringt,
   gibt die Zeile darueber ihre ab. Betrifft die Konditionszeile vor dem
   Nettobetrag und den Gesamtbetrag vor der Kreditlinie. */
.sums .row--fold {
  border-bottom: 0;
}

.sums .row.total {
  border-bottom: 0;
}

/* Kreditlimit — eine Zeile, Details auf Wunsch */
.creditline {
  border-top: 1px solid var(--n3);
  padding-top: 12px;
}

.creditline-head {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d6b1d;
}

.creditline-head .lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.creditline-head .caret {
  color: var(--n5);
  transition: transform 0.15s;
}

.creditline-head[aria-expanded=true] .caret {
  transform: rotate(180deg);
}

.creditline-sub {
  font-size: 11.5px;
  color: var(--n6);
  margin: 2px 0 0 17px;
}

.creditline-sub b {
  font-family: var(--ff-num);
  color: var(--n7);
}

.creditline .meter {
  height: 6px;
  background: var(--n3);
  border-radius: 4px;
  overflow: hidden;
  margin: 11px 0 8px;
}

.creditline .meter i {
  display: block;
  height: 100%;
  background: var(--green);
}

.creditline .meter i.warn {
  background: var(--orange);
}

.creditline .kv {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--n6);
  padding: 2px 0;
}

.creditline .kv b {
  font-family: var(--ff-num);
  color: var(--n8);
}

/* Sekundäraktionen unter dem Weiter-Button */
.cart-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--n2);
}

/* ===========================================================
   9b · Bestellscreen
   =========================================================== */
/* Drei Felder nebeneinander statt gestapelt */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.field-row .checkfield {
  margin-bottom: 0;
}

/* Lieferaufteilung als wählbare Karten */
.optcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.optcard {
  border: 1px solid var(--n4);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  display: block;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.optcard:hover {
  border-color: var(--blue);
}

.optcard.is-sel {
  border-color: var(--blue-dark);
  border-width: 2px;
  padding: 13px 15px;
  box-shadow: var(--shadow-1);
}

.optcard input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.oc-body {
  display: block;
}

.oc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.oc-head .oc-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--n8);
}

.oc-rows {
  display: block;
}

.oc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--n7);
  padding: 4px 0;
}

.oc-row b {
  font-family: var(--ff-num);
  color: var(--n8);
}

.oc-row .oc-val {
  margin-left: auto;
  font-family: var(--ff-num);
  color: var(--n6);
  white-space: nowrap;
}

.oc-foot {
  display: block;
  font-size: 11.5px;
  color: var(--n6);
  line-height: 1.45;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--n2);
}

/* Die Verfügbarkeitsglyphe ist zentral in Abschnitt 6 definiert und
   wird hier unverändert weiterverwendet. */
/* Zahlungsart */
.paybox {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  background: var(--n1);
  padding: 13px 15px;
}

.paybox .pay-t {
  font-size: 13.5px;
  font-weight: 700;
}

.paybox .pay-d {
  font-size: 12px;
  color: var(--n6);
  margin-top: 2px;
}

/* Kompakte Bestellübersicht */
.ordersum {
  font-size: 12.5px;
}

.os-row {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--n2);
}

.os-row .os-n {
  font-family: var(--ff-num);
  color: var(--n6);
  flex: none;
  min-width: 30px;
}

.os-row .os-a {
  color: var(--n8);
}

.os-row .os-v {
  margin-left: auto;
  font-family: var(--ff-num);
  font-weight: 600;
  white-space: nowrap;
}

.os-more {
  padding: 7px 0 0;
  font-size: 12px;
  color: var(--n6);
}

.os-more b {
  font-family: var(--ff-num);
  color: var(--n7);
}

.checkfield {
  margin-bottom: 13px;
}

.checkfield label.lb {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--n7);
}

.checkfield input[type=text], .checkfield input[type=date], .checkfield select, .checkfield textarea {
  width: 100%;
  border: 1px solid var(--n4);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--n8);
  background-color: #fff;
}

.checkfield .hint {
  font-size: 11px;
  color: var(--n6);
  margin-top: 4px;
  line-height: 1.45;
}

.cbline {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--n7);
  cursor: pointer;
}

.cbline input {
  accent-color: var(--blue);
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  flex: none;
}

/* ===========================================================
   10 · Bestätigung
   =========================================================== */
.confirm-hero {
  background: #fff;
  border: 1px solid var(--n3);
  border-top: 4px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow-1);
}

.confirm-hero .tick {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 2px solid var(--green);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 16px;
}

.confirm-hero h1 {
  margin: 0 0 7px;
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-dark);
}

.confirm-hero .sub {
  color: var(--n6);
  font-size: 14px;
  margin: 0 0 20px;
}

.confirm-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--n3);
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  overflow: hidden;
}

.confirm-kv > div {
  background: #fff;
  padding: 12px 14px;
}

.confirm-kv .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n6);
}

.confirm-kv .v {
  font-family: var(--ff-num);
  font-size: 16px;
  font-weight: 700;
  margin-top: 3px;
}

/* Status-Strang asynchrone SAP-Übergabe */
.pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pl-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
}

.pl-step .rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pl-step .bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  border: 2px solid var(--n4);
  background: #fff;
  color: var(--n5);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.pl-step .line {
  width: 2px;
  flex: 1;
  background: var(--n3);
  min-height: 22px;
}

.pl-step:last-child .line {
  display: none;
}

.pl-step .bd {
  padding-bottom: 20px;
}

.pl-step .t {
  font-size: 13.5px;
  font-weight: 700;
}

.pl-step .d {
  font-size: 12.5px;
  color: var(--n6);
  margin-top: 2px;
  line-height: 1.5;
}

.pl-step .ts {
  font-size: 11.5px;
  color: var(--n5);
  font-family: var(--ff-num);
  margin-top: 3px;
}

.pl-step.done .bullet {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.pl-step.done .line {
  background: var(--green);
}

.pl-step.run .bullet {
  border-color: var(--blue);
  color: var(--blue);
  animation: pulse 1.3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 126, 193, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 126, 193, 0);
  }
}
.pl-step.wait .t {
  color: var(--n6);
}

.deliv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.deliv th, .deliv td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--n2);
  text-align: left;
}

.deliv th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
  background: var(--n1);
}

.deliv td.num {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.next {
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  padding: 15px;
  background: #fff;
  color: var(--n8);
}

.next:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}

.next .ic {
  font-size: 18px;
  color: var(--blue);
}

.next .t {
  font-weight: 700;
  font-size: 13.5px;
  margin-top: 8px;
}

.next .d {
  font-size: 11.5px;
  color: var(--n6);
  margin-top: 3px;
  line-height: 1.45;
}

/* ===========================================================
   11 · Cover
   =========================================================== */
.cover-hero {
  background: linear-gradient(150deg, var(--blue-shadow) 0%, #002a4d 55%, var(--blue-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cover-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background: linear-gradient(115deg, transparent 48%, rgba(255, 255, 255, 0.5) 49%, transparent 50%), linear-gradient(72deg, transparent 62%, rgba(255, 255, 255, 0.35) 63%, transparent 64%), radial-gradient(circle at 78% 42%, rgba(67, 176, 224, 0.45) 0 2px, transparent 3px), radial-gradient(circle at 62% 74%, rgba(67, 176, 224, 0.45) 0 2px, transparent 3px), radial-gradient(circle at 88% 78%, rgba(67, 176, 224, 0.45) 0 2px, transparent 3px);
}

.cover-hero-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 58px 24px 52px;
  position: relative;
  z-index: 1;
}

.cover-hero .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 18px;
}

.cover-hero h1 {
  margin: 0 0 18px;
  font-size: 46px;
  line-height: 1.06;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.cover-hero h1 b {
  font-weight: 800;
}

.cover-hero p {
  margin: 0;
  max-width: 660px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.cover-hero .facts {
  display: flex;
  gap: 40px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.cover-hero .facts .v {
  font-size: 25px;
  font-weight: 700;
  font-family: var(--ff-num);
}

.cover-hero .facts .l {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 3px;
}

.persona {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--n3);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}

.persona .av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-tint);
  border: 1px solid #b9d9ec;
  color: var(--blue-dark);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}

.persona h2 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--blue-dark);
}

.persona .role {
  font-size: 12.5px;
  color: var(--n6);
  margin-bottom: 10px;
}

.persona p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--n7);
}

.persona .kv {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.persona .kv .k {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n5);
}

.persona .kv .v {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--ff-num);
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  color: var(--n8);
  box-shadow: var(--shadow-1);
}

.step-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transform: translateY(-1px);
}

.step-card {
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.step-card .no {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--ff-num);
}

.step-card h3 {
  margin: 0 0 5px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--blue-dark);
}

.step-card .msg {
  font-size: 13.5px;
  color: var(--n7);
  line-height: 1.55;
  margin-bottom: 9px;
}

.step-card .reqs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.step-card .reqs .r {
  font-size: 10px;
  font-family: var(--ff-num);
  color: var(--n6);
  border: 1px solid var(--n4);
  padding: 2px 6px;
  border-radius: 2px;
}

.step-card .go {
  color: var(--blue);
  font-size: 22px;
}

.sec-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n6);
  margin: 38px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n3);
}

.demo-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.dm {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  padding: 15px;
}

.dm .q {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 7px;
  line-height: 1.4;
}

.dm .a {
  font-size: 12px;
  color: var(--n7);
  line-height: 1.5;
}

.dm .a b {
  color: var(--n8);
}

.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.scope ul {
  margin: 8px 0 0;
  padding-left: 19px;
  font-size: 12.5px;
  color: var(--n7);
  line-height: 1.75;
}

/* ===========================================================
   12 · Modal & Toast
   =========================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 8, 36, 0.52);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow: auto;
}

.backdrop.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 640px;
  overflow: hidden;
}

.modal--wide {
  max-width: 860px;
}

.modal-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--n3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-hd h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--blue-dark);
}

.modal-hd .x {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 20px;
  color: var(--n5);
  line-height: 1;
}

.modal-bd {
  padding: 20px;
}

.modal-ft {
  padding: 14px 20px;
  background: var(--n1);
  border-top: 1px solid var(--n3);
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.toast {
  background: var(--blue-shadow);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-3);
  font-size: 13px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-width: 265px;
  max-width: 380px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast .sym {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  flex: none;
}

.toast .tt {
  font-weight: 700;
}

.toast .td {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.45;
}

.famtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.famtable th, .famtable td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--n2);
  text-align: left;
}

.famtable th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
  background: var(--n1);
}

.famtable td.num {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
}

.famtable tr.cur {
  background: var(--blue-tint);
}

.famtable tr.cur td {
  font-weight: 700;
  color: var(--blue-dark);
}

/* Icon-Größen in den Komponenten feinjustieren (SVG: Kastenmass, kein font-size) */
.hit-img .glyph .icn {
  width: 30px;
  height: 30px;
}

.gal-main .glyph .icn {
  width: 64px;
  height: 64px;
}

.av .sym .icn {
  width: 18px;
  height: 18px;
}

.confirm-hero .tick .icn {
  width: 26px;
  height: 26px;
}

.pl-step .bullet .icn {
  width: 15px;
  height: 15px;
}

.recog-pill .icn, .tag .icn {
  width: 14px;
  height: 14px;
}

.crumbs .sep {
  font-family: var(--ff);
}

/* Diverses */
.mt6 {
  margin-top: 6px;
}

.mt10 {
  margin-top: 10px;
}

.mt14 {
  margin-top: 14px;
}

.mt18 {
  margin-top: 18px;
}

.mt26 {
  margin-top: 26px;
}

.mt40 {
  margin-top: 40px;
}

.mb0 {
  margin-bottom: 0;
}

.mb10 {
  margin-bottom: 10px;
}

.mb14 {
  margin-bottom: 14px;
}

.mb18 {
  margin-bottom: 18px;
}

.muted {
  color: var(--n6);
}

.small {
  font-size: 11.5px;
}

.nowrap {
  white-space: nowrap;
}

.row-flex {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 1180px) {
  .cols, .cols--pdp, .cols--cart {
    grid-template-columns: 1fr;
  }
  .hit-main {
    grid-template-columns: 20px 72px minmax(0, 1fr);
    gap: 14px;
  }
  .hit-avail, .hit-price {
    grid-column: 3;
    text-align: left;
  }
  .hit-details, .hit-foot {
    padding-left: 18px;
  }
  .hit-details .dgrid {
    gap: 20px;
  }
  .buyrow {
    justify-content: flex-start;
    padding-top: 10px;
  }
  .price .main {
    font-size: 19px;
  }
  .shophead-inner {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  /* Auch ohne Suchfeld ist die Werkzeuggruppe mit vier Beschriftungen zu
     breit für eine gemeinsame Zeile — sie rutscht wie sonst auch darunter. */
  .headsearch {
    width: 100%;
    justify-self: stretch;
  }
  .rel-grid {
    grid-template-columns: 1fr;
  }
}
/* Ohne Icon-Font haben reine Icon-Schalter keine Beschriftung —
   dann bleiben sie besser weg als als leere Fläche zu erscheinen. */
/* Die Bemerkung ist eine Nebenfunktion — sie steht bereit, drängt sich
   aber bei 42 Zeilen nicht als blauer Link auf. */
.posnote .npt {
  color: var(--n5);
  font-weight: 400;
}

.posnote .npt:hover {
  color: var(--blue-dark);
}

.posnote.has-note .npt {
  color: var(--blue);
  font-weight: 500;
}

/* ===========================================================
   9c · Kondensierte Positionsliste im Checkout
   Alle Positionen auf einen Blick, damit niemand für Position 12
   in den Warenkorb zurückspringen muss.
   =========================================================== */
.condensed {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.condensed thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n6);
  background: var(--n1);
  padding: 8px 10px;
  border-bottom: 1px solid var(--n3);
  position: sticky;
  top: 0;
}

.condensed td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--n2);
}

.condensed tbody tr:hover {
  background: #fbfcfd;
}

.condensed .num {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.condensed th:nth-child(1), .condensed th:nth-child(2),
.condensed th:nth-child(4), .condensed th:nth-child(5), .condensed th:nth-child(6) {
  text-align: right;
}

.condensed th:nth-child(3) {
  text-align: left;
}

.condensed .num.b {
  font-weight: 700;
}

.condensed .mut {
  color: var(--n6);
}

.condensed tfoot td {
  padding: 9px 10px;
  border-top: 2px solid var(--blue-dark);
  font-weight: 700;
  color: var(--blue-dark);
  text-align: right;
}

.condensed tfoot td:first-child {
  text-align: right;
}

/* Nur-Lese-Wert in einem Formularfeld-Slot */
.checkfield .ro {
  border: 1px solid var(--n3);
  background: var(--n1);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-family: var(--ff-num);
  font-size: 13px;
  color: var(--n7);
}

/* Datumsfeld bewusst als Textfeld: ein native date input zeigt je nach
   Systemsprache MM/TT/JJJJ — im Pitch soll das deutsche Format stehen. */
.datefield {
  position: relative;
}

.datefield input {
  width: 100%;
  padding-right: 34px;
}

.datefield .icn {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n5);
  pointer-events: none;
}

/* Kontaktdaten des Ansprechpartners */
.kvlist {
  font-size: 12.5px;
}

.kvlist > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.kvlist span {
  color: var(--n6);
}

.kvlist b {
  font-family: var(--ff-num);
  font-weight: 600;
}

.deliv tfoot td {
  padding: 9px 14px;
  border-top: 2px solid var(--blue-dark);
  font-size: 11.5px;
  color: var(--n6);
  background: var(--n1);
}

.deliv tfoot td.num {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 12.5px;
}

/* Startseite: die untere Zone bekommt deutlichen Abstand zur Suche, damit
   Suchfeld und Module nicht ineinanderlaufen. Beide Spalten starten mit
   derselben Kopfzeile, dadurch sitzen Kacheln und Karte auf einer Linie. */
/* Dreifacher Abstand zur Suche: der Suchblock soll für sich stehen und
   nicht am ersten Modul kleben. 10 aus dem Hero plus 182 = 192 Pixel. */
/* Der große Abstand zur Suche ist entfallen: die Hero-Bühne setzt die
   Trennung jetzt selbst, mit Bildfläche und Balken. */
.homezone {
  margin-top: 38px;
}

.sec-title--flush {
  margin-top: 0;
}

/* Nebeneinanderliegende Schalter, gleich breit */
.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}

/* ===========================================================
   4c · Startseiten-Bausteine
   Kachel-, Teaser- und Markenleiste in der Bauform der Konzernseite
   ms-motorservice.com, auf die Inhalte des Shops übertragen.
   =========================================================== */
/* Vier Kacheln je Zeile, damit die Erläuterungen Platz haben */
.next-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.next .t {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-n {
  font-family: var(--ff-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--blue-tint);
  padding: 1px 7px;
  border-radius: 9px;
  flex: none;
}

/* Sortiments-Teaser: Bild oben, Überschrift, ein Satz, Artikelzahl */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.teaser {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  color: var(--n8);
}

.teaser:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}

/* Bildplatz statt Produktmotiv, exakt im Muster der Trefferliste: gleiche
   Schraffur, gleicher Glyph, gleiche Produktgruppen-Marke unten links wie
   .hit-img. Ein Platzhaltertyp für den ganzen Prototyp — dann liest niemand
   eine Bedeutung in unterschiedliche Leerflächen hinein.
   Höhe 228px (vorher 171px, davor 128px) — erneut ein Drittel mehr. */
.teaser .pic {
  position: relative;
  display: grid;
  place-items: center;
  height: 228px;
  background: repeating-linear-gradient(45deg, var(--n2) 0 6px, var(--n1) 6px 12px);
  border-bottom: 1px solid var(--n3);
}

.teaser .bd {
  display: block;
  padding: 14px 15px 15px;
}

.teaser .t {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
}

.teaser .d {
  display: block;
  font-size: 11.5px;
  color: var(--n6);
  line-height: 1.45;
  margin-top: 5px;
}

.teaser .n {
  display: block;
  margin-top: 9px;
  font-family: var(--ff-num);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
}

/* Markenleiste */
.brandbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-chip {
  border: 1px solid var(--n3);
  background: #fff;
  border-radius: var(--radius);
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--word-grey);
  flex: 1 1 auto;
  text-align: center;
  min-width: 150px;
}

.brand-chip:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
  text-decoration: none;
  box-shadow: var(--shadow-1);
}

/* Aktuelles — Datum links, Meldung rechts */
.newslist {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
}

.news {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--n2);
  color: var(--n8);
}

.news:last-child {
  border-bottom: 0;
}

.news:hover {
  background: var(--n1);
  text-decoration: none;
}

.news .dt {
  font-family: var(--ff-num);
  font-size: 11.5px;
  color: var(--n5);
  padding-top: 2px;
}

.news .t {
  display: block;
  font-weight: 700;
  font-size: 13px;
}

.news .d {
  display: block;
  font-size: 12px;
  color: var(--n6);
  line-height: 1.45;
  margin-top: 2px;
}

@media (max-width: 1180px) {
  .next-grid--4, .teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Einleitungszeile unter einer Abschnittsüberschrift */
.sec-lead {
  margin: -6px 0 14px;
  font-size: 13px;
  color: var(--n6);
}

/* Startseite, untere Zeile: die Ansprechpartner-Karte zieht auf die Höhe
   der Meldungsliste links. Kontakt sitzt dabei am unteren Rand. */
.homerow {
  align-items: stretch;
}

.homerow > aside {
  display: flex;
  flex-direction: column;
}

.homerow > aside .card {
  flex: 1;
  display: flex;
}

.homerow > aside .card-bd {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.homerow > aside .btn-row {
  margin-top: auto;
  padding-top: 16px;
}

/* ===========================================================
   8b · Contentmodul
   Text links, Motiv rechts. Redaktioneller Baustein auf der Detailseite.
   =========================================================== */
.contentmod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.cm-bd {
  padding: 30px 34px 32px;
}

.cm-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.cm-bd h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
}

.cm-bd p {
  margin: 0 0 11px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--n7);
}

.cm-bd .btn {
  margin-top: 7px;
}

.cm-pic {
  min-height: 300px;
  /* TODO(assets): der Prototyp referenziert hier t-kolben.jpg (und, je
     nach Sortimentsteaser, t-lager.jpg / t-pumpen.jpg / t-turbo.jpg) —
     diese Bilddateien wurden im Intake nie mitgeliefert (nur banner.jpg
     und logo.svg lagen bei). Ohne echte Datei würde ein hartes url()
     hier den gesamten Webpack-Build brechen, deshalb vorerst nur die
     Flächenfarbe. Bild ergänzen, sobald das Bildmaterial aus dem MAM
     vorliegt (siehe Presenter-Handout, "Bildmaterial"). */
  background-color: var(--n1);
}

@media (max-width: 1180px) {
  .contentmod {
    grid-template-columns: 1fr;
  }
  .cm-pic {
    min-height: 200px;
  }
}
/* ===========================================================
   0b · Auswahlfelder
   Eigener Chevron statt des systemeigenen: der stand direkt am Rahmen.
   =========================================================== */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5%206%206.5l5-5%22%20fill%3D%22none%22%20stroke%3D%22%236b757e%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px !important;
}

select::-ms-expand {
  display: none;
}

/* ===========================================================
   FAQ · Akkordeon am Seitenende der Detailseite
   Zwei Spalten, jede Frage klappt einzeln auf. Reine
   Wireframe-Logik: die Antworten kommen später redaktionell
   aus dem CMS, die Zuordnung erfolgt über die Produktgruppe.
   =========================================================== */
/* Fragen stehen untereinander, nicht nebeneinander: die Blöcke bleiben
   dadurch schmal und der Text läuft nicht über die volle Seitenbreite. */
.sec-block--narrow {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-i {
  background: #fff;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.faq-i > button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-dark);
  line-height: 1.4;
}

.faq-i > button:hover {
  background: var(--n1);
}

.faq-i > button .icn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--n6);
  transition: transform 0.16s ease;
}

.faq-i.open > button {
  background: var(--n1);
}

.faq-i.open > button .icn {
  transform: rotate(180deg);
  color: var(--blue);
}

.faq-a {
  padding: 0 16px 16px;
  border-top: 1px solid var(--n2);
}

.faq-a p {
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--n7);
}

.faq-a p:first-child {
  margin-top: 13px;
}

.faq-a .faq-more {
  display: inline-block;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.faq-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--n1);
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--n7);
}

.faq-foot .lbl {
  font-weight: 600;
  color: var(--blue-dark);
}

.faq-foot .btn {
  margin-left: auto;
}

/* Ohne Icon-Schrift bleibt der Pfeil als Textzeichen stehen: er ist hier
   das einzige Signal, dass die Frage aufklappt. */
@media (max-width: 1180px) {
  .sec-block--narrow {
    max-width: none;
  }
  .faq-foot .btn {
    margin-left: 0;
  }
}
[x-cloak] {
  display: none !important;
}

/* ===========================================================
   Motorservice OnlineShop — Responsive-Schicht
   Ergaenzt styles.css, ohne sie zu veraendern. Wird nach
   styles.css geladen; bei gleicher Spezifitaet gewinnt diese
   Datei durch die Reihenfolge.

   Raster
     Desktop   ab 1181px  — unveraendert, styles.css allein
     Tablet    760–1180px — zwei Spalten werden eine, Filter
                            und Navigation wandern in Panels
     Mobil     bis 759px  — gestapelt, Tabellen werden Karten

   Untergrenze ist 360px. Alle Bedienelemente sind auf Touch
   mindestens 44px hoch.
   =========================================================== */
:root {
  --shell-pad: 24px;
  --drawer-w: min(88vw, 380px);
  --touch: 44px;
}

/* ===========================================================
   0 · Fundament
   =========================================================== */
@media (max-width: 1180px) {
  :root {
    --shell-pad: 20px;
  }
  .shell,
  .topline-inner,
  .shophead-inner,
  .mainnav-inner,
  .msg-strip-inner {
    padding-left: var(--shell-pad);
    padding-right: var(--shell-pad);
  }
  .shell {
    padding-top: 20px;
    padding-bottom: 32px;
  }
  /* Bilder und Medien brechen nie aus ihrer Spalte aus. */
  img, svg, video {
    max-width: 100%;
    height: auto;
  }
  /* Eine Rasterspalte darf schmaler werden als ihr breitestes Kind.
     Ohne min-width: 0 waechst 1fr auf die Mindestbreite des Inhalts —
     bei der achtspaltigen Warenkorbtabelle sind das 800px, und die
     ganze Seite wandert nach rechts hinaus. .cols hat die Regel schon,
     die beiden Sonderraster nicht. */
  .cols > main, .cols > aside,
  .cols--pdp > main, .cols--pdp > aside,
  .cols--cart > main, .cols--cart > aside {
    min-width: 0;
  }
  /* Die stehende Spalte bekommt am Desktop eine eigene Hoehenbegrenzung
     und scrollt in sich; overscroll-behavior haelt die Seite dabei fest.
     Sobald die Spalte untereinander steht, ist das eine Falle: wer mit
     dem Finger ueber der Summe wischt, bewegt die Seite nicht mehr.
     Auf Tablet und Handy laeuft sie deshalb einfach mit. */
  aside.sticky {
    position: static;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding-right: 0;
  }
  .cols--cart > main .sticky,
  .cols--pdp > main {
    position: static;
  }
  /* Kaufblock der Detailseite: Verfuegbarkeit links, Preis rechts in
     einer Zeile — dieselbe Aufteilung wie in der Trefferkarte. Der
     Preis bekommt hoechstens die halbe Breite, damit der lange
     Bestandssatz daneben nicht auf eine Spalte zusammenfaellt. */
  .bb-buy .bg-info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 14px;
  }
  .bb-buy .bg-info > #succBlock {
    order: 1;
    flex: 1 1 100%;
  }
  .bb-buy .bg-info > #avail {
    order: 2;
    flex: 1 1 0%;
    min-width: 0;
    margin-top: 0;
  }
  .bb-buy .bg-info > #priceBlock {
    order: 3;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    text-align: right;
    margin-left: auto;
  }
  /* Der Meldungsplatz liegt am Desktop frei oben rechts ueber dem
     Motiv. Sobald die Karte fast die volle Breite hat — und das tut
     sie schon auf dem Tablet — gibt es dort keine freie Flaeche mehr
     und er legt sich ueber die Ueberschrift. Er stellt sich deshalb
     ueber die Karte. */
  .hs-msg {
    position: static;
    display: inline-flex;
    margin: 0 0 12px;
    border-radius: var(--radius);
    line-height: 1.4;
  }
}
@media (max-width: 759px) {
  :root {
    --shell-pad: 14px;
  }
  .shell {
    padding-top: 14px;
    padding-bottom: 28px;
  }
  h1.page {
    font-size: 21px;
  }
  .page-sub {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .card-bd {
    padding: 14px;
  }
  .card-hd {
    padding: 12px 14px;
  }
  /* Brotkrume: nur der letzte Schritt und ein Zurueck-Pfeil.
     Die volle Kette braucht auf 360px drei Zeilen und sagt
     dort weniger, als sie kostet. */
  .crumbs {
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.7;
  }
  .crumbs .pager {
    float: none;
    display: flex;
    margin-top: 8px;
  }
  /* Touch-Mindestgroessen. Icon-Schalter und Zaehlfelder sind im
     Desktop-Entwurf 26–30px hoch — das trifft man am Geraet nicht. */
  .htool,
  .iconbtn,
  .vs-arrow,
  .btn {
    min-height: var(--touch);
  }
  /* Das Zaehlfeld ist ein Dreiteiler — mit 44px je Knopf waere es
     132px breit und liesse neben sich keinen Kaufknopf mehr zu.
     36px trifft man noch, 44 waeren hier zu teuer. */
  .qty button {
    width: 36px;
    min-height: 40px;
  }
  .qty input {
    min-height: 40px;
  }
  .qty--sm button {
    width: 32px;
  }
  .qty--sm input {
    width: 40px;
  }
  .btn--sm {
    min-height: 38px;
  }
  .fopt {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  /* Aufklapper und Nebenschalter sind Text — sie bekommen eine
     greifbare Hoehe, ohne optisch zu wachsen. */
  .seg button {
    min-height: 38px;
  }
  .sums-fold,
  .creditline-head,
  .posnote .npt,
  .cart-links .lnk,
  .faq-i > button {
    min-height: 34px;
  }
  .cbline input,
  .checkfield input[type=checkbox],
  .relCb {
    width: 18px;
    height: 18px;
  }
  .recog-pill {
    min-height: 30px;
  }
  .afchip button {
    min-width: 24px;
    min-height: 24px;
  }
}
/* ===========================================================
   1 · Kopfbereich
   Tablet: Logo und Werkzeuge in einer Zeile, Suche darunter.
   Mobil:  Burger, Logo, Werkzeuge; Suche darunter.
   =========================================================== */
@media (max-width: 1180px) {
  .topline-inner {
    min-height: 34px;
    gap: 14px;
  }
  .shophead-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo   tools" "search search";
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .shophead-inner--plain {
    grid-template-areas: "logo tools";
  }
  .logo {
    grid-area: logo;
    justify-self: start;
  }
  .headtools {
    grid-area: tools;
    justify-self: end;
    flex-wrap: nowrap;
  }
  .headsearch {
    grid-area: search;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}
@media (max-width: 759px) {
  /* Topline traegt nur noch die Kundenidentitaet. Kontakt, Hilfe
     und Sprache stehen im Navigationspanel. */
  .topline-inner {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .topline .sp,
  .topline-inner > span:not(.cust) {
    display: none;
  }
  .cust-btn {
    font-size: 11px;
    padding-left: 0;
  }
  .cust-btn > span:first-child {
    display: block;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cust-flyout {
    left: 0;
    min-width: 0;
    width: calc(100vw - 2 * var(--shell-pad));
  }
  .cf-row .k {
    width: 96px;
  }
  .shophead-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burger logo   tools" "search search search";
    column-gap: 8px;
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .shophead-inner--plain {
    grid-template-areas: "burger logo tools";
  }
  .logo {
    gap: 0;
  }
  .logo img {
    width: 104px;
  }
  .logo .appname {
    display: none;
  }
  /* Beschriftungen der Werkzeuge entfallen, Merkliste und Warenkorb
     bleiben als Icon mit Zaehler. Das Konto sitzt im Panel. */
  .headtools {
    gap: 2px;
  }
  .htool {
    padding: 6px 8px;
    justify-content: center;
  }
  .htool > span:not(.ic):not(.cnt) {
    display: none;
  }
  .htool .ic {
    font-size: 21px;
  }
  .htool .cnt {
    top: -1px;
    right: -1px;
  }
  .headtools .htool:last-child {
    display: none;
  }
  /* Ab der Trefferliste ist die Suche nicht mehr das Hauptmotiv der
     Seite. Sie liegt deshalb wie die uebrigen Werkzeuge als Zeichen
     im Kopf und klappt erst auf Tippen auf. Auf der Startseite bleibt
     sie offen — dort ist sie die Seite. */
  .headtools .htool--search {
    display: flex;
  }
  .headsearch {
    display: none;
  }
  html.searchopen .headsearch {
    display: block;
  }
  html.searchopen .htool--search {
    background: var(--blue-tint);
    border-color: #b9d9ec;
    color: var(--blue-dark);
  }
  /* Suchfeld bleibt einzeilig. Platz dafuer schafft der Suchknopf:
     er traegt nur noch die Lupe. Das Wort "Suchen" neben einem Feld
     mit Lupe davor sagt ohnehin nichts Zweites. */
  .searchfield {
    flex-wrap: nowrap;
    padding-right: 0;
  }
  .searchfield input {
    min-height: var(--touch);
    font-size: 16px;
    min-width: 0;
    padding-left: 12px;
  }
  /* Die Lupe im Feld ist auf dieser Breite doppelt: der Suchknopf
     rechts traegt dieselbe. Sie weicht, damit die Eingabe die
     gewonnenen 30 Pixel bekommt. */
  .searchfield .sf-ic {
    display: none;
  }
  .recog {
    padding-right: 6px;
    flex: none;
  }
  .recog-pill {
    font-size: 10.5px;
    padding: 3px 6px;
    gap: 5px;
  }
  .recog-pill .caret {
    display: none;
  }
  .sf-scan,
  .searchfield--hero .sf-scan {
    width: 32px;
  }
  /* Flex, nicht Grid: der Knopf traegt neben dem Zeichen noch seinen
     Text mit Schriftgroesse 0. Im Raster bekaeme der eine eigene
     Zeile und schoebe die Lupe nach oben. */
  .searchfield .sf-go {
    flex: none;
    padding: 0 12px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    line-height: 1;
  }
  /* Statt des Wortes die Lupe aus dem Sprite. Bis T-59 stand hier ein
     ::before mit der Ligatur "search" aus der Icon-Schrift — faellt die
     aus, steht das Wort "search" im Knopf. Das SVG liegt jetzt im Markup
     (header.twig) und wird hier nur sichtbar geschaltet. */
  .searchfield .sf-go .icn {
    display: block;
    width: 22px;
    height: 22px;
  }
  .cust-btn {
    min-height: 34px;
  }
}
/* ===========================================================
   2 · Hauptnavigation als Panel
   Die Markierung stammt aus responsive.js; das Panel ist
   dieselbe .mainnav-inner wie am Desktop, nur anders gesetzt.
   Dadurch bleiben alle Handler in app.js gueltig.
   =========================================================== */
.htool--search {
  display: none;
}

/* Umbruchmarke in der Trefferkarte und im Titel des Suchmoduls —
   beide greifen erst auf dem Handy. */
.rowbreak {
  display: none;
}

.br-m {
  display: none;
}

.navburger {
  display: none;
  grid-area: burger;
  width: var(--touch);
  height: var(--touch);
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  background: #fff;
  color: var(--n7);
  place-items: center;
  cursor: pointer;
}

.navburger .icn {
  width: 24px;
  height: 24px;
}

.navburger .fb {
  font-size: 20px;
  line-height: 1;
}

.panel-hd .x .fb,
.filterbar .fb {
  font-size: 16px;
  line-height: 1;
}

.navscrim {
  position: fixed;
  inset: 0;
  z-index: 390;
  background: rgba(0, 8, 36, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

/* Panelkopf und Panelfuss gibt es nur, solange etwas ein Panel ist —
   am Desktop und auf Tablet bleiben beide aus dem Fluss. */
.panel-extra {
  display: none;
}

.panel-hd {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--n3);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.panel-hd .t {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
}

.panel-hd .x {
  margin-left: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--n3);
  border-radius: var(--radius);
  background: #fff;
  color: var(--n7);
  cursor: pointer;
}

@media (max-width: 759px) {
  .navburger {
    display: grid;
  }
  html.navopen, html.filteropen {
    overflow: hidden;
  }
  html.navopen .navscrim,
  html.filteropen .navscrim {
    opacity: 1;
    visibility: visible;
  }
  .mainnav {
    border-bottom: 0;
  }
  .mainnav-inner {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 400;
    width: min(86vw, 340px);
    flex-direction: column;
    gap: 0;
    padding: 0 0 32px;
    background: #fff;
    box-shadow: var(--shadow-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
  }
  html.navopen .mainnav-inner {
    transform: none;
    visibility: visible;
  }
  .mainnav-inner > .panel-hd {
    display: flex;
  }
  .navitem {
    border-bottom: 1px solid var(--n2);
  }
  .mainnav a,
  .navitem > button {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-bottom: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mainnav > .mainnav-inner > a {
    border-bottom: 1px solid var(--n2);
  }
  .navitem > button .icn {
    margin-left: auto;
    transition: transform 0.15s;
  }
  .navitem.open > button .icn {
    transform: rotate(180deg);
  }
  .mainnav a.active,
  .navitem.active > button {
    border-bottom-color: transparent;
    background: var(--blue-tint);
  }
  /* Flyout wird zum Akkordeon: im Fluss, gestapelt, eingerueckt. */
  .navflyout {
    position: static;
    display: none;
    flex-direction: column;
    gap: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 10px;
    background: var(--n1);
  }
  .navitem.open .navflyout {
    display: flex;
  }
  .navflyout .col {
    min-width: 0;
    padding: 8px 16px 4px;
  }
  .navflyout .ct {
    margin-bottom: 4px;
  }
  .navflyout .col a {
    white-space: normal;
    padding: 10px 0;
    font-size: 14px;
    min-height: 0;
  }
  .mainnav .navtool {
    margin-left: 0;
    padding: 14px 16px;
    font-size: 15px;
    border-top: 1px solid var(--n3);
  }
  /* Was aus der Topline und den Werkzeugen weggefallen ist,
     haengt responsive.js hier unten an. */
  .panel-extra {
    display: block;
    padding: 6px 0 0;
    border-top: 8px solid var(--n1);
  }
  .panel-extra a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--n7);
    border-bottom: 1px solid var(--n2);
  }
}
/* ===========================================================
   3 · Filter als Schublade
   Das <aside> bleibt an seiner Stelle im Dokument — nur seine
   Darstellung wechselt. Alle Filter-Handler in app.js greifen
   damit unveraendert.
   =========================================================== */
.filterbar {
  display: none;
}

.filterbar .cnt {
  font-family: var(--ff-num);
  font-size: 11px;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.drawer-ft {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--n3);
  box-shadow: 0 -4px 16px rgba(0, 8, 36, 0.08);
}

.drawer-ft .btn {
  width: 100%;
  justify-content: center;
  min-height: var(--touch);
}

@media (max-width: 1180px) {
  html.has-filterdrawer .cols > aside.sticky {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 400;
    width: var(--drawer-w);
    max-height: none;
    padding: 0 0 0;
    margin: 0;
    background: var(--n1);
    box-shadow: var(--shadow-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
    display: flex;
    flex-direction: column;
  }
  html.filteropen .cols > aside.sticky {
    transform: none;
    visibility: visible;
  }
  html.has-filterdrawer .cols > aside.sticky > .panel-hd {
    display: flex;
  }
  html.has-filterdrawer .cols > aside.sticky > .drawer-ft {
    display: block;
    margin-top: auto;
  }
  html.has-filterdrawer .cols > aside.sticky > .card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    margin: 0 0 10px;
  }
  /* Der Panelkopf traegt bereits "Filter" — die Ueberschrift der Karte
     wuerde es direkt darunter wiederholen. Sie faellt weg, das
     Zuruecksetzen bleibt. */
  html.has-filterdrawer .cols > aside.sticky > .card.filters > .card-hd h3 {
    display: none;
  }
  html.has-filterdrawer .cols > aside.sticky > .card.filters > .card-hd {
    padding: 8px 16px;
  }
  /* Der Ausloeser sitzt in der Werkzeugzeile der Liste, nicht als
     eigener Streifen darueber: auf dem Tablet steht er dadurch neben
     dem Befund, auf dem Handy neben dem Vergleich. */
  html.has-filterdrawer .filterbar {
    display: flex;
    flex: none;
    align-items: center;
  }
  html.has-filterdrawer .filterbar .btn {
    min-height: 40px;
  }
  /* Sortierung und Seitengroesse in der Schublade. */
  .drawer-sort .card-bd {
    display: grid;
    gap: 10px;
  }
  .drawer-sort label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--n7);
    margin-bottom: 4px;
  }
  .drawer-sort select {
    width: 100%;
    min-height: 40px;
    font: inherit;
    font-size: 13px;
    color: var(--n8);
    background-color: #fff;
    border: 1px solid var(--n4);
    border-radius: var(--radius);
    padding: 8px 10px;
  }
  html.filteropen .navscrim {
    opacity: 1;
    visibility: visible;
  }
  html.filteropen {
    overflow: hidden;
  }
}
/* ===========================================================
   4 · Trefferliste
   Tablet: Preis und Kaufzeile bleiben rechts, Verfuegbarkeit
           rutscht unter die Kennwerte.
   Mobil:  eine Karte — Bild und Text oben, darunter
           Verfuegbarkeit, darunter Preis und Kaufzeile.
   =========================================================== */
/* Fuenf Angaben in einem Raster, das vier oder zwei Spalten breit ist,
   lassen immer eine Zelle leer — und die zeigt den grauen
   Rasterhintergrund. Zwei Spalten und eine durchgehende letzte Zeile
   gehen glatt auf. Gilt unter 1180, darueber passen alle fuenf
   nebeneinander. */
@media (max-width: 1180px) {
  .confirm-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .confirm-kv > div:last-child {
    grid-column: 1/-1;
  }
}
@media (min-width: 760px) and (max-width: 1180px) {
  /* Ergaenzende Artikel und Werkzeuge haben auf dem Tablet Platz
     nebeneinander — styles.css klappt sie ab 1180 pauschal auf eine
     Spalte, das ist erst auf dem Handy richtig. */
  .rel-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  /* Werkzeuge im Warenkorb in eine Zeile: Import und Export treten
     dafuer auf ihr Zeichen zurueck, die Schnellerfassung behaelt ihre
     Beschriftung — sie ist im Pitch der Punkt. */
  .cart-toolbar {
    flex-wrap: nowrap;
  }
  .cart-toolbar button.btn:nth-last-of-type(-n+2) {
    flex: none;
    width: 44px;
    padding: 0;
    font-size: 0;
    gap: 0;
  }
  .cart-toolbar button.btn:nth-last-of-type(-n+2) .icn {
    width: 20px;
    height: 20px;
  }
  /* Eigene Zeile fuer den Nachfolger-Hinweis, gesetzt in
     responsive.js. Sie traegt den Farbton der Position weiter. */
  .ctable tr.swaprow > td {
    padding: 0 10px 12px 44px;
    border-bottom: 1px solid var(--n2);
    background: var(--yellow-tint);
  }
  .ctable tr.swaprow .swap-inline {
    margin-top: 0;
  }
  .hit-main {
    grid-template-columns: 20px 76px minmax(0, 1fr) 210px;
    grid-template-areas: "pick img info  price" "pick img avail price";
    gap: 8px 16px;
    align-items: start;
  }
  .hit-pick {
    grid-area: pick;
  }
  .hit-img {
    grid-area: img;
  }
  .hit-info {
    grid-area: info;
  }
  .hit-avail {
    grid-area: avail;
    text-align: left;
    padding-top: 8px;
  }
  .hit-price {
    grid-area: price;
    text-align: right;
  }
  .hit-img {
    width: 76px;
    height: 76px;
  }
  .buyrow {
    justify-content: flex-end;
  }
}
@media (max-width: 759px) {
  /* Sortierung und Seitengroesse sind Filter — sie stehen in der
     Schublade, nicht ueber der Liste (verschoben in responsive.js).
     Oben bleiben Befund, Filter und Vergleich. */
  .list-toolbar {
    padding: 12px 14px;
  }
  .lt-row {
    gap: 10px;
  }
  .list-toolbar .sp {
    display: none;
  }
  .list-toolbar .hits {
    flex: 1 1 100%;
    order: -1;
  }
  .list-toolbar .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
  }
  .active-filters {
    gap: 6px;
    margin-bottom: 12px;
  }
  /* Die Trefferkarte ist eine umbrechende Flexzeile: Verfuegbarkeit
     und Preis teilen sich eine Zeile, die Kaufzeile bekommt die
     volle Breite. Als Raster ginge das nicht — die Spalten aus der
     Kopfzeile (20px Haken, 56px Motiv) waeren auch fuer die
     Verfuegbarkeit verbindlich.
     Kein Spaltenabstand: dadurch stossen die Oberkanten von
     Verfuegbarkeit und Preis aneinander und ergeben eine
     durchgehende Trennlinie statt zweier Teilstriche mit Loch. */
  .hit-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 0;
    row-gap: 0;
    padding: 14px;
  }
  .hit-pick {
    flex: none;
    width: 20px;
    margin-right: 12px;
  }
  .hit-img {
    flex: none;
    margin-right: 12px;
  }
  .hit-info {
    flex: 1 1 120px;
    min-width: 0;
  }
  /* Der Umbruch vor der Verfuegbarkeit wird gesetzt, nicht erhofft:
     ueber eine Flex-Basis haenge er davon ab, wie breit der Preis
     gerade ausfaellt — bei langen Betraegen rutschte er weg. */
  .hit-main > .rowbreak {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }
  /* Basis 0, nicht auto: Flex bricht eine Zeile anhand der
     Inhaltsbreiten um, bevor es schrumpft. Mit auto waeren
     Verfuegbarkeit und Preis zusammen breiter als die Karte und
     landeten untereinander — mit Basis 0 teilen sie sich die Zeile
     und die Verfuegbarkeit nimmt, was der Preis uebrig laesst. */
  .hit-avail {
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    margin-top: 10px;
    padding: 10px 10px 0 0;
    border-top: 1px solid var(--n2);
  }
  /* display: contents loest die Preisspalte auf — Preis und Kaufzeile
     werden dadurch selbst zu Elementen der Karte und koennen getrennt
     platziert werden. */
  .hit-price {
    display: contents;
  }
  /* Deckel auf der Preisspalte: beim ausgelaufenen Artikel steht dort
     statt eines Betrags ein ganzer Satz. Ohne Grenze nimmt der sich
     die Zeile und drueckt die Verfuegbarkeit auf 58 Pixel — deren
     Text lief dann darueber. */
  .hit-price > div:first-child {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 55%;
    text-align: right;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--n2);
  }
  .hit-avail .av {
    min-width: 0;
    overflow-wrap: break-word;
  }
  /* Der Betrag ist der Anker und bricht nicht um; die Zusaetze
     darunter duerfen umbrechen, sonst schoebe der Preisblock die
     Verfuegbarkeit von der Zeile. */
  .hit-price .price {
    text-align: right;
  }
  .hit-price .price .main {
    font-size: 19px;
    white-space: nowrap;
  }
  .buyrow {
    flex: 1 1 100%;
    margin-top: 12px;
    padding-top: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    align-items: stretch;
  }
  .buyrow .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Das Zaehlfeld nimmt die Hoehe des Kaufknopfs an, statt sie zu
     ueberragen: die eigenen Mindesthoehen weichen, die Dehnung der
     Zeile setzt die Hoehe. */
  .buyrow .qty, .buyline .qty {
    flex: none;
    align-self: stretch;
  }
  .buyrow .qty button, .buyrow .qty input,
  .buyline .qty button, .buyline .qty input {
    min-height: 0;
  }
  /* Das Motivkaestchen ist am Desktop 80px fest breit — es wuerde sonst
     aus der schmaleren Rasterspalte in den Text laufen. */
  .hit-img {
    width: 56px;
    height: 56px;
  }
  .hit-info h3 {
    font-size: 14.5px;
  }
  /* Kennwerte brechen zwischen den Werten um, nicht mitten in
     einem Wert: "Ø 83,00 mm" bleibt zusammen. */
  /* Kennwerte als Flexzeile: dadurch bricht sie zwischen den Werten um
     und nicht mitten in einem — "Ø 83,00 mm" bleibt zusammen. */
  .hit-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    font-size: 12px;
  }
  .hit-meta .sep {
    margin: 0;
  }
  .hit-acts {
    gap: 14px;
    padding-top: 8px;
    flex-wrap: wrap;
  }
  /* Nebenschalter sind Text, keine Flaechen — sie bekommen trotzdem
     eine greifbare Hoehe, ohne optisch zu wachsen. */
  .hit-acts .lnk,
  .af-clear,
  .av .lnk {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  /* Die Vergleichs-Ankreuzflaeche ist 15px gross — als Trefferflaeche
     zaehlt das umgebende Label. */
  .hit-pick {
    padding: 0;
  }
  .hit-pick input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
  .hit-details {
    padding: 14px;
  }
  .hit-details .dgrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hit-foot {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hit-group {
    padding-left: 2px;
  }
  /* Fahrzeugkacheln: schmaler, damit die zweite Kachel anschneidet
     und das Wischen erkennbar wird. */
  .vehslider {
    padding: 13px 14px 14px;
  }
  .vs-hd {
    flex-wrap: wrap;
    gap: 10px;
  }
  .vs-nav {
    margin-left: auto;
  }
  .vtile {
    flex-basis: 158px;
  }
}
/* ===========================================================
   5 · Detailseite
   =========================================================== */
@media (max-width: 1180px) {
  /* Galerie kippt: das Hauptbild oben, die Vorschauen als wischbare
     Zeile darunter. Die Spalte links haette sonst 58px von der ohnehin
     knappen Breite genommen. */
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .gal-main {
    order: 1;
    aspect-ratio: 4/3;
  }
  .gal-thumbs {
    order: 2;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .gal-thumbs .t {
    flex: none;
    scroll-snap-align: start;
  }
}
@media (max-width: 759px) {
  /* Reiterleiste wischt statt umzubrechen — fuenf Reiter untereinander
     waeren eine halbe Bildschirmhoehe, bevor der Inhalt beginnt. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs button {
    flex: none;
    white-space: nowrap;
    padding: 12px 13px;
  }
  /* Die Reiterkarten liegen uebereinander im selben Rasterfeld. Ohne
     min-width: 0 spannt die breiteste von ihnen alle anderen auf. */
  .tabbody {
    min-width: 0;
  }
  .tabpane {
    min-width: 0;
    overflow-x: auto;
  }
  /* Technische Daten: zwei Tabellen nebeneinander werden eine. */
  .tech-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .techtable th {
    width: 52%;
  }
  /* Nachschlagetabellen mit vielen Spalten bleiben Tabellen und
     scrollen waagrecht — als Kartenliste verlieren sie den Vergleich
     zwischen den Zeilen, der ihr Zweck ist. Dann aber richtig: eine
     Zeile je Datensatz. Umbrechende Zellen ("Mercedes-" / "Benz")
     zerfasern das Raster und machen die Tabelle unlesbar, ohne
     Scrollweg zu sparen. */
  .famtable {
    min-width: 540px;
  }
  .famtable th, .famtable td {
    white-space: nowrap;
  }
  /* Auf 360px waere der grosse Betrag neben der Verfuegbarkeit zu
     breit — er tritt eine Stufe zurueck, die Aufteilung bleibt. */
  .bb-buy .bg-info > #priceBlock .pr {
    font-size: 26px;
  }
  .pdp-title .nos {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .buybox .pdp-title h1,
  .pdp-title h1 {
    font-size: 19px;
  }
  .chip {
    min-height: 40px;
  }
  /* Menge und Kaufknopf bleiben nebeneinander — wie am Desktop. */
  .buyline {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .buyline .qty {
    flex: none;
  }
  /* Die Beschriftung darf umbrechen. Sonst bestimmt "In den Warenkorb"
     als eine unteilbare Zeile die Mindestbreite des ganzen Kaufblocks
     — unter 360px schob das die Seite nach rechts hinaus. */
  .buyline .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .buyfoot {
    flex-wrap: wrap;
    gap: 8px;
  }
  .buyfoot .buyicons {
    margin-left: 0;
  }
}
/* ===========================================================
   6 · Warenkorb — Tabelle wird Kartenliste
   Acht feste Spalten sind auf 360px nicht als Tabelle zu retten.
   Jede Zeile wird eine Karte mit derselben Information in vier
   Zeilen: Kopf, Artikel, Menge und Verfuegbarkeit, Preise.
   =========================================================== */
/* Zwischen 760 und 1180 bleibt die Tabelle eine Tabelle — sie passt
   dort, sobald die am Desktop fest gesetzten Spaltenbreiten nachgeben.
   Bei 768px sind es sonst 769px Mindestbreite, also genau einen Pixel
   zu viel. */
@media (min-width: 760px) and (max-width: 1180px) {
  .ctable .c-art {
    min-width: 170px;
  }
  .ctable .c-qty {
    width: 96px;
  }
  .ctable .c-av {
    width: auto;
    min-width: 104px;
  }
  .ctable .c-up {
    width: 88px;
  }
  .ctable .c-tot {
    width: 96px;
  }
  .ctable th, .ctable td {
    padding-left: 7px;
    padding-right: 7px;
  }
}
@media (max-width: 759px) {
  /* Alle fuenf Werkzeuge als Zeichen in einer Zeile. Die Auswahlzeile
     darueber bekommt eine eigene Zeile — der Umbruch wird ueber die
     Reihenfolge erzwungen, damit der Trenner nicht mitten zwischen
     den Schaltern landet. */
  .cart-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .cart-toolbar .cbline {
    order: 1;
    flex: none;
  }
  .cart-toolbar .selinfo {
    order: 2;
    flex: 1 1 auto;
    font-size: 12px;
  }
  .cart-toolbar .sp {
    order: 3;
    display: block;
    flex: 0 0 100%;
    height: 0;
    margin: 0;
  }
  .cart-toolbar #bulkDel {
    order: 4;
  }
  .cart-toolbar #bulkList {
    order: 5;
  }
  .cart-toolbar button.btn:nth-last-of-type(-n+3) {
    order: 6;
  }
  .cart-toolbar button.btn {
    flex: none;
    width: 44px;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    gap: 0;
  }
  .cart-toolbar button.btn .icn {
    width: 20px;
    height: 20px;
  }
  /* Entfernen und Auf Merkliste trugen ihr Zeichen bis T-59 als
     ::before-Ligatur aus der Icon-Schrift. Die ist weg; die Warenkorb-
     Werkzeugleiste ist noch nicht gebaut (kein .cart-toolbar im Markup).
     Wer sie baut, setzt das Symbol ins Markup:
       {% include atom('ms-icon') with { data: { name: 'trash-2' } } only %}
       {% include atom('ms-icon') with { data: { name: 'heart' } } only %}
     trash-2 und heart liegen dafuer bereits im Sprite. */
  .viewbar {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  /* Der Hinweis erklaert eine Voreinstellung, die man am Geraet ohnehin
     sieht — er kostet hier mehr Platz, als er traegt. */
  .viewbar .vb-hint {
    display: none;
  }
  .ctable,
  .ctable tbody,
  .ctable tr,
  .ctable td {
    display: block;
    width: auto;
  }
  .ctable thead {
    display: none;
  }
  /* Die Karte ist eine umbrechende Flexzeile, kein Raster: die
     Spaltenbreiten der Tabelle (168px Verfuegbarkeit, 112px Summe)
     wuerden als Rasterspuren weiterwirken und alles, was rechts
     stehen soll, in der Zeilenmitte festhalten. */
  .ctable tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    border: 1px solid var(--n3);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .ctable tbody tr.is-sel {
    background: var(--blue-tint);
    border-color: #b9d9ec;
  }
  .ctable tbody tr.is-swap {
    background: var(--yellow-tint);
    border-color: #f0dfa0;
  }
  .ctable tbody tr:hover {
    background: #fff;
  }
  .ctable tbody tr.is-sel:hover {
    background: var(--blue-tint);
  }
  .ctable tbody tr.is-swap:hover {
    background: var(--yellow-tint);
  }
  /* Die festen Spaltenbreiten aus styles.css muessen weichen, sonst
     sitzt jede Zelle in ihrem alten Korsett. */
  .ctable tbody tr td {
    padding: 0;
    border-bottom: 0;
    width: auto;
    min-width: 0;
  }
  /* Der Wagen liegt zwischen den Positionen frei — sonst steht die
     Liste als ein weisser Block da und die Karten verlieren ihre
     Kante. */
  .ctable {
    background: transparent;
  }
  .ctable tbody tr .c-chk {
    order: 1;
    flex: none;
  }
  .ctable tbody tr .c-pos {
    order: 2;
    flex: 1 1 auto;
    font-size: 12px;
    white-space: nowrap;
  }
  .ctable tbody tr .c-pos::before {
    content: "Position ";
  }
  .ctable tbody tr .c-act {
    order: 3;
    flex: none;
    margin-left: auto;
  }
  .ctable tbody tr .c-art {
    order: 4;
    flex: 1 1 100%;
    margin-top: 2px;
  }
  /* Verfuegbarkeit links, Menge rechts — die Menge ist das einzige
     Bedienelement der Zeile und steht dort, wo der Daumen ist. */
  .ctable tbody tr .c-av {
    order: 5;
    flex: 1 1 auto;
    text-align: left;
  }
  .ctable tbody tr .c-qty {
    order: 6;
    flex: none;
    margin-left: auto;
  }
  .ctable tbody tr .c-up {
    order: 7;
    flex: 1 1 auto;
    text-align: left;
  }
  .ctable tbody tr .c-tot {
    order: 8;
    flex: none;
    margin-left: auto;
    text-align: right;
    font-size: 15px;
  }
  /* Eine durchgehende Trennlinie zwischen Ware und Geld, ueber die
     volle Kartenbreite. Zwei Teilstriche an den Preiszellen ergaeben
     eine Linie mit Loch in der Mitte. */
  .ctable tbody tr .c-art::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--n2);
    margin: 12px -14px 2px;
  }
  /* Ohne Spaltenkopf braucht jeder Wert seine eigene Beschriftung. */
  .ctable tbody tr .c-up::before,
  .ctable tbody tr .c-tot::before {
    font-family: var(--ff);
    font-weight: 400;
    color: var(--n6);
    font-size: 11.5px;
    margin-right: 6px;
  }
  .ctable tbody tr .c-up::before {
    content: "Einzelpreis";
  }
  .ctable tbody tr .c-tot::before {
    content: "Summe";
  }
  .ctable tbody tr .c-up, .ctable tbody tr .c-tot {
    white-space: nowrap;
    padding-top: 4px;
  }
  .ctable tbody tr .c-chk input {
    width: 20px;
    height: 20px;
  }
  .ctable tbody tr .del {
    min-width: 38px;
    min-height: 38px;
  }
  .ctable tbody tr .posnote {
    margin-top: 6px;
  }
  /* Gruppenkopf bleibt eine durchgehende Zeile. */
  .ctable tbody tr.grp {
    display: block;
    padding: 0;
    margin: 14px 0 8px;
    border: 0;
    background: none;
  }
  .ctable tbody tr.grp td {
    display: block;
  }
  .ctable tbody tr.grp .c-art::after {
    content: none;
  }
  .swap-inline {
    flex: 1 1 100%;
  }
}
/* ===========================================================
   7 · Bestellung und Bestaetigung
   =========================================================== */
@media (max-width: 759px) {
  .optcards {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Kondensierte Positionsliste: dieselbe Ueberlegung wie bei den
     Nachschlagetabellen — sie bleibt Tabelle und scrollt. Der Wagen
     davor traegt bereits die Kartenansicht. */
  .condensed {
    min-width: 560px;
  }
  .card-bd--flush {
    overflow-x: auto;
  }
  .pl-step {
    grid-template-columns: 26px 1fr;
    gap: 10px;
  }
  .confirm-hero {
    padding: 20px 16px;
  }
  .card-hd .aside {
    text-align: right;
  }
}
/* Fixierte Kaufzeile im Warenkorb. Die Summenkarte liegt auf Mobil
   unter 42 Positionen — ohne diese Zeile muesste man an allen vorbei,
   nur um weiterzukommen. Inhalt und Ziel stammen aus der Karte selbst,
   gebaut in responsive.js. */
.stickybuy {
  display: none;
}

@media (max-width: 1180px) {
  .stickybuy {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 10px var(--shell-pad);
    background: #fff;
    border-top: 1px solid var(--n3);
    box-shadow: 0 -4px 16px rgba(0, 8, 36, 0.1);
  }
  /* Auf dem Tablet liegt die Summenkarte ebenfalls unter 42 Positionen
     — die Zeile hat dort denselben Zweck, nur mehr Platz. */
  .stickybuy .sb-sum {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .stickybuy .sb-sum .k {
    font-size: 11px;
    color: var(--n6);
  }
  .stickybuy .sb-sum .v {
    font-family: var(--ff-num);
    font-size: 16px;
    font-weight: 700;
    color: var(--n8);
    white-space: nowrap;
  }
  .stickybuy .btn {
    margin-left: auto;
    flex: none;
    min-height: var(--touch);
  }
  html.has-stickybuy body {
    padding-bottom: 76px;
  }
}
/* ===========================================================
   8 · Flaechige Bausteine, die auf Mobil umbrechen
   Startseite, Kacheln, Contentmodul.
   =========================================================== */
@media (max-width: 759px) {
  .next-grid--4,
  .teaser-grid,
  .rel-grid,
  .homerow {
    grid-template-columns: 1fr;
  }
  .herostage {
    padding: 16px 14px 22px;
  }
  /* Ohne gesetzten Umbruch steht "Motor." allein in der zweiten Zeile. */
  .br-m {
    display: inline;
  }
  .hs-h1 .br-m + * {
    white-space: normal;
  }
  .msg-strip-inner {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }
  .msg-strip .reqs {
    margin-left: 0;
  }
  /* Modale Fenster werden ebenfalls zu Blaettern am unteren Rand.
     Am Desktop sind sie 640 bzw. 860 Pixel breit und stehen mit 60px
     Luft oben — auf 360px waere davon nur der linke Ausschnitt zu
     sehen. Der Inhalt scrollt in sich, breite Tabellen darin
     zusaetzlich waagrecht. */
  .backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: none;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-hd {
    padding: 14px 16px;
    flex: none;
  }
  .modal-hd h3 {
    font-size: 14.5px;
  }
  .modal-hd .x {
    min-width: 38px;
    min-height: 38px;
  }
  .modal-bd {
    padding: 14px 16px;
    flex: 1 1 auto;
    overflow: auto;
  }
  .modal-ft {
    padding: 12px 16px;
    flex: none;
  }
  .modal-ft .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .modal .famtable,
  .modal .techtable {
    min-width: 480px;
  }
  /* Zahlungsart: Kennzeichnung unter die Angabe statt daneben —
     nebeneinander bleiben fuer beide je drei Zeilen uebrig. */
  .paybox {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
  }
  .paybox .pt {
    margin-top: 3px;
  }
  /* Punkt und Angabe bleiben zusammen in Zeile eins. */
  .paybox > div {
    flex: 1 1 0%;
    min-width: 0;
  }
  /* Das margin-left: auto steht im Markup als Attribut und ist von
     aussen nur mit !important zu erreichen. */
  .paybox > .tag {
    flex: 1 1 100%;
    margin-left: 0 !important;
  }
  /* Flyouts am Ausloeser werden zu Blaettern am unteren Rand:
     ein Popover mit 296px Mindestbreite trifft auf 360px sonst
     immer einen Rand. */
  .pop {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 -12px 40px rgba(0, 8, 36, 0.22);
  }
}
/* ===========================================================
   Motorservice OnlineShop — Grundschicht (T-60, Clean Cut)

   Warum es diese Datei gibt: `basic-reset` setzt `font: inherit`
   auf `*`. Damit verlieren <h1>…<h6>, <b>, <em> und <small> ihre
   Browser-Vorgaben — bis T-60 hat Sprykers `basic-typography` sie
   danach wieder gesetzt. Die Kern-Typografie ist jetzt raus (eine
   CSS-Quelle, siehe .claude/rules/twig-override.md), also stellt
   diese Datei genau das wieder her, was der Reset abgeraeumt hat —
   in den Werten aus Figma statt in Sprykers.

   Maße: docs/design-specs/figma-tokens.json, font.styles
   (heading/h1 48/56, h2 36/44, h3 30/36, h4 20/28, h5 16/24,
   label/subline 14/20, caption 12/16; mobil h1 32/40, h2 24/32).
   Der Umbruchpunkt 759px ist der Mobilwert des Design-Systems.

   Was hier NICHT hingehoert: Layout. Raster und Abstaende kommen
   aus _ms-design-system.scss und den Komponenten.
   =========================================================== */
/* Gilt fuer alle Ueberschriften: Bold, Textfarbe aus den Tokens.
   Kontextregeln des Design-Systems (.card-hd h3, .pdp-title h1 …)
   haben hoehere Spezifitaet und bleiben davon unberuehrt. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 700;
}

h1 {
  font-size: 48px;
  line-height: 56px;
}

h2 {
  font-size: 36px;
  line-height: 44px;
}

h3 {
  font-size: 30px;
  line-height: 36px;
}

h4 {
  font-size: 20px;
  line-height: 28px;
}

h5 {
  font-size: 16px;
  line-height: 24px;
}

h6 {
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 759px) {
  h1 {
    font-size: 32px;
    line-height: 40px;
  }
  h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
b,
strong {
  font-weight: 700;
}

i,
em,
cite {
  font-style: italic;
}

small {
  font-size: 12px;
  line-height: 16px;
}

/* Trennlinie: 1 px, keine Schatten — Design Manual S. 21 "Linie". */
hr {
  border-bottom: 1px solid var(--grey-200);
  margin: 12px 0;
}

/* Inhaltsbreite. Bis T-60 kam sie als `.container` aus Sprykers
   `basic-grid` (max-width 1200, 15px Rand) — der Kopf des Shops lief
   derweil auf --shell (1360). Der Prototyp kennt dafuer `.shell`;
   `.ms-shell` ist dieselbe Breitenbegrenzung ohne dessen vertikale
   Abstaende, damit sie in jedem Band sitzen kann (Kopfband der Seite,
   Inhalt) und Kopf, Inhalt und Fuss endlich buendig stehen.
   Offen bleibt Figmas Gutter-Modell 80/1568 — das ist eine Aenderung
   an --shell selbst und traegt Kopf und Fuss mit. */
.ms-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/collapsible-list/styles.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.collapsible-list__button {
  background-color: rgba(255, 255, 255, 0);
  color: #08493d;
  cursor: pointer;
}
.collapsible-list__button:hover {
  text-decoration: underline;
}
.collapsible-list__button::after {
  content: attr(data-show);
}
.collapsible-list__button--shown::after {
  content: attr(data-hide);
}
.collapsible-list__button-content {
  display: none;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/sort/sort.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.sort {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .sort {
    margin-bottom: 1.25rem;
  }
}
.sort__col {
  font-size: 0.875rem;
}
@media only screen and (min-width: 768px) {
  .sort__col:not(:last-child) {
    padding-right: 0.5rem;
  }
}
.sort__col--counter {
  padding-right: 0.625rem;
  font-weight: 500;
  font-size: 0.875rem;
}
@media only screen and (min-width: 550px) {
  .sort__col--counter {
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 768px) {
  .sort__col--counter {
    padding-bottom: 0.625rem;
  }
}
@media only screen and (min-width: 1024px) {
  .sort__col--counter {
    padding-bottom: 0;
  }
}
.sort__col--filters {
  width: 100%;
  margin: 0 -0.3125rem;
}
@media only screen and (min-width: 768px) {
  .sort__col--filters {
    margin: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .sort__col--filters {
    width: auto;
  }
}
.sort__col--select {
  padding: 0 0.3125rem;
}
@media only screen and (min-width: 768px) {
  .sort__col--select {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .sort__col--select:not(:last-child) {
    padding-right: 1.875rem;
  }
}
.sort__filter-grid {
  margin: 0 -0.3125rem;
}
@media only screen and (min-width: 768px) {
  .sort__filter-grid {
    margin: 0;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/suggestion-product/suggestion-product.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.suggestion-product {
  padding-bottom: 0.625rem;
}
.suggestion-product__title {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.0125rem;
  padding-bottom: 1rem;
  padding-top: 1.625rem;
  color: #4c4c4c;
}
.suggestion-product__link {
  transition: color 250ms ease-in-out;
  display: flex;
  align-items: center;
  color: #4c4c4c;
}
.suggestion-product__link:hover {
  color: #333;
}
.suggestion-product__thumbnail {
  min-width: 3.25rem;
  width: 3.25rem;
}
@media only screen and (min-width: 768px) {
  .suggestion-product__thumbnail {
    min-width: 2.625rem;
    width: 2.625rem;
  }
}
.suggestion-product__name {
  flex-grow: 1;
  padding-left: 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 0.875rem;
  letter-spacing: 0.00625rem;
}
@media only screen and (min-width: 768px) {
  .suggestion-product__name {
    font-size: 0.8125rem;
  }
}
.suggestion-product__price {
  display: block;
  padding-top: 3px;
}
.suggestion-product__price .price__amount {
  color: #8f8f8f;
  font-size: 0.8125rem;
  font-weight: 700;
}
.suggestion-product__price .price__amount--alt {
  color: #e01a00;
}
.suggestion-product__price .price__amount--original {
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: line-through;
}
.suggestion-product__price .price__mode {
  display: none;
}
@media only screen and (min-width: 768px) {
  .suggestion-product__price .price__mode {
    display: block;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/organisms/filter-section/filter-section.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.filter-section {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.875rem 1.25rem 3.625rem;
  background: #fff;
  z-index: 1161;
}
@media only screen and (min-width: 768px) {
  .filter-section {
    position: static;
    padding: 0;
    background: none;
    margin: 2rem 0 1.5rem;
  }
}
.filter-section__close {
  position: absolute;
  right: 1.25rem;
  top: 1.0625rem;
  color: #000;
  background: none;
}
.filter-section__title {
  padding: 0 1.0625rem 0.75rem;
  font-size: 1.125rem;
  line-height: 1.67;
  text-align: center;
}
.filter-section__sorting {
  padding-bottom: 0.625rem;
}
.filter-section__holder {
  height: calc(100% - 5.75rem);
  border-top: 1px solid #dce0e5;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .filter-section__holder {
    height: auto;
    border: none;
    overflow: visible;
  }
}
.filter-section__item {
  border: 1px solid #dce0e5;
  border-top: none;
  padding: 1.125rem 1.25rem;
}
@media only screen and (min-width: 768px) {
  .filter-section__item {
    border-top: 1px solid #dce0e5;
    border-bottom: none;
  }
  .filter-section__item:last-of-type {
    border-bottom: 1px solid #dce0e5;
  }
}
@media only screen and (min-width: 768px) {
  .filter-section__item--hollow {
    border: none;
    padding: 0;
    margin-bottom: 2.5rem;
  }
}
.filter-section__item-title {
  color: #333;
  font: 700 0.8125rem/1.0625rem "DIN Pro", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.023125rem;
}
@media only screen and (min-width: 768px) {
  .filter-section__item-title {
    font-size: 0.75rem;
    line-height: 0.9375rem;
  }
}
.filter-section__item-content {
  margin-top: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .filter-section__item-content--hollow {
    margin-top: 0;
  }
}
.filter-section__button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .filter-section__button {
    position: static;
    margin-top: 1.25rem;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    border-radius: 0.125rem;
  }
}
.filter-section--sub-categories-grid {
  position: relative;
  background: none;
  z-index: 1;
  padding: 1.25rem 0 1.875rem;
}
@media only screen and (min-width: 768px) {
  .filter-section--sub-categories-grid {
    position: static;
    padding: 0;
    background: none;
    margin-top: 2.1875rem;
  }
}
.filter-section--sub-categories-grid .filter-section__item {
  border-top: 1px solid #dce0e5;
}
@media only screen and (min-width: 768px) {
  .filter-section--sub-categories-grid .filter-section__item--hollow {
    border-top: none;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/badge/badge.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.badge {
  font-size: 0.875rem;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.badge--hollow {
  border: 1px solid #dadada;
  background: none;
  color: #4c4c4c;
}
.badge--success {
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.badge--warning {
  background-color: rgb(255, 214.8958333333, 139.5);
  color: rgb(165, 107.7083333333, 0);
}
.badge--alert {
  background-color: rgb(255, 159.9776785714, 147.5);
  color: rgb(173, 20.0803571429, 0);
}
.badge {
  border-radius: 2px;
  font-size: 0.6875rem;
  line-height: normal;
  font-weight: 700;
  letter-spacing: 0.025rem;
  color: #fff;
  background-color: #dce0e5;
}
.badge--shopping-list, .badge--multi-cart {
  display: inline-block;
  color: #4c4c4c;
  padding: 0.25rem 0.3125rem;
  margin-right: 0.5625rem;
  vertical-align: middle;
  min-width: 3.25rem;
}
@media only screen and (min-width: 768px) {
  .badge--shopping-list, .badge--multi-cart {
    padding-left: 0.5625rem;
    padding-right: 0.5625rem;
    min-width: 4rem;
  }
}
.badge--title {
  background-color: #8f8f8f;
  text-transform: uppercase;
}
.badge--access {
  color: #fff;
  background-color: #08493d;
  text-transform: uppercase;
}
.badge--summary {
  text-transform: uppercase;
  letter-spacing: 0.0125rem;
  padding: 0.3125rem 0.5rem;
}
.badge--counter {
  background-color: rgba(178, 178, 178, 0.3);
  border-radius: 2px;
  font-size: 0.6875rem;
  line-height: normal;
  color: #4c4c4c;
  padding: 0.3125rem 0.5rem;
}
.badge--order {
  background-color: #e7eaee;
  color: #000;
  font-size: 0.75rem;
  letter-spacing: 0.009375rem;
  padding: 0.125rem 0.625rem;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/box/box.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.box {
  background-color: #f6f6f6;
  border: 0 none;
  padding: 1.6875rem 1.25rem 1.875rem;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .box {
    padding: 2rem;
  }
}
.box--small {
  padding: 1rem 2rem;
}
.box--smaller {
  padding: 1rem 1.25rem;
}
.box--medium {
  margin: 0 -0.9375rem 0.9375rem;
  padding: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .box--medium {
    margin: 0 0 1.875rem;
    padding: 1.6875rem 1.875rem 1.875rem;
  }
}
.box__separator {
  border: none;
  border-bottom: 0.0625rem solid #dce0e5;
  margin: 0.9375rem -1.25rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/button/button.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.button {
  transition: color 250ms ease-in-out, border-color 250ms ease-in-out, background-color 250ms ease-in-out;
  background-color: #08493d;
  border: solid 1px #08493d;
  border-radius: 2px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  display: inline-block;
  padding: 0.625rem 1.875rem;
  text-align: center;
  cursor: pointer;
}
.button:hover, .button:focus {
  background-color: rgb(2.962962963, 27.037037037, 22.5925925926);
  border-color: rgb(2.962962963, 27.037037037, 22.5925925926);
  color: #fff;
  text-decoration: none;
}
.button--hollow {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #08493d;
  color: #08493d;
}
.button--hollow:hover, .button--hollow:focus {
  border-color: #08493d;
  color: #fff;
  background-color: #08493d;
}
.button--hollow-icon {
  transition: color 250ms ease-in-out;
  padding: 0.25rem 0.5rem;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  color: #08493d;
}
.button--hollow-icon:hover, .button--hollow-icon:focus {
  background-color: rgba(255, 255, 255, 0);
  color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
}
.button--hollow-icon-small {
  transition: color 250ms ease-in-out;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 0.75rem;
  color: #4c4c4c;
  line-height: 0.9;
  padding: 0.3125rem 0.625rem;
  margin: 0 0.5rem;
}
.button--hollow-icon-small:hover, .button--hollow-icon-small:focus {
  background-color: rgba(255, 255, 255, 0);
  color: #08493d;
}
.button--hollow-second {
  color: #fff;
  border-color: #fff;
}
.button--hollow-second:hover, .button--hollow-second:focus {
  color: rgb(229.5, 229.5, 229.5);
  background-color: rgba(255, 255, 255, 0);
  border-color: rgb(229.5, 229.5, 229.5);
}
.button--hollow-alternative {
  color: #8f8f8f;
  border-color: #b2b2b2;
}
.button--hollow-alternative:hover, .button--hollow-alternative:focus {
  border-color: #8f8f8f;
  color: #fff;
  background-color: #8f8f8f;
}
.button--hollow-active {
  background: rgba(8, 73, 61, 0.15);
}
.button--hollow-active:hover, .button--hollow-active:focus {
  border-color: #08493d;
  color: #08493d;
  background: rgba(8, 73, 61, 0.15);
}
.button--alternative {
  background-color: #e01a00;
  border-color: #e01a00;
  color: #fff;
}
.button--alternative:hover, .button--alternative:focus {
  background-color: rgb(173, 20.0803571429, 0);
  border-color: rgb(173, 20.0803571429, 0);
}
.button--small-space {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.button--small {
  font-size: 0.8125rem;
  padding: 0.375rem 1.25rem;
}
.button--small-on-mobile {
  font-size: 0.8125rem;
  padding: 0.375rem 1.25rem;
}
@media only screen and (min-width: 768px) {
  .button--small-on-mobile {
    font-size: 0.875rem;
    padding: 0.625rem 1.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .button--small-on-mobile {
    padding: 0.625rem 1.875rem;
  }
}
.button--medium {
  font-size: 0.875rem;
  line-height: normal;
  padding: 0.625rem 1.875rem;
}
@media only screen and (min-width: 768px) {
  .button--medium {
    font-size: 1rem;
    line-height: 1.25rem;
    padding: 0.9375rem 1.6875rem;
  }
}
.button--big {
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 0.9375rem 2rem;
}
@media only screen and (min-width: 768px) {
  .button--big {
    padding-left: 1.6875rem;
    padding-right: 1.6875rem;
  }
}
.button--bigger {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.button--form {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.button--tight {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.button--mobile-tight {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .button--mobile-tight {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
.button--expand {
  width: 100%;
}
@media only screen and (max-width: 549px) {
  .button--expand-sm-only {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .button--expand-sm-lg {
    width: 100%;
  }
}
.button--checkout {
  min-width: 12.5rem;
}
.button--edit, .button--back {
  transition: color 250ms ease-in-out;
  color: #333;
}
.button--edit:hover, .button--edit:focus, .button--back:hover, .button--back:focus {
  color: #b2b2b2;
}
.button--back {
  font-weight: 400;
}
.button--second {
  transition: border-color 250ms ease-in-out, color 250ms ease-in-out;
  color: #333;
  border-color: #b2b2b2;
}
.button--second:hover, .button--second:focus {
  background-color: rgba(255, 255, 255, 0);
  border-color: #08493d;
  color: #08493d;
}
.button--icon {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.button[disabled], .button--disabled {
  background-color: #b2b2b2 !important;
  border-color: #b2b2b2 !important;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}
.button--justify {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.button--justify-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.button--additional {
  padding: 0.875rem 1.25rem;
  background: #fff;
  border-color: #e7eaee;
  color: #333;
  box-shadow: 0 0.625rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.04);
  font-size: 0.9375rem;
}
.button--shopping-list {
  position: absolute;
  bottom: 1.375rem;
  left: 1.375rem;
  width: calc(100% - 2.75rem);
}
@media only screen and (min-width: 768px) {
  .button--shopping-list {
    position: static;
    width: auto;
  }
}
.button--no-horizontal-padding {
  padding-left: 0;
  padding-right: 0;
}
.button--inline {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.9375rem;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
}
@media only screen and (min-width: 550px) {
  .button--md-left-indent {
    margin-left: 8.25rem;
  }
}
.button--success {
  background-color: #08493d;
  border-color: #08493d;
}
.button--success:hover, .button--success:focus {
  background-color: rgb(2.962962963, 27.037037037, 22.5925925926);
  border-color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.button--success.button--hollow {
  background-color: rgba(255, 255, 255, 0);
  border-color: #08493d;
  color: #08493d;
}
.button--success.button--hollow:hover, .button--success.button--hollow:focus {
  background-color: #08493d;
  color: #fff;
}
.button--warning {
  background-color: #d88d00;
  border-color: #d88d00;
}
.button--warning:hover, .button--warning:focus {
  background-color: rgb(165, 107.7083333333, 0);
  border-color: rgb(165, 107.7083333333, 0);
}
.button--warning.button--hollow {
  background-color: rgba(255, 255, 255, 0);
  border-color: #d88d00;
  color: #d88d00;
}
.button--warning.button--hollow:hover, .button--warning.button--hollow:focus {
  background-color: #d88d00;
  color: #fff;
}
.button--alert {
  background-color: #e01a00;
  border-color: #e01a00;
}
.button--alert:hover, .button--alert:focus {
  background-color: rgb(173, 20.0803571429, 0);
  border-color: rgb(173, 20.0803571429, 0);
}
.button--alert.button--hollow {
  background-color: rgba(255, 255, 255, 0);
  border-color: #e01a00;
  color: #e01a00;
}
.button--alert.button--hollow:hover, .button--alert.button--hollow:focus {
  background-color: #e01a00;
  color: #fff;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.checkbox {
  display: inline-block;
  position: relative;
}
.checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox__input:focus ~ .checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox__input:checked ~ .checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox__input:checked ~ .checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox__input:checked ~ .checkbox__label {
  font-weight: 700;
}
.checkbox__input:checked ~ .checkbox__label--alternative {
  font-weight: 400;
}
.checkbox__input[disabled] ~ .checkbox__box, .checkbox__input[disabled] ~ .checkbox__box:hover, .checkbox__input--disabled ~ .checkbox__box, .checkbox__input--disabled ~ .checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox__input[disabled]:checked ~ .checkbox__box, .checkbox__input--disabled:checked ~ .checkbox__box {
  background-color: #dce0e5;
}
.checkbox__input[disabled] ~ .checkbox__label, .checkbox__input--disabled ~ .checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox__counter {
  padding-left: 0.5rem;
}
.checkbox--expand {
  display: block;
}
.checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox--filter {
    font-size: 0.875rem;
  }
}
.checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox--alternative:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox--pdp:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
.checkbox--error .checkbox__box {
  border-color: #e01a00;
}
.checkbox:hover .checkbox__box {
  border-color: #08493d;
}
.checkbox:hover .checkbox__input[disabled] ~ .checkbox__box,
.checkbox:hover .checkbox__input--disabled ~ .checkbox__box {
  border-color: #dce0e5;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/icon/icon.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.icon {
  fill: currentColor;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
          user-select: none;
}
.icon--small {
  width: 0.75rem;
  height: 0.75rem;
}
.icon--smaller {
  width: 0.5rem;
  height: 0.5rem;
}
.icon--big {
  width: 1.25rem;
  height: 1.25rem;
}
.icon--bigger {
  width: 1.5rem;
  height: 1.5rem;
}
.icon--biggest {
  width: 3rem;
  height: 3rem;
}
.icon--spinner {
  animation: spin-to 1s linear infinite;
}
.icon {
  z-index: 3;
}
.icon--logo {
  width: 6rem;
  height: 2rem;
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .icon--logo {
    width: 10.9375rem;
    height: 4.375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .icon--logo {
    width: 12.1875rem;
  }
}
.icon--checkout {
  width: 6.8125rem;
  height: 2rem;
}
@media only screen and (min-width: 768px) {
  .icon--checkout {
    width: 10.4375rem;
    height: 3.75rem;
  }
}
.icon--header-check {
  margin: -0.125rem 0.5625rem 0 0;
}
.icon--phone {
  margin-right: 0.375rem;
}
.icon--search {
  fill: #4c4c4c;
  stroke: #4c4c4c;
  stroke-width: 0.03125rem;
}
.icon--quick-order-delete-row {
  fill: #4c4c4c;
}
.icon--contact {
  width: 1.375rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .icon--contact {
    display: none;
  }
}
.icon--cross {
  width: 0.625rem;
  height: 0.625rem;
}
.icon--reverse {
  transform: rotate(180deg);
}
.icon--toggler-cross {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
}
.icon--toggler-cross::before, .icon--toggler-cross::after {
  content: "";
  position: absolute;
  background-color: #202020;
}
.icon--toggler-cross::before {
  height: 0.125rem;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .icon--toggler-cross::before {
    height: 0.1875rem;
  }
}
.icon--toggler-cross::after {
  height: 100%;
  width: 0.125rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  .icon--toggler-cross::after {
    width: 0.1875rem;
  }
}
.active .icon--toggler-cross::after {
  display: none;
}
.icon--toggler-cross-thin::before {
  height: 0.125rem;
}
.icon--toggler-cross-thin::after {
  width: 0.125rem;
}
.icon--cart-plus {
  display: inline-block;
  width: 1.625rem;
  height: 1.4375rem;
  margin: -0.375rem 0.75rem -0.125rem 0;
}
.icon--toggler-cross-link::before, .icon--toggler-cross-link::after {
  background-color: #202020;
}
.icon--link {
  transition: color 250ms ease-in-out;
  color: #202020;
  margin-right: 0.375rem;
}
.icon--hermes-logo, .icon--dhl-logo {
  width: 4.5625rem;
}
.icon--invoice-logo {
  width: 3.25rem;
  height: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .icon--invoice-logo {
    width: 5.1875rem;
    height: 1.75rem;
  }
}
.icon--invoice-logo-small {
  width: 3.4375rem;
  height: 1.375rem;
}
.icon--payment-logo {
  position: absolute;
  top: 1.6875rem;
  right: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .icon--payment-logo {
    top: 1.6875rem;
    right: 1.875rem;
  }
}
.icon--summary-shipping {
  width: 3.3125rem;
}
.icon--add-to-list {
  position: relative;
  top: 0.0625rem;
  width: 1.625rem;
  height: 1.625rem;
}
.icon--success {
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: -1.375rem;
}
.icon--footer {
  height: 1.75rem;
  width: 5.8125rem;
}
.icon--invoice-logo-footer {
  width: 4.5625rem;
}
.icon--pay-pal-logo-footer {
  width: 4rem;
}
.icon--klarna-logo-footer {
  width: 4.25rem;
}
.icon--dhl-logo-footer {
  width: 4.75rem;
}
.icon--copyright {
  width: 6.625rem;
  height: 3rem;
}
@media only screen and (min-width: 768px) {
  .icon--view-mode-switch {
    margin-right: 0.5625rem;
  }
}
.icon--reset {
  transition: color 250ms ease-in-out;
  margin-right: 0.5rem;
  color: #333;
}
.icon--chevron {
  width: 0.625rem;
  height: 0.625rem;
}
.icon--create-list {
  vertical-align: bottom;
  height: 1.125rem;
  width: 1.125rem;
}
.icon--create-new-cart {
  width: 1.5rem;
  height: 1.125rem;
  vertical-align: bottom;
}
.icon--trolley {
  width: 1.25rem;
}
.icon--title {
  width: 2.1875rem;
  height: 1.625rem;
}
.icon--sm-lg-regular {
  width: 1rem;
  height: 1rem;
}
@media only screen and (min-width: 768px) {
  .icon--sm-lg-regular {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.icon--sm-lg-bigger {
  width: 1rem;
  height: 1rem;
}
@media only screen and (min-width: 768px) {
  .icon--sm-lg-bigger {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.icon--browse-file {
  width: 1.75rem;
  height: 1.75rem;
}
.icon--download-file {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.875rem;
  height: 1.875rem;
}
.icon--remove-file {
  transition: color 250ms ease-in-out;
  margin: -0.125rem 0 0 0.3125rem;
  cursor: pointer;
}
.icon--remove-file:hover {
  color: #4c4c4c;
}
.icon--clock {
  width: 0.75rem;
  height: 0.75rem;
}
.icon--cart-locked {
  width: 1.875rem;
  height: 1.4375rem;
  color: #e01a00;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/input/input.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.input {
  transition: border-color 250ms ease-in-out;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #dce0e5;
}
.input:focus {
  border-color: #8f8f8f;
}
.input::placeholder {
  color: #4c4c4c;
}
.input--expand {
  display: block;
  width: 100%;
}
.input--naked {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.input--error {
  border-color: #e01a00;
}
.input[disabled], .input--disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}
.input {
  border-radius: 2px;
  color: #4c4c4c;
  font: 400 0.9375rem/1.1875rem "DIN Pro", Arial, sans-serif;
  padding: 0.875rem 1.25rem 0.8125rem;
}
.input::placeholder {
  color: #4c4c4c;
  opacity: 1;
}
.input--small {
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding: 0.625rem 1rem;
}
.input--measurement-unit {
  max-width: 5.625rem;
  appearance: none;
}
.input--measurement-unit::-webkit-inner-spin-button, .input--measurement-unit::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.input--filter-range {
  font-weight: 500;
  color: #4c4c4c;
  padding-right: 1.5rem;
  padding-left: 0.5rem;
}
@media only screen and (min-width: 550px) {
  .input--filter-range {
    padding-left: 0.75rem;
  }
}
.input--transparent[disabled] {
  background-color: rgba(255, 255, 255, 0);
}
.input--inline {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/label/label.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  color: #333;
}
.label--required::after {
  content: "*";
  margin-left: 0.2rem;
  color: #08493d;
}
.label--title::after {
  display: none;
}
.label--browse-file {
  transition: border-color 250ms ease-in-out;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 7.5rem;
  padding: 0.625rem;
  border: 0.125rem dashed #b2b2b2;
  border-radius: 0.125rem;
  background-color: #fff;
  text-transform: initial;
  font-weight: 400;
  cursor: pointer;
}
.label--browse-file:hover {
  border-color: #08493d;
}
.label--browse-file-cursor-default {
  cursor: default;
}
.label--small {
  text-transform: none;
  font-weight: 500;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/link/link.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.link {
  display: inline-block;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
  cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}
.link--success {
  color: #08493d;
}
.link--warning {
  color: #d88d00;
}
.link--alert {
  color: #e01a00;
}
.link--small {
  font-size: 0.875rem;
}
.link--alt {
  transition: color 250ms ease-in-out;
}
.link--alt:hover {
  text-decoration: none;
  color: rgb(173, 20.0803571429, 0);
}
.link--expand {
  display: block;
}
.link[disabled], .link--disabled {
  color: #4c4c4c;
  cursor: not-allowed;
}
.link[disabled]:hover, .link--disabled:hover {
  color: #4c4c4c;
  text-decoration: none;
}
.link {
  color: #08493d;
}
.link--icon {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1rem;
}
@media only screen and (min-width: 1024px) {
  .link--icon {
    transition: color 250ms ease-in-out;
  }
}
.link--icon .icon {
  color: currentColor;
}
.link--icon:hover, .link--icon:focus {
  text-decoration: none;
  color: #8f8f8f;
}
.link--footer {
  color: #8f8f8f;
  line-height: 1.875rem;
}
.link--footer:hover, .link--footer:focus {
  color: #4c4c4c;
}
.link--checkout {
  font-size: 0.8125rem;
  line-height: normal;
}
.link--social {
  color: #4c4c4c;
}
.link--social:hover, .link--social:focus {
  color: #8f8f8f;
}
.link--privacy {
  color: #fff;
}
.link--privacy:hover, .link--privacy:focus {
  color: #e01a00;
}
.link--action {
  color: #333;
}
.link--action:hover, .link--action:focus {
  color: #4c4c4c;
}
.link--error-block {
  text-decoration: underline;
  font: 400 0.9375rem/1.875rem "DIN Pro", Arial, sans-serif;
  color: #b2b2b2;
}
.link--company-user {
  color: #4c4c4c;
  white-space: nowrap;
}
@media only screen and (min-width: 1024px) {
  .link--company-user {
    transition: color 250ms ease-in-out;
  }
}
.link--company-user:focus, .link--company-user:hover {
  text-decoration: none;
  color: #202020;
}
.link--secondary {
  color: #4c4c4c;
}
@media only screen and (min-width: 1024px) {
  .link--secondary {
    transition: color 250ms ease-in-out;
  }
}
.link--secondary:hover {
  text-decoration: none;
  color: #202020;
}
.link--alternative {
  color: #000;
}
@media only screen and (min-width: 1024px) {
  .link--alternative {
    transition: color 250ms ease-in-out;
  }
}
.link--alternative:focus, .link--alternative:hover {
  text-decoration: none;
  color: #8f8f8f;
}
.link--additional {
  color: #08493d;
}
@media only screen and (min-width: 1024px) {
  .link--additional {
    transition: color 250ms ease-in-out;
  }
}
.link--additional:focus, .link--additional:hover {
  text-decoration: none;
  color: #4c4c4c;
}
.link--to-button {
  width: 100%;
  padding: 0.6875rem;
  font-size: 0.875rem;
  justify-content: center;
  border-radius: 2px;
  border: 0.0625rem solid #dce0e5;
}
@media only screen and (min-width: 768px) {
  .link--to-button {
    width: auto;
    border: 0;
    justify-content: flex-start;
    padding: 0;
    font-size: 0.8125rem;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/list/list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.list__item {
  display: block;
  margin-bottom: 0.25rem;
}
.list__item > .list {
  margin-left: 0.5rem;
}
.list__item--highlighted em {
  text-decoration: underline;
}
.list--inline {
  display: inline-block;
}
.list--inline > .list__item {
  display: inline-block;
  margin: 0 0.5rem;
}
.list--inline > .list__item:first-child {
  margin-left: 0;
}
.list--inline > .list__item:last-child {
  margin-right: 0;
}
.list--bullet .list__item::before {
  content: "•";
  margin-right: 0.25rem;
}
.list--plus .list__item::before {
  content: "+";
  margin-right: 0.25rem;
}
.list--alert {
  color: #e01a00;
}
.list--footer {
  padding: 0 0.625rem;
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 550px) {
  .list--footer {
    padding: 0;
    margin-bottom: 0;
  }
}
.list--checkout {
  margin-bottom: 0;
}
.list--checkout > .list__item {
  margin-left: 1.1875rem;
  margin-right: 1.1875rem;
}
@media only screen and (min-width: 550px) {
  .list--checkout > .list__item {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }
}
.list--checkbox {
  margin: 0.5rem 0;
}
.list__item--inline {
  display: inline-block;
}
.list__item--checkbox {
  margin-bottom: 0.5rem;
}
.list--company-user {
  transition: transform 250ms ease-in-out;
  position: absolute;
  top: 100%;
  right: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.9375rem;
  letter-spacing: 0.0125rem;
  border-radius: 0 0 2px 2px;
  background-color: #fff;
  box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
  padding: 1.3125rem 2.375rem 1.3125rem 1.8125rem;
  transform-origin: top right;
  transform: scale(0);
  z-index: 10;
}
@media only screen and (min-width: 1400px) {
  .list--company-user {
    transform-origin: top left;
    left: 0;
    right: auto;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/radio/radio.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.checkbox {
  display: inline-block;
  position: relative;
}
.checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox__input:focus ~ .checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox__input:checked ~ .checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox__input:checked ~ .checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox__input:checked ~ .checkbox__label {
  font-weight: 700;
}
.checkbox__input:checked ~ .checkbox__label--alternative {
  font-weight: 400;
}
.checkbox__input[disabled] ~ .checkbox__box, .checkbox__input[disabled] ~ .checkbox__box:hover, .checkbox__input--disabled ~ .checkbox__box, .checkbox__input--disabled ~ .checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox__input[disabled]:checked ~ .checkbox__box, .checkbox__input--disabled:checked ~ .checkbox__box {
  background-color: #dce0e5;
}
.checkbox__input[disabled] ~ .checkbox__label, .checkbox__input--disabled ~ .checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox__counter {
  padding-left: 0.5rem;
}
.checkbox--expand {
  display: block;
}
.checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox--filter {
    font-size: 0.875rem;
  }
}
.checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox--alternative:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox--pdp:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
.checkbox--error .checkbox__box {
  border-color: #e01a00;
}
.checkbox:hover .checkbox__box {
  border-color: #08493d;
}
.checkbox:hover .checkbox__input[disabled] ~ .checkbox__box,
.checkbox:hover .checkbox__input--disabled ~ .checkbox__box {
  border-color: #dce0e5;
}

.radio {
  display: inline-block;
  position: relative;
}
.radio__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.radio__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .radio__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.radio__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .radio__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.radio__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .radio__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.radio__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.radio__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.radio__input:focus ~ .radio__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.radio__input:checked ~ .radio__box {
  background-color: #08493d;
  border-color: #08493d;
}
.radio__input:checked ~ .radio__box .radio__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.radio__input:checked ~ .radio__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.radio__input:checked ~ .radio__label {
  font-weight: 700;
}
.radio__input:checked ~ .radio__label--alternative {
  font-weight: 400;
}
.radio__input[disabled] ~ .radio__box, .radio__input[disabled] ~ .radio__box:hover, .radio__input--disabled ~ .radio__box, .radio__input--disabled ~ .radio__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.radio__input[disabled]:checked ~ .radio__box, .radio__input--disabled:checked ~ .radio__box {
  background-color: #dce0e5;
}
.radio__input[disabled] ~ .radio__label, .radio__input--disabled ~ .radio__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.radio__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.radio__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.radio__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.radio__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.radio__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.radio__counter {
  padding-left: 0.5rem;
}
.radio--expand {
  display: block;
}
.radio--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .radio--filter {
    font-size: 0.875rem;
  }
}
.radio--alternative {
  margin-bottom: 0.9375rem;
}
.radio--alternative:hover .radio__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .radio--pdp {
    margin-left: 8.25rem;
  }
}
.radio--pdp:hover .radio__box--alternative {
  border-color: #b2b2b2;
}
.radio--error .radio__box {
  border-color: #e01a00;
}
.radio:hover .radio__box {
  border-color: #08493d;
}
.radio:hover .radio__input[disabled] ~ .radio__box,
.radio:hover .radio__input--disabled ~ .radio__box {
  border-color: #dce0e5;
}
.radio--mobile-small .radio__box {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
}
.radio__box {
  transition: border-color 250ms ease-in-out;
  border-radius: 100%;
  border-width: 0.125rem;
}
.radio__check {
  display: none;
}
.radio__input:checked ~ .radio__box {
  background-color: #08493d;
  border-color: #08493d;
  box-shadow: inset 0 0 0 0.1875rem #fff;
}
.radio--checkout {
  width: 100%;
}
.radio--checkout .radio__container {
  padding: 1.625rem 1.25rem 1.625rem 1.5625rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}
@media only screen and (min-width: 550px) {
  .radio--checkout .radio__container {
    padding: 1.875rem;
  }
}
.radio--checkout .radio__box {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .radio--checkout .radio__box {
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
  }
}
.radio--checkout .radio__box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0.0625rem solid #e7eaee;
}
.radio--checkout .radio__label {
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-bottom: 0;
}
.radio--checkout .radio__input:checked ~ .radio__label {
  color: #333;
  font-weight: 500;
}
.radio--border-top-less .radio__box::before {
  border-top: none;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/switch/switch.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.switch {
  transition: margin-left 250ms ease-in-out, background-color 250ms ease-in-out;
  display: block;
  position: relative;
  width: 2.125rem;
  height: 0.875rem;
  background-color: rgba(220, 224, 229, 0.6);
  border-radius: 0.4375rem;
  overflow: visible;
  margin: 0.1875rem 0 0.1875rem 0.625rem;
  cursor: pointer;
}
.switch__handle {
  transition: left 250ms ease-in-out, background-color 250ms ease-in-out;
  display: block;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.1875rem 0 0 -0.625rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem #202020;
  left: 0;
  top: 0;
}
.switch--active {
  background-color: rgba(8, 73, 61, 0.5);
  margin-left: 0;
}
.switch--active .switch__handle {
  left: 100%;
  background-color: #08493d;
}
.switch[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/table/table.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.table thead {
  background-color: #f6f6f6;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}
.table th {
  color: #333;
  font-weight: 700;
}
.table th:empty {
  padding: 0;
}
.table th,
.table td {
  padding: 1rem 0.9375rem;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .table th:first-child,
  .table td:first-child {
    padding-left: 1.875rem;
  }
}
.table tbody {
  font-size: 0.875rem;
}
.table tbody tr:not(:first-child) {
  border-top: 0.0625rem solid #e7eaee;
}
.table tbody tr:last-child {
  border-bottom: 0.0625rem solid #e7eaee;
}
.table tbody th {
  font-weight: 500;
}
.table tbody td {
  color: #333;
}
.table tbody strong {
  font-weight: 500;
}
.table--expand {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .table--responsive {
    display: block;
  }
  .table--responsive thead,
  .table--responsive tbody,
  .table--responsive th,
  .table--responsive td {
    display: block;
  }
  .table--responsive thead tr,
  .table--responsive thead th {
    display: none;
  }
  .table--responsive tr {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .table--responsive tbody tr:not(.is-hidden-sm-md) {
    display: block;
  }
  .table--responsive td {
    padding-top: 0;
    padding-bottom: 0;
  }
  .table--responsive td::before {
    font-weight: 700;
    display: inline-block;
    width: auto;
    padding-right: 0.625rem;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .table--responsive .row--order-details {
    padding: 1.25rem;
    border: 0.0625rem solid #dce0e5;
    border-radius: 2px;
    position: relative;
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 767px) and (min-width: 768px) {
  .table--responsive .row--order-details {
    padding: 0;
    border: none;
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .table--responsive .transform-table-header,
  .table--responsive .transform-table-header__cell {
    display: block;
    padding: 0;
    background: #fff;
  }
  .table--responsive .transform-table-header__cell {
    font-size: 1.125rem;
    font-weight: 500;
    padding-top: 1rem;
  }
  .table--responsive .transform-cell {
    display: flex;
    position: relative;
    background-color: #f6f6f6;
  }
}
@media only screen and (max-width: 767px) and (min-width: 768px) {
  .table--responsive .transform-cell {
    display: table-cell;
  }
}
@media only screen and (max-width: 767px) {
  .table--responsive .transform-cell::before {
    content: attr(data-content) ":";
  }
  .table--responsive .transform-cell--alt {
    padding: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  .table--responsive .transform-cell--no-label::before {
    display: none;
  }
}
.table__row--inactive {
  color: #b2b2b2;
}
.table__row--spaceless th,
.table__row--spaceless td {
  padding: 0;
}
.table .table__actions {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .table .table__actions {
    width: 0;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/thumbnail/thumbnail.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.thumbnail {
  position: relative;
  display: block;
  height: 10rem;
  margin: 0.5rem;
}
.thumbnail--smaller {
  height: 3rem;
}
.thumbnail--small {
  height: 5rem;
}
.thumbnail--big {
  height: 20rem;
}
.thumbnail--bigger {
  height: 30rem;
}
.thumbnail--full-width {
  width: 100%;
}
.thumbnail--min-size {
  min-width: 2.5rem;
}
.thumbnail__image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.thumbnail__image--color-light {
  color: #dadada;
}
.thumbnail--has-border {
  border: 0.25rem solid transparent;
  box-shadow: 0 0 0 1px #f0f0f0;
}
.thumbnail--without-spaces {
  margin: 0;
}
.thumbnail--smaller {
  height: 3.25rem;
}
@media only screen and (min-width: 768px) {
  .thumbnail--smaller {
    height: 2.625rem;
  }
}
.thumbnail--item {
  margin: 0.5rem 1rem 0.5rem 0;
  padding: 0.5rem;
  flex-grow: 1;
}
.thumbnail--item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 2px 0 0 2px;
  z-index: 1;
}
.thumbnail--reset-indents {
  margin: 0;
}
.thumbnail--category-list {
  height: 19.5625rem;
}
@media only screen and (min-width: 550px) {
  .thumbnail--category-list {
    height: 10rem;
  }
}
.thumbnail--catalog {
  height: 11.25rem;
}
@media only screen and (min-width: 768px) {
  .thumbnail--catalog {
    height: 15rem;
  }
}
.thumbnail--category {
  height: 7.75rem;
}
@media only screen and (min-width: 768px) {
  .thumbnail--category {
    height: 15rem;
  }
}
.thumbnail--shopping-list {
  height: 4.6875rem;
}
@media only screen and (min-width: 768px) {
  .thumbnail--shopping-list {
    height: 10rem;
  }
}
.thumbnail--cart {
  height: 4.6875rem;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .thumbnail--cart {
    height: 10rem;
    margin: 0.5rem;
  }
}
.thumbnail--summary {
  height: 4.6875rem;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .thumbnail--summary {
    height: 6.25rem;
    margin: 0.25rem;
  }
}
.thumbnail--expand {
  width: 100%;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.title--h1 {
  font-size: 3.125rem;
  line-height: 1.1;
}
.title--h2 {
  font-size: 2rem;
  line-height: 1.2;
}
.title--h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}
.title--h4 {
  font-size: 1.125rem;
  line-height: 1.4;
}
.title--h5 {
  font-size: 1rem;
  line-height: 1.4;
}
.title--h6 {
  font-size: 0.875rem;
  line-height: 1.4;
}
.title--regular {
  font-weight: 400;
}
.title--medium {
  font-weight: 500;
}
.title--bold {
  font-weight: 700;
}
.title--success {
  color: #08493d;
}
.title--warning {
  color: #d88d00;
}
.title--alert {
  color: #e01a00;
}
.title--uppercase {
  text-transform: uppercase;
}
.title--bottom-divider {
  border-bottom: 0.063rem solid #f0f0f0;
}
.title--link {
  color: #08493d;
  cursor: pointer;
}
.title--link:hover {
  text-decoration: underline;
}
.title--footer {
  font: 700 1rem/3.125rem "DIN Pro", Arial, sans-serif;
  position: relative;
  text-transform: capitalize;
  display: block;
}
@media only screen and (min-width: 550px) {
  .title--footer {
    line-height: 2.125rem;
    margin-bottom: 0.625rem;
  }
}
.title--footer-logo {
  margin-bottom: 0;
}
@media only screen and (min-width: 550px) {
  .title--footer-logo {
    display: none;
  }
}
.title--subscription {
  font: 700 1rem/3.125rem "DIN Pro", Arial, sans-serif;
  position: relative;
  display: block;
}
@media only screen and (min-width: 550px) {
  .title--subscription {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: normal;
  }
}
@media only screen and (min-width: 768px) {
  .title--subscription {
    font-size: 1.625rem;
  }
}
@media only screen and (min-width: 1024px) {
  .title--subscription {
    font-size: 2.125rem;
    line-height: 2.6875rem;
    letter-spacing: 0.01875rem;
  }
}
.title--checkout {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .title--checkout {
    font-size: 1.75rem;
    margin-bottom: 1.5625rem;
  }
}
.title--second {
  font-size: 1.125rem;
  margin-bottom: 0.875rem;
}
@media only screen and (min-width: 768px) {
  .title--second {
    font-size: 1.5rem;
  }
}
.title__index {
  color: #08493d;
  margin-right: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .title__index {
    margin-right: 0.5rem;
  }
}
.title--sub {
  color: #8f8f8f;
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.title--error-page {
  font: 700 2rem/2.5625rem "DIN Pro", Arial, sans-serif;
  margin-bottom: 0.4375rem;
}
.title--product-review {
  margin: 2.25rem 0 1.5rem;
}
.title--product-slider {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .title--product-slider {
    margin-bottom: 2.0625rem;
    font-size: 2rem;
  }
}
.title--top-margin {
  margin-top: 3.8125rem;
}
@media only screen and (min-width: 768px) {
  .title--top-margin {
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .title--top-margin {
    margin-top: 6.875rem;
  }
}
.title--top-margin-small {
  margin-top: 3.4375rem;
}
.title--light {
  color: #fff;
}
.title--product-set-details {
  font-size: 1.375rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .title--product-set-details {
    font-size: 3.125rem;
  }
}
.title--mobile-toggler-section {
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: normal;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .title--mobile-toggler-section {
    font-size: 1.0625rem;
    padding-left: 1.8125rem;
    position: relative;
  }
  .title--mobile-toggler-section::before, .title--mobile-toggler-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.625rem;
    height: 0.125rem;
    background: #333;
  }
  .title--mobile-toggler-section::after {
    transform: translateY(-50%) rotate(90deg);
  }
  .title--mobile-toggler-section {
    /* stylelint-disable selector-no-qualifying-type  */
  }
  .title--mobile-toggler-section.active::after {
    display: none;
  }
  .title--mobile-toggler-section {
    /* stylelint-enable  */
  }
}
.title--link {
  color: #333;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .title--link {
    margin-left: 1.25rem;
  }
}
.title--warning {
  color: #e01a00;
  line-height: 3.25rem;
  background-color: rgba(224, 26, 0, 0.1);
  margin: 0 -0.9375rem 0.5rem;
}
@media only screen and (min-width: 768px) {
  .title--warning {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }
}
.title--review-subtitle {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: normal;
  color: #333;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .title--review-subtitle {
    text-align: left;
    font-size: 1.5rem;
  }
}
.title--underline {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .title--underline {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
  }
}
.title--underline::after {
  content: "";
  display: block;
  position: absolute;
  left: -0.9375rem;
  right: -0.9375rem;
  bottom: 0;
  width: calc(100% + 30px);
  height: 0.0625rem;
  background-color: #e7eaee;
}
@media only screen and (min-width: 768px) {
  .title--underline::after {
    left: 0;
    right: 0;
    width: 100%;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/action-bar/action-bar.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.action-bar {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 550px) {
  .action-bar {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
  }
}
.action-bar--first {
  margin-top: 0;
}
.action-bar--big {
  margin-top: 3rem;
}
.action-bar--small {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.action-bar--spaceless {
  margin: 0;
}
@media only screen and (min-width: 550px) {
  .action-bar--narrow {
    max-width: 43.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .action-bar--narrow {
    max-width: 31.25rem;
  }
}
.action-bar__title {
  flex-grow: 1;
}
.action-bar__title--small {
  font-size: 1.125rem;
  line-height: 1.4;
}
.action-bar__title--middle {
  font-size: 1.375rem;
}
.action-bar__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media only screen and (min-width: 550px) {
  .action-bar__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.action-bar__action {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  flex: none;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 550px) {
  .action-bar__action {
    width: auto;
  }
}
.action-bar__icon {
  margin-right: 0.625rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/action-card-grid/action-card-grid.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.action-card-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
  width: calc(100% + 1rem);
}
@media only screen and (min-width: 768px) {
  .action-card-grid {
    justify-content: flex-start;
  }
}
.action-card-grid__card {
  width: 100%;
  padding: 0.5rem;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .action-card-grid__card {
    width: 50%;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/action-card/action-card.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.action-card {
  background-color: #f6f6f6;
  padding: 1.25rem;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .action-card {
    padding: 1.3125rem 1.875rem;
  }
}
.action-card__header {
  display: flex;
}
.action-card__title {
  flex-grow: 1;
  margin-bottom: 20px;
  color: #333;
}
.action-card__actions {
  flex-shrink: 0;
}
.action-card__content {
  font-size: 15px;
  line-height: 22px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/ajax-loader/ajax-loader.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.ajax-loader {
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.5rem;
  background-color: rgba(240, 240, 240, 0.5);
  z-index: 750;
}
.ajax-loader__spinner {
  animation-name: spin-to;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.ajax-loader__label {
  margin-left: 0.5rem;
}
.ajax-loader--solid-bg {
  background-color: #fff;
}
.ajax-loader--big .ajax-loader__label {
  font-size: 1.125rem;
}
.ajax-loader--bottom {
  top: auto;
}
.ajax-loader--dynamic {
  z-index: 300;
}
.ajax-loader--viewport-centered {
  display: block;
}
.ajax-loader--viewport-centered .ajax-loader__layout {
  display: inline-block;
  position: sticky;
  top: 50%;
  margin-left: 50%;
  transform: translate(-50%);
}
.ajax-loader--static:not(.is-invisible) {
  position: static;
}
.ajax-loader {
  background: rgba(255, 255, 255, 0.6);
}
.ajax-loader--spacing-less {
  padding: 0;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/breadcrumb-step/breadcrumb-step.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.breadcrumb-step {
  display: inline-block;
  font: 0.8125rem/1rem "DIN Pro", Arial, sans-serif;
}
.breadcrumb-step--progress-step, .breadcrumb-step--progress-complete {
  font-size: 0.625rem;
  line-height: normal;
  margin: 0 0.9375rem;
  position: relative;
}
@media only screen and (min-width: 550px) {
  .breadcrumb-step--progress-step, .breadcrumb-step--progress-complete {
    font-size: 1.125rem;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step--progress-step, .breadcrumb-step--progress-complete {
    margin: 0 1.8125rem;
  }
}
.breadcrumb-step--progress-step:not(:last-child)::after, .breadcrumb-step--progress-complete:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.375rem;
  width: 2.25rem;
  margin-left: -0.1875rem;
  height: 0.0625rem;
  background: rgba(178, 178, 178, 0.8);
}
@media only screen and (min-width: 550px) {
  .breadcrumb-step--progress-step:not(:last-child)::after, .breadcrumb-step--progress-complete:not(:last-child)::after {
    height: 0.125rem;
    top: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step--progress-step:not(:last-child)::after, .breadcrumb-step--progress-complete:not(:last-child)::after {
    display: none;
  }
}
.breadcrumb-step--progress-step.breadcrumb-step--active, .breadcrumb-step--progress-complete.breadcrumb-step--active {
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step--progress-step.breadcrumb-step--active, .breadcrumb-step--progress-complete.breadcrumb-step--active {
    border-bottom: 0.0625rem solid #4c4c4c;
  }
}
.breadcrumb-step--progress-complete {
  color: #08493d;
}
.breadcrumb-step--progress-complete:not(:last-child)::after {
  background: #08493d;
}
.breadcrumb-step--progress-complete .breadcrumb-step__link {
  color: inherit;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step--progress-complete .breadcrumb-step__link {
    margin-left: 0.25rem;
  }
}
.breadcrumb-step--progress-complete .breadcrumb-step__number {
  display: none;
}
.breadcrumb-step:last-child .breadcrumb-step__separator {
  display: none;
}
.breadcrumb-step:last-child .breadcrumb-step__link {
  color: #4c4c4c;
}
.breadcrumb-step__separator {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  color: #8f8f8f;
}
.breadcrumb-step--active {
  font-weight: 500;
  border-bottom: 0.0625rem solid #202020;
  color: #202020;
}
.breadcrumb-step__link {
  cursor: pointer;
}
.breadcrumb-step__link, .breadcrumb-step--disabled:not(.breadcrumb-step--active) {
  transition: color 250ms ease-in-out;
  color: #4c4c4c;
}
.breadcrumb-step__link:hover, .breadcrumb-step__link:focus, .breadcrumb-step--disabled:not(.breadcrumb-step--active):hover, .breadcrumb-step--disabled:not(.breadcrumb-step--active):focus {
  color: #4c4c4c;
}
.breadcrumb-step__checked {
  width: 0.8125rem;
  height: 0.8125rem;
  line-height: 0.6875rem;
  background-color: #08493d;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 0.125rem;
}
@media only screen and (min-width: 550px) {
  .breadcrumb-step__checked {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 0.9375rem;
    margin: 0.1875rem 0 0.25rem;
  }
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step__checked {
    margin: 0 0 0 0.25rem;
  }
}
.breadcrumb-step__number {
  display: block;
  margin-bottom: 0.125rem;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step__number {
    display: inline;
    margin-bottom: 0;
  }
}
.breadcrumb-step__holder {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-step__holder {
    flex-direction: row;
  }
}
.breadcrumb-step__form {
  display: inline-block;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/copyright-build-with/copyright-build-with.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.copyright-build-with {
  font: 700 0.75rem/0.9375rem "DIN Pro", Arial, sans-serif;
  letter-spacing: 0.041875rem;
  text-transform: uppercase;
  padding-top: 1.1875rem;
  padding-bottom: 1.3125rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.copyright-build-with__text {
  margin-right: 1.125rem;
  padding-top: 0.75rem;
}
.copyright-build-with__link {
  color: #fff;
}
.copyright-build-with__link:hover, .copyright-build-with__link:focus {
  color: #fff;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/display-address/display-address.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.display-address {
  font-size: 0.875rem;
}
@media only screen and (min-width: 768px) {
  .display-address {
    font-size: 0.9375rem;
  }
}
.display-address--small {
  font-size: 0.75rem;
}
.display-address__name {
  font-weight: 500;
}
.display-address__bottom {
  margin-top: 0.875rem;
  margin-bottom: 0.3125rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/form/form.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.form .form {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.form__fields {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.form__field {
  padding: 0.5rem;
}
.form__actions {
  text-align: right;
}
.form__action {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.form--inline .form__container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}
.form--inline .form__fields {
  float: left;
  flex-grow: 1;
  flex-basis: auto;
}
.form--inline .form__actions {
  flex-grow: 0;
  flex-basis: auto;
}
.form--inline .form__field {
  padding-bottom: 0;
  padding-right: 0;
}
.form--extend {
  width: 100%;
}
.form__field + .form__field {
  margin-top: 0.5rem;
}
.form__field--section {
  margin-top: 3rem;
  width: 100%;
}
.form__actions {
  display: flex;
  flex-flow: column-reverse wrap;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .form__actions {
    margin-top: 1rem;
    flex-flow: row wrap;
  }
}
.form__action {
  flex: none;
  width: 100%;
  margin: 0.625rem 0 0;
}
@media only screen and (min-width: 768px) {
  .form__action {
    width: auto;
    margin: 0 1rem 0 0;
  }
}
.form__action--expand {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .form__action--expand {
    margin-right: 0;
    margin-left: 0;
  }
}
@media only screen and (min-width: 550px) {
  .form__action--expand-sm-md {
    width: auto;
    margin: 0.625rem 1rem 0 0;
  }
}
@media only screen and (min-width: 768px) {
  .form__action--expand-sm-md {
    margin-top: 0;
  }
}
.form__action--primary {
  order: -1;
}
.form__action--sm-lg-first {
  order: -1;
}
@media only screen and (min-width: 768px) {
  .form__action--sm-lg-first {
    order: 0;
  }
}
.form__action--sm-md-first {
  order: -1;
}
@media only screen and (min-width: 550px) {
  .form__action--sm-md-first {
    order: 0;
  }
}
.form__action--link {
  width: auto;
  margin: 0.625rem auto 0;
  font-size: 0.8125rem;
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .form__action--link {
    margin: 0 1rem 0 0;
    font-size: 1rem;
    text-decoration: none;
  }
}
.form__title-description {
  color: #b2b2b2;
  margin: -0.5rem 0 1rem;
}
.form--narrow .form__container {
  width: 100%;
}
@media only screen and (min-width: 550px) {
  .form--narrow .form__container {
    max-width: 43.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .form--narrow .form__container {
    max-width: 31.25rem;
  }
}
.form--subscription {
  padding-bottom: 2rem;
}
@media only screen and (min-width: 550px) {
  .form--subscription {
    padding-bottom: 0;
  }
}
.form--subscription .form__container {
  position: relative;
}
.form--subscription .form__fields,
.form--subscription .form__actions,
.form--subscription .form__action {
  margin: 0;
}
.form--subscription .form__field {
  padding: 0;
}
.form--subscription .form__actions {
  position: absolute;
  right: 0;
  bottom: 0;
}
.form--subscription .label {
  display: none;
}
.form--subscription .input {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #4c4c4c;
  background-color: rgba(255, 255, 255, 0);
  font-size: 1rem;
  line-height: 1.25rem;
  letter-spacing: 0.0125rem;
  color: #4c4c4c;
  padding: 0.625rem 2.25rem 0.625rem 0;
}
.form--subscription .input::placeholder {
  color: #4c4c4c;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .form--subscription .input {
    font-size: 1.125rem;
    line-height: 1.4375rem;
    letter-spacing: 0.016875rem;
    padding: 0.8125rem 2.875rem 1rem 0;
  }
}
.form--subscription .button {
  color: #4c4c4c;
  min-height: 2.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.625rem;
}
.form--subscription .button:hover, .form--subscription .button:focus {
  color: #8f8f8f;
}
@media only screen and (min-width: 768px) {
  .form--subscription .button {
    min-height: 3.375rem;
    padding-right: 1.375rem;
    padding-bottom: 0.625rem;
  }
}
.form--browse-file .form__field:not(:first-of-type),
.form--browse-file .form__actions,
.form--browse-file .input {
  display: none;
}
.form--text-order .form__field {
  padding-top: 0;
}
.form--text-order .form__actions {
  display: none;
}
.form--text-order .textarea {
  min-height: 7.4375rem;
  padding: 1.0625rem 1.25rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #4c4c4c;
  border-radius: 2px;
  border: none;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 768px) {
  .form--text-order .textarea {
    min-height: 5.375rem;
    padding: 0.9375rem 1.25rem;
  }
}
.form--note .form__field {
  padding-top: 0;
}
.form--note .form__actions {
  text-align: left;
  margin-top: 0;
}
.form--note .form__action {
  margin-top: 0.1875rem;
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .form--note .form__action {
    margin-top: 0.75rem;
  }
}
.form--note .label {
  display: none;
}
.form--note .textarea {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.125rem;
  color: #8f8f8f;
  padding: 0.75rem 0.8125rem;
  border-radius: 2px;
  border: none;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
  min-height: 7.4375rem;
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .form--note .textarea {
    font-size: 0.8125rem;
    padding: 0.9375rem 1.25rem;
    min-height: 5.375rem;
  }
}
.form--discount-voucher .form__container {
  position: relative;
}
.form--discount-voucher .form__actions {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  right: 0;
  margin-top: 0;
}
.form--discount-voucher .form__action {
  transition: color 250ms ease-in-out;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
}
.form--discount-voucher .form__action:hover, .form--discount-voucher .form__action:focus {
  color: #8f8f8f;
}
.form--discount-voucher .input {
  padding-left: 1.25rem;
  padding-right: 5.625rem;
  border-radius: 2px;
  border: none;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 768px) {
  .form--discount-voucher .input {
    padding-left: 0.75rem;
  }
}
.form--discount-voucher .label {
  display: none;
}
.form--checkout-form {
  padding: 0;
}
.form--checkout-form .form__fields {
  margin: 0;
}
.form--checkout-form .form__field {
  padding: 0 0 1rem;
}
@media only screen and (min-width: 768px) {
  .form--checkout-form .form__field {
    padding: 0 0.625rem 1rem;
  }
}
@media only screen and (min-width: 550px) {
  .form--checkout-form .form__action {
    margin: 0 0 0 1rem;
  }
}
.form--checkout-form .label:not(span) {
  color: #333;
  font-size: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .form--checkout-form .label:not(span) {
    font-size: 0.75rem;
  }
}
.form--checkout-address-content > .form__container {
  max-width: 44.375rem;
  margin: 0 auto;
}
.form--checkout-address-content .form__actions {
  margin: 0;
}
.form--checkout-address-content .form__field .select2-selection__rendered,
.form--checkout-address-content .form__field .custom-select__select {
  background-color: #fff;
}
.form--container-full-width > .form__container {
  max-width: 100%;
}
.form--hidden-actions .form__actions {
  display: none;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/icon-tooltip/icon-tooltip.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.icon-tooltip {
  display: inline-block;
  position: relative;
}
.icon-tooltip__tooltip {
  transition: transform 250ms ease-in-out;
  background: rgba(51, 51, 51, 0.8);
  color: #fff;
  text-transform: uppercase;
  font: 500 0.625rem "DIN Pro", Arial, sans-serif;
  white-space: nowrap;
  padding: 0.4375rem 0.875rem;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.625rem);
  transform-origin: bottom center;
  transform: translateX(-50%) scale(0);
}
.icon-tooltip__tooltip::before {
  content: "";
  border-top: solid 0.1875rem rgba(51, 51, 51, 0.8);
  border-left: solid 0.1875rem rgba(255, 255, 255, 0);
  border-right: solid 0.1875rem rgba(255, 255, 255, 0);
  position: absolute;
  top: 100%;
  left: calc(50% - 0.1875rem);
}
.icon-tooltip:hover .icon-tooltip__tooltip {
  transform: translateX(-50%) scale(1);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/logo/logo.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.logo--checkout {
  padding-right: 0;
  margin-top: -0.625rem;
  margin-bottom: -0.625rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/menu/menu.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.menu__item {
  display: block;
  margin-bottom: 0.25rem;
}
.menu__item > .menu {
  margin-left: 0.5rem;
}
.menu__item--highlighted em {
  text-decoration: underline;
}
.menu--inline {
  display: inline-block;
}
.menu--inline > .menu__item {
  display: inline-block;
  margin: 0 0.5rem;
}
.menu--inline > .menu__item:first-child {
  margin-left: 0;
}
.menu--inline > .menu__item:last-child {
  margin-right: 0;
}
.menu--bullet .menu__item::before {
  content: "•";
  margin-right: 0.25rem;
}
.menu--plus .menu__item::before {
  content: "+";
  margin-right: 0.25rem;
}
.menu--alert {
  color: #e01a00;
}
.menu__link, .menu__text {
  transition: color 250ms ease-in-out;
  position: relative;
  letter-spacing: 0.0125rem;
  z-index: 1;
}
@media only screen and (min-width: 1024px) {
  .menu__link, .menu__text {
    white-space: nowrap;
  }
}
.menu__text {
  cursor: default;
}
.menu .sale-color .menu__link,
.menu .sale-color .menu__text {
  color: #e01a00;
}
.menu .sale-color .menu__link:hover,
.menu .sale-color .menu__text:hover {
  color: rgb(122, 14.1607142857, 0);
}
.menu .new-color .menu__link,
.menu .new-color .menu__text {
  color: #08493d;
}
.menu .new-color .menu__link:hover,
.menu .new-color .menu__text:hover {
  color: hsl(168.9230769231, 80.2469135802%, -4.1176470588%);
}
.menu__item {
  font-weight: 400;
  margin: 0.5rem 0;
}
.menu__item--has-children-dropdown {
  position: relative;
  z-index: 2;
}
.menu__item--has-children-dropdown > .menu {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  position: absolute;
  left: 0;
  width: 15rem;
  margin-left: -0.5rem;
  border: 0.0625rem solid #dadada;
  background-color: #fff;
}
.menu__item--has-children-dropdown > .menu--wide {
  width: 23rem;
}
.menu__item--has-children-dropdown > .menu--wider {
  width: 28rem;
}
@media only screen and (min-width: 1024px) {
  .menu__item--has-children-dropdown:hover > .menu {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
  }
}
.menu__item--has-children-dropdown > .menu > .menu__item {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
@media only screen and (min-width: 1024px) {
  .menu__item--has-children-dropdown::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5625rem;
    transform: rotate(45deg) translateX(-50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    background: #fff;
    transition: helper-effect-transition(opacity, 100ms);
    opacity: 0;
  }
}
.menu__item--filter-enumeration {
  line-height: 1.125rem;
  margin-bottom: 0.625rem;
}
.menu__item--footer {
  margin: 1rem 0.5rem 0;
}
@media only screen and (min-width: 768px) {
  .menu__item--footer {
    margin-top: 0;
  }
}
.menu__item--social {
  margin: 0 0.5rem;
}
.menu__item--social:first-child {
  margin-left: 0;
}
.menu__item--social:last-child {
  margin-right: 0;
}
.menu--footer {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem 1.625rem;
  padding: 0 1.25rem;
  justify-content: center;
}
@media only screen and (min-width: 550px) {
  .menu--footer {
    margin-bottom: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0;
  }
}
.menu--social {
  display: flex;
  justify-content: center;
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 768px) {
  .menu--social {
    justify-content: left;
  }
}
.menu__trigger {
  display: block;
  position: relative;
  padding-right: 1.6875rem;
}
@media only screen and (min-width: 1024px) {
  .menu__trigger {
    position: static;
    padding-right: 0;
  }
}
.menu__trigger-button {
  position: absolute;
  height: 100%;
  width: 1.6875rem;
  right: 0;
  top: 0;
  line-height: 0;
  background: none;
  z-index: 0;
}
@media only screen and (min-width: 1024px) {
  .menu__trigger-button {
    width: 1.25rem;
    right: -1.25rem;
    display: none;
    background: none;
  }
}
.menu__trigger-button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
@media only screen and (min-width: 1024px) {
  .menu__trigger-button-icon {
    color: #8f8f8f;
    margin-top: 0.125rem;
    transform: translate(-50%, -50%);
  }
}
.menu__trigger-button.is-active .menu__trigger-button-icon {
  transform: translate(-50%, -50%) rotate(-180deg);
}
@media only screen and (min-width: 1024px) {
  .menu--lvl-0 {
    display: flex;
    margin: 0 -1.25rem;
  }
}
@media only screen and (min-width: 1200px) {
  .menu--lvl-0 {
    margin: 0 -1.875rem;
  }
}
.menu__item--lvl-0 {
  position: relative;
  padding-left: 0.6875rem;
  border-bottom: solid 0.0625rem #dce0e5;
  z-index: 2;
}
@media only screen and (min-width: 1024px) {
  .menu__item--lvl-0 {
    padding-left: 0;
    border: none;
  }
  .menu__item--lvl-0::before {
    content: "";
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.875rem;
    height: 0.125rem;
    background: #4c4c4c;
  }
}
.menu__item--lvl-0 {
  /* stylelint-disable selector-no-qualifying-type, indentation */
}
.menu__item--lvl-0.is-shown {
  /* stylelint-enable */
}
@media only screen and (min-width: 1024px) {
  .menu__item--lvl-0.is-shown .menu-wrapper--lvl-1 {
    opacity: 1;
    transform: scale(1);
  }
}
.menu__item--lvl-0:last-of-type {
  border: none;
}
@media only screen and (min-width: 1024px) {
  .menu__item--lvl-0:hover::before {
    display: block;
  }
  .menu__item--lvl-0:hover::after {
    opacity: 1;
  }
}
.menu__link--lvl-0, .menu__text--lvl-0 {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.0125rem;
  line-height: 3.25rem;
  color: #000;
}
@media only screen and (min-width: 1024px) {
  .menu__link--lvl-0, .menu__text--lvl-0 {
    transition: color 250ms ease-in-out;
    padding: 0 1.25rem;
    font-weight: 400;
    line-height: 4.25rem;
    color: #202020;
    letter-spacing: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .menu__link--lvl-0, .menu__text--lvl-0 {
    padding: 0 1.875rem;
  }
}
.menu__link--lvl-0:hover, .menu__text--lvl-0:hover {
  color: #4c4c4c;
}
@media only screen and (min-width: 1024px) {
  .is-touch .menu__trigger-button--lvl-0 {
    display: block;
  }
}
@media only screen and (min-width: 1024px) {
  .menu-wrapper--lvl-1 {
    transition: transform 250ms ease-in-out;
    padding-top: 0.9375rem;
    position: absolute;
    top: 100%;
    left: 0.625rem;
    transform-origin: top left;
    transform: scale(0);
  }
}
@media only screen and (min-width: 1024px) {
  .menu-wrapper--reverse {
    left: auto;
    right: 0.625rem;
  }
}
.menu--lvl-1 {
  padding-bottom: 0.75rem;
}
@media only screen and (min-width: 1024px) {
  .menu--lvl-1 {
    display: flex;
    padding: 1.1875rem 1.25rem 1.3125rem;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
  }
}
@media only screen and (min-width: 1400px) {
  .menu--lvl-1 {
    padding: 1.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .menu__item--lvl-1:not(:last-child) {
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .menu__item--lvl-1:not(:last-child) {
    margin-right: 2.5rem;
  }
}
.menu__link--lvl-1, .menu__text--lvl-1 {
  display: block;
  font-size: 1rem;
  line-height: 2.625rem;
  letter-spacing: 0.0125rem;
  color: #333;
}
@media only screen and (min-width: 1024px) {
  .menu__link--lvl-1, .menu__text--lvl-1 {
    display: inline-block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    color: #4c4c4c;
  }
}
.menu__link--lvl-1:hover {
  color: #8f8f8f;
}
.menu__trigger-button--lvl-1 {
  color: #b2b2b2;
}
.menu__trigger-button--lvl-1.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 62.4375rem;
  height: 100%;
  background: #f6f6f6;
  z-index: -1;
}
@media only screen and (min-width: 1024px) {
  .menu__trigger-button--lvl-1.is-active::after {
    display: none;
  }
}
.menu--lvl-2 {
  padding-bottom: 0.625rem;
}
@media only screen and (min-width: 1024px) {
  .menu--lvl-2 {
    padding-bottom: 0;
    margin-top: 1.1875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .menu__item--lvl-2 {
    padding: 0.1875rem 0;
  }
}
.menu__link--lvl-2, .menu__text--lvl-2 {
  display: block;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 2.625rem;
  font-weight: 400;
  letter-spacing: 0.0125rem;
  color: #4c4c4c;
}
@media only screen and (min-width: 1024px) {
  .menu__link--lvl-2, .menu__text--lvl-2 {
    display: inline-block;
    line-height: normal;
    letter-spacing: 0;
    padding: 0;
  }
}
.menu__link--lvl-2:hover {
  color: #202020;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/money-price/money-price.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.money-price {
  display: block;
}
.money-price__amount {
  font-size: 1.125rem;
}
.money-price__amount--original {
  font-size: 0.875rem;
  display: block;
  color: #4c4c4c;
  text-decoration: line-through;
}
.money-price__tag {
  margin-right: 0.25rem;
  color: #e01a00;
}
.money-price--big {
  margin-top: 0.75rem;
  margin-bottom: 1.4375rem;
}
@media only screen and (min-width: 768px) {
  .money-price--big {
    margin-top: 0;
  }
}
.money-price--medium {
  margin: 0 0 15px;
  width: 100%;
}
.money-price--margin-bottom-from-tablet {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .money-price--margin-bottom-from-tablet {
    margin: 0 0 15px;
  }
}
@media only screen and (min-width: 768px) {
  .money-price--text-right-from-tablet {
    text-align: right;
  }
}
.money-price--secondary {
  margin-top: 0.5rem;
  padding: 0.875rem 1rem;
  background: #f6f6f6;
}
.money-price__amount {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .money-price__amount {
    font-size: 1.125rem;
  }
}
.money-price__amount--big {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
}
@media only screen and (min-width: 768px) {
  .money-price__amount--big {
    font-size: 1.625rem;
  }
}
.money-price__amount--medium {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: normal;
}
.money-price__amount--gray-color {
  color: #333;
}
.money-price__amount--original {
  font-size: 0.9375rem;
  display: inline-block;
  color: #202020;
  font-weight: 400;
  margin-left: 0.25rem;
}
.money-price__amount--block {
  display: block;
}
.money-price__mode {
  color: #333;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 0.875rem;
}
@media only screen and (min-width: 768px) {
  .money-price__mode {
    margin-left: 0.3125rem;
    font-size: 0.75rem;
  }
}
.money-price__mode--big {
  font-size: 0.8125rem;
  line-height: normal;
}
.money-price__mode--block {
  display: block;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-footer-item/navigation-footer-item.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.navigation-footer-item {
  border-top: solid 1px #fff;
}
@media only screen and (min-width: 550px) {
  .navigation-footer-item {
    border-top: 0;
    padding-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .navigation-footer-item {
    padding-bottom: 0;
  }
}
.navigation-footer-item--social {
  border-top: none;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-icon-list/navigation-icon-list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.navigation-icon-list__icon {
  color: #202020;
}
.navigation-icon-list__icon {
  color: #202020;
}
.navigation-icon-list--social {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .navigation-icon-list--social {
    text-align: left;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-sidebar-item/navigation-sidebar-item.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.navigation-sidebar-item--active {
  background-color: #f6f6f6;
}
.navigation-sidebar-item--active .navigation-sidebar-item__icon {
  color: #e01a00;
}
.navigation-sidebar-item--active .navigation-sidebar-item__label {
  color: #333;
}
.navigation-sidebar-item__link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.8125rem;
  line-height: 1.3em;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #333;
}
.navigation-sidebar-item__link--account {
  margin: 0 -1.25rem;
  padding: 0 0 0 1.1875rem;
  color: #333;
}
.navigation-sidebar-item__icon-wrapper {
  padding: 0 0.9375rem 0 0;
  min-width: 3.125rem;
  display: flex;
  justify-content: center;
}
.navigation-sidebar-item__icon-wrapper--account {
  min-width: 2.8125rem;
}
.navigation-sidebar-item__label {
  text-transform: capitalize;
}
.navigation-sidebar-item__label--account {
  padding: 0.9375rem 0.8125rem 0.9375rem 0.625rem;
  border-bottom: 0.0625rem solid #dce0e5;
  flex-grow: 1;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/navigation-sidebar/navigation-sidebar.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.navigation-sidebar {
  border: 0.0625rem solid #dce0e5;
}
.navigation-sidebar--account {
  border: 0;
  padding: 0;
  margin: 0;
}
.navigation-sidebar__list {
  list-style: none;
  padding: 1rem 0 1rem 0.5rem;
  border-radius: 0.125rem;
}
.navigation-sidebar__list--account {
  padding: 0;
  border-radius: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/pagination/pagination.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.pagination {
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.4375rem;
}
@media only screen and (min-width: 768px) {
  .pagination {
    margin-top: 2.5rem;
  }
}
.pagination:empty {
  display: none;
}
.pagination__list {
  display: flex;
  justify-content: center;
}
.pagination__item--pages-before-ellipsis-index-2, .pagination__item--pages-after-ellipsis-index-2 {
  display: none;
}
@media only screen and (min-width: 550px) {
  .pagination__item--pages-before-ellipsis-index-2, .pagination__item--pages-after-ellipsis-index-2 {
    display: block;
  }
}
.pagination__step {
  transition: color 250ms ease-in-out;
  display: inline-block;
  padding: 0.25rem;
  color: #333;
  min-width: 2.125rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 550px) {
  .pagination__step {
    min-width: 2.5rem;
    line-height: 1.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
.pagination__step--button {
  border: 0.0625rem solid #333;
  border-radius: 2px;
  color: #333;
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
@media only screen and (min-width: 550px) {
  .pagination__step--button {
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;
  }
}
.pagination__step--button:hover, .pagination__step--button:focus {
  color: #333;
}
.pagination__step--current {
  background-color: #f6f6f6;
  color: #333;
  font-weight: 700;
}
.pagination__step--previous, .pagination__step--next {
  min-width: 1.25rem;
}
.pagination__step--previous:hover, .pagination__step--previous:focus, .pagination__step--next:hover, .pagination__step--next:focus {
  color: #333;
}
.pagination__step--disabled, .pagination__step--disabled:hover, .pagination__step--disabled:focus {
  color: #4c4c4c;
}
.pagination--search-cms-results {
  margin-bottom: 3.75rem;
}
@media only screen and (min-width: 1024px) {
  .pagination--search-cms-results {
    margin-bottom: 6.875rem;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/panel-info-item/panel-info-item.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.panel-info-item {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .panel-info-item {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 2.5rem;
    text-transform: uppercase;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/price-mode/price-mode.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.price-mode {
  color: #333;
  letter-spacing: 0.0125rem;
}
.price-mode--small {
  font-size: 0.75rem;
  letter-spacing: 0.0075rem;
}
.price-mode--mobile-small {
  font-size: 0.875rem;
}
@media only screen and (min-width: 768px) {
  .price-mode--mobile-small {
    font-size: 1rem;
  }
}
.price-mode__icon {
  margin-right: 0.5rem;
}
.price-mode__icon--small {
  margin-right: 0.25rem;
}
.price-mode__icon--mobile-small {
  margin-right: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .price-mode__icon--mobile-small {
    margin-right: 0.5rem;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-attributes/product-item-attributes.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item-attributes__color {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  margin-left: 0.25rem;
  text-indent: -9999px;
  vertical-align: middle;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-image/product-item-image.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item-image {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .product-item-image {
    height: 100%;
    padding: 2.25rem 0.25rem 1.75rem;
  }
}
.product-item-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 2px 0 0 2px;
  z-index: 1;
}
.product-item-image__item {
  width: 100%;
  overflow: hidden;
}
.product-item-image__checkbox {
  position: absolute;
  top: 0.625rem;
  left: -2.1875rem;
  z-index: 1;
}
@media only screen and (min-width: 550px) {
  .product-item-image__checkbox {
    top: auto;
    left: auto;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-image--summary {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
  }
}
.product-item-image--shopping-list {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .product-item-image--shopping-list {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-options/product-item-options.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item-options {
  margin: 0.5rem 0;
}
.product-item-options--summary {
  margin-top: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .product-item-options--summary {
    margin-top: 1rem;
  }
}
.product-item-options__item {
  font-size: 0.8125rem;
  color: #8f8f8f;
  display: block;
}
@media only screen and (min-width: 768px) {
  .product-item-options__item {
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-options__total-price {
    float: right;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-variant-selector/product-item-variant-selector.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item-variant-selector__label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: normal;
  color: #333;
  margin-right: 0.375rem;
}
@media only screen and (min-width: 768px) {
  .product-item-variant-selector__label {
    margin-right: 1.5rem;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 550px) {
  .product-item-variant-selector__select {
    flex-grow: 0;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/table-action-link/table-action-link.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.table-action-link {
  width: 100%;
  padding: 0.25rem 0.9375rem;
  border: 0.0625rem solid #b2b2b2;
  border-radius: 2px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .table-action-link {
    padding: 0;
    line-height: normal;
    border: none;
  }
}
.table-action-link__title {
  display: block;
  padding-top: 0.1875rem;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/table-action-list/table-action-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.table-action-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 9px;
}
@media only screen and (min-width: 768px) {
  .table-action-list {
    width: 100%;
    padding: 0 0.625rem 0 0;
    flex-wrap: nowrap;
  }
}
.table-action-list__item {
  flex-grow: 1;
  min-width: 33.3333333333%;
  padding: 0.125rem 0.25rem;
}
@media only screen and (min-width: 550px) {
  .table-action-list__item {
    min-width: 20%;
  }
}
@media only screen and (min-width: 768px) {
  .table-action-list__item {
    flex-grow: 0;
    min-width: 1.875rem;
    padding: 0 0.25rem;
    text-align: center;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/user-navigation/user-navigation.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.user-navigation__list {
  display: flex;
  margin: 0 -0.9375rem;
}
@media only screen and (min-width: 1024px) {
  .user-navigation__list {
    margin: 0;
  }
}
.user-navigation__item {
  width: 33.333%;
  background-color: #fff;
  box-shadow: 0.125rem 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .user-navigation__item {
    position: relative;
    width: 25%;
    background-color: transparent;
    padding: 0.3125rem 0;
    z-index: 3;
  }
}
@media only screen and (min-width: 1024px) {
  .user-navigation__item {
    box-shadow: none;
    max-width: 6.25rem;
    width: auto;
  }
}
@media only screen and (min-width: 1024px) {
  .user-navigation__item:not(:first-child) {
    margin-left: 1.875rem;
  }
}
.user-navigation__item--user {
  display: none;
}
@media only screen and (min-width: 768px) {
  .user-navigation__item--user {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .user-navigation__item:focus-within .user-navigation__sub-nav, .user-navigation__item:hover .user-navigation__sub-nav {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  .user-navigation__item:focus-within .user-navigation__sub-nav--pull-left, .user-navigation__item:hover .user-navigation__sub-nav--pull-left {
    transform: translateX(-95%) scale(1);
  }
}
@media only screen and (min-width: 768px) and (min-width: 1400px) {
  .user-navigation__item:focus-within .user-navigation__sub-nav--pull-left, .user-navigation__item:hover .user-navigation__sub-nav--pull-left {
    transform: translateX(-90%) scale(1);
  }
}
.user-navigation__link, .user-navigation__user-name {
  transition: color 250ms ease-in-out;
  display: block;
  color: #4c4c4c;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .user-navigation__link, .user-navigation__user-name {
    text-align: center;
  }
}
.user-navigation__link:hover, .user-navigation__user-name:hover {
  color: rgb(139.75, 139.75, 139.75);
}
.user-navigation__link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
  color: #000;
  padding: 0 0.1875rem;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .user-navigation__link {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.0375rem;
    padding: 0;
    color: #4c4c4c;
  }
}
.user-navigation__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.25rem;
  padding-right: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .user-navigation__icon {
    align-items: flex-start;
    padding: 0;
  }
}
.user-navigation__text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (min-width: 768px) {
  .user-navigation__text {
    display: inline;
    white-space: normal;
  }
}
.user-navigation__arrow {
  margin-top: 0.375rem;
}
.user-navigation__sub-nav {
  transition: opacity 250ms ease-in-out;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.93;
  letter-spacing: 0.0125rem;
  opacity: 0;
  transform: scale(0);
  z-index: 1163;
}
.user-navigation__sub-nav--touch-active {
  opacity: 1;
  transform: scale(1);
}
@media only screen and (min-width: 768px) {
  .user-navigation__sub-nav {
    transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    height: auto;
    width: auto;
    transform: translateX(-50%) scale(0);
    transform-origin: top center;
    box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
    padding: 1.3125rem 2.375rem 1.3125rem 1.8125rem;
  }
  .user-navigation__sub-nav::before {
    content: "";
    background: #fff;
    position: absolute;
    top: -0.3125rem;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    transform: translateX(-50%) rotate(45deg);
  }
  .user-navigation__sub-nav--pull-left::before {
    left: 95%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1400px) {
  .user-navigation__sub-nav--pull-left::before {
    left: 90%;
  }
}
.user-navigation__sub-nav-inner {
  border-top: 0.0625rem solid #e7eaee;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  .user-navigation__sub-nav-inner {
    border: none;
    flex-grow: 0;
  }
}
.user-navigation__sub-nav-close {
  position: absolute;
  top: 0.375rem;
  left: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
}
@media only screen and (min-width: 768px) {
  .user-navigation__sub-nav-close {
    display: none;
  }
}
.user-navigation__sub-nav-title {
  padding: 0.75rem 3.75rem 0.875rem;
  line-height: 1.67;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .user-navigation__sub-nav-title {
    display: none;
  }
}
.user-navigation__sub-nav-actions {
  padding: 1.3125rem 1rem 1.875rem;
}
@media only screen and (min-width: 768px) {
  .user-navigation__sub-nav-actions {
    padding: 1rem 1.5rem 0.0625rem;
  }
}
.user-navigation__sub-nav-link {
  transition: color 250ms ease-in-out;
  color: #8f8f8f;
}
.user-navigation__sub-nav-link:hover {
  color: #4c4c4c;
}
.user-navigation__empty-cart {
  display: block;
  height: 2.375rem;
  padding-right: 0.25rem;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/section/section.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.section {
  padding: 1.375rem 0;
}
@media only screen and (min-width: 768px) {
  .section {
    padding: 3rem 0;
  }
}
.section--center {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  justify-content: center;
}
.section--center__inner {
  flex: none;
}
.section--last {
  padding-bottom: 4.375rem;
}
@media only screen and (min-width: 768px) {
  .section--last {
    padding-bottom: 6rem;
  }
}
.section--secondary {
  padding: 2rem 0 1rem;
}
@media only screen and (min-width: 768px) {
  .section--secondary {
    padding-top: 3.125rem;
  }
}
@media only screen and (min-width: 1024px) {
  .section--secondary {
    padding-top: 4.375rem;
  }
}
.section--bg-dark {
  padding: 1.375rem 0 1.1875rem;
  background-color: #f6f6f6;
}
@media only screen and (min-width: 768px) {
  .section--bg-dark {
    padding: 3.125rem 0 5rem;
  }
  .section--bg-dark .product-card__container {
    background-color: #fff;
  }
}
.section--bg-dark .product-card {
  padding-bottom: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .section--bg-dark .product-card {
    padding-bottom: 1.875rem;
  }
}
.section--bg-dark .product-card__image-wrap {
  background-color: #fff;
}
.section--bg-dark .product-card__image-wrap::before {
  background: transparent;
}
.section--bg-dark .product-card__overlay::before {
  background-color: rgba(255, 255, 255, 0);
}
.section--full-width {
  margin-left: -15px;
  margin-right: -15px;
}
.section--no-mobile-bottom-indent {
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .section--no-mobile-bottom-indent {
    padding-bottom: 1rem;
  }
}
.section__title {
  font-weight: 500;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .section__title {
    font-size: 1.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .section__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}
.section__title--secondary {
  color: #4c4c4c;
  text-align: center;
}
.section__title--mobile-center {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .section__title--mobile-center {
    text-align: left;
  }
}
.section__sub-title, .section__text {
  text-align: center;
  line-height: normal;
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 768px) {
  .section__sub-title, .section__text {
    margin-bottom: 2.5rem;
  }
}
.section__sub-title {
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  .section__sub-title {
    font-size: 1.125rem;
  }
}
.section__text {
  font-size: 0.9375rem;
  line-height: 1.61;
  max-width: 60.625rem;
  margin-left: auto;
  margin-right: auto;
}
.section__text--full-width {
  max-width: none;
}
@media only screen and (min-width: 768px) {
  .section__text {
    font-size: 1.125rem;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/templates/page-layout-main/page-layout-main.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.page-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 360px;
}
.page-layout--preload * {
  transition: none !important;
}
.page-layout .content-wrap {
  flex: 1;
}

.page-layout-main--catalog-page, .page-layout-main--cms-search-page {
  position: relative;
  padding-top: 1rem;
}
@media only screen and (min-width: 768px) {
  .page-layout-main--catalog-page, .page-layout-main--cms-search-page {
    padding-top: 1.25rem;
  }
}
.page-layout-main__catalog-page-content {
  padding-bottom: 3.75rem;
}
@media only screen and (min-width: 768px) {
  .page-layout-main__catalog-page-content {
    padding-bottom: 4.375rem;
  }
}
@media only screen and (min-width: 768px) {
  .page-layout-main--pdp {
    padding: 1.875rem 0 0;
  }
}
.page-layout-main--quick-order-page {
  padding: 0.875rem 0 3.75rem;
}
@media only screen and (min-width: 768px) {
  .page-layout-main--quick-order-page {
    padding: 3.125rem 0 3.375rem;
  }
}
.page-layout-main--cart-page, .page-layout-main--request-for-quote {
  padding-top: 0.875rem;
  padding-bottom: 1.875rem;
}
@media only screen and (min-width: 768px) {
  .page-layout-main--cart-page, .page-layout-main--request-for-quote {
    padding-top: 2rem;
    padding-bottom: 3.75rem;
  }
}
@media only screen and (min-width: 1024px) {
  .page-layout-main--cart-page, .page-layout-main--request-for-quote {
    padding-bottom: 7.5rem;
  }
}
.page-layout-main--checkout-page {
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}
@media only screen and (min-width: 768px) {
  .page-layout-main--checkout-page {
    padding-top: 2rem;
  }
}
@media only screen and (min-width: 1024px) {
  .page-layout-main--checkout-page {
    padding-bottom: 7.5rem;
  }
}
.page-layout-main--cms-page {
  padding-top: 2rem;
  padding-bottom: 4.375rem;
}
.page-layout-main--success {
  padding-top: 0;
  padding-bottom: 3.125rem;
}
@media only screen and (min-width: 1024px) {
  .page-layout-main--success {
    padding-bottom: 6.875rem;
  }
}
.page-layout-main--error-page {
  background: url("../images/error-page-img.svg") center no-repeat;
  background-size: cover;
  min-height: 47.5rem;
  padding-top: 2.1875rem;
}
.page-layout-main__pdp-gallery {
  background: rgba(0, 0, 0, 0.05);
  padding: 0 0.9375rem 0.9375rem;
  margin: 0 -0.9375rem;
  width: calc(100% + 1.875rem);
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .page-layout-main__pdp-gallery {
    background: rgba(255, 255, 255, 0);
    width: calc(660 / 1200 * 100%);
    min-width: calc(660 / 1200 * 100%);
    margin: 0 0.9375rem 0 0;
    padding-bottom: 0;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.filter-category__menu--lvl-1, .filter-category__menu--lvl-2 {
  padding-left: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu--lvl-1, .filter-category__menu--lvl-2 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) {
  .filter-category__menu--lvl-3 {
    padding-left: 0.625rem;
  }
}
.filter-category__menu-item {
  display: flex;
  flex-grow: 1;
  color: #4c4c4c;
}
.filter-category__menu-item--lvl-2:first-child {
  padding-top: 0.3125rem;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-item--lvl-2:first-child {
    padding-top: 0;
  }
}
.filter-category__menu-item--lvl-2:last-child {
  padding-bottom: 0.3125rem;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-item--lvl-2:last-child {
    padding-bottom: 0;
  }
}
.filter-category__category-row {
  flex-grow: 1;
}
.filter-category__category-row--no-children {
  margin-left: 1rem;
}
.filter-category__category-target {
  transition: grid-template-rows 250ms ease-in-out;
  display: grid;
  grid-template-rows: 1fr;
}
.filter-category__category-target--hidden {
  grid-template-rows: 0fr;
}
.filter-category__category-target-inner {
  overflow: hidden;
}
.filter-category__category-toggle-button {
  transition: transform 250ms ease-in-out;
  color: #4c4c4c;
  margin-right: 0.3125rem;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  width: 1.25rem;
}
@media only screen and (max-width: 768px) {
  .filter-category__category-toggle-button {
    display: inline-block;
    vertical-align: top;
    margin-top: -0.3125rem;
  }
}
.filter-category__category-toggle-button--collapsed {
  transform: rotate(-90deg);
}
.filter-category__menu-link {
  transition: color 250ms ease-in-out;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.8125rem;
  color: #4c4c4c;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  font: 400 0.8125rem/1rem "DIN Pro", Arial, sans-serif;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-link {
    margin-bottom: 0.6875rem;
    font-size: 0.9375rem;
    line-height: 1.4375rem;
  }
}
.filter-category__menu-link--lvl-1 {
  font-size: 0.9375rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-link--lvl-1 {
    font-size: 1.125rem;
  }
}
.filter-category__menu-link--lvl-2 {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-link--lvl-2 {
    font-size: 1rem;
  }
}
.filter-category__menu-link--lvl-3 {
  font-size: 0.8125rem;
}
@media only screen and (min-width: 768px) {
  .filter-category__menu-link--lvl-3 {
    font-size: 0.9375rem;
  }
}
.filter-category__menu-link:hover, .filter-category__menu-link:focus {
  color: #202020;
  text-decoration: none;
}
.filter-category__menu-link[disabled] {
  pointer-events: none;
  color: #8f8f8f;
}
.filter-category__menu-link--active {
  font-weight: 700;
  color: #202020;
}
.filter-category__link-text {
  text-align: left;
}
.filter-category__link-text--active {
  text-decoration: underline;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/product-detail-page/src/SprykerShop/Yves/ProductDetailPage/Theme/default/components/molecules/product-carousel/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-carousel {
  position: relative;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/select/select.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.select {
  transition: border-color 250ms ease-in-out;
  display: inline-block;
  position: relative;
  max-width: 100%;
  background-color: #fff;
  border: 1px solid #dce0e5;
  border-radius: 0;
}
.select__select {
  display: block;
  max-width: 100%;
  padding-left: 0.25rem;
  background-color: rgba(255, 255, 255, 0);
  border: 0.25rem solid rgba(255, 255, 255, 0);
  border-right-width: 1.5rem;
  border-radius: 0;
  z-index: 2;
  appearance: none;
}
.select__select[disabled], .select__select--disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}
.select__caret {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.25rem;
  margin: auto;
  color: #595959;
  z-index: 1;
  pointer-events: none;
}
.select--expand, .select--expand .select__select {
  display: block;
  width: 100%;
}
.select--naked {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.select--error {
  border-color: #e01a00;
}
.select--error .select__caret {
  color: #e01a00;
}
.select--quick-order-page .select__select {
  cursor: pointer;
  padding: 0.625rem;
  color: #4c4c4c;
}
.select__caret {
  right: 0.3125rem;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/textarea/textarea.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.textarea {
  transition: border-color 250ms ease-in-out;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #dce0e5;
  max-width: 100%;
}
.textarea:focus {
  border-color: #8f8f8f;
}
.textarea::placeholder {
  color: #4c4c4c;
}
.textarea--expand {
  display: block;
  width: 100%;
}
.textarea--error {
  border-color: #e01a00;
}
.textarea[disabled], .textarea--disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}
.textarea {
  border-radius: 2px;
  color: #202020;
  font: 400 0.9375rem/1.1875rem "DIN Pro", Arial, sans-serif;
  padding: 0.875rem 1.25rem 0.8125rem;
}
.textarea::placeholder {
  color: #4c4c4c;
  opacity: 1;
}
.textarea--alternative {
  min-width: 100%;
  max-width: 100%;
  height: 6.25rem;
  padding: 0.625rem;
  margin-bottom: 0.625rem;
  font: 400 0.8125rem/1.38 "DIN Pro", Arial, sans-serif;
  border: none;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/advanced-table/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.advanced-table {
  overflow-y: auto;
}
.advanced-table__container {
  width: 100%;
}
.advanced-table__head {
  font-weight: 700;
  border-bottom: 0.0625rem solid #dadada;
}
.advanced-table__heading {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  white-space: nowrap;
}
.advanced-table__col {
  padding: 0.5rem 0.25rem;
  text-align: left;
}
.advanced-table__col--backgroundless {
  background-color: none;
}
.advanced-table__col--spacing-y-small {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.advanced-table__col--spacing-bottom-reset {
  padding-bottom: 0;
}
.advanced-table__col--sortable {
  cursor: pointer;
}
.advanced-table__row:nth-child(even) .advanced-table__col {
  background-color: #f4f4f4;
}
.advanced-table__row--backgroundless {
  background: none;
}
.advanced-table__row--highlighted {
  background-color: #f4f4f4;
}
.advanced-table__empty {
  text-align: center;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/ajax-add-to-cart/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.ajax-add-to-cart__button {
  height: 100%;
  white-space: nowrap;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/alert/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.alert {
  display: flex;
  align-items: flex-start;
  padding: 1.25rem 1rem;
  margin: 0.5rem 0;
  background: #eaf1fa;
  color: #333333;
}
.alert__icon {
  color: #0064b4;
  flex-shrink: 0;
  margin: 0 1rem 0 0;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/autocomplete-form/autocomplete-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.autocomplete-form {
  position: relative;
}
.autocomplete-form__field {
  position: relative;
  z-index: 702;
}
.autocomplete-form .autocomplete-form__input {
  padding: 0.9375rem 2.25rem 0.9375rem 1.125rem;
  border: none;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 2px;
  box-shadow: 0 18px 18px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
}
.autocomplete-form .autocomplete-form__input--active {
  border-radius: 2px 2px 0 0;
}
.autocomplete-form__suggestion {
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  line-height: 2;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 18px 18px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  max-height: 30rem;
  overflow-x: hidden;
  z-index: 703;
}
.autocomplete-form .autocomplete-form__clean-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding-right: 0.75rem;
}
.autocomplete-form--overlap {
  z-index: 1169;
}
.autocomplete-form--small .autocomplete-form__input {
  font-size: 0.875rem;
  padding: 0.6875rem 2.5rem 0.6875rem 0.875rem;
  line-height: 0.875rem;
}
.autocomplete-form--small .autocomplete-form__clean-button {
  padding-right: 0.875rem;
  color: #b2b2b2;
}
.autocomplete-form--small .autocomplete-form__clean-button:hover, .autocomplete-form--small .autocomplete-form__clean-button:focus {
  color: #4c4c4c;
}
.autocomplete-form--small .autocomplete-form__icon {
  width: 0.75rem;
  height: 0.75rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/card/card.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.card {
  position: relative;
}
.card__container {
  position: relative;
  padding-bottom: 2.5rem;
}
.card__actions-container {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  margin: auto;
}
.card--stretch {
  height: 100%;
}
.card__container--category-list-item {
  display: flex;
  align-items: center;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/cart-counter/cart-counter.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.cart-counter__content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.125rem;
}
@media only screen and (min-width: 768px) {
  .cart-counter__content {
    align-items: flex-start;
  }
}
.cart-counter__label {
  display: none;
}
@media only screen and (min-width: 768px) {
  .cart-counter__label {
    display: inline;
  }
}
.cart-counter__label--mobile {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0.25rem;
  padding-right: 0.125rem;
}
@media only screen and (min-width: 768px) {
  .cart-counter__label--mobile {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .cart-counter__quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    background: #08493d;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    margin-top: 0.3125rem;
  }
}
.cart-counter__quantity::before {
  content: "(";
}
.cart-counter__quantity::after {
  content: ")";
}
@media only screen and (min-width: 768px) {
  .cart-counter__quantity::before, .cart-counter__quantity::after {
    display: none;
  }
}
.cart-counter__quantity--hidden {
  display: none;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/collapsible-block/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.collapsible-block {
  border: 1px solid #f0f0f0;
}
.collapsible-block[open] .collapsible-block__header::after {
  transform: rotate(225deg);
}
.collapsible-block__header {
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.collapsible-block__header::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.collapsible-block__header::-webkit-details-marker {
  display: none;
}
.collapsible-block__content {
  border-top: 1px solid #f0f0f0;
  padding: 0.5rem 1rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/collapsible-list/collapsible-list.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.collapsible-list__button {
  background-color: rgba(255, 255, 255, 0);
  color: #08493d;
  cursor: pointer;
}
.collapsible-list__button:hover {
  text-decoration: underline;
}
.collapsible-list__button::after {
  content: attr(data-show);
}
.collapsible-list__button--shown::after {
  content: attr(data-hide);
}
.collapsible-list__button-content {
  display: none;
}
.collapsible-list {
  margin-bottom: 1.25rem;
}
.collapsible-list__item {
  margin-bottom: 0.625rem;
}
.collapsible-list__item:last-of-type {
  margin-bottom: 0;
}
.collapsible-list__name {
  color: #333;
}
.collapsible-list__value {
  color: #8f8f8f;
}
.collapsible-list__button--shown {
  margin-top: 0.875rem;
}
.collapsible-list--small {
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}
.collapsible-list--small .collapsible-list__item {
  margin-bottom: 0.5rem;
}
.collapsible-list--small .collapsible-list__item:last-of-type {
  margin-bottom: 0;
}
.collapsible-list--small .collapsible-list__button--shown {
  margin-top: 0.625rem;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/empty-state/styles.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-wrap: pretty;
  font-size: 1rem;
  max-width: 40rem;
  margin: 2.8rem auto;
}
.empty-state__icon {
  width: 5.62rem;
  height: 5.62rem;
  margin-bottom: 1.75rem;
  color: #08493d;
}
.empty-state__title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.empty-state__description {
  margin: 0 0 1.75rem;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/endless-scroll/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.endless-scroll {
  display: flex;
  max-height: 100%;
  overflow: hidden;
}
.endless-scroll__scroll-container {
  overflow-y: auto;
  width: 100%;
}
.endless-scroll__loader {
  position: relative;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/flash-message/flash-message.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.flash-message {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 500ms ease-in-out, opacity 500ms ease-in-out, max-height 500ms ease-in-out;
  max-height: 0;
  overflow-y: hidden;
  font-size: 17px;
  font-family: "DIN Pro", Arial, sans-serif;
  background-color: #08493d;
  color: #fff;
}
.flash-message__content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.flash-message__content::after {
  display: none;
}
.flash-message__text {
  padding-right: 1rem;
}
.flash-message__static-link {
  flex-shrink: 0;
}
.flash-message__message {
  padding: 1.25rem 1rem;
}
.flash-message--show {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  max-height: 8rem;
}
.flash-message--info {
  color: #000;
}
.flash-message--success {
  background-color: #08493d;
}
.flash-message--warning {
  background-color: #d88d00;
}
.flash-message--alert {
  background-color: #e01a00;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/formatted-number-input/formatted-number-input.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.input {
  transition: border-color 250ms ease-in-out;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #dce0e5;
}
.input:focus {
  border-color: #8f8f8f;
}
.input::placeholder {
  color: #4c4c4c;
}
.input--expand {
  display: block;
  width: 100%;
}
.input--naked {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.input--error {
  border-color: #e01a00;
}
.input[disabled], .input--disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}
.input {
  border-radius: 2px;
  color: #4c4c4c;
  font: 400 0.9375rem/1.1875rem "DIN Pro", Arial, sans-serif;
  padding: 0.875rem 1.25rem 0.8125rem;
}
.input::placeholder {
  color: #4c4c4c;
  opacity: 1;
}
.input--small {
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding: 0.625rem 1rem;
}
.input--measurement-unit {
  max-width: 5.625rem;
  appearance: none;
}
.input--measurement-unit::-webkit-inner-spin-button, .input--measurement-unit::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.input--filter-range {
  font-weight: 500;
  color: #4c4c4c;
  padding-right: 1.5rem;
  padding-left: 0.5rem;
}
@media only screen and (min-width: 550px) {
  .input--filter-range {
    padding-left: 0.75rem;
  }
}
.input--transparent[disabled] {
  background-color: rgba(255, 255, 255, 0);
}
.input--inline {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.formatted-number-input__input {
  transition: border-color 250ms ease-in-out;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #dce0e5;
}
.formatted-number-input__input:focus {
  border-color: #8f8f8f;
}
.formatted-number-input__input::placeholder {
  color: #4c4c4c;
}
.formatted-number-input__input--expand {
  display: block;
  width: 100%;
}
.formatted-number-input__input--naked {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.formatted-number-input__input--error {
  border-color: #e01a00;
}
.formatted-number-input__input[disabled], .formatted-number-input__input--disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}
.formatted-number-input__input {
  border-radius: 2px;
  color: #4c4c4c;
  font: 400 0.9375rem/1.1875rem "DIN Pro", Arial, sans-serif;
  padding: 0.875rem 1.25rem 0.8125rem;
}
.formatted-number-input__input::placeholder {
  color: #4c4c4c;
  opacity: 1;
}
.formatted-number-input__input--small {
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding: 0.625rem 1rem;
}
.formatted-number-input__input--measurement-unit {
  max-width: 5.625rem;
  appearance: none;
}
.formatted-number-input__input--measurement-unit::-webkit-inner-spin-button, .formatted-number-input__input--measurement-unit::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.formatted-number-input__input--filter-range {
  font-weight: 500;
  color: #4c4c4c;
  padding-right: 1.5rem;
  padding-left: 0.5rem;
}
@media only screen and (min-width: 550px) {
  .formatted-number-input__input--filter-range {
    padding-left: 0.75rem;
  }
}
.formatted-number-input__input--transparent[disabled] {
  background-color: rgba(255, 255, 255, 0);
}
.formatted-number-input__input--inline {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/image-carousel/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.image-carousel__container {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.image-carousel__view {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}
.image-carousel__slider {
  transition: transform 500ms ease-in-out;
  flex-wrap: nowrap;
}
.image-carousel__dots {
  text-align: center;
  line-height: 0;
}
.image-carousel__dot {
  display: inline-block;
  padding: 0.25rem;
}
.image-carousel__dot::before {
  transition: background-color 150ms ease-in-out;
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #595959;
  border-radius: 100%;
}
.image-carousel__dot:hover::before, .image-carousel__dot--current::before {
  background-color: #08493d;
}
.image-carousel__navigation {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.image-carousel__navigation--prev {
  left: 0;
}
.image-carousel__navigation--next {
  right: 0;
}
.image-carousel__arrow {
  transition: color 250ms ease-in-out;
  color: #595959;
  pointer-events: all;
}
.image-carousel__arrow:hover {
  color: #08493d;
}
.image-carousel--inset .image-carousel__container {
  padding-left: 0;
  padding-right: 0;
}
.image-carousel--inset .image-carousel__navigation {
  width: auto;
}
.image-carousel--inset .image-carousel__arrow {
  padding: 0.5rem;
  background-color: rgba(244, 244, 244, 0.75);
}
@media only screen and (min-width: 768px) {
  .image-carousel__navigation {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  }
  .image-carousel:hover .image-carousel__navigation {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/input-dropzone/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.input-dropzone {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.input-dropzone__area {
  transition: border-color 250ms ease-in-out;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 0.125rem dashed #dce0e5;
  min-height: 8.75rem;
  padding: 1rem;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding-bottom: 0.625rem;
}
.input-dropzone__area--error {
  border-color: #e01a00;
}
.input-dropzone__area:hover {
  border-color: #8f8f8f;
}
.input-dropzone__area:has(:focus-visible) {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.125rem;
}
.input-dropzone__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.input-dropzone__description {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.625rem;
}
.input-dropzone__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding-bottom: 0.625rem;
}
.input-dropzone__files:empty {
  display: none;
}
.input-dropzone__file {
  display: flex;
  align-items: center;
  border-radius: 0.625rem;
  padding: 0 0.3125rem;
  gap: 0.3rem;
  background-color: #f0f0f0;
  cursor: pointer;
}
.input-dropzone__file-delete {
  color: #e01a00;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/jumbotron/jumbotron.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.jumbotron {
  overflow: hidden;
}
.jumbotron__container {
  height: 22.5rem;
  background-color: #08493d;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  padding: 0 0.9375rem;
}
@media only screen and (min-width: 550px) {
  .jumbotron__container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .jumbotron__container {
    height: 28.4375rem;
    text-align: left;
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }
}
.jumbotron__title, .jumbotron__text {
  color: #fff;
}
.jumbotron__title {
  font-size: 2.125rem;
  line-height: 2.375rem;
  font-weight: 500;
  margin-bottom: 1.6875rem;
  letter-spacing: -0.01875rem;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) {
  .jumbotron__title {
    font-size: 2.625rem;
    line-height: 2.875rem;
    letter-spacing: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .jumbotron__title {
    font-size: 3.125rem;
    line-height: 3rem;
  }
}
.jumbotron__text {
  padding: 0 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.025625rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 768px) {
  .jumbotron__text {
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .jumbotron__text {
    font-size: 1.375rem;
    line-height: 1.75rem;
    margin-bottom: 3rem;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/lazy-image/lazy-image.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.lazy-image {
  line-height: 1;
}
.lazy-image--thumbnail {
  position: relative;
  height: 10rem;
  margin: 0.5rem;
}
.lazy-image--smaller {
  height: 3rem;
}
.lazy-image--small {
  height: 5rem;
}
.lazy-image--big {
  height: 20rem;
}
.lazy-image--bigger {
  height: 30rem;
}
.lazy-image--expand {
  width: 100%;
}
.lazy-image--min-size {
  min-width: 2.5rem;
}
.lazy-image--has-border {
  border: 0.25rem solid rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 1px #f0f0f0;
}
.lazy-image--spaceless {
  margin: 0;
}
.lazy-image--with-overlay {
  position: relative;
  overflow: hidden;
}
.lazy-image--with-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.lazy-image--background {
  position: relative;
}
.lazy-image__image--thumbnail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.lazy-image__image--color-light {
  color: #dadada;
}
.lazy-image__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.lazy-image--smaller {
  height: 3.25rem;
}
@media only screen and (min-width: 768px) {
  .lazy-image--smaller {
    height: 2.625rem;
  }
}
.lazy-image--configured-bundle {
  margin: 0.5rem 1rem 0.5rem 0;
  padding: 0.5rem;
  flex-grow: 1;
}
.lazy-image--configured-bundle::before {
  border-radius: 2px 0 0 2px;
}
.lazy-image--pdp-bundle {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 0.1875rem;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lazy-image--category-list {
  height: 19.5625rem;
}
@media only screen and (min-width: 550px) {
  .lazy-image--category-list {
    height: 10rem;
  }
}
.lazy-image--catalog {
  height: 11.25rem;
}
@media only screen and (min-width: 768px) {
  .lazy-image--catalog {
    height: 15rem;
  }
}
.lazy-image--category {
  height: 7.75rem;
}
@media only screen and (min-width: 768px) {
  .lazy-image--category {
    height: 15rem;
  }
}
.lazy-image--shopping-list {
  height: 4.6875rem;
}
@media only screen and (min-width: 768px) {
  .lazy-image--shopping-list {
    height: 10rem;
  }
}
.lazy-image--cart {
  height: 4.6875rem;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .lazy-image--cart {
    height: 10rem;
    margin: 0.5rem;
  }
}
.lazy-image--summary {
  height: 4.6875rem;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .lazy-image--summary {
    height: 6.25rem;
    margin: 0.25rem;
  }
}
.lazy-image--full-size {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lazy-image--category-list-item {
  height: auto;
  margin: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .lazy-image--category-list-item {
    height: 6.25rem;
    display: flex;
    justify-content: center;
  }
}
.lazy-image__content {
  position: relative;
  line-height: 1.5;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/main-overlay/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.main-overlay {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.4);
  z-index: 650;
}
.main-overlay--show {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/main-popup/main-popup.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.main-popup {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28.75rem;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0.625rem;
  background: #fff;
  z-index: 550;
  overflow: hidden;
}
.main-popup--wide {
  width: 77.8125rem;
}
.main-popup__head {
  min-height: 2rem;
}
.main-popup__head--scroll-inside-content {
  flex-shrink: 0;
}
.main-popup__title {
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 1.5rem;
}
.main-popup__close {
  transition: color 250ms ease-in-out;
  position: absolute;
  top: 0.625rem;
  right: 1.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: rgba(255, 255, 255, 0);
  color: #595959;
  cursor: pointer;
}
.main-popup__close:hover, .main-popup__close:focus, .main-popup__close:active {
  border: none;
  background-color: rgba(255, 255, 255, 0);
  color: #08493d;
}
.main-popup__content {
  padding: 0 1rem 1.5rem;
  overflow-y: auto;
}
.main-popup__content--scroll-inside-content {
  flex-direction: column;
  display: flex;
}
.main-popup--spaceless .main-popup__head {
  min-height: 3rem;
}
.main-popup--spaceless .main-popup__content {
  padding: 0;
}
.main-popup--open {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.main-popup--flex-content .main-popup__content {
  display: flex;
}
.main-popup--auto {
  width: auto;
}
.main-popup--top {
  z-index: 1170;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/navigation-multiview-list/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.navigation-multiview-list__icon {
  color: #4c4c4c;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/password-complexity-indicator/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.password-complexity-indicator__indicator-item {
  display: inline-block;
  width: 3.125rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  margin-right: 0.3125rem;
  background: #f0f0f0;
}
.password-complexity-indicator__indicator-list--weak {
  color: #e01a00;
}
.password-complexity-indicator__indicator-list--weak .password-complexity-indicator__indicator-item:nth-child(1) {
  background-color: #e01a00;
}
.password-complexity-indicator__indicator-list--weak .password-complexity-indicator__message::before {
  content: attr(data-weak);
}
.password-complexity-indicator__indicator-list--medium {
  color: #d88d00;
}
.password-complexity-indicator__indicator-list--medium .password-complexity-indicator__indicator-item:nth-child(1) {
  background-color: #d88d00;
}
.password-complexity-indicator__indicator-list--medium .password-complexity-indicator__indicator-item:nth-child(2) {
  background-color: #d88d00;
}
.password-complexity-indicator__indicator-list--medium .password-complexity-indicator__message::before {
  content: attr(data-medium);
}
.password-complexity-indicator__indicator-list--strong {
  color: #08493d;
}
.password-complexity-indicator__indicator-list--strong .password-complexity-indicator__indicator-item:nth-child(1) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--strong .password-complexity-indicator__indicator-item:nth-child(2) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--strong .password-complexity-indicator__indicator-item:nth-child(3) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--strong .password-complexity-indicator__message::before {
  content: attr(data-strong);
}
.password-complexity-indicator__indicator-list--very-strong {
  color: #08493d;
}
.password-complexity-indicator__indicator-list--very-strong .password-complexity-indicator__indicator-item:nth-child(1) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--very-strong .password-complexity-indicator__indicator-item:nth-child(2) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--very-strong .password-complexity-indicator__indicator-item:nth-child(3) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--very-strong .password-complexity-indicator__indicator-item:nth-child(4) {
  background-color: #08493d;
}
.password-complexity-indicator__indicator-list--very-strong .password-complexity-indicator__message::before {
  content: attr(data-very-strong);
}
.password-complexity-indicator__message {
  display: inline-block;
  vertical-align: middle;
}
.password-complexity-indicator__additional-message {
  display: none;
  font-size: 0.875rem;
  color: #595959;
}
.password-complexity-indicator__additional-message--weak, .password-complexity-indicator__additional-message--medium, .password-complexity-indicator__additional-message--strong {
  display: block;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/password-field/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.password-field {
  position: relative;
}
.password-field .password-field__input {
  padding-right: 1.875rem;
}
.password-field .password-field__icon-hide {
  display: none;
}
.password-field__button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.875rem;
  height: 100%;
  color: #595959;
  cursor: pointer;
  border: none;
  background: none;
}
.password-field__button:hover, .password-field__button:focus {
  color: #333333;
}
.password-field__button--shown .password-field__icon-show {
  display: none;
}
.password-field__button--shown .password-field__icon-hide {
  display: inline-block;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item-list/product-item-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item-list {
  position: relative;
}
.product-item-list__container {
  padding: 0 0.5625rem;
  margin-bottom: 1.875rem;
  border-radius: 2px;
  position: relative;
}
@media only screen and (min-width: 550px) {
  .product-item-list__container {
    padding: 0;
    margin-bottom: 1.25rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.05);
  }
}
@media only screen and (min-width: 1024px) {
  .product-item-list__container {
    transition: box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
  }
  .product-item-list__container:hover {
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05), 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05);
  }
}
.product-item-list__image {
  position: relative;
}
@media only screen and (min-width: 550px) {
  .product-item-list__image {
    background-color: #fff;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item-list__image {
    padding: 0.5rem 1rem;
  }
}
.product-item-list__content {
  position: relative;
}
@media only screen and (min-width: 550px) {
  .product-item-list__content {
    padding: 2.3125rem 0.625rem 4.375rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-list__content {
    padding-left: 1.25rem;
    padding-right: 1.875rem;
  }
}
.product-item-list__total {
  padding-top: 0.625rem;
}
@media only screen and (min-width: 550px) {
  .product-item-list__total {
    text-align: right;
    padding: 2.1875rem 1.875rem 1.25rem 1.125rem;
  }
}
.product-item-list__overlay {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  margin: 0 -0.5625rem 0.9375rem;
}
@media only screen and (min-width: 550px) {
  .product-item-list__overlay {
    position: static;
    padding: 0;
    margin: 0;
  }
}
.product-item-list__overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.product-item-list__price {
  align-items: flex-start;
}
@media only screen and (min-width: 550px) {
  .product-item-list__price {
    align-items: flex-end;
    height: 100%;
  }
}
.product-item-list__name {
  font-weight: 500;
  line-height: normal;
  color: #333;
  letter-spacing: 0.00625rem;
}
.product-item-list__details {
  display: none;
}
@media only screen and (min-width: 550px) {
  .product-item-list__details {
    display: block;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item-list__details {
    position: relative;
    width: 100%;
  }
}
.product-item-list__actions-row {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .product-item-list__actions-row {
    position: absolute;
    right: 0;
    bottom: 0;
    flex-direction: row;
  }
}
.product-item-list__action {
  padding-top: 0.5rem;
}
@media only screen and (min-width: 1024px) {
  .product-item-list__action {
    padding-top: 0;
    padding-left: 0.5rem;
  }
}
.product-item-list--order .product-item-list__container {
  margin-bottom: 0;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.05);
  color: #000;
  padding: 0.9375rem 0.9375rem 0.9375rem 0;
}
@media only screen and (min-width: 550px) {
  .product-item-list--order .product-item-list__container {
    font-size: 1rem;
  }
}
.product-item-list--order .product-item-list__container:hover {
  box-shadow: none;
  background: rgba(0, 0, 0, 0.05);
}
.product-item-list--order .product-item-list__overlay {
  margin: 0;
  padding: 0;
}
.product-item-list--order .product-item-list__overlay::before {
  background: rgba(255, 255, 255, 0);
}
@media only screen and (min-width: 550px) {
  .product-item-list--order .product-item-list__overlay::before {
    background: rgba(0, 0, 0, 0.05);
  }
}
.product-item-list--order .product-item-list__image {
  padding: 0 0.9375rem;
  align-self: center;
}
.product-item-list--order .product-item-list__name {
  font-weight: 700;
  display: block;
  line-height: 1.25rem;
  margin-bottom: 0.3125rem;
}
.product-item-list--order .product-item-list__sku {
  color: #8f8f8f;
  font-size: 0.875rem;
}
.product-item-list--order .product-item-list__quantity {
  color: #8f8f8f;
}
@media only screen and (min-width: 550px) {
  .product-item-list--order .product-item-list__quantity {
    padding-left: 0.9375rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-list--order .product-item-list__quantity {
    text-align: right;
  }
}
.product-item-list--order .product-item-list__price {
  height: auto;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .product-item-list--order .product-item-list__price {
    padding-left: 0.9375rem;
    text-align: right;
  }
}
.product-item-list--order .product-item-list__sum-price {
  font-weight: 700;
}
@media only screen and (min-width: 550px) {
  .product-item-list--order .product-item-list__sum-price {
    padding-left: 0.9375rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-item-list--order .product-item-list__sum-price {
    text-align: right;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-item/product-item.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-item {
  padding: 0 0 1.875rem;
}
.product-item--equal-height {
  height: auto;
}
.product-item--full-height {
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .product-item--catalog {
    padding-bottom: 0.1875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__colors {
    transition: opacity 250ms ease-in-out;
  }
  .product-item__colors:not(:has(:focus-visible)) {
    opacity: 0;
  }
}
.product-item__colors--category {
  position: relative;
}
.product-item__container {
  padding: 0;
  height: 100%;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .product-item__container {
    padding: 0.5rem 0.625rem 0.9375rem;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__container {
    padding: 0.5rem 1.75rem 2.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__container:hover .product-item__image-wrap--catalog::before {
    background-color: rgba(255, 255, 255, 0);
  }
  .product-item__container:hover .product-item__overlay {
    color: #4c4c4c;
  }
  .product-item__container:hover .product-item__overlay::before {
    box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0);
  }
  .product-item__container:hover .product-item__colors {
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) {
  .product-item__container--catalog {
    padding-top: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__container--catalog {
    padding: 0 0.875rem 0.9375rem;
  }
}
.product-item__container--product-set {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .product-item__container--product-set {
    padding: 0 0.875rem 1.625rem;
  }
}
.product-item__container--sets {
  padding-bottom: 4.125rem;
}
.product-item__image-wrap {
  position: relative;
  padding: 0.75rem 0;
  margin-bottom: 1.0625rem;
}
@media only screen and (min-width: 768px) {
  .product-item__image-wrap {
    padding: 0.75rem 0.625rem;
    margin: 0 -0.625rem 1.0625rem;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__image-wrap {
    margin: 0 -0.875rem 0.9375rem;
    padding: 0.5rem 0.875rem;
  }
}
.product-item__image-wrap::before {
  transition: box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .product-item__image-wrap::before {
    display: none;
  }
}
.product-item__image-wrap--product-set {
  max-height: 15.1875rem;
}
.product-item__image-wrap--catalog::before {
  transition: box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .product-item__image-wrap--catalog::before {
    display: block;
  }
}
.product-item__image-wrap--stretch {
  margin-left: 0;
  margin-right: 0;
}
.product-item__overlay {
  font-size: 0.875rem;
  color: #4c4c4c;
  font-weight: 500;
  height: 2.625rem;
  overflow: hidden;
  /* stylelint-disable */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* stylelint-enable */
}
.product-item__overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 13.75rem;
  z-index: 1;
}
.product-item__overlay--category::before {
  height: 10.25rem;
}
@media only screen and (min-width: 768px) {
  .product-item__overlay {
    font-size: 1.125rem;
    height: 5.0625rem;
    /* stylelint-disable */
    -webkit-line-clamp: 3;
    /* stylelint-enable */
  }
  .product-item__overlay::before {
    transition: box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
    height: 100%;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__overlay {
    letter-spacing: 0.0125rem;
  }
}
.product-item__overlay--catalog {
  color: #333;
}
@media only screen and (min-width: 768px) {
  .product-item__overlay--catalog {
    font-size: 1rem;
    height: 3.8125rem;
    line-height: normal;
  }
}
.product-item__overlay--catalog::before {
  background-color: rgba(255, 255, 255, 0);
}
@media only screen and (min-width: 768px) {
  .product-item__overlay--product-set {
    font-size: 1rem;
    height: 3.8125rem;
    line-height: normal;
  }
}
@media only screen and (min-width: 1024px) {
  .product-item__overlay:hover {
    color: #4c4c4c;
  }
  .product-item__overlay:hover::before {
    box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0);
  }
}
.product-item__info {
  max-width: 100%;
}
.product-item__variant {
  margin: 0.5rem 0 0.625rem;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .product-item__variant {
    margin-bottom: 1.5rem;
  }
}
.product-item__category {
  font-size: 0.875rem;
  display: block;
  line-height: 1rem;
  letter-spacing: 0.0125rem;
  font-weight: 400;
  color: #333;
  margin-top: 0.1875rem;
}
@media only screen and (min-width: 768px) {
  .product-item__category {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}
.product-item__rating {
  margin-top: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .product-item__rating {
    margin-top: 0.6875rem;
  }
}
.product-item__price {
  margin-top: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .product-item__price {
    margin-top: 1.5625rem;
  }
}
.product-item__actions {
  position: relative;
  z-index: 2;
}
.product-item__actions--sticky-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.625rem;
}
@media only screen and (min-width: 1024px) {
  .product-item__actions--sticky-bottom {
    left: 0.875rem;
    right: 0.875rem;
  }
}
.product-item__actions-row {
  margin-top: 0.625rem;
  display: flex;
  width: 100%;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/quote-status/quote-status.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.quote-status {
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  min-width: 5.625rem;
  text-align: center;
}
.quote-status--waiting {
  background-color: rgba(255, 170.625, 12, 0.5);
  color: rgb(165, 107.7083333333, 0);
}
.quote-status--approved {
  background-color: rgba(13.037037037, 118.962962963, 99.4074074074, 0.3);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.quote-status--declined {
  background-color: rgba(255, 47.2767857143, 20, 0.3);
  color: rgb(173, 20.0803571429, 0);
}
.quote-status--small {
  padding: 0 0.5rem;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.search-form {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out, transform 250ms ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
}
.search-form--main-search {
  z-index: 1161;
}
@media only screen and (min-width: 768px) {
  .search-form--main-search {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    transform: none;
    transition: none;
    z-index: 1;
  }
}
.search-form--active {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 1170;
}
.search-form__button {
  position: absolute;
  top: 0;
  width: 2.8125rem;
  height: 100%;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0);
  color: #4c4c4c;
  z-index: 703;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .search-form__button {
    width: 3.4375rem;
  }
}
.search-form__button--submit {
  left: 0;
}
.search-form__button--close {
  right: 0;
}
@media only screen and (min-width: 768px) {
  .search-form__button--close {
    display: none;
  }
}
.search-form__button:hover .search-form__icon {
  color: #8f8f8f;
  fill: #8f8f8f;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/simple-carousel/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.simple-carousel__container {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.simple-carousel__view {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}
.simple-carousel__slider {
  transition: transform 500ms ease-in-out;
  flex-wrap: nowrap;
}
.simple-carousel__dots {
  text-align: center;
  line-height: 0;
}
.simple-carousel__dot {
  display: inline-block;
  padding: 0.25rem;
}
.simple-carousel__dot::before {
  transition: background-color 150ms ease-in-out;
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #595959;
  border-radius: 100%;
}
.simple-carousel__dot:hover::before, .simple-carousel__dot--current::before {
  background-color: #08493d;
}
.simple-carousel__navigation {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.simple-carousel__navigation--prev {
  left: 0;
}
.simple-carousel__navigation--next {
  right: 0;
}
.simple-carousel__arrow {
  transition: color 250ms ease-in-out;
  color: #595959;
  pointer-events: all;
}
.simple-carousel__arrow:hover {
  color: #08493d;
}
.simple-carousel--inset .simple-carousel__container {
  padding-left: 0;
  padding-right: 0;
}
.simple-carousel--inset .simple-carousel__navigation {
  width: auto;
}
.simple-carousel--inset .simple-carousel__arrow {
  padding: 0.5rem;
  background-color: rgba(244, 244, 244, 0.75);
}
@media only screen and (min-width: 768px) {
  .simple-carousel__navigation {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  }
  .simple-carousel:hover .simple-carousel__navigation {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/single-button-form/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.single-button-form__button {
  background-color: rgba(255, 255, 255, 0);
  color: #08493d;
  cursor: pointer;
}
.single-button-form__button:hover, .single-button-form__button:focus {
  text-decoration: underline;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/skip-link/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.skip-link {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  background: #08493d;
  position: absolute;
  padding: 0.5rem 1rem;
  z-index: 2000;
  text-decoration: none;
}
.skip-link:hover, .skip-link:focus {
  clip: auto;
  pointer-events: auto;
  outline: 0.0625rem solid #fff;
  color: #fff;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/status/status.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.status {
  font-size: 0.875rem;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.status--hollow {
  border: 1px solid #dadada;
  background: none;
  color: #4c4c4c;
}
.status--success {
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.status--warning {
  background-color: rgb(255, 214.8958333333, 139.5);
  color: rgb(165, 107.7083333333, 0);
}
.status--alert {
  background-color: rgb(255, 159.9776785714, 147.5);
  color: rgb(173, 20.0803571429, 0);
}
.status--availability {
  padding: 0 0.75rem 0 1.875rem;
  position: relative;
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: #000;
  line-height: 1.625rem;
  border-radius: 0.25rem;
}
.status--availability::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  translate: 0 -50%;
  width: 0.625rem;
  aspect-ratio: 1;
  background-color: #08493d;
  border-radius: 100%;
}
.status--out-of-stock {
  background-color: rgb(255, 159.9776785714, 147.5);
}
.status--out-of-stock::before {
  background-color: #e01a00;
}
.status--in-stock, .status--never-out-of-stock, .status--available {
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
}
.status--in-stock::before, .status--never-out-of-stock::before, .status--available::before {
  background-color: #08493d;
}
.status--running-low {
  background-color: rgb(255, 214.8958333333, 139.5);
}
.status--running-low::before {
  background-color: #d88d00;
}
.status--rejected, .status--in-progress, .status--refunded {
  background-color: rgb(255, 159.9776785714, 147.5);
  color: rgb(173, 20.0803571429, 0);
}
.status--approved, .status--ready, .status--paid, .status--delivered, .status--configured {
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  color: rgb(2.962962963, 27.037037037, 22.5925925926);
}
.status--pending, .status--waiting, .status--payment-pending, .status--confirmed, .status--sent-to-merchant, .status--shipped-by-merchant, .status--exported, .status--not-configured {
  background-color: rgb(255, 214.8958333333, 139.5);
  color: rgb(165, 107.7083333333, 0);
}
.status--closed {
  background-color: rgb(140.25, 140.25, 140.25);
  color: rgb(25.5, 25.5, 25.5);
}
.status--cancelled, .status--canceled, .status--ready-for-return, .status--returned, .status--waiting-for-return, .status--return-canceled {
  background-color: rgb(178.25, 178.25, 178.25);
  color: rgb(63.5, 63.5, 63.5);
}
.status--draft {
  background-color: rgb(255, 159.9776785714, 147.5);
  color: rgb(173, 20.0803571429, 0);
}
.status--text-bold {
  font-weight: 700;
}
.status {
  border-radius: 1rem;
  padding: 0.25rem 1rem;
  margin: 0.125rem 0.125rem 0.125rem 0;
  font-size: 0.75rem;
  text-align: center;
}
.status--borderless {
  border-radius: 0;
}
.status--small {
  padding: 0 1rem;
}
.status--ready, .status--paid, .status--delivered {
  background-color: rgb(107.3777777778, 238.8222222222, 214.5555555556);
  color: #08493d;
}
.status--cancelled, .status--ready-for-return, .status--returned, .status--waiting-for-return, .status--return-canceled {
  background-color: rgb(232.25, 232.25, 232.25);
  color: #4c4c4c;
}
.status--shipped {
  background-color: rgb(181.4, 223, 255);
  color: #005ba1;
}
.status--not-configured {
  background-color: rgb(255, 159.9776785714, 147.5);
  color: #e01a00;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/suggest-search/suggest-search.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.suggest-search__container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0.0625rem 1.5625rem 1.875rem;
  border-radius: 0 0 2px 2px;
  background: #fff;
  box-shadow: 0 18px 18px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  max-height: 18.75rem;
  overflow-x: hidden;
  z-index: 703;
}
@media only screen and (min-width: 768px) {
  .suggest-search__container {
    max-height: 30rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.suggest-search__input, .suggest-search__hint {
  padding: 1.25rem 2.8125rem;
  border: 0.0625rem solid #4c4c4c;
  font: 700 1.125rem/1.25rem "DIN Pro", Arial, sans-serif;
  width: 100%;
  border-radius: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .suggest-search__input, .suggest-search__hint {
    padding: 0.9375rem 0.625rem 0.9375rem 3.4375rem;
    font-size: 0.9375rem;
    font-weight: 400;
  }
}
.suggest-search__input--active, .suggest-search__hint--active {
  border-radius: 0;
  outline: none;
  border-color: transparent;
}
@media only screen and (min-width: 768px) {
  .suggest-search__input--active, .suggest-search__hint--active {
    border-radius: 1.875rem 1.875rem 0 0;
  }
}
.suggest-search__input {
  position: relative;
  z-index: 702;
}
.suggest-search__input--transparent {
  background-color: rgba(255, 255, 255, 0);
}
.suggest-search__hint {
  position: absolute;
  top: 0;
  color: #b2b2b2;
  z-index: 701;
}
@media only screen and (min-width: 768px) {
  .suggest-search__hint {
    padding-right: 0.9375rem;
  }
}
.suggest-search__hint--active {
  background-color: #f6f6f6;
}
.suggest-search__product {
  padding-bottom: 0.625rem;
}
.suggest-search__product-action {
  padding-top: 1.4375rem;
}
.suggest-search__item--active {
  text-decoration: underline;
}
.suggest-search--with-overlay {
  position: relative;
  z-index: 1170;
}
.suggest-search--with-overlay .suggest-search__loader {
  top: -3.75rem;
}
@media only screen and (min-width: 768px) {
  .suggest-search--with-overlay .suggest-search__loader {
    top: -3.125rem;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-checkbox/toggler-checkbox.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.checkbox {
  display: inline-block;
  position: relative;
}
.checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox__input:focus ~ .checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox__input:checked ~ .checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox__input:checked ~ .checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox__input:checked ~ .checkbox__label {
  font-weight: 700;
}
.checkbox__input:checked ~ .checkbox__label--alternative {
  font-weight: 400;
}
.checkbox__input[disabled] ~ .checkbox__box, .checkbox__input[disabled] ~ .checkbox__box:hover, .checkbox__input--disabled ~ .checkbox__box, .checkbox__input--disabled ~ .checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox__input[disabled]:checked ~ .checkbox__box, .checkbox__input--disabled:checked ~ .checkbox__box {
  background-color: #dce0e5;
}
.checkbox__input[disabled] ~ .checkbox__label, .checkbox__input--disabled ~ .checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox__counter {
  padding-left: 0.5rem;
}
.checkbox--expand {
  display: block;
}
.checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox--filter {
    font-size: 0.875rem;
  }
}
.checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox--alternative:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox--pdp:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
.checkbox--error .checkbox__box {
  border-color: #e01a00;
}
.checkbox:hover .checkbox__box {
  border-color: #08493d;
}
.checkbox:hover .checkbox__input[disabled] ~ .checkbox__box,
.checkbox:hover .checkbox__input--disabled ~ .checkbox__box {
  border-color: #dce0e5;
}

.toggler-checkbox {
  display: inline-block;
  position: relative;
}
.toggler-checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.toggler-checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .toggler-checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.toggler-checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .toggler-checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.toggler-checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .toggler-checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.toggler-checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.toggler-checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.toggler-checkbox__input:focus ~ .toggler-checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__box .toggler-checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__label {
  font-weight: 700;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__label--alternative {
  font-weight: 400;
}
.toggler-checkbox__input[disabled] ~ .toggler-checkbox__box, .toggler-checkbox__input[disabled] ~ .toggler-checkbox__box:hover, .toggler-checkbox__input--disabled ~ .toggler-checkbox__box, .toggler-checkbox__input--disabled ~ .toggler-checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.toggler-checkbox__input[disabled]:checked ~ .toggler-checkbox__box, .toggler-checkbox__input--disabled:checked ~ .toggler-checkbox__box {
  background-color: #dce0e5;
}
.toggler-checkbox__input[disabled] ~ .toggler-checkbox__label, .toggler-checkbox__input--disabled ~ .toggler-checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.toggler-checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.toggler-checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.toggler-checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.toggler-checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.toggler-checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.toggler-checkbox__counter {
  padding-left: 0.5rem;
}
.toggler-checkbox--expand {
  display: block;
}
.toggler-checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .toggler-checkbox--filter {
    font-size: 0.875rem;
  }
}
.toggler-checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.toggler-checkbox--alternative:hover .toggler-checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .toggler-checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.toggler-checkbox--pdp:hover .toggler-checkbox__box--alternative {
  border-color: #b2b2b2;
}
.toggler-checkbox--error .toggler-checkbox__box {
  border-color: #e01a00;
}
.toggler-checkbox:hover .toggler-checkbox__box {
  border-color: #08493d;
}
.toggler-checkbox:hover .toggler-checkbox__input[disabled] ~ .toggler-checkbox__box,
.toggler-checkbox:hover .toggler-checkbox__input--disabled ~ .toggler-checkbox__box {
  border-color: #dce0e5;
}
.toggler-checkbox__input:checked ~ .toggler-checkbox__label {
  font-weight: 400;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-radio/toggler-radio.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.checkbox {
  display: inline-block;
  position: relative;
}
.checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox__input:focus ~ .checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox__input:checked ~ .checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox__input:checked ~ .checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox__input:checked ~ .checkbox__label {
  font-weight: 700;
}
.checkbox__input:checked ~ .checkbox__label--alternative {
  font-weight: 400;
}
.checkbox__input[disabled] ~ .checkbox__box, .checkbox__input[disabled] ~ .checkbox__box:hover, .checkbox__input--disabled ~ .checkbox__box, .checkbox__input--disabled ~ .checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox__input[disabled]:checked ~ .checkbox__box, .checkbox__input--disabled:checked ~ .checkbox__box {
  background-color: #dce0e5;
}
.checkbox__input[disabled] ~ .checkbox__label, .checkbox__input--disabled ~ .checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox__counter {
  padding-left: 0.5rem;
}
.checkbox--expand {
  display: block;
}
.checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox--filter {
    font-size: 0.875rem;
  }
}
.checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox--alternative:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox--pdp:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
.checkbox--error .checkbox__box {
  border-color: #e01a00;
}
.checkbox:hover .checkbox__box {
  border-color: #08493d;
}
.checkbox:hover .checkbox__input[disabled] ~ .checkbox__box,
.checkbox:hover .checkbox__input--disabled ~ .checkbox__box {
  border-color: #dce0e5;
}

.radio {
  display: inline-block;
  position: relative;
}
.radio__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.radio__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .radio__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.radio__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .radio__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.radio__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .radio__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.radio__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.radio__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.radio__input:focus ~ .radio__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.radio__input:checked ~ .radio__box {
  background-color: #08493d;
  border-color: #08493d;
}
.radio__input:checked ~ .radio__box .radio__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.radio__input:checked ~ .radio__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.radio__input:checked ~ .radio__label {
  font-weight: 700;
}
.radio__input:checked ~ .radio__label--alternative {
  font-weight: 400;
}
.radio__input[disabled] ~ .radio__box, .radio__input[disabled] ~ .radio__box:hover, .radio__input--disabled ~ .radio__box, .radio__input--disabled ~ .radio__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.radio__input[disabled]:checked ~ .radio__box, .radio__input--disabled:checked ~ .radio__box {
  background-color: #dce0e5;
}
.radio__input[disabled] ~ .radio__label, .radio__input--disabled ~ .radio__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.radio__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.radio__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.radio__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.radio__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.radio__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.radio__counter {
  padding-left: 0.5rem;
}
.radio--expand {
  display: block;
}
.radio--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .radio--filter {
    font-size: 0.875rem;
  }
}
.radio--alternative {
  margin-bottom: 0.9375rem;
}
.radio--alternative:hover .radio__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .radio--pdp {
    margin-left: 8.25rem;
  }
}
.radio--pdp:hover .radio__box--alternative {
  border-color: #b2b2b2;
}
.radio--error .radio__box {
  border-color: #e01a00;
}
.radio:hover .radio__box {
  border-color: #08493d;
}
.radio:hover .radio__input[disabled] ~ .radio__box,
.radio:hover .radio__input--disabled ~ .radio__box {
  border-color: #dce0e5;
}
.radio--mobile-small .radio__box {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
}
.radio__box {
  transition: border-color 250ms ease-in-out;
  border-radius: 100%;
  border-width: 0.125rem;
}
.radio__check {
  display: none;
}
.radio__input:checked ~ .radio__box {
  background-color: #08493d;
  border-color: #08493d;
  box-shadow: inset 0 0 0 0.1875rem #fff;
}
.radio--checkout {
  width: 100%;
}
.radio--checkout .radio__container {
  padding: 1.625rem 1.25rem 1.625rem 1.5625rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}
@media only screen and (min-width: 550px) {
  .radio--checkout .radio__container {
    padding: 1.875rem;
  }
}
.radio--checkout .radio__box {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .radio--checkout .radio__box {
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
  }
}
.radio--checkout .radio__box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0.0625rem solid #e7eaee;
}
.radio--checkout .radio__label {
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-bottom: 0;
}
.radio--checkout .radio__input:checked ~ .radio__label {
  color: #333;
  font-weight: 500;
}
.radio--border-top-less .radio__box::before {
  border-top: none;
}

.toggler-radio {
  display: inline-block;
  position: relative;
}
.toggler-radio__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.toggler-radio__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .toggler-radio__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.toggler-radio__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .toggler-radio__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.toggler-radio__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .toggler-radio__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.toggler-radio__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.toggler-radio__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.toggler-radio__input:focus ~ .toggler-radio__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.toggler-radio__input:checked ~ .toggler-radio__box {
  background-color: #08493d;
  border-color: #08493d;
}
.toggler-radio__input:checked ~ .toggler-radio__box .toggler-radio__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.toggler-radio__input:checked ~ .toggler-radio__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.toggler-radio__input:checked ~ .toggler-radio__label {
  font-weight: 700;
}
.toggler-radio__input:checked ~ .toggler-radio__label--alternative {
  font-weight: 400;
}
.toggler-radio__input[disabled] ~ .toggler-radio__box, .toggler-radio__input[disabled] ~ .toggler-radio__box:hover, .toggler-radio__input--disabled ~ .toggler-radio__box, .toggler-radio__input--disabled ~ .toggler-radio__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.toggler-radio__input[disabled]:checked ~ .toggler-radio__box, .toggler-radio__input--disabled:checked ~ .toggler-radio__box {
  background-color: #dce0e5;
}
.toggler-radio__input[disabled] ~ .toggler-radio__label, .toggler-radio__input--disabled ~ .toggler-radio__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.toggler-radio__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.toggler-radio__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.toggler-radio__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.toggler-radio__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.toggler-radio__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.toggler-radio__counter {
  padding-left: 0.5rem;
}
.toggler-radio--expand {
  display: block;
}
.toggler-radio--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .toggler-radio--filter {
    font-size: 0.875rem;
  }
}
.toggler-radio--alternative {
  margin-bottom: 0.9375rem;
}
.toggler-radio--alternative:hover .toggler-radio__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .toggler-radio--pdp {
    margin-left: 8.25rem;
  }
}
.toggler-radio--pdp:hover .toggler-radio__box--alternative {
  border-color: #b2b2b2;
}
.toggler-radio--error .toggler-radio__box {
  border-color: #e01a00;
}
.toggler-radio:hover .toggler-radio__box {
  border-color: #08493d;
}
.toggler-radio:hover .toggler-radio__input[disabled] ~ .toggler-radio__box,
.toggler-radio:hover .toggler-radio__input--disabled ~ .toggler-radio__box {
  border-color: #dce0e5;
}
.toggler-radio--mobile-small .toggler-radio__box {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
}
.toggler-radio__box {
  transition: border-color 250ms ease-in-out;
  border-radius: 100%;
  border-width: 0.125rem;
}
.toggler-radio__check {
  display: none;
}
.toggler-radio__input:checked ~ .toggler-radio__box {
  background-color: #08493d;
  border-color: #08493d;
  box-shadow: inset 0 0 0 0.1875rem #fff;
}
.toggler-radio--checkout {
  width: 100%;
}
.toggler-radio--checkout .toggler-radio__container {
  padding: 1.625rem 1.25rem 1.625rem 1.5625rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}
@media only screen and (min-width: 550px) {
  .toggler-radio--checkout .toggler-radio__container {
    padding: 1.875rem;
  }
}
.toggler-radio--checkout .toggler-radio__box {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .toggler-radio--checkout .toggler-radio__box {
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
  }
}
.toggler-radio--checkout .toggler-radio__box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0.0625rem solid #e7eaee;
}
.toggler-radio--checkout .toggler-radio__label {
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-bottom: 0;
}
.toggler-radio--checkout .toggler-radio__input:checked ~ .toggler-radio__label {
  color: #333;
  font-weight: 500;
}
.toggler-radio--border-top-less .toggler-radio__box::before {
  border-top: none;
}
.toggler-radio__label {
  color: #202020;
}
.toggler-radio__label--secondary {
  color: #4c4c4c;
  font-weight: 500;
}
.toggler-radio__input:checked ~ .toggler-radio__box {
  background-color: #fff;
  box-shadow: inset 0 0 0 0.25rem #08493d;
}
.toggler-radio__input:checked ~ .toggler-radio__label {
  color: #333;
  font-weight: 500;
}
.toggler-radio__input:checked ~ .toggler-radio__label--secondary {
  color: #08493d;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/tooltip-message/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.tooltip-message {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  display: block;
  position: absolute;
  min-width: 20rem;
  margin-top: -0.5rem;
  transform: translateX(-50%);
}
.tooltip-message__text {
  font-size: 1rem;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  float: left;
  display: block;
  position: absolute;
  bottom: 0;
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dadada;
  text-align: center;
  z-index: 2;
}
.tooltip-message__arrow {
  position: absolute;
  left: calc(50% - 0.5rem);
  bottom: -0.5rem;
  border: 0.5rem solid #dadada;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  z-index: 1;
}
.tooltip-message--top {
  bottom: calc(100% + 0.5rem);
  left: 50%;
}
.tooltip-message--success .tooltip-message__text {
  background-color: rgb(29.2407407407, 230.2592592593, 193.1481481481);
  border-color: #08493d;
  color: #08493d;
}
.tooltip-message--success .tooltip-message__arrow {
  border-right-color: #08493d;
  border-bottom-color: #08493d;
}
.tooltip-message--warning .tooltip-message__text {
  background-color: rgb(255, 214.8958333333, 139.5);
  border-color: #d88d00;
  color: #d88d00;
}
.tooltip-message--warning .tooltip-message__arrow {
  border-right-color: #d88d00;
  border-bottom-color: #d88d00;
}
.tooltip-message--alert .tooltip-message__text {
  background-color: rgb(255, 159.9776785714, 147.5);
  border-color: #e01a00;
  color: #e01a00;
}
.tooltip-message--alert .tooltip-message__arrow {
  border-right-color: #e01a00;
  border-bottom-color: #e01a00;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/header/header.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/navigation-top/navigation-top.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/organisms/notification-area/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.notification-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1250;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/side-drawer/side-drawer.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.side-drawer {
  position: relative;
  z-index: 1200;
}
@media only screen and (min-width: 1024px) {
  .side-drawer {
    display: none;
  }
}
.side-drawer__drawer {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: top 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.625rem 0;
  overflow: hidden;
}
@media only screen and (min-width: 550px) {
  .side-drawer__drawer {
    transition: left 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
    top: 0;
    left: -23.4375rem;
    width: 23.4375rem;
  }
}
@media only screen and (min-width: 768px) {
  .side-drawer__drawer {
    padding-top: 3.125rem;
  }
}
.side-drawer__holder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 0.8125rem;
}
.side-drawer__close {
  position: absolute;
  left: 0.3125rem;
  top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
}
.side-drawer__navigation-top {
  padding: 0 0.8125rem 0.625rem 3.125rem;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .side-drawer__navigation-top {
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .side-drawer__navigation-top-actions {
    display: none;
  }
}
.side-drawer__user-link {
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 0;
  font-weight: 700;
  line-height: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}
.side-drawer__user-link-icon {
  margin-right: 0.625rem;
}
.side-drawer__navigation {
  padding-bottom: 0.9375rem;
  flex: 1;
}
.side-drawer__info {
  flex-shrink: 0;
  padding-bottom: 1.5625rem;
}
.side-drawer__contact {
  display: block;
  padding: 1rem 0.9375rem 1rem 4rem;
  border-radius: 0.125rem;
  border: 0.0625rem solid currentColor;
  color: #4c4c4c;
  position: relative;
}
.side-drawer__contact-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.side-drawer__contact-text {
  display: block;
  font-size: 0.875rem;
  line-height: 1.2;
}
.side-drawer__contact-text--weight {
  font-weight: 500;
}
.side-drawer--show .side-drawer__drawer {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  left: 0;
  top: 0;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/active-filter/active-filter.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.active-filter {
  transition: box-shadow 250ms ease-in-out, border-color 250ms ease-in-out, background-color 250ms ease-in-out;
  background-color: #f6f6f6;
  padding: 0.625rem;
  border: 1px solid #dce0e5;
  line-height: 1.125rem;
  border-radius: 2px;
  color: #4c4c4c;
  display: flex;
  align-items: center;
}
.active-filter__icon {
  transition: color 250ms ease-in-out;
  margin-left: 0.5rem;
  color: #8f8f8f;
}
.active-filter:hover, .active-filter:focus {
  color: #4c4c4c;
  border-color: #fff;
  background-color: #fff;
  box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
.active-filter:hover .active-filter__icon, .active-filter:focus .active-filter__icon {
  color: #333;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/catalog-cms-block/catalog-cms-block.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.catalog-cms-block {
  margin-bottom: 1.25rem;
}
.catalog-cms-block > * {
  font: 500 1.125rem/1.4375rem "DIN Pro", Arial, sans-serif;
}
.catalog-cms-block p {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 400;
  color: #4c4c4c;
  margin-top: 0.625rem;
}
.catalog-cms-block a {
  color: #202020;
}
.catalog-cms-block a:hover, .catalog-cms-block a:focus {
  color: #08493d;
}
.catalog-cms-block hr {
  display: none;
}
.catalog-cms-block--sidebar {
  margin-top: 3rem;
}
.catalog-cms-block--sidebar p {
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}
.catalog-cms-block--filter-sidebar {
  display: none;
}
@media only screen and (min-width: 768px) {
  .catalog-cms-block--filter-sidebar {
    display: block;
  }
}
.catalog-cms-block--bottom {
  text-align: center;
}
.catalog-cms-block--bottom > * {
  font-size: 2rem;
  line-height: 2.5625rem;
}
.catalog-cms-block--bottom > *:first-child {
  margin-top: 0;
}
.catalog-cms-block--bottom h2 {
  color: #333;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .catalog-cms-block--bottom h2 {
    font-size: 1.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .catalog-cms-block--bottom h2 {
    font-size: 2rem;
    line-height: 2.5625rem;
    margin-bottom: 1.5rem;
  }
}
.catalog-cms-block--bottom p {
  font-size: 0.9375rem;
  color: #b2b2b2;
  line-height: 1.61;
  max-width: 60.625rem;
  margin: 0 auto 1.625rem;
}
@media only screen and (min-width: 768px) {
  .catalog-cms-block--bottom p {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
  }
}
.catalog-cms-block-wrap {
  background-color: #f6f6f6;
  padding: 2rem 0 1rem;
}
@media only screen and (min-width: 768px) {
  .catalog-cms-block-wrap {
    padding: 3.125rem 0 2.375rem;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/category-card/category-card.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.category-card__container {
  background-color: #f6f6f6;
}
.category-card__actions-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-enumeration/filter-enumeration.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.filter-enumeration {
  margin-bottom: -0.5rem;
  padding: 0 5.3125rem 0 0.625rem;
}
@media only screen and (min-width: 768px) {
  .filter-enumeration {
    padding: 0;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-rating/filter-rating.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.filter-rating {
  font-size: 0.875rem;
  padding-left: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .filter-rating {
    padding-left: 0;
  }
}
.filter-rating__text {
  vertical-align: middle;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/suggestion-links-list/suggestion-links-list.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.suggestion-links-list__title {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.0125rem;
  padding: 1.625rem 0 0.375rem;
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .suggestion-links-list__title {
    padding-bottom: 1rem;
  }
}
.suggestion-links-list__title--bottom-indent {
  padding-bottom: 1rem;
}
.suggestion-links-list__item {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.125rem;
  letter-spacing: 0.00625rem;
  padding: 7px 0;
}
.suggestion-links-list__link {
  color: #4c4c4c;
}
.suggestion-links-list__link:hover {
  color: #333;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/view-mode-switch/view-mode-switch.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.view-mode-switch {
  display: flex;
  margin: 0.1875rem -0.5rem 0;
}
@media only screen and (min-width: 768px) {
  .view-mode-switch {
    width: 100%;
    border: 1px solid #dce0e5;
    border-radius: 2px;
    margin: 0;
  }
}
.view-mode-switch__link {
  padding: 0 0.5rem;
  font-size: 0;
  color: #333;
}
@media only screen and (min-width: 768px) {
  .view-mode-switch__link {
    transition: color 250ms ease-in-out;
    display: flex;
    width: 50%;
    flex-shrink: 0;
    justify-content: center;
    padding: 0.75rem 1.25rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
  .view-mode-switch__link:not(:first-child) {
    border-left: 1px solid #dce0e5;
  }
  .view-mode-switch__link:first-child {
    padding-left: 1.3125rem;
  }
  .view-mode-switch__link:hover, .view-mode-switch__link:focus {
    color: #4c4c4c;
  }
}
.view-mode-switch__link--active {
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .view-mode-switch__link--active {
    background-color: #f6f6f6;
    font-weight: 700;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/CatalogPage/Theme/default/components/organisms/active-filter-section/active-filter-section.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.active-filter-section {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
.active-filter-section__item--title {
  display: none;
}
@media only screen and (min-width: 768px) {
  .active-filter-section__item--title {
    display: block;
  }
}
.active-filter-section__item--filters {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .active-filter-section__item--filters {
    width: auto;
  }
}
.active-filter-section__item,
.active-filter-section .active-filter {
  margin-bottom: 0.625rem;
}
.active-filter-section__item:not(:last-child),
.active-filter-section .active-filter:not(:last-child) {
  margin-right: 0.625rem;
}
.active-filter-section__reset {
  transition: color 250ms ease-in-out;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .active-filter-section__reset {
    justify-content: flex-start;
  }
}
.active-filter-section__reset:hover,
.active-filter-section__reset:hover .active-filter-section__reset-icon, .active-filter-section__reset:focus,
.active-filter-section__reset:focus .active-filter-section__reset-icon {
  color: #8f8f8f;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-cms/product-cms.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-cms {
  background: #f6f6f6;
  text-align: center;
  padding: 2.0625rem 0 2.5rem;
}
@media only screen and (min-width: 768px) {
  .product-cms {
    padding: 3.125rem 0 1.25rem;
  }
}
.product-cms__title {
  max-width: 970px;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}
@media only screen and (min-width: 768px) {
  .product-cms__title {
    font-size: 2rem;
    margin: 0 auto 1.5rem;
  }
}
.product-cms__text {
  font-size: 0.875rem;
  max-width: 970px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .product-cms__text {
    font-size: 1.125rem;
  }
}
.product-cms__text p {
  margin: 0 0 1rem;
}
@media only screen and (min-width: 768px) {
  .product-cms__text p {
    margin: 0 0 1.8125rem;
  }
}
.product-cms__text a {
  color: #333;
  font-weight: 700;
}
.product-cms__text a:hover {
  color: #e01a00;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-configurator/product-configurator.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-configurator {
  padding: 0 0.9375rem 0.875rem;
  margin: 0 -0.9375rem;
  border-bottom: solid 1px #e7eaee;
}
@media only screen and (min-width: 768px) {
  .product-configurator {
    padding: 1.375rem 0 0;
    margin: 0;
    border-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .product-configurator__top-block {
    background: #e7eaee;
    padding: 0.9375rem;
    margin: 0 -0.9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.product-configurator__brand-name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4375rem;
  color: #333;
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .product-configurator__brand-name {
    font-size: 1.125rem;
    margin-bottom: 0.1875rem;
    text-align: left;
  }
}
.product-configurator__sku {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: normal;
  color: #4c4c4c;
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .product-configurator__sku {
    font-size: 0.875rem;
    margin-bottom: 1.75rem;
    text-align: left;
  }
}
.product-configurator__bundle {
  margin-bottom: -1px;
}
.product-configurator__add-to-cart {
  padding-top: 1.3125rem;
  padding-bottom: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .product-configurator__add-to-cart {
    padding-bottom: 0.625rem;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail/product-detail.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-detail {
  padding: 2.9375rem 0 0;
}
@media only screen and (min-width: 768px) {
  .product-detail {
    padding: 2.6875rem 0 6.25rem;
  }
}
.product-detail__title {
  font-weight: 500;
  line-height: normal;
  color: #333;
  margin-bottom: 17px;
}
.product-detail__description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8125rem;
  padding-bottom: 2.1875rem;
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .product-detail__description {
    padding-bottom: 0;
  }
}
.product-detail__detail-list {
  border-radius: 2px;
  background-color: #f6f6f6;
  padding: 0 0.625rem 1.4375rem 1.25rem;
  margin-bottom: 2.5rem;
  color: #333;
}
@media only screen and (min-width: 1024px) {
  .product-detail__detail-list {
    padding: 0.25rem 2.5rem 2.25rem;
    margin-bottom: 0;
  }
}
.product-detail__detail-list-item:nth-child(odd) {
  padding-right: 5px;
}
.product-detail__detail-list-item:nth-child(even) {
  padding-left: 5px;
}
.product-detail__detail-list-key {
  font-size: 0.875rem;
  font-weight: 700;
  padding-top: 1.4375rem;
}
@media only screen and (min-width: 1024px) {
  .product-detail__detail-list-key {
    font-size: 1rem;
    padding-top: 1.9375rem;
  }
}
.product-detail__detail-list-value {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #4c4c4c;
}
@media only screen and (min-width: 1024px) {
  .product-detail__detail-list-value {
    font-size: 0.9375rem;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/variant/variant.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.variant {
  border-top: solid 0.0625rem #e7eaee;
}
.variant:last-child {
  border-bottom: solid 0.0625rem #e7eaee;
  margin-bottom: -0.0625rem;
}
.variant--promotion {
  position: relative;
  z-index: 2;
  border: none;
}
.variant--promotion:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.variant--product-set {
  border: none;
  margin-bottom: 0.5rem;
}
.variant--product-set:last-child {
  border: none;
  margin-bottom: 0;
}
.variant__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 3.375rem;
  color: #333;
  position: relative;
}
.variant__title--product-set {
  font-size: 0.875rem;
  line-height: 1.75rem;
}
@media only screen and (min-width: 768px) {
  .variant__title--product-set {
    font-size: 1rem;
    line-height: 2rem;
  }
}
.variant__selected-value {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
  color: #8f8f8f;
  margin: -0.3125rem 0 0.9375rem;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ProductDetailPage/Theme/default/components/organisms/buybox/buybox.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
/**
* Die visuelle Gestaltung (.buybox, .bb-sec, .vsel, .chiprow, .chip, .buygrid,
* .bg-info, .bg-act, .buyline, .buyfoot, .succ, .pt, .pop, .scaletable, ...)
* kommt bewusst aus docs/intake/wireframe-flow/styles.css und wird dort von
* der ShopUi-Spur ins globale SCSS uebernommen (siehe Bericht) - dieses Modul
* fuegt absichtlich keine eigenen, konkurrierenden Regeln hinzu.
*/
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/cms-page-title/cms-page-title.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.cms-page-title * {
  font: 700 1.75rem/2.25rem "DIN Pro", Arial, sans-serif;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/atoms/quantity-option/quantity-option.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.quantity-option {
  font-size: 0.8125rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .quantity-option {
    font-size: 0.875rem;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/banner/banner.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.banner {
  overflow: hidden;
  height: 12.5rem;
  margin-bottom: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .banner {
    height: 28.125rem;
    margin-bottom: 1.875rem;
  }
}
.banner--medium {
  height: 25rem;
}
.banner--small {
  height: 12.5rem;
}
@media only screen and (min-width: 768px) {
  .banner--small {
    height: 21.25rem;
  }
}
.banner--success {
  height: auto;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .banner--success {
    height: 28.125rem;
    margin-bottom: 2.5rem;
  }
}
.banner--color-second {
  color: #fff;
}
.banner--spacing-bottom-reset {
  margin-bottom: 0;
}
.banner__container {
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  padding: 0 0.625rem;
  margin: 0 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .banner__container {
    text-align: left;
  }
}
@media only screen and (min-width: 1024px) {
  .banner__container {
    padding: 0 1.875rem;
  }
}
.banner__container--success {
  margin: 0;
  padding: 1.25rem 0.9375rem 1.625rem;
}
@media only screen and (min-width: 768px) {
  .banner__container--success {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.banner__container--spacing-x-reset {
  margin-left: 0;
  margin-right: 0;
}
.banner__title, .banner__text {
  color: #fff;
}
.banner__title {
  font-size: 1.625rem;
  line-height: 1.875rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .banner__title {
    font-size: 1.875rem;
    line-height: 1.875rem;
    margin-bottom: 0.8125rem;
  }
}
.banner__text {
  font-size: 1rem;
  line-height: normal;
  font-weight: 400;
  margin-bottom: 1.625rem;
}
@media only screen and (min-width: 768px) {
  .banner__text {
    font-size: 1.125rem;
    margin-bottom: 2.1875rem;
  }
}
.banner__text--subtitle {
  font-family: "DIN Pro", Arial, sans-serif;
  font-weight: 500;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .banner__text--subtitle {
    font-size: 2.375rem;
    line-height: 2.5rem;
  }
}
.banner__success-title {
  font-size: 2rem;
  line-height: 2.125rem;
  color: #fff;
  margin-bottom: 0.6875rem;
}
@media only screen and (min-width: 768px) {
  .banner__success-title {
    margin-bottom: 2rem;
    font-size: 3.125rem;
    line-height: 3.4375rem;
  }
}
.banner__success-text {
  font-size: 1.125rem;
  letter-spacing: 0.01875rem;
}
@media only screen and (min-width: 768px) {
  .banner__success-text {
    font-size: 1.375rem;
    letter-spacing: 0.025rem;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/breadcrumb/breadcrumb.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.breadcrumb--progress {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .breadcrumb--progress {
    padding: 1rem 0;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/checkbox-select-all/checkbox-select-all.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.checkbox {
  display: inline-block;
  position: relative;
}
.checkbox__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox__input:focus ~ .checkbox__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox__input:checked ~ .checkbox__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox__input:checked ~ .checkbox__box .checkbox__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox__input:checked ~ .checkbox__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox__input:checked ~ .checkbox__label {
  font-weight: 700;
}
.checkbox__input:checked ~ .checkbox__label--alternative {
  font-weight: 400;
}
.checkbox__input[disabled] ~ .checkbox__box, .checkbox__input[disabled] ~ .checkbox__box:hover, .checkbox__input--disabled ~ .checkbox__box, .checkbox__input--disabled ~ .checkbox__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox__input[disabled]:checked ~ .checkbox__box, .checkbox__input--disabled:checked ~ .checkbox__box {
  background-color: #dce0e5;
}
.checkbox__input[disabled] ~ .checkbox__label, .checkbox__input--disabled ~ .checkbox__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox__counter {
  padding-left: 0.5rem;
}
.checkbox--expand {
  display: block;
}
.checkbox--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox--filter {
    font-size: 0.875rem;
  }
}
.checkbox--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox--alternative:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox--pdp:hover .checkbox__box--alternative {
  border-color: #b2b2b2;
}
.checkbox--error .checkbox__box {
  border-color: #e01a00;
}
.checkbox:hover .checkbox__box {
  border-color: #08493d;
}
.checkbox:hover .checkbox__input[disabled] ~ .checkbox__box,
.checkbox:hover .checkbox__input--disabled ~ .checkbox__box {
  border-color: #dce0e5;
}

.checkbox-select-all {
  display: inline-block;
  position: relative;
}
.checkbox-select-all__container {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.checkbox-select-all__box {
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  line-height: 1.625rem;
  border: 0.0625rem solid #dce0e5;
  background-color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  border-radius: 2px;
  flex: none;
}
@media only screen and (min-width: 768px) {
  .checkbox-select-all__box {
    margin-right: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.checkbox-select-all__box--filter {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .checkbox-select-all__box--filter {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
  }
}
.checkbox-select-all__box--shopping-list {
  position: absolute;
  top: -0.625rem;
  right: 0.9375rem;
  margin-right: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .checkbox-select-all__box--shopping-list {
    position: static;
    margin-right: 0.625rem;
  }
}
.checkbox-select-all__box--alternative {
  border: solid 0.125rem #b2b2b2;
}
.checkbox-select-all__input {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
}
.checkbox-select-all__input:focus ~ .checkbox-select-all__box {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box .checkbox-select-all__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box--alternative {
  background-color: #fff;
  border-color: #b2b2b2;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__label {
  font-weight: 700;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__label--alternative {
  font-weight: 400;
}
.checkbox-select-all__input[disabled] ~ .checkbox-select-all__box, .checkbox-select-all__input[disabled] ~ .checkbox-select-all__box:hover, .checkbox-select-all__input--disabled ~ .checkbox-select-all__box, .checkbox-select-all__input--disabled ~ .checkbox-select-all__box:hover {
  background-color: #fff;
  border-color: #dce0e5;
  cursor: not-allowed;
}
.checkbox-select-all__input[disabled]:checked ~ .checkbox-select-all__box, .checkbox-select-all__input--disabled:checked ~ .checkbox-select-all__box {
  background-color: #dce0e5;
}
.checkbox-select-all__input[disabled] ~ .checkbox-select-all__label, .checkbox-select-all__input--disabled ~ .checkbox-select-all__label {
  color: #b2b2b2;
  cursor: not-allowed;
}
.checkbox-select-all__check {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  color: #fff;
  vertical-align: baseline;
}
.checkbox-select-all__check--alternative {
  color: #b2b2b2;
  margin-bottom: 0.125rem;
}
.checkbox-select-all__label {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  flex: 1;
}
.checkbox-select-all__label--filter {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  margin-bottom: 0;
}
.checkbox-select-all__label--alternative {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #b2b2b2;
  text-transform: none;
}
.checkbox-select-all__counter {
  padding-left: 0.5rem;
}
.checkbox-select-all--expand {
  display: block;
}
.checkbox-select-all--filter {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .checkbox-select-all--filter {
    font-size: 0.875rem;
  }
}
.checkbox-select-all--alternative {
  margin-bottom: 0.9375rem;
}
.checkbox-select-all--alternative:hover .checkbox-select-all__box--alternative {
  border-color: #b2b2b2;
}
@media only screen and (min-width: 768px) {
  .checkbox-select-all--pdp {
    margin-left: 8.25rem;
  }
}
.checkbox-select-all--pdp:hover .checkbox-select-all__box--alternative {
  border-color: #b2b2b2;
}
.checkbox-select-all--error .checkbox-select-all__box {
  border-color: #e01a00;
}
.checkbox-select-all:hover .checkbox-select-all__box {
  border-color: #08493d;
}
.checkbox-select-all:hover .checkbox-select-all__input[disabled] ~ .checkbox-select-all__box,
.checkbox-select-all:hover .checkbox-select-all__input--disabled ~ .checkbox-select-all__box {
  border-color: #dce0e5;
}
.checkbox-select-all__input ~ .checkbox-select-all__box .checkbox-select-all__minus {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  vertical-align: baseline;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box .checkbox-select-all__check {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox-select-all__input:checked ~ .checkbox-select-all__box .checkbox-select-all__minus {
  display: none;
}
.checkbox-select-all__input--item-selected ~ .checkbox-select-all__box {
  background-color: #08493d;
  border-color: #08493d;
}
.checkbox-select-all__input--item-selected ~ .checkbox-select-all__box .checkbox-select-all__minus {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.checkbox-select-all__input--item-selected ~ .checkbox-select-all__box .checkbox-select-all__check {
  display: none;
}
.checkbox-select-all--bordered {
  border-bottom: 0.0625rem solid #f6f6f6;
  border-top: 0.0625rem solid #f6f6f6;
}
.checkbox-select-all--expand {
  width: 100%;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/content-collapser/content-collapser.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.content-collapser--full-visible .content-collapser__container {
  max-height: none;
  margin-bottom: 0;
}
.content-collapser--full-visible .content-collapser__container::after {
  display: none;
}
.content-collapser--full-visible .content-collapser__trigger-holder {
  display: none;
}
.content-collapser__container {
  position: relative;
  max-height: 13.75rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .content-collapser__container {
    max-height: none;
  }
}
.content-collapser__container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  box-shadow: inset 0 -3.125rem 5rem 0 #fff;
}
@media only screen and (min-width: 768px) {
  .content-collapser__container::after {
    display: none;
  }
}
.content-collapser__container--with-background::after {
  box-shadow: inset 0 -3.125rem 5rem 0 #f6f6f6;
}
.content-collapser__trigger-holder {
  text-align: center;
  padding-bottom: 1.625rem;
  padding-top: 1.625rem;
}
.content-collapser__trigger-holder--with-background {
  background: #f6f6f6;
}
@media only screen and (min-width: 768px) {
  .content-collapser__trigger-holder {
    display: none;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.custom-select {
  position: relative;
  max-width: 100%;
  display: inline-block;
}
.custom-select__select {
  border-radius: 2px;
  border: 0.0625rem solid #dce0e5;
  color: #333;
  background: #f6f6f6;
  font: 400 0.9375rem/2.875rem "DIN Pro", Arial, sans-serif;
  font-size: 0.8125rem;
  padding: 0 2.1875rem 0 1rem;
  appearance: none;
}
@media only screen and (min-width: 768px) {
  .custom-select__select {
    padding: 0 2.8125rem 0 1.25rem;
    font-size: 0.875rem;
  }
}
.custom-select__caret {
  position: absolute;
  z-index: 1151;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .custom-select__caret {
    right: 1.3125rem;
  }
}
.custom-select--alternative {
  text-transform: uppercase;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .custom-select--alternative {
    width: auto;
  }
}
.custom-select--alternative .custom-select__select {
  width: 100%;
  font-size: 0.75rem;
  line-height: 2.375rem;
  padding: 0 1.25rem 0 0.375rem;
  border: 0.0625rem solid #dce0e5;
  color: #333;
  background: #e7eaee;
}
@media only screen and (min-width: 768px) {
  .custom-select--alternative .custom-select__select {
    width: auto;
    text-transform: uppercase;
    border-radius: 0;
    background: rgba(255, 255, 255, 0);
    border: none;
    color: #4c4c4c;
    font-size: 0.6875rem;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.0375rem;
    padding: 0 1.875rem 0 1.125rem;
  }
}
.custom-select--alternative .custom-select__caret {
  right: 0.1875rem;
}
.custom-select--small .custom-select__select {
  font-size: 0.8125rem;
  line-height: 2.375rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .custom-select--small .custom-select__select {
    font-size: 0.875rem;
    font-weight: 400;
  }
}
.custom-select--smaller {
  width: 100%;
}
.custom-select--smaller .custom-select__select {
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 400;
  border-radius: 2px;
  border: none;
  background: #f6f6f6;
  padding: 0 1.6875rem 0 0.5rem;
}
.custom-select--smaller .custom-select__caret {
  right: 0.1875rem;
}
.custom-select--mobile-expand {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .custom-select--mobile-expand {
    width: auto;
  }
}
.custom-select--mobile-expand .custom-select__select {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .custom-select--mobile-expand .custom-select__select {
    width: auto;
  }
}
.custom-select--full-width {
  width: 100%;
}
.custom-select--full-width .custom-select__select {
  width: 100%;
}
.custom-select--margin-bottom {
  margin-bottom: 1.3125rem;
}
.custom-select--shopping-list {
  margin-top: 0.75rem;
}
@media only screen and (min-width: 1024px) {
  .custom-select--shopping-list {
    margin-left: 8.25rem;
    width: calc(100% - 132px);
  }
}
.custom-select--light .custom-select__select,
.custom-select--light .select2-selection__rendered {
  background: #f6f6f6;
}
@media only screen and (min-width: 768px) {
  .custom-select--light .custom-select__select,
  .custom-select--light .select2-selection__rendered {
    background: #fff;
  }
}

.select2_selection:focus-visible .select2-selection__rendered {
  border-color: #8f8f8f;
}
.select2-selection__rendered {
  display: block;
  border-radius: 2px;
  border: 0.0625rem solid #dce0e5;
  color: #333;
  background: #f6f6f6;
  font: 400 0.9375rem/2.875rem "DIN Pro", Arial, sans-serif;
  padding: 0 2.8125rem 0 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-selection__arrow {
  display: none;
}
.select2-hidden-accessible {
  border: 0;
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 0.0625rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0.0625rem;
  white-space: nowrap;
}
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}
.select2-container--focus {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.select2-container--alternative .select2-selection__rendered {
  border-radius: 0;
  border: none;
  background: none;
  font-size: 0.6875rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.0375rem;
  padding: 0 1.875rem 0 0.625rem;
}
.select2-container--alternative .select2-dropdown {
  border-radius: 0 0 2px 2px;
  box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
.select2-container--alternative .select2-results__option {
  font-size: 0.8125rem;
}
.select2-container--alternative.select2-container--open {
  z-index: 1170;
}
.select2-container--open {
  z-index: 1151;
}
.select2-container--small .select2-selection__rendered {
  font-size: 0.875rem;
  line-height: 2.375rem;
}
.select2-container--small .select2-results__option {
  font-size: 0.875rem;
}
.select2-container--smaller {
  left: auto !important;
}
.select2-container--smaller .select2-selection__rendered {
  border-radius: 2px;
  border: none;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0 1.6875rem 0 0.5rem;
}
.select2-container--smaller .select2-dropdown {
  padding: 0.1875rem 0;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
.select2-container--smaller .select2-results__option {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 2.23;
}
.select2-container--group .select2-dropdown {
  padding: 0.9375rem 1.25rem;
}
.select2-container--group .select2-results__option {
  padding-left: 1.25rem;
}
.select2-container--group .select2-results__options--nested .select2-results__option {
  margin-left: -1.25rem;
}
.select2-container--disabled {
  cursor: not-allowed;
}
.select2-dropdown {
  position: absolute;
  z-index: 1150;
  box-sizing: border-box;
  display: block;
  border: none;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1.125rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
.select2-search--dropdown.select2-search--hide {
  display: none;
}
.select2-results {
  display: block;
}
.select2-results__option {
  color: #202020;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.87;
  letter-spacing: 0.0125rem;
  padding: 0.625rem 0.9375rem;
  overflow-wrap: break-word;
}
.select2-results__option[aria-selected] {
  cursor: pointer;
}
.select2-results__option:hover {
  background: #f6f6f6;
}
.select2-results__option[aria-selected=true] {
  position: relative;
  background: #08493d;
  color: #fff;
}
.select2-results__option--highlighted:not(:hover) {
  outline: 0.0625rem solid #08493d;
  outline-offset: 0.0625rem;
}
.select2-results__group {
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
  margin-left: -1.25rem;
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/flatpickr/dist/flatpickr.min.css ***!
  \***************************************************************************************************************************************************************************************************/
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/date-time-picker/date-time-picker.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.date-time-picker__calendar-button {
  background: none;
  cursor: pointer;
}
.date-time-picker__datepicker-input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.date-time-picker__calendar {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2.875rem;
  padding: 0 0.75rem;
  display: grid;
  align-items: center;
}
.date-time-picker__content {
  position: relative;
}
.date-time-picker__field {
  padding-right: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date-time-picker__icon {
  fill: #b2b2b2;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.date-time-picker--with-icon .input {
  padding-right: 2.5rem;
}
.date-time-picker__datepicker {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/node-animator/node-animator.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.node-animator__image {
  position: absolute;
  z-index: 1200;
  pointer-events: none;
  overflow: hidden;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/page-info/page-info.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.page-info {
  background-color: #f6f6f6;
  padding: 0.625rem 0 0.75rem;
}
@media only screen and (min-width: 768px) {
  .page-info {
    padding-top: 0.875rem;
  }
}
.page-info--checkout {
  padding: 0.9375rem 0;
  background-color: #fff;
  box-shadow: 0 0.625rem 1.125rem 0 rgba(0, 0, 0, 0.05), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 768px) {
  .page-info--checkout {
    background-color: #f6f6f6;
    padding: 0.875rem 0 0.75rem;
  }
}
.page-info__title {
  padding-top: 0.25rem;
  font: 700 1.375rem/1.625rem "DIN Pro", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .page-info__title {
    display: block;
    padding-top: 0;
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/privacy-navigation/privacy-navigation.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.privacy-navigation {
  text-align: left;
  padding-top: 0.625rem;
  padding-left: 15px;
  padding-right: 15px;
  order: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .privacy-navigation {
    display: block;
    width: 25%;
    position: absolute;
    right: 0;
    padding-top: 0;
  }
}
.privacy-navigation__item {
  padding: 0 0.5rem;
  margin-bottom: 0.3125rem;
}
@media only screen and (min-width: 768px) {
  .privacy-navigation__item {
    padding: 0;
  }
}
.privacy-navigation__item:not(:first-child) {
  padding-top: 5px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-card-item/product-card-item.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.product-card-item {
  border: 0.125rem solid #f6f6f6;
  border-radius: 2px;
  padding: 0.75rem;
  margin-bottom: 0.625rem;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 550px) {
  .product-card-item {
    padding-right: 1.375rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item {
    padding: 0;
    margin-bottom: 1.25rem;
  }
}
.product-card-item__col--image {
  border-radius: 2px 0 0 2px;
  padding-top: 0;
  padding-bottom: 0;
  width: 4.875rem;
  min-width: 4.875rem;
}
@media only screen and (min-width: 550px) {
  .product-card-item__col--image {
    width: 22%;
    min-width: 22%;
  }
}
.product-card-item__col--total {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .product-card-item__col--total {
    width: 40%;
    min-width: 40%;
    text-align: right;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item .product-card-item__col--total {
    padding-left: 0;
    padding-right: calc(30px + 15px);
  }
}
.product-card-item__col--content {
  width: 100%;
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .product-card-item__col--content {
    width: 60%;
    min-width: 60%;
  }
}
.product-card-item__col--description {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  width: calc(100% - 4.875rem);
  min-width: calc(100% - 4.875rem);
}
@media only screen and (min-width: 550px) {
  .product-card-item__col--description {
    width: 78%;
    min-width: 78%;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item__col--description {
    padding-top: 2.25rem;
    padding-bottom: 1.75rem;
  }
}
.product-card-item__col--shopping-list:not(.product-card-item__col--image) {
  padding-bottom: 1.25rem;
  padding-top: 0;
}
@media only screen and (min-width: 768px) {
  .product-card-item__col--shopping-list:not(.product-card-item__col--image) {
    padding-bottom: 1.75rem;
    padding-top: 1.75rem;
  }
}
.product-card-item__col--shopping-list:not(.product-card-item__col--image):last-child {
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .product-card-item__col--shopping-list:not(.product-card-item__col--image):last-child {
    padding-bottom: 1.25rem;
  }
}
.product-card-item__col--hidden:not(.product-card-item__col--content) {
  opacity: 0.5;
}
.product-card-item__additional-title {
  padding-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
}
@media only screen and (min-width: 768px) {
  .product-card-item__additional-title {
    padding-top: 1.75rem;
  }
}
.product-card-item__inner--full-height {
  height: 100%;
}
.product-card-item__inner--total {
  flex-direction: column-reverse;
}
@media only screen and (min-width: 768px) {
  .product-card-item__inner--total {
    flex-direction: column;
    align-items: flex-end;
  }
}
.product-card-item__inner--actions {
  padding-bottom: 0.375rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__inner--actions {
    padding-bottom: 0;
    align-items: flex-end;
  }
}
.product-card-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: normal;
  color: #333;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .product-card-item__title {
    font-size: 1.25rem;
  }
}
.product-card-item__title--shopping-list-alternative {
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__title--shopping-list-alternative {
    font-size: 1rem;
  }
}
.product-card-item__title--hidden {
  opacity: 0.5;
}
.product-card-item__color {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  margin-left: 0.25rem;
  text-indent: -624.9375rem;
  vertical-align: middle;
}
.product-card-item__color-preview {
  display: inline-block;
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333;
  padding-right: 1.3125rem;
  line-height: 1.3125rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__color-preview {
    font-size: 0.875rem;
  }
}
.product-card-item__color-preview-decoration {
  position: absolute;
  right: 0;
  top: 0.1875rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  border: 0.0625rem solid #dce0e5;
}
.product-card-item__available {
  display: inline-block;
  color: #08493d;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0.5rem;
}
.product-card-item__checkbox {
  height: 100%;
}
.product-card-item__checkbox-col {
  background-color: rgba(0, 0, 0, 0.05);
  padding-left: 0.75rem;
}
.product-card-item__checkbox-col--shopping-list {
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0);
}
@media only screen and (min-width: 768px) {
  .product-card-item__checkbox-col--shopping-list {
    display: flex;
    align-items: center;
    position: static;
    background-color: rgba(0, 0, 0, 0.05);
    padding-bottom: 1.25rem;
  }
}
.product-card-item__quantity-holder {
  padding-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__quantity-holder {
    padding-bottom: 0;
  }
}
.product-card-item__quantity {
  font-size: 0.8125rem;
  color: #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .product-card-item__quantity {
    font-size: 0.875rem;
  }
}
.product-card-item__quantity-title {
  color: #333;
  font-weight: 500;
}
.product-card-item__delete-cart {
  position: absolute;
  bottom: 3rem;
  right: 2rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__delete-cart {
    padding-top: 2rem;
    position: static;
  }
}
.product-card-item__remove-button {
  margin-top: -3rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item__remove-button {
    margin: 0;
  }
}
.product-card-item__remove-button-text {
  display: none;
}
@media only screen and (min-width: 768px) {
  .product-card-item__remove-button-text {
    display: inline-block;
  }
}
.product-card-item__dropdown {
  position: absolute;
  left: -0.125rem;
  width: calc(100% + 0.25rem);
  top: calc(100% + 0.9375rem);
}
@media only screen and (min-width: 768px) {
  .product-card-item__dropdown {
    position: static;
    width: 100%;
    left: auto;
    top: auto;
  }
}
.product-card-item__dropdown .select2-selection__rendered,
.product-card-item__dropdown .custom-select__select {
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  .product-card-item__dropdown .select2-selection__rendered,
  .product-card-item__dropdown .custom-select__select {
    background-color: #f6f6f6;
  }
}
.product-card-item--shopping-list-available {
  padding-bottom: 4.6875rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item--shopping-list-available {
    padding-bottom: 0;
  }
}
.product-card-item--checkout {
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout .product-card-item__col--image {
    width: 17%;
    min-width: 17%;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout .product-card-item__col--total {
    width: 20%;
    min-width: 20%;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item .product-card-item--checkout .product-card-item__col--total {
    padding-left: 0;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout .product-card-item__col--content {
    width: 80%;
    min-width: 80%;
  }
}
.product-card-item--checkout .product-card-item__col--description {
  padding-top: 0;
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout .product-card-item__col--description {
    width: 83%;
    min-width: 83%;
    padding-top: 1.25rem;
    padding-bottom: 0.9375rem;
    margin-left: -0.625rem;
  }
}
.product-card-item--checkout-address {
  margin-bottom: 6.25rem;
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout-address {
    margin-bottom: 1.25rem;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout-address .product-card-item__col--total {
    width: 60%;
    min-width: 60%;
    text-align: left;
  }
}
.product-card-item--checkout-address .product-card-item__col--total .product-card-item__inner {
  align-items: flex-start;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .product-card-item--checkout-address .product-card-item__col--content {
    width: 40%;
    min-width: 40%;
  }
}
.product-card-item--order-detail .product-card-item__col--image {
  margin-left: 2.1875rem;
  padding-right: 0.3125rem;
}
@media only screen and (min-width: 550px) {
  .product-card-item--order-detail .product-card-item__col--image {
    margin-left: 0;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--order-detail .product-card-item__col--total {
    width: 30%;
    min-width: 30%;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item .product-card-item--order-detail .product-card-item__col--total {
    padding-left: 0;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--order-detail .product-card-item__col--content {
    width: 70%;
    min-width: 70%;
  }
}
.product-card-item--order-detail .product-card-item__col--description {
  width: calc(100% - 4.875rem - 2.1875rem);
  min-width: calc(100% - 4.875rem - 2.1875rem);
  padding-top: 0;
  padding-bottom: 0;
}
@media only screen and (min-width: 550px) {
  .product-card-item--order-detail .product-card-item__col--description {
    width: 78%;
    min-width: 78%;
  }
}
@media only screen and (min-width: 768px) {
  .product-card-item--order-detail .product-card-item__col--description {
    padding-top: 1.25rem;
    padding-bottom: 0.9375rem;
    margin-left: -0.625rem;
  }
}
.product-card-item--fixed-input {
  max-width: 8.625rem;
  margin-bottom: 1.875rem;
  text-align: right;
}
.product-card-item--shopping-list-alternative {
  margin-bottom: 0.625rem;
}
.product-card-item--shopping-list-alternative .product-card-item__col {
  width: 69%;
  min-width: 69%;
}
@media only screen and (min-width: 768px) {
  .product-card-item--shopping-list-alternative .product-card-item__col {
    width: 78%;
    min-width: 78%;
  }
}
.product-card-item--shopping-list-alternative .product-card-item__col--image {
  width: 31%;
  min-width: 31%;
}
@media only screen and (min-width: 768px) {
  .product-card-item--shopping-list-alternative .product-card-item__col--image {
    width: 22%;
    min-width: 22%;
  }
}
.product-card-item--shopping-list-alternative .product-card-item__col--content {
  width: 100%;
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .product-card-item--shopping-list-alternative .product-card-item__col--content {
    width: 58%;
    min-width: 58%;
  }
}
.product-card-item--shopping-list-alternative .product-card-item__col--total {
  width: 100%;
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .product-card-item--shopping-list-alternative .product-card-item__col--total {
    width: 42%;
    min-width: 42%;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/quantity-counter/quantity-counter.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.quantity-counter {
  padding: 0.5rem 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f6f6;
}
.quantity-counter--secondary {
  background-color: #e7eaee;
}
.quantity-counter__input {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: normal;
  width: 2.875rem;
  text-align: center;
  border: none;
  background: none;
}
.quantity-counter__input::-webkit-inner-spin-button {
  appearance: none;
}
.quantity-counter__input--medium-width {
  width: 4.6875rem;
}
.quantity-counter__button {
  transition: background 250ms ease-in-out;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.1), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  position: relative;
}
.quantity-counter__button--decrement::before, .quantity-counter__button--increment::before, .quantity-counter__button--increment::after {
  transition: background color ease-in-out;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5625rem;
  height: 0.125rem;
  background: #4c4c4c;
}
.quantity-counter__button--increment::after {
  width: 0.125rem;
  height: 0.5625rem;
}
.quantity-counter__button:hover {
  background: #08493d;
}
.quantity-counter__button:hover::before, .quantity-counter__button:hover::after {
  background: #fff;
}
.quantity-counter__button--disabled {
  background: #fff;
  cursor: not-allowed;
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
}
.quantity-counter__button--disabled::before, .quantity-counter__button--disabled::after {
  background: #e7eaee;
}
.quantity-counter__button--disabled:hover, .quantity-counter__button--disabled:focus {
  background: #fff;
}
.quantity-counter__button--disabled:hover::before, .quantity-counter__button--disabled:hover::after, .quantity-counter__button--disabled:focus::before, .quantity-counter__button--disabled:focus::after {
  background: #e7eaee;
}
.quantity-counter--right-space {
  margin-right: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .quantity-counter--cart {
    padding-top: 0.625rem;
    padding-bottom: 0.75rem;
  }
}
.quantity-counter--shopping-list {
  padding-top: 0.625rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/nouislider/distribute/nouislider.min.css ***!
  \***********************************************************************************************************************************************************************************************************/
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;touch-action:none;user-select:none;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;transform-origin:0 0}html:not([dir=rtl]) .noUi-horizontal .noUi-origin{left:auto;right:0}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{position:absolute}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}html:not([dir=rtl]) .noUi-horizontal .noUi-handle{right:-17px;left:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{transform:translate(0,-50%,0);padding-left:25px}.noUi-rtl .noUi-value-vertical{transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{transform:translate(0,-50%);top:50%;right:120%}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/range-slider/range-slider.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.quick-order-row-partial__holder-quantity {
  position: relative;
  padding: 0.5rem 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f6f6;
}
.quick-order-row-partial__message {
  margin-left: 1.5rem;
  padding: 0.375rem 0.75rem;
  border: none;
  font-size: 0.75rem;
}
@media only screen and (min-width: 550px) {
  .quick-order-row-partial__message {
    margin-left: 0;
  }
}
.quick-order-row-partial__message--error {
  background-color: rgba(224, 26, 0, 0.1);
  color: #e01a00;
}
.quick-order-row-partial__message--warning {
  background-color: rgba(216, 141, 0, 0.2);
  color: #d88d00;
}
.quick-order-row-partial__quantity {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: normal;
  width: 2.875rem;
  text-align: center;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  color: #333;
}
.quick-order-row-partial__quantity::-webkit-inner-spin-button {
  appearance: none;
}
.quick-order-row-partial__button {
  transition: background 250ms ease-in-out;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.1), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.quick-order-row-partial__button--decrement::before, .quick-order-row-partial__button--increment::before, .quick-order-row-partial__button--increment::after {
  transition: background 250ms ease-in-out;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5625rem;
  height: 0.125rem;
  background: #8f8f8f;
}
.quick-order-row-partial__button--increment::after {
  width: 0.125rem;
  height: 0.5625rem;
}
.quick-order-row-partial__button:hover {
  background: #08493d;
}
.quick-order-row-partial__button:hover::before, .quick-order-row-partial__button:hover::after {
  background: #fff;
}
.quick-order-row-partial__button--disabled {
  background: #fff;
  cursor: not-allowed;
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
}
.quick-order-row-partial__button--disabled::before, .quick-order-row-partial__button--disabled::after {
  background: #e7eaee;
}
.quick-order-row-partial__button--disabled:hover, .quick-order-row-partial__button--disabled:focus {
  background: #fff;
}
.quick-order-row-partial__button--disabled:hover::before, .quick-order-row-partial__button--disabled:hover::after, .quick-order-row-partial__button--disabled:focus::before, .quick-order-row-partial__button--disabled:focus::after {
  background: #e7eaee;
}

.quick-order-row-partial__holder-quantity {
  position: relative;
  padding: 0.5rem 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f6f6;
}
.quick-order-row-partial__message {
  margin-left: 1.5rem;
  padding: 0.375rem 0.75rem;
  border: none;
  font-size: 0.75rem;
}
@media only screen and (min-width: 550px) {
  .quick-order-row-partial__message {
    margin-left: 0;
  }
}
.quick-order-row-partial__message--error {
  background-color: rgba(224, 26, 0, 0.1);
  color: #e01a00;
}
.quick-order-row-partial__message--warning {
  background-color: rgba(216, 141, 0, 0.2);
  color: #d88d00;
}
.quick-order-row-partial__quantity {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: normal;
  width: 2.875rem;
  text-align: center;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  color: #333;
}
.quick-order-row-partial__quantity::-webkit-inner-spin-button {
  appearance: none;
}
.quick-order-row-partial__button {
  transition: background 250ms ease-in-out;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0.625rem 0.625rem 0 rgba(0, 0, 0, 0.1), 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.quick-order-row-partial__button--decrement::before, .quick-order-row-partial__button--increment::before, .quick-order-row-partial__button--increment::after {
  transition: background 250ms ease-in-out;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5625rem;
  height: 0.125rem;
  background: #8f8f8f;
}
.quick-order-row-partial__button--increment::after {
  width: 0.125rem;
  height: 0.5625rem;
}
.quick-order-row-partial__button:hover {
  background: #08493d;
}
.quick-order-row-partial__button:hover::before, .quick-order-row-partial__button:hover::after {
  background: #fff;
}
.quick-order-row-partial__button--disabled {
  background: #fff;
  cursor: not-allowed;
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
}
.quick-order-row-partial__button--disabled::before, .quick-order-row-partial__button--disabled::after {
  background: #e7eaee;
}
.quick-order-row-partial__button--disabled:hover, .quick-order-row-partial__button--disabled:focus {
  background: #fff;
}
.quick-order-row-partial__button--disabled:hover::before, .quick-order-row-partial__button--disabled:hover::after, .quick-order-row-partial__button--disabled:focus::before, .quick-order-row-partial__button--disabled:focus::after {
  background: #e7eaee;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/slick-carousel/slick-carousel.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-carousel__container {
  transition: opacity 0.5s ease-in-out;
  max-height: 24.625rem;
  opacity: 0;
}
.slick-carousel__container--is-inited {
  opacity: 1;
  max-height: none;
}
.slick-carousel .slick-track,
.slick-carousel .slick-list {
  transition-delay: 250ms;
}
.slick-carousel--full-width {
  margin-left: -15px;
  margin-right: -15px;
}
.slick-carousel--full-width.slick-carousel--equal-height {
  margin-left: -0.5625rem;
  margin-right: -0.5625rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--full-width.slick-carousel--equal-height {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.slick-carousel--equal-height .slick-track {
  display: flex;
}
.slick-carousel--equal-height .slick-slide {
  display: flex;
  height: auto;
  margin: 0 0.5625rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--equal-height .slick-slide {
    margin: 0 15px;
  }
}
.slick-carousel--equal-height .slick-slide > div {
  max-width: 100%;
  width: 100%;
}
.slick-carousel--stretch .slick-slide {
  margin: 0;
}
.slick-carousel--stretch .slick-list {
  padding: 0 15px;
}
.slick-carousel--product-set {
  margin: 0 -0.625rem;
}
.slick-carousel--product-set .slick-slide {
  margin: 0 0.625rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--product-set {
    margin: 0;
  }
  .slick-carousel--product-set .slick-slide {
    margin: 0;
  }
}
.slick-carousel--product-set-widget .slick-slide {
  min-height: 25rem;
  width: 17.5rem;
  margin: 0 0.625rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--product-set-widget .slick-slide {
    margin: 0 15px;
  }
}
.slick-carousel--jumbotron {
  display: block;
  min-height: 24.375rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--jumbotron {
    min-height: 31.5625rem;
  }
}
.slick-carousel--jumbotron .slick-slide {
  margin: 0 0.0625rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--jumbotron .slick-slide {
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;
  }
}
.slick-carousel--jumbotron .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel--jumbotron .slick-dots {
    margin-top: 1.5rem;
  }
}
.slick-carousel--jumbotron .slick-dots button {
  width: 0.3125rem;
  height: 0.3125rem;
  background: #dadada;
  border-radius: 50%;
  border: 0.125rem solid rgba(255, 255, 255, 0);
  cursor: pointer;
}
.slick-carousel--jumbotron .slick-dots li {
  display: block;
  position: relative;
  padding: 0.3125rem;
  background: rgba(255, 255, 255, 0);
  font-size: 0;
  cursor: pointer;
  /* stylelint-disable selector-max-compound-selectors  */
}
.slick-carousel--jumbotron .slick-dots li.slick-active button {
  width: 0.625rem;
  height: 0.625rem;
  background: rgba(255, 255, 255, 0);
  border: 0.125rem solid #4c4c4c;
}
.slick-carousel--jumbotron .slick-dots li {
  /* stylelint-enable selector-max-compound-selectors  */
}
.slick-carousel--non-fixed-height {
  min-height: auto;
}
.slick-carousel .slick-arrow {
  position: absolute;
  top: 5.9375rem;
  font-size: 0;
  width: 1.875rem;
  height: 1.875rem;
  background: url("../images/right-chevron.svg") center center no-repeat;
  background-size: 0.9375rem;
  border-radius: 50%;
  z-index: 350;
  opacity: 0.5;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .slick-carousel .slick-arrow {
    margin-top: -1.875rem;
    top: 50%;
  }
}
.slick-carousel .slick-arrow:hover {
  opacity: 1;
  cursor: pointer;
}
.slick-carousel .slick-prev {
  left: 0.5625rem;
  transform: rotate(180deg);
}
@media only screen and (min-width: 768px) {
  .slick-carousel .slick-prev {
    left: 0.9375rem;
  }
}
@media only screen and (min-width: 1400px) {
  .slick-carousel .slick-prev {
    left: -0.3125rem;
  }
}
.slick-carousel .slick-next {
  right: 0.5625rem;
  margin-top: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .slick-carousel .slick-next {
    margin-top: -0.9375rem;
    right: 0.9375rem;
  }
}
@media only screen and (min-width: 1400px) {
  .slick-carousel .slick-next {
    right: -0.3125rem;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/table-action-span/table-action-span.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.table-action-link {
  width: 100%;
  padding: 0.25rem 0.9375rem;
  border: 0.0625rem solid #b2b2b2;
  border-radius: 2px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .table-action-link {
    padding: 0;
    line-height: normal;
    border: none;
  }
}
.table-action-link__title {
  display: block;
  padding-top: 0.1875rem;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
}

.table-action-span {
  width: 100%;
  padding: 0.25rem 0.9375rem;
  border: 0.0625rem solid #b2b2b2;
  border-radius: 2px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .table-action-span {
    padding: 0;
    line-height: normal;
    border: none;
  }
}
.table-action-span__title {
  display: block;
  padding-top: 0.1875rem;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-accordion/toggler-accordion.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.toggler-accordion__icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.toggler-accordion__item {
  position: relative;
  cursor: pointer;
  padding-right: 1rem;
}
.toggler-accordion__item--active .toggler-accordion__icon {
  transform: rotate(180deg) translateY(50%);
}
.toggler-accordion__item--active .toggler-accordion__icon::after {
  display: none;
}
.toggler-accordion__item--active::after {
  display: none;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/account-navigation/account-navigation.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.side-drawer {
  position: relative;
  z-index: 1200;
}
@media only screen and (min-width: 1024px) {
  .side-drawer {
    display: none;
  }
}
.side-drawer__drawer {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: top 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.625rem 0;
  overflow: hidden;
}
@media only screen and (min-width: 550px) {
  .side-drawer__drawer {
    transition: left 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
    top: 0;
    left: -23.4375rem;
    width: 23.4375rem;
  }
}
@media only screen and (min-width: 768px) {
  .side-drawer__drawer {
    padding-top: 3.125rem;
  }
}
.side-drawer__holder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 0.8125rem;
}
.side-drawer__close {
  position: absolute;
  left: 0.3125rem;
  top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
}
.side-drawer__navigation-top {
  padding: 0 0.8125rem 0.625rem 3.125rem;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .side-drawer__navigation-top {
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .side-drawer__navigation-top-actions {
    display: none;
  }
}
.side-drawer__user-link {
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 0;
  font-weight: 700;
  line-height: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}
.side-drawer__user-link-icon {
  margin-right: 0.625rem;
}
.side-drawer__navigation {
  padding-bottom: 0.9375rem;
  flex: 1;
}
.side-drawer__info {
  flex-shrink: 0;
  padding-bottom: 1.5625rem;
}
.side-drawer__contact {
  display: block;
  padding: 1rem 0.9375rem 1rem 4rem;
  border-radius: 0.125rem;
  border: 0.0625rem solid currentColor;
  color: #4c4c4c;
  position: relative;
}
.side-drawer__contact-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.side-drawer__contact-text {
  display: block;
  font-size: 0.875rem;
  line-height: 1.2;
}
.side-drawer__contact-text--weight {
  font-weight: 500;
}
.side-drawer--show .side-drawer__drawer {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  left: 0;
  top: 0;
}

.account-navigation {
  position: relative;
  z-index: 1200;
}
@media only screen and (min-width: 1024px) {
  .account-navigation {
    display: none;
  }
}
.account-navigation__drawer {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: top 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.625rem 0;
  overflow: hidden;
}
@media only screen and (min-width: 550px) {
  .account-navigation__drawer {
    transition: left 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
    top: 0;
    left: -23.4375rem;
    width: 23.4375rem;
  }
}
@media only screen and (min-width: 768px) {
  .account-navigation__drawer {
    padding-top: 3.125rem;
  }
}
.account-navigation__holder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 0.8125rem;
}
.account-navigation__close {
  position: absolute;
  left: 0.3125rem;
  top: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
}
.account-navigation__navigation-top {
  padding: 0 0.8125rem 0.625rem 3.125rem;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .account-navigation__navigation-top {
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .account-navigation__navigation-top-actions {
    display: none;
  }
}
.account-navigation__user-link {
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 0;
  font-weight: 700;
  line-height: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}
.account-navigation__user-link-icon {
  margin-right: 0.625rem;
}
.account-navigation__navigation {
  padding-bottom: 0.9375rem;
  flex: 1;
}
.account-navigation__info {
  flex-shrink: 0;
  padding-bottom: 1.5625rem;
}
.account-navigation__contact {
  display: block;
  padding: 1rem 0.9375rem 1rem 4rem;
  border-radius: 0.125rem;
  border: 0.0625rem solid currentColor;
  color: #4c4c4c;
  position: relative;
}
.account-navigation__contact-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.account-navigation__contact-text {
  display: block;
  font-size: 0.875rem;
  line-height: 1.2;
}
.account-navigation__contact-text--weight {
  font-weight: 500;
}
.account-navigation--show .account-navigation__drawer {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  left: 0;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .account-navigation {
    display: none;
  }
}
.account-navigation__drawer {
  transition: right 250ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
  width: 20rem;
  left: auto;
  padding-top: 0;
  right: -20rem;
  top: 0;
}
.account-navigation--show .account-navigation__drawer {
  left: auto;
  right: 0;
}
.account-navigation__close {
  right: 0;
  top: 0.3125rem;
  left: auto;
  color: #fff;
}
.account-navigation__account {
  display: flex;
  align-items: center;
  padding: 1rem 3.125rem 1rem 1.5rem;
  color: #fff;
  background: #005ba1;
  flex-shrink: 0;
}
.account-navigation__account--company {
  background: #08493d;
}
.account-navigation__account-icon {
  flex-shrink: 0;
  margin-right: 1.875rem;
}
.account-navigation__account-text {
  font-size: 0.875rem;
  line-height: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.account-navigation__holder {
  padding: 0 1.25rem;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/Pyz/Yves/ShopUi/Theme/default/components/organisms/footer/footer.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Defines the main color of the shop theme. Usage: primary elements' background and color.
 */
/**
 * Defines alternative color of the shop theme. Usage: secondary elements' background and color.
 */
/**
 * Defines white color. Usage: not transparent elements' background of default background.
 */
/**
 * Defines a light shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines a lighter shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the lightest shade color. Usage: elements' background, borders and text.
 */
/**
 * Defines the shade of the black color. Usage: as a base of black color for semi-transparent elements.
 */
/**
 * Defines a dark shade color. Usage: elements' text color variant.
 */
/**
 * Defines a darker shade color. Usage: elements' text color variant.
 */
/**
 * Defines the darkest shade color. Usage: elements' text color variant.
 */
/**
 * Defines a transparent color. Usage: elements' background, border.
 */
/**
 * Defines the main background color. Usage: body and side-drawer background.
 */
/**
 * Defines the main color of text. Usage: default global text color.
 */
/**
 * Defines a default global border color for the input elements.
 */
/**
 * Defines a default global border color for the input elements on focus event.
 */
/**
 * Defines a shadow shade and transparency for the shadowed elements.
 */
/**
 * Defines a default overlay color. Usage: elements with overlay - side-drawer, popups etc.
 */
/**
 * Defines a default image overlay color. Usage: images with overlay - lazy-image.
 */
/**
 * Defines action colors map.
 */
/**
 * Defines font family setting. Usage: body global font styles.
 */
/**
 * Defines font family setting for code. Can be used for code and pre elements.
 */
/**
 * Defines basic font size. Usage: global basic font size.
 */
/**
 * Font size values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Font weight values map. Usage: mixin to set font weight property.
 */
/**
 * Font line height values map. Usage: mixins providing styles for headings, text elements etc.
 */
/**
 * Defines a default duration value for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines a default timing function for the animation effects. Usage: mixins providing animation properties.
 */
/**
 * Defines default z-index value.
 */
/**
 * Defines z-index value for ajax dynamic loader.
 */
/**
 * Defines z-index value for the floating elements.
 */
/**
 * Defines z-index value for the header context.
 */
/**
 * Defines z-index value for the side drawer context.
 */
/**
 * Defines z-index value for the popup.
 */
/**
 * Defines z-index value for the overlay.
 */
/**
 * Defines z-index value for the notification area context.
 */
/**
 * Defines z-index value for the search suggestions context.
 */
/**
 * Defines z-index value for the ajax loader.
 */
/**
 * Defines z-index value for the top navigation context.
 */
/**
 * Defines z-index value for the skip to content link context.
 */
/**
 * Defines z-index value for layer under main content.
 */
/**
 * Defines spacing values map. Usage: spacing helpers and mixins.
 */
/**
 * Defines breakpoints' values for responsive.
 */
/**
 * Defines grid system columns count.
 */
/**
 * Defines grid container max width.
 */
/**
 * Defines gutters' size for grid "with-gutter" modifier.
 */
/**
 * Defines import blacklist. Usage: import helper.
 */
/**
 * Provides list of properies for reset usage.
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * @param {Color|String} $value
 * @param {Number} $degree [10]
 */
/**
 * Sets font-size property from font size settings map - $setting-font-size according to the passed map key.
 * @param {String | Number} $size
 */
/**
 * Sets font-weight property from font weight settings map - $setting-font-weight according to the passed map key.
 * @param {String} $weight
 */
/**
 * Sets line-height property from line-height settings map - $setting-font-line-height according to the passed map key.
 * @param {String | Number} $height
 */
/**
 * Povides transition property configured by the passed parameters.
 * @param {String} $props
 * @param {Number} $duration [$setting-effect-default-duration]
 * @param {String} $ease [$setting-effect-default-ease]
 */
/**
 * Forces element visibility.
 */
/**
 * Forces element invisibility.
 */
/**
 * Forces element invisibility with accessibility support.
 */
/**
 * Forces element visibility with accessibility support.
 */
/**
 * Provides global class names with spacing properties set from $setting-spacing map.
 * @param {String} $name Main selector name.
 * @param {List} $sides [[]] List of sides to set properties.
 */
/**
 * Returns 0 or the first value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Returns null or the last value from the $edges list.
 * @param {List} $edges [$setting-breakpoints] List length must be less than or equal to 2.
 * @return {Base}
 */
/**
 * Sets screen media query with min-width set to $min parameter.
 * @param $min {Number} [0]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed as parameters.
 * @param {Number} $min [0]
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with max-width set to $max parameter.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Sets screen media query with breakpoints range passed to parameters or
 * with min-width query if only one parameter is passed.
 * @param {Number} $max [$setting-grid-max-width]
 * @content Extends mixin with properties for media query.
 */
/**
 * Returns column ratio in relation to columns count.
 * @param {Number} $column
 * @param {Number} $columns [$setting-grid-columns]
 * @return {Number}
 */
/**
 * Adds clearing for element with floated child elements.
 */
/**
 * Adds a box-shadow with basic values.
 */
/**
 * Checks parameter on presence in the blacklist of imports setting list.
 * @param {List} $keywords
 * @content Extends mixin with properties if $keywords is not on the blacklist.
 */
/**
 * Forces element outline.
 */
.footer {
  background: var(--n1);
  border-top: 1px solid var(--n3);
}
.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer__nav {
  min-width: 0;
}
.footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__item {
  margin: 0;
}
.footer__link {
  font-size: 13px;
  color: var(--n7);
  text-decoration: none;
}
.footer__link:hover, .footer__link:focus {
  color: var(--blue-dark);
  text-decoration: underline;
}
.footer__copyright {
  font-size: 12px;
  color: var(--n6);
}

/*# sourceMappingURL=yves_default.critical.css.map*/