/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/index.js??ruleSet[1].rules[1].use[1]!./sfra-webpack-builder/node_modules/media-query-plugin/src/loader.js!./node_modules/postcss-loader/lib/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./code/core/cartridges/app_custom_triumph_jp/cartridge/client/default/scss/navigation.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
Define here all z-indices used so that we have one central overview

Standard z-indices set and used by bootstrap (Do NOT modify these!):
$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
Source: https://getbootstrap.com/docs/5.0/layout/z-index/
*/
/* stylelint-disable at-rule-no-unknown */
:root {
  /** ==================================================================== **/
  /** Create Custom CSS Variables from "sfra bootstrap override" variables **/
  /** ==================================================================== **/
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #0d6efd;
  --color-green: #008000;
  --color-primary: #000;
  --color-secondary: #e9e9e6;
  --color-red: #e40032;
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-light-blue: #7ed0ee;
  --color-triumph-warm-stone: #e9e9e6;
  --color-triumph-linen-grey: #f2f2f2;
  --color-triumph-red: #e40032;
  --color-sloggi-blue: #008ea6;
  --color-triumph-trolley-gray: #808080;
  --color-grey1: #f9f9f9;
  --color-grey2: #eee;
  --color-grey3: #ccc;
  --color-grey4: #999;
  --color-grey5: #666;
  --color-grey6: #444;
  --color-grey7: #222;
  --color-grey8: #333;
  --color-grey-transparent-1: rgba(0, 0, 0, 0.65);
  --color-grey-transparent-2: rgba(0, 0, 0, 0.25);
  --color-light-gray: var(--color-grey1);
  --color-slightly-darker-gray: var(--color-grey4);
  --color-dark-gray: var(--color-grey6);
  --color-darker-gray: var(--color-grey7);
  --color-horizontal-rule-grey: var(--color-grey3);
  --color-product-number-grey: var(--color-grey3);
  --color-horizontal-border-grey: var(--color-grey4);
  --color-menu-link: var(--color-grey6);
  --color-close-menu-bg: var(--color-grey2);
  --color-link-color: var(--color-dark-gray);
  --color-hr-border-color: var(--color-grey3);
  /** ==================================================================== **/
  /** Define skin named variables here                                    **/
  /** ==================================================================== **/
  --skin-background-color-1: var(--color-triumph-linen-grey);
  --skin-border-color-1: var(--color-black);
  --skin-main-text-color-1: var(--color-black);
  --skin-main-text-color-2: var(--color-grey7);
  --skin-menu-color-1: var(--color-black);
  --skin-menu-color-1-invert: var(--color-white);
  --skin-menu-color-2: #222;
  --skin-link-color-1: var(--color-black);
  --skin-link-color-2: #666666;
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-secondary-color-1: var(--color-secondary);
  --skin-secondary-color-2: var(--color-secondary);
  --skin-primary-color-invert-1: var(--color-white);
  --skin-secondary-color-invert-1: var(--color-black);
  --skin-selectbox-background-color-1: var(--color-white);
  --skin-selectbox-text-color-1: var(--skin-main-text-color-1);
  --skin-banner-background-color-1: #444;
  --skin-banner-background-color-2: #222;
  --skin-banner-text-color-1: var(--color-white);
  --skin-heading-color-1: var(--color-primary);
  --skin-heading-color-1-invert: var(--color-white);
  --skin-price-1: var(--color-gray7);
  --font-family-sans-serif: 'Noto Sans JP', sans-serif;
  --skin-header-font: var(--font-family-sans-serif);
  --skin-body-font: var(--font-family-sans-serif);
  /*
  * badges
  */
  --secondary-badge-background: #D6BBAF;
  --secondary-badge-text: var(--skin-primary-color-1);
  /*
  * swiper
  */
  --swiper-pagination-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-triumph-warm-stone);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

body.amostyle, body.sloggi {
  --skin-background-color-1: #fff;
  --skin-primary-color-1: var(--color-primary);
  --skin-main-text-color-1: var(--color-primary);
  --skin-link-color-1: var(--color-primary);
  --skin-border-color-1: var(--color-primary);
  --headings-fontfamily: var(--bs-font-sans-serif);
}

body.sloggi {
  --color-primary: #354558;
  --color-danger: #FF8673;
  --skin-link-color-2: rgb(129, 138, 150);
  --secondary-badge-background: #8ECFD7;
  --secondary-badge-text: var(--skin-main-text-color-1);
}

body.amostyle {
  --color-primary: #8B7973;
  --color-danger: #FF8673;
  --skin-link-color-2: rgb(180, 169, 166);
  --secondary-badge-background: #CAD1EB;
  --secondary-badge-text: #111985;
}

body.triumph {
  --headings-fontfamily: Triumph Grand;
}

:root, [data-bs-theme=light] {
  --color-triumphRed: #e40032;
  --color-sloggiBlue: #008ea6;
  --sloggi-icon-color: rgb(2, 142, 166);
  --color-black: #000;
  --color-bPostBlack: #444;
  --color-brandyRose: #b87f7a;
  --color-buddha: #cc9400;
  --color-coral: #eee2dd;
  --color-darkGrey: #aeaeae;
  --color-gainsboro: #e5e5e5;
  --color-green: green;
  --color-hippieGreen: #608a59;
  --color-ironGrey: #727272;
  --color-lightCoral: #d6bbaf;
  --color-lightGrey: #e9e9e5;
  --color-linenGrey: #f2f2f2;
  --color-mystic: #0000001f;
  --color-naturalGreige: #ddd4c6;
  --color-oliveGreen: #9b8e62;
  --color-peppermint: #e7f8e6;
  --color-pineGreen: #656c60;
  --color-pureOak: #d5c1a2;
  --color-pureWhite: #fff;
  --color-rawClay: #9a5a3b;
  --color-richBlack: #000;
  --color-safetyOrange: #ff5f00;
  --color-santaRed: #9a001d;
  --color-tangaroa: #101828;
  --color-transparent: #0000;
  --color-tutu: #f8e6e8;
  --color-twilightBlue: #0b3280;
  --color-vanilla: #ece9d7;
  --color-warmStone: #e9e9e6;
  --color-warning: #f8f7e6;
  --color-white: #fff;
  --color-whitey: #dcd9d9;
  --color-fuchsia: #ef5da8;
  --color-iris: #5d5fef;
  --color-softYellow: #f6e890;
  --color-canary: #fff492;
  --color-whiteOpacity: #fffffff2;
  --color-clearRed: #e90000;
  --color-darkCerulean: #0f5e8b;
  --color-peachOrange: #fbc599;
  --color-kellyGreen: #41850f;
  --color-cadillac: #a45268;
  --color-dandelion: #ffd964;
  --color-lightSlateBlue: #7b61ff;
  --color-egyptianBlue: #1035bb;
  --color-brandMainColor: #e40032;
  --color-sale: #e40032;
  --color-error: #e40032;
  --highlightFont: 'Noto Sans JP', sans-serif;
  --baseFont: 'Noto Sans JP', sans-serif;
  --alternateFont: 'Triumph Grand', sans-serif;
  --baseFontSize: 16px;
  --baseLineHeight: 22px;
  --bs-primary: #e40032;
  --bs-secondary: #101828;
  --bs-success: green;
  --bs-light: #fff;
  --bs-dark: #000;
  --bs-gray: #727272;
  --bs-primary-rgb: 228,0,50;
  --bs-secondary-rgb: 16,24,40;
  --bs-success-rgb: 0,128,0;
  --bs-light-rgb: 255,255,255;
  --bs-dark-rgb: 0,0,0;
  --bs-gray-rgb: 114,114,114;
  --bs-primary-text-emphasis: #5b0014;
  --bs-secondary-text-emphasis: #060a10;
  --bs-success-text-emphasis: #030;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #5b0014;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #faccd6;
  --bs-secondary-bg-subtle: #cfd1d4;
  --bs-success-bg-subtle: #cce6cc;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #faccd6;
  --bs-light-bg-subtle: #f9f9f9;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #f499ad;
  --bs-secondary-border-subtle: #9fa3a9;
  --bs-success-border-subtle: #9c9;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f499ad;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #aeaeae;
  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;
  --bs-font-sans-serif: "Noto Sans JP", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #000;
  --bs-body-bg: #f2f2f2;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0,0,0;
  --bs-secondary-color: #000000bf;
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-color: #00000080;
  --bs-tertiary-bg: #f2f2f2;
  --bs-heading-color: inherit;
  --bs-link-color: #000;
  --bs-link-color-rgb: 0,0,0;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0,0,0;
  --bs-code-color: #d63384;
  --bs-highlight-color: #000;
  --bs-highlight-bg: #fff3cd ;
}

/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
/* stylelint-disable custom-property-pattern */
.flexHeader {
  --header-position: relative;
  --header-offset: 295px;
  --header-logo: 165px;
  --header-gap-column: 40px;
  --header-gap-row: 10px;
  --header-bg: var(--color-linenGrey);
  --header-bg-hover: var(--color-linenGrey);
  --header-triumph-logo: var(--color-black);
  --header-triumph-logo-scrolled: var(--color-black);
  --header-sloggi-logo: var(--color-black);
  --header-sloggi-logo-scrolled: var(--color-black);
  --header-amostyle-logo: var(--color-black);
  --header-amostyle-logo-scrolled: var(--color-black);
  --header-text: var(--color-black);
  --header-text-scrolled: var(--color-black);
  --header-mytriumph: var(--color-brandyRose);
  --header-mytriumph-scrolled: var(--color-brandyRose);
  --header-sale: var(--color-triumphRed);
  --header-sale-scrolled: var(--color-triumphRed);
}
.flexHeader {
  position: var(--header-position);
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--header-bg);
  color: var(--header-text);
  z-index: 100;
  text-shadow: none;
}
.flexHeader *:not(:has(a)) {
  transition: all 0.5s linear;
}
.flexHeader .item::before {
  transition: color 0.5s linear;
}
.flexHeader .item.flyout-toggle {
  transition: color 0.25s linear;
}
.flexHeader .item.flyout-toggle::before {
  transition: color 0.25s linear;
}
.flexHeader .icon {
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  min-width: 20px;
}
.flexHeader .icon--medium {
  font-size: 24px;
  min-width: 24px;
}
.flexHeader .icon--large {
  font-size: 36px;
  min-width: 37px;
}
.flexHeader .icon--smaller {
  font-size: 15px;
}
.flexHeader .icon--error {
  color: var(--color-error);
}
.flexHeader .icon--mytriumph {
  color: var(--color-brandyRose);
}
.flexHeader .icon--disabled {
  cursor: auto;
}
.flexHeader .icon--active.icon-menu::before {
  content: "\E90A";
}
.flexHeader .icon__badge {
  display: none;
  position: absolute;
  right: -5px;
  top: -5px;
  width: 17px;
  height: 17px;
  font-weight: 700;
  font-size: 8px;
  line-height: 17px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-brandMainColor);
  border-radius: 50%;
}
.flexHeader .icon__badge--show {
  display: block;
}
.flexHeader .icon__day {
  position: absolute;
  top: 40%;
  left: 30%;
  font-size: 35%;
  font-weight: 900;
}
.flexHeader .svgIcon {
  display: inline-block;
}
.flexHeader .svgIcon__brandlogo {
  width: 163px;
}
.flexHeader .svgIcon--anchor {
  cursor: pointer;
}
.flexHeader .svgIcon--style1, .flexHeader .svgIcon--style2 {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon:hover .flexHeader .svgIcon--style1 {
  stroke-width: 3px;
}
.flexHeader .svgIcon--style3, .flexHeader .svgIcon--style4 {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 2;
  stroke-miterlimit: 10;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--style3Filled, .flexHeader .svgIcon--style4Filled {
  fill: var(--color-black);
  stroke: var(--color-black);
  stroke-width: 2;
  stroke-miterlimit: 10;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--style2, .flexHeader .svgIcon--style4 {
  stroke-width: 1.5;
}
.flexHeader .svgIcon:hover .flexHeader .svgIcon--style3, .flexHeader .svgIcon:hover .flexHeader .svgIcon--style4 {
  fill: var(--color-black);
}
.flexHeader .svgIcon--style5, .flexHeader .svgIcon:hover .flexHeader .svgIcon--style5, .flexHeader .svgIcon:hover .flexHeader .svgIcon--style6 {
  fill: var(--color-black);
  stroke: var(--color-black);
  stroke-width: 2;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--style6 {
  fill: none;
}
.flexHeader .svgIcon--style7 {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 2;
  stroke-miterlimit: 10;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon:hover .flexHeader .svgIcon--style7 {
  fill: var(--color-white);
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--style8 {
  fill: var(--color-black);
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--style9 {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon:hover .flexHeader .svgIcon--style9 {
  stroke: var(--color-white);
  shape-rendering: geometricprecision;
}
.flexHeader .svgIcon--userAnimated {
  animation: spinhorizontal 2.5s infinite linear;
  width: 20px;
}
@keyframes spinhorizontal {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.flexHeader .svgIcon.svgIcon__menuClose {
  width: 16px;
}
.flexHeader .svgIcon.svgIcon__menuClose .svgIcon__menuClose--close {
  display: none;
}
.flexHeader .svgIcon.svgIcon__menuClose.flyout-toggle--active .svgIcon__menuClose--menu {
  display: none;
}
.flexHeader .svgIcon.svgIcon__menuClose.flyout-toggle--active .svgIcon__menuClose--close {
  display: inline-block;
}
.flexHeader .svgIcon.svgIcon__close {
  width: 14px;
}
.flexHeader .svgIcon.svgIcon__search {
  width: 18px;
}
.flexHeader .svgIcon.svgIcon__questionmark {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  top: 1px;
  user-select: none;
}
.flexHeader .svgIcon.svgIcon__heart {
  width: 20px;
}
.flexHeader .svgIcon.svgIcon__user {
  width: 16px;
}
.flexHeader .svgIcon.svgIcon__user--active {
  width: 17px;
}
.flexHeader .svgIcon.svgIcon__shoppingBag {
  width: 17px;
}
.flexHeader .svgIcon.svgIcon__mapPin {
  width: 18px;
}
.flexHeader .svgIcon.svgIcon__chevronLeft, .flexHeader .svgIcon.svgIcon__chevronRight {
  width: 7px;
}
.flexHeader .svgIcon.svgIcon__smallbrandlogo {
  width: 51px;
}
.flexHeader--checkout {
  --header-position: relative;
}
.flexHeader--fixed {
  --header-bg: var(--color-transparent) !important;
}
.flexHeader--fixed ~ #maincontent {
  margin-top: calc(var(--header-height) * -1);
}
.flexHeader--fixed ~ #maincontent .contactus {
  margin-top: 220px;
}
.flexHeader__quicklinks {
  display: none;
}
.flexHeader__searchIndicatorDesktop {
  display: none;
}
.flexHeader__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexHeader__brandSwitcher {
  display: none;
}

.header {
  padding: 10px 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .header--checkout {
  --header-logo: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 80px;
}
.header .header__icon {
  display: none;
}
.header .user {
  position: relative;
}
.header .user button {
  padding: 0;
  border: 0;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  line-height: 0;
  color: var(--header-text, var(--color-black));
}
.header .user .dropdown-menu {
  position: absolute;
  display: none;
  padding: 14px;
  top: 100%;
  left: auto;
  right: 0;
  min-width: 0;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header .user .dropdown-menu a {
  font-size: 0.875rem;
  white-space: nowrap;
  padding: 0;
  color: #000;
  margin-bottom: 2px;
}
.header .user .dropdown-menu a:last-child {
  margin-bottom: 0;
}
.header .user .dropdown-menu a:focus, .header .user .dropdown-menu a:active, .header .user .dropdown-menu a:hover {
  text-decoration: underline;
  background-color: #fff;
  color: #000;
}
.header .user .dropdown-menu.show {
  display: block;
}
.header .header__logo {
  flex: 0 1 var(--header-logo);
  position: relative;
}
.header .header__logo a:last-of-type {
  position: relative;
  top: 0;
}
.header .header__logo--sloggi {
  color: var(--header-sloggi-logo);
}
.header .header__logo--amostyle {
  color: var(--header-amostyle-logo);
}
.header .header__logo--triumph {
  color: var(--header-triumph-logo);
}
.header .header__logo .svgIcon__brandlogo {
  width: 100%;
}

.header-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 8%;
  height: 80px;
  width: 100%;
  background-color: var(--color-white);
  z-index: 99;
}
.header-mobile a {
  text-decoration: none;
  color: var(--color-black);
  line-height: 1;
}
.header-mobile .header-mobile-account-button {
  padding: 0;
  border: 0;
  appearance: none;
}
.header-mobile .user .dropdown-menu {
  position: absolute;
  display: none;
  padding: 14px;
  bottom: calc(100% + 16px);
  min-width: 0;
  left: 12px;
  transform: none;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
  width: fit-content;
}
.header-mobile .user .dropdown-menu.show {
  display: block;
}

.quicklinks {
  font-family: var(--highlightFont, var(--baseFont));
}
.quicklinks .item {
  display: flex;
  align-items: center;
}
.quicklinks .item::before {
  content: "";
  margin: 0 8px;
  width: 1px;
  height: calc(100% - 6px);
  background: currentcolor;
}
.quicklinks .item:first-of-type::before {
  display: none;
}
.quicklinks .item a {
  text-decoration: none;
}

.experience-header,
.page--header-layout {
  display: contents;
}
.experience-header:has(> .flexHeader--fixed) ~ #maincontent,
.page--header-layout:has(> .flexHeader--fixed) ~ #maincontent {
  margin-top: calc(var(--header-height) * -1);
}
.experience-header:has(> .flexHeader--fixed) ~ #maincontent .contactus,
.page--header-layout:has(> .flexHeader--fixed) ~ #maincontent .contactus {
  margin-top: 220px;
}
.experience-header:has(> .header:not(.header--fixed)) ~ #maincontent .experience-carousel-heroCarousel,
.page--header-layout:has(> .header:not(.header--fixed)) ~ #maincontent .experience-carousel-heroCarousel {
  --screen-fullHeight: calc(100svh - var(--header-height));
}
.experience-header:has(> .flexHeader--active:not([data-scroll-position])) ~ #maincontent,
.page--header-layout:has(> .flexHeader--active:not([data-scroll-position])) ~ #maincontent {
  margin-top: var(--header-height);
}
.experience-header:has(> .flexHeader--active.flexHeader--fixed:not([data-scroll-position])) ~ #maincontent,
.page--header-layout:has(> .flexHeader--active.flexHeader--fixed:not([data-scroll-position])) ~ #maincontent {
  margin-top: 0;
}
.experience-header:has(> [data-scroll-position]) ~ #maincontent .interactionbarContainer,
.page--header-layout:has(> [data-scroll-position]) ~ #maincontent .interactionbarContainer {
  box-shadow: 0 -5px 0 0 var(--pd-bgColor, var(--color-linenGrey));
}
.experience-header:has(> [data-scroll-position^=down]) ~ #maincontent .interactionbarContainer,
.page--header-layout:has(> [data-scroll-position^=down]) ~ #maincontent .interactionbarContainer {
  top: 0;
}

.page--header-layout:has(> .flexHeader--fixed) ~ #maincontent {
  padding-top: calc(var(--header-height) * 1);
}

.promoBar {
  flex-direction: row-reverse;
  justify-content: flex-end;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--highlightFont, var(--baseFont));
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  font-size: 10px;
  line-height: 24px;
}
.promoBar a {
  color: inherit;
}
.promoBar--black {
  background-color: var(--color-black);
  color: var(--color-white);
}
.promoBar--brandMainColor {
  background-color: var(--color-brandMainColor);
  color: var(--color-white);
}
.promoBar__close {
  flex: 0 1 auto;
  margin-left: 15px;
  margin-right: auto;
}
.promoBar__specialPromotion {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.promoBar__itemTitle {
  font-weight: 700;
}
.promoBar__textContent {
  line-height: 14px;
  text-align: left;
  font-family: var(--baseFont);
}
.promoBar__icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.promoBar a.promoBar__button {
  color: var(--color-white);
}
.promoBar__button {
  background-color: var(--color-black);
  margin-left: 16px;
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  border-radius: 16px;
  text-decoration: none;
}
.promoBar__modalButton {
  border-radius: 2px;
}
.promoBar__modalButton--ios:hover path {
  fill: var(--color-black);
}
.promoBar .carousel-item.carousel-item-icon-promo::before {
  padding: 0;
  height: 0;
}
.promoBar__closeBtn {
  position: relative;
  margin-right: 20px;
}
.promoBar .carousel {
  max-height: 52px;
}
.promoBar .carousel {
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  width: calc(100% - 11px);
}
.promoBar .carousel-inner {
  text-align: left;
}
.promoBar .carousel-item {
  padding: 0 10px;
  text-shadow: none;
}
.promoBar .carousel-item::before {
  content: "";
  display: block;
  height: 4px;
}
.promoBar .carousel-item-link {
  text-decoration: underline;
  cursor: pointer;
}
.promoBar .carousel-item-link.promoBar__button {
  text-decoration: none;
}
.promoBar .carousel-control-next,
.promoBar .carousel-control-prev {
  color: inherit;
  text-decoration: none;
  opacity: 1;
  width: 20px;
}
.promoBar .carousel-control-prev {
  position: relative;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.promoBar .carousel-control-next {
  position: relative;
}

.search-title {
  display: none;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  padding-top: 10px;
  padding-bottom: 30px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
}
.search-form .flyout-toggle {
  margin: 15px 0 20px auto;
}
.search-form .button {
  border: 0;
}

.search-formfield {
  position: relative;
}
.search-formfield .formfield__icon {
  font-size: 22px;
  position: absolute;
  right: 10px;
  top: 22px;
}

.search-formfield,
.search-input {
  flex: 0 0 100%;
}

.search-recommendations-section {
  display: flex;
  flex-flow: column;
}

.search-recommendations {
  width: 100%;
}
.search-recommendations__title {
  font-weight: 400;
  margin-bottom: 15px;
}
@media (max-width: 991.98px) {
  .search-recommendations__title .headline--h9 {
    font-size: 18px;
    line-height: 30px;
  }
}
.search-recommendations__list {
  list-style: none;
  margin-bottom: 30px;
  padding: 0;
}
.search-recommendations__listitem {
  font-family: var(--highlightFont, var(--baseFont));
  font-size: var(--baseFontSize);
  line-height: 24px;
  margin-bottom: 10px;
}
.search-recommendations__listitem .link {
  display: inline-block;
}

.searchCarousel {
  flex: 1;
}
@media (max-width: 991.98px) {
  .searchCarousel .carousel__headline .headline--h9 {
    font-size: 18px;
    line-height: 30px;
  }
}

#searchflyout {
  overflow-y: scroll;
  padding-top: 0;
  padding-bottom: 80px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#searchflyout::-webkit-scrollbar {
  display: none;
}

.brand-switcher {
  order: -1;
}
.brand-switcher__list {
  display: flex;
  align-items: center;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
}
.brand-switcher__listItem {
  width: 100%;
}
.brand-switcher__listItem:last-child {
  border-right: 0;
}
.brand-switcher__listItem--triumph {
  color: var(--header-triumph-logo);
}
.brand-switcher__listItem--sloggi {
  color: var(--header-sloggi-logo);
}
.brand-switcher__listItem--amostyle {
  color: var(--header-amostyle-logo);
}
.brand-switcher__link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  max-width: 88px;
}
.brand-switcher__image {
  display: block;
  height: 100%;
}
.brand-switcher .icon-triumph-brand {
  width: 80px;
  height: auto;
}
.brand-switcher .icon-sloggi-brand {
  width: 52px;
  height: auto;
}
.brand-switcher .icon-amostyle-brand {
  width: 88px;
  height: auto;
}
.brand-switcher__img-mobile {
  padding: 0 8px;
}
.brand-switcher .icon-sloggi:before {
  color: var(--sloggi-icon-color);
}
.brand-switcher .brand-switcher__listItem--sloggi .brand-switcher__img-mobile {
  height: 36px !important;
  width: auto !important;
}

/* stylelint-disable custom-property-pattern */
.flyout {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  color: var(--color-black);
  z-index: 100;
  visibility: hidden;
  transition: all 0.2s;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.flyout::-webkit-scrollbar {
  display: none;
}
.flyout {
  /* For PayPal Express button */
}
.flyout iframe {
  visibility: hidden !important;
}
@media (max-width: 991.98px) {
  .flyout--slideRightMobile {
    left: auto;
    right: -100%;
  }
}
.flyout__notfull {
  width: 80%;
}
@media (max-width: 767.98px) {
  .flyout__noscroll {
    overflow: hidden;
  }
}
.flyout--active {
  left: 0;
  visibility: visible;
}
@media (max-width: 991.98px) {
  .flyout--active.flyout--slideRightMobile {
    left: auto;
    right: 0;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .flyout--active.flyout--tooltipDesktop {
    max-height: 82vh;
  }
}
@media (max-width: 991.98px) {
  .flyout--active ~ .flyout-offset {
    display: block;
  }
}
.flyout--active {
  /* For PayPal Express button */
}
.flyout--active iframe {
  visibility: visible !important;
}
.flyout--secondary {
  position: absolute;
  top: 0;
  margin-top: 20px;
  transition: all 0.5s;
  width: unset;
}
.flyout--help {
  --arrow-position: 50%;
  display: none;
}
.flyout--filter .label {
  color: var(--color-black);
}

.flyoutWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1030;
  pointer-events: none;
  display: none;
}
.flyoutWrapper--active {
  pointer-events: all;
  display: block;
}
.flyoutWrapper--fixedRight {
  right: 0;
}

.flyout-offset {
  background-color: var(--color-black);
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  opacity: 0.1;
  cursor: pointer;
  pointer-events: all;
}
.flyout-offset--lineitemActive {
  transform: translate(0);
  z-index: 100;
}

.menuMainCategory {
  display: flex;
  flex: 1;
  position: relative;
  width: 100%;
  font-size: var(--baseFontSize);
  line-height: 24px;
  font-family: var(--highlightFont, var(--baseFont));
  color: var(--color-black);
  text-decoration: none;
  user-select: none;
  text-underline-offset: 3px;
  padding-bottom: 18px;
  padding-right: 24px;
  white-space: nowrap;
  text-shadow: none;
}
.menuMainCategory--spacing {
  margin-bottom: 30px;
}
.menuMainCategory--active {
  text-decoration: underline;
  color: var(--pd-textColor, var(--color-black));
  opacity: 1;
  cursor: pointer;
}
.menuMainCategory--active + .navigation__subcategories-wrapper {
  left: 8px;
}
.menuMainCategory__icon {
  position: absolute;
  right: 5px;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.menuMainCategory__text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menuMainCategory__text svg {
  height: 24px;
  display: block;
  pointer-events: none;
}

.menuSubCategory,
.menuPageLink {
  display: flex;
  align-items: center;
  font-size: var(--baseFontSize);
  line-height: 24px;
  font-family: var(--highlightFont, var(--baseFont));
  text-decoration: none;
  color: var(--color-black);
  padding: 0 0 12px;
  user-select: none;
  text-underline-offset: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menuSubCategory:active, .menuSubCategory:focus, .menuSubCategory:hover,
.menuPageLink:active,
.menuPageLink:focus,
.menuPageLink:hover {
  color: inherit;
}
.menuSubCategory__text,
.menuPageLink__text {
  width: 90%;
  padding-left: 5px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  white-space: initial;
  word-break: keep-all;
}
.menuSubCategory--spacing,
.menuPageLink--spacing {
  margin-bottom: 30px;
}
.menuSubCategory--2ndlvl,
.menuPageLink--2ndlvl {
  text-decoration: underline;
  font-weight: 700;
}

.navigation {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  padding: 0 15px;
  width: 100%;
}
.navigation--active {
  height: 100vh;
}
.navigation .row {
  position: relative;
  display: block;
}
.navigation__categories {
  user-select: none;
  padding: 0;
  margin: 0;
  margin-top: 50px;
  width: 100%;
}
.navigation__category, .navigation__pageLink {
  display: block;
  list-style-type: none;
}
.navigation__subcategories-wrapper {
  position: absolute;
  top: 0;
  left: -100%;
  height: 100vh;
  background-color: var(--color-white);
  z-index: 1;
  width: 100%;
  padding: 48px 16px;
  transition: all 0.3s ease;
}
.navigation__subcategories {
  display: block;
  transition: opacity 0.2s;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.navigation__subcategories > .navigation__subcategory {
  width: 100%;
  overflow: hidden;
}
.navigation__subcategories > .navigation__subcategory:nth-of-type(n+6) {
  display: none;
}
.navigation__subcategory {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navigation__subcategory--showFirst {
  order: -1;
}
.navigation__subcategory--2ndlvl {
  order: -2;
}
@media (max-width: 991.98px) {
  .navigation__subcategory--2ndlvl {
    margin-top: 20px;
  }
}
.navigation__subcategory-link {
  display: flex;
  align-items: center;
  font-size: var(--baseFontSize);
  line-height: 24px;
  font-family: var(--highlightFont, var(--baseFont));
  text-decoration: none;
  color: var(--color-black);
  padding: 0 0 12px;
  user-select: none;
  text-underline-offset: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation__subcategory-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.navigation__toCategory {
  text-decoration: none;
}
.navigation__backToCategory {
  font-size: 22px;
  font-family: var(--highlightFont, var(--baseFont));
  margin-bottom: 20px;
  padding: 0;
}
.navigation__backToCategory .icon {
  margin-right: 14px;
}
.navigation__countrySelectorButton {
  bottom: 50px;
  opacity: 1;
  transition: opacity 0.1s linear;
}
.navigation__countrySelectorButton--hide {
  opacity: 0;
}
.navigation__pageLinks {
  user-select: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.navigation__phoneNumber {
  bottom: 20px;
  transition: opacity 0.1s linear;
  opacity: 1;
  padding-bottom: 45px;
}
.navigation__phoneNumber--hide {
  opacity: 0;
}
.navigation__rightPart {
  position: relative;
  left: 0;
  padding: 0 15px;
}
.navigation--active + .navigation__rightPart {
  left: -100%;
}
.navigation__close {
  position: absolute;
  right: 10px;
  top: -5px;
  z-index: 100;
  padding: 10px;
}
@media (max-width: 991.98px) {
  .navigation__listBottom--item {
    margin-top: 45px;
  }
}
.navigation--scrollable {
  scrollbar-color: var(--color-ironGrey) var(--color-lightGrey);
  scrollbar-width: thin;
}
.navigation--scrollable::-webkit-scrollbar {
  display: inherit;
  width: 5px;
}
.navigation--scrollable::-webkit-scrollbar-track {
  background: var(--color-lightGrey);
}
.navigation--scrollable {
  /* Handle */
}
.navigation--scrollable::-webkit-scrollbar-thumb {
  background: var(--color-ironGrey);
}
.navigation__teaser {
  position: relative;
  width: 140px;
  height: 236px;
}
.navigation__teaserImage {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.navigation__teaserButton {
  position: absolute;
  bottom: 0;
  margin: 15px;
  padding: 6px 0;
  width: calc(100% - 30px);
  text-align: center;
}
.navigation__teaserHeadline {
  white-space: nowrap;
}
.navigation__teaser .navigation__teaserTitle {
  position: relative;
  color: var(--color-white);
  padding: 15px;
  line-height: 1.1;
}
.navigation__teaserTitle--subTitle {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  display: -webkit-box;
  overflow: hidden;
  white-space: initial;
  word-break: keep-all;
}

/*# sourceMappingURL=navigation.css.map*/