/**
  * Variables naming rule: --{selector aka component aka namespace}-{css property}-{pseudo class or media query name} eg. --p-background-color-hover 
  * NOTE: Within the component don't use any name spacing eg. component header don't use --header-default-color just use --color the namespace can be added by the Shadow as an html attribute
  * - if a component holds other components or nodes you can declare or remap classes eg. :host > h1 {--color: var(--h1-color, white);}
  * - if a component holds other components you should share the attribute namespace with its children
  */

/* custom fonts 
  TODO: replace https://www.onlinewebfonts.com/download/7e39d05fff188430a1cb860db9b38881 with cdn fonts
*/
@font-face {
  font-family: "PPMori";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-Semibold.woff2") format("woff2"), url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-Semibold.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PPMori";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-Semibold.woff2") format("woff2"), url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-Semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PPMori";
  src: url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-SemiboldItalic.woff2") format("woff2"), url("https://cdn.migros.ch/ch.migros/static/fonts/PPMori/PPMori-SemiboldItalic.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --agenda-event-min-height-mobile: 11em;
}

:root * {
  hyphens: none;
  overflow-wrap: break-word;
}

:root h3 {
  hyphens: manual;
}

:root h4 {
  hyphens: none;
}

@media only screen and (max-width: 767px) {
  :root h3 {
    hyphens: auto;
  }
}

/* OneTrust injects tenant colors inline, so the monochrome theme needs !important. */
#onetrust-consent-sdk #onetrust-banner-sdk,
#onetrust-consent-sdk #onetrust-pc-sdk,
#onetrust-consent-sdk #ot-sdk-cookie-policy {
  background-color: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
  filter: grayscale(1);
}

#onetrust-consent-sdk #onetrust-banner-sdk {
  border: 0 !important;
  outline: 0 !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk *,
#onetrust-consent-sdk #ot-sdk-cookie-policy * {
  border-color: #000;
}

#onetrust-consent-sdk #onetrust-pc-sdk * {
  border-color: #000;
  color: #000 !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk h2,
#onetrust-consent-sdk #onetrust-banner-sdk h3,
#onetrust-consent-sdk #onetrust-banner-sdk p,
#onetrust-consent-sdk #onetrust-pc-sdk h2,
#onetrust-consent-sdk #onetrust-pc-sdk h3,
#onetrust-consent-sdk #onetrust-pc-sdk h4,
#onetrust-consent-sdk #onetrust-pc-sdk p,
#onetrust-consent-sdk #onetrust-pc-sdk label,
#onetrust-consent-sdk #ot-sdk-cookie-policy h2,
#onetrust-consent-sdk #ot-sdk-cookie-policy h3,
#onetrust-consent-sdk #ot-sdk-cookie-policy p {
  color: #000 !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk a,
#onetrust-consent-sdk #onetrust-pc-sdk a,
#onetrust-consent-sdk #ot-sdk-cookie-policy a {
  color: #000 !important;
  text-decoration: underline;
}

#onetrust-consent-sdk #onetrust-accept-btn-handler,
#onetrust-consent-sdk #onetrust-reject-all-handler {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

#onetrust-consent-sdk #onetrust-pc-btn-handler,
#onetrust-consent-sdk #onetrust-pc-sdk button:not([ot-accordion]) {
  background-color: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk button[ot-accordion] {
  background-color: transparent !important;
  border: 0 !important;
}

#onetrust-consent-sdk .ot-switch input:checked + .ot-switch-nob,
#onetrust-consent-sdk .ot-checkbox input:checked + label::before {
  background-color: #000 !important;
  border-color: #000 !important;
}

#onetrust-consent-sdk .ot-switch input:checked + .ot-switch-nob::before {
  background-color: #fff !important;
}

#onetrust-consent-sdk input {
  accent-color: #000 !important;
}

#onetrust-consent-sdk #ot-sdk-btn-floating,
#onetrust-consent-sdk .ot-floating-button {
  display: none !important;
}

:root {
  --a-color: var(--color);
  --a-margin: 0;
  --a-text-decoration: underline;
  --a-transition: var(--transition);
  --any-content-spacing-mobile: 0;
  --any-content-spacing: 0;
  --ArrowUpRight-svg-transform: translateY(0.35em);
  --background-color: #ffffff;
  --bg-color: var(--color);
  --bg-line-height: var(--line-height);
  --border: 2px solid var(--color);
  --box-shadow-inset-mobile: 0px 5.6em 3em -6.4em rgba(0,0,0,1) inset;
  --box-shadow-inset: 0px 6.6em 2.4em -4.4em rgba(0,0,0,0.17) inset;
  --box-shadow-mobile: 0px -5.6em 3em -6.4em rgba(0,0,0,1) inset;
  --box-shadow: 0px -6.6em 2.4em -4.4em rgba(0,0,0,0.17) inset;
  --button-secondary-background-color-active: var(--color);
  --button-secondary-background-color-hover-custom: var(--color);
  --button-secondary-border-color-hover-custom: var(--color);
  --button-secondary-border-radius: 0;
  --button-secondary-color-active-mobile: var(--background-color);
  --button-secondary-color-active: var(--background-color);
  --button-secondary-color-hover-custom: var(--background-color);
  --button-secondary-padding: 0.4em 0.5em 0.15em;
  --caret-color-hover: var(--caret-color);
  --caret-color: var(--background-color);
  --chevron-down-background-image-focus-visible: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --chevron-down-background-position: right 0.25em center;
  --color-active: var(--color-orange);
  --color-disabled: grey;
  --color-hover: var(--color-orange);
  --color-orange: var(--m-orange-600);
  --color-secondary: var(--color);
  --color-tertiary: #F4F4F4;
  --color: black;
  --content-spacing-mobile: 0.769rem;
  --content-spacing: 1.647rem;
  --content-width-mobile: calc(100% - var(--content-spacing-mobile) * 2);
  --content-width: calc(100% - var(--content-spacing) * 2);
  --details-shadow-a-color: var(--color);
  --details-shadow-a-text-decoration: none;
  --details-shadow-child-margin-custom: 0;
  --details-shadow-child-margin-mobile-custom: 0;
  --details-shadow-details-box-shadow: var(--box-shadow);
  --details-shadow-text-align: left;
  --filter-spacing: 0.4rem;
  --font-family-bold: PPMori, HelveticaNowTextBold, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-family-italic: PPMori, HelveticaNowTextItalic, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-family-secondary: PPMori, Avenir35Light, sans-serif;
  --font-family: PPMori, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-weight-strong: 700;
  --p-font-weight-strong: var(--font-weight-strong);
  --font-size-big-mobile: var(--h3-font-size-mobile);
  --font-size-big: var(--h3-font-size);
  --font-size-mobile: 13px;
  --font-size: 23px;
  --grid-12er-a-color: var(--grid-12er-h-color);
  --grid-12er-a-height: auto;
  --grid-12er-a-margin: 0;
  --grid-12er-a-text-decoration: none;
  --grid-12er-a-transition: var(--transition);
  --grid-12er-a-width: 100%;
  --grid-12er-grid-gap: 0;
  --grid-12er-h1-margin: 0;
  --grid-12er-h2-margin: 0;
  --grid-12er-h3-margin: 0;
  --grid-12er-h4-margin: 0;
  --grid-12er-h5-margin: 0;
  --grid-12er-h6-margin: 0;
  --grid-12er-section-child-overflow: hidden;
  --grid-12er-section-child-padding-mobile: var(--content-spacing-mobile);
  --grid-12er-section-child-padding: calc(var(--content-spacing) - 0.294em) var(--content-spacing);
  --grid-12er-section-transition: var(--transition);
  --grid-12er-width: 100%;
  --h-color: var(--color);
  --h-hyphens: manual;
  --h-transition: var(--a-transition);
  --h1-large-font-size-mobile: 62px;
  --h1-large-font-size: 240px;
  --h1-large-line-height: 1;
  --h1-large-margin: 0 auto 0.8rem;
  --h1-large-word-break: break-word;
  --h1-font-size-mobile: 34px;
  --h1-font-size: 110px;
  --h1-line-height: 1;
  --h1-margin: 0 auto 0.8rem;
  --h1-word-break: break-word;
  --font-size-h1-extra-large: 52px;
  --h2-font-size-mobile: 34px;
  --h2-font-size: 56px;
  --h2-line-height: 1;
  --h2-margin: 0.5rem auto 0.8rem;
  --h2-word-break: break-word;
  --h3-font-size-mobile: 22px;
  --h3-font-size: 36px;
  --h3-line-height: 1.1;
  --h3-margin: 0 auto 0.8rem;
  --h4-font-size-mobile: 16px;
  --h4-font-size: 23px;
  --h4-line-height: var(--line-height);
  --h4-margin: 0 auto 0.8rem;
  --h5-font-size-mobile: 13px;
  --h5-font-size: 19px;
  --h5-line-height: var(--line-height);
  --h5-margin: 0 auto 0.8rem;
  --h6-font-size-mobile: var(--h5-font-size-mobile);
  --h6-font-size: var(--h5-font-size);
  --h6-line-height: var(--h5-line-height);
  --h6-margin: var(--h5-margin);
  --p-font-size-mobile: 16px;
  --p-font-size: 23px;
  --p-line-height: var(--line-height);
  --marquee-p-font-size: 36px;
  --marquee-p-font-size-mobile: 22px;
  --header-default-a-menu-icon-background-color-custom: var(--color);
  --header-default-a-menu-icon-padding-custom: 0;
  --header-default-a-menu-icon-padding-open-custom: 0;
  --header-default-a-menu-icon-padding-top-custom: 0;
  --header-default-align-items-custom: center;
  --header-default-background-color-custom: var(--background-color);
  --header-default-border: 0;
  --header-default-content-spacing-mobile: 0;
  --header-default-flex-direction-mobile: row;
  --header-default-font-size-mobile: var(--font-size);
  --header-default-h3-font-size: var(--h3-font-size);
  --header-default-height-mobile-custom: 5.225em;
  --header-default-justify-content-custom: space-between;
  --header-default-logo-width-custom: clamp(107px, calc(107px + (100vw - 768px) * 0.5703125), max(11em, 198px));
  --header-default-margin-mobile-custom: 0;
  --header-default-padding-mobile: 1.35em var(--content-spacing);
  --header-default-position-open-mobile-custom: static;
  --hr-border-bottom-mobile: 2px solid var(--color);
  --hr-border-bottom: 3px solid var(--color);
  --hr-border-width-mobile: 0 0 2px;
  --hr-border-width: 0 0 3px;
  --hr-margin: 0;
  --hr-opacity: 0.2;
  --hr-padding: 0;
  --hr-secondary-border-bottom: 2px dotted var(--color-secondary);
  --hr-secondary-opacity: 1;
  --icon-color-hover: var(--background-color);
  --input-line-height: 1.2em;
  --line-height: 1.234em;
  --logo-default-width-mobile-custom: 142px;
  --m-orange-600: #F60;
  --main-min-height: calc(100dvh - var(--header-default-height-mobile-custom));
  --marquee-background-color: var(--color-scheme-two-color);
  --marquee-color: var(--color-scheme-two-background-color);
  --marquee-h-color: var(--marquee-color);
  --marquee-padding-mobile: calc(var(--content-spacing-mobile) / 0.9) var(--content-spacing-mobile) calc(var(--content-spacing-mobile) / 1.2);
  --marquee-padding: calc(var(--content-spacing) / 2.5) var(--content-spacing) calc(var(--content-spacing) / 2.3);
  --menu-icon-font-size: 2.5em;
  --mui-form-group-height: var(--select-height);
  --navigation-default-with-styles-a-margin-mobile: 0;
  --navigation-default-with-styles-a-text-decoration: none;
  --navigation-default-with-styles-color-custom: var(--color);
  --navigation-default-with-styles-h4-margin-mobile: 0;
  --navigation-default-with-styles-justify-content: flex-end;
  --navigation-default-with-styles-language-switcher-align-items-mobile: flex-end;
  --navigation-default-with-styles-language-switcher-flex-last-child-mobile: 1;
  --navigation-default-with-styles-language-switcher-gap: 1.59em;
  --navigation-default-with-styles-language-switcher-justify-content-last-child-mobile: flex-end;
  --navigation-default-with-styles-language-switcher-justify-content: flex-start;
  --navigation-default-with-styles-language-switcher-margin-last-child-mobile: 20px calc(-1 * var(--content-spacing) / 2) 0 0;
  --navigation-default-with-styles-language-switcher-padding: 0 var(--content-spacing);
  --navigation-default-with-styles-section-background-color: var(--background-color);
  --picture-scale-up-aspect-ratio: 1.252 / 1;
  --picture-scale-up-img-height: 100%;
  --picture-scale-up-img-min-height: 100%;
  --picture-scale-up-img-min-width: 100%;
  --picture-scale-up-img-object-fit: cover;
  --picture-scale-up-img-width: 100%;
  --picture-scale-up-transform-hover-custom: 0;
  --picture-teaser-aspect-ratio-mobile: 1.335 / 1;
  --picture-teaser-aspect-ratio: 1.5 / 1;
  --picture-teaser-img-object-fit: cover;
  --search-icon-color-focus: var(--background-color);
  --search-icon-top: 0.35em;
  --search-input-background-color-focus: var(--search-input-background-color-hover);
  --search-input-background-color-hover: var(--color);
  --search-input-background-color: var(--select-background-color);
  --search-input-border-color-focus: var(--color);
  --search-input-border-color-hover: var(--color);
  --search-input-border-color: var(--color);
  --search-input-border-radius: var(--select-border-radius);
  --search-input-color-focus: var(--background-color);
  --search-input-color-hover: var(--background-color);
  --search-input-height: var(--select-height);
  --search-input-min-width: 0;
  --search-input-padding: var(--select-padding);
  --search-input-selection-background-color: var(--color-orange);
  --search-input-selection-color: var(--background-color);
  --search-input-webkit-search-cancel-button-background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --search-input-webkit-search-cancel-button-margin-right-mobile: 2em;
  --search-input-webkit-search-cancel-button-margin-right: 0.25em;
  --scrollbar-gutter-desktop: stable;
  --select-background-color-focus-visible: var(--color);
  --select-background-color: transparent;
  --select-border-color-focus-visible: var(--color);
  --select-border-color: var(--color);
  --select-border-radius: 0;
  --select-border: var(--border);
  --select-color-focus-visible: var(--background-color);
  --select-height: 100%;
  --select-line-height: var(--input-line-height);
  --select-padding: 0.5em 0.5em 0.35em;
  --spacer-four-height-mobile: 4.6em;
  --spacer-four-height: 3.6em;
  --spacer-height-mobile: 1.6em;
  --spacer-height: 0.6em;
  --spacer-margin-mobile: 0 auto;
  --spacer-margin: 0 auto;
  --spacer-three-height-mobile: 2.6em;
  --spacer-three-height: 1.6em;
  --spacer-two-height-mobile: 0.6em;
  --spacer-two-height: 0.6em;
  --teaser-tile-background-color-custom: var(--teaser-tile-figcaption-background-color-custom);
  --teaser-tile-figcaption-background-color-custom: var(--color-scheme-four-background-color);
  --teaser-tile-figcaption-bg-color-equal-padding-custom: var(--teaser-tile-figcaption-padding-custom);
  --teaser-tile-figcaption-bg-color-equal-padding-mobile-custom: var(--teaser-tile-figcaption-padding-mobile-custom);
  --teaser-tile-figcaption-padding-custom: 1em var(--content-spacing) 1em;
  --teaser-tile-figcaption-padding-mobile-custom: 1em var(--content-spacing-mobile) 1em;
  --teaser-tile-figcaption-transform-hover-custom: 0;
  --teaser-tile-figcaption-transform-hover-mobile: none;
  --teaser-tile-h3-font-size-mobile: 13px;
  --teaser-tile-h3-margin: 8px 0;
  --teaser-tile-h3-margin-mobile: 3px 0 8px 0;
  --teaser-tile-h5-margin-custom: 0 0 0.42em;
  --teaser-tile-p-font-size-custom: 19px;
  --teaser-tile-p-font-size-mobile: 13px;
  --teaser-tile-p-margin-custom: 0;
  --transition-speed: 0.2s;
  --transition: color var(--transition-speed) ease-out, background-color var(--transition-speed) ease-out, border-color var(--transition-speed) ease-out;
  --ul-padding-left: 25px;
  --header-default-a-menu-icon-border-radius-custom: 0;
}
/* color schemes */
:root {
  --color-scheme-four-background-color: #F4F4F4;
  --color-scheme-four-color: var(--color);
  --color-scheme-one-background-color: #7124A7;
  --color-scheme-one-color: #DFEA52;
  --color-scheme-three-background-color: #F8C9DF;
  --color-scheme-three-color: #0E6265;
  --color-scheme-two-background-color: #BFE9FF;
  --color-scheme-two-color: #5B3A47;
  --grid-12er-color-scheme-four-background-color: var(--color-scheme-four-background-color);
}
/* header has a breakpoint of (mobile-breakpoint="100000000px"), due to that, it is always in mobile mode. The below allows the actual mobile settings/overwrites below 1200px, same as in the Environments.js */
@media only screen and (max-width: 767px) {
  :root {
    --ArrowUpRight-svg-transform: translate(-0.3em, 0.35em);
    --h6-font-size: var(--h5-font-size);
    --header-default-content-spacing-mobile: 3em;
    --header-default-font-size-mobile: var(--font-size-mobile);
    --header-default-height-mobile-custom: 70px;
    --header-default-padding-mobile: 1.231em var(--content-spacing-mobile) 1.231em;
    --menu-icon-font-size: 1.35em;
    --navigation-default-with-styles-language-switcher-align-items-mobile: flex-start;
    --navigation-default-with-styles-language-switcher-flex-direction: column;
    --navigation-default-with-styles-language-switcher-gap-mobile: 0.52em;
    --navigation-default-with-styles-language-switcher-padding: 1.31rem var(--content-spacing-mobile) 0;
    --m-navigation-transition: none;
    --m-navigation-transition-mobile: none;
    --m-navigation-animation-close: none;
    --m-navigation-animation-open: none;
    --navigation-submenu-animation-open: none;
    --navigation-submenu-animation-open-mobile: none;
  }
}