/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[1]!./node_modules/postcss-loader/src/index.js??clonedRuleSet-3.use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/glob-import-loader/index.js??clonedRuleSet-3.use[4]!./src/main/webpack/site/main.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  --clr-blue-05: #1D55A2;
  --clr-blue-04: #1C68D4;
  --clr-blue-01: #DDE8F9;
  --clr-primary: var(--clr-blue-04);
  --clr-secondary: var(--clr-gray-02);
  --clr-hover: var(--clr-blue-05);
  --clr-disabled: var(--clr-blue-01);
  --clr-gs-100: #000000;
  --clr-gs-80: #262626;
  --clr-gs-70: #4d4d4d;
  --clr-gs-60: #666666;
  --clr-gs-50: #8e8e8e;
  --clr-gs-40: #bbbbbb;
  --clr-gs-30: #e6e6e6;
  --clr-gs-20: #f2f2f2;
  --clr-gs-10: #f6f6f6;
  --clr-gs-00: #ffffff;
  --clr-db10: #DDE8F9;
  --clr-gray-01: var(--clr-gs-100);
  --clr-gray-02: var(--clr-gs-80);
  --clr-gray-03: var(--clr-gs-70);
  --clr-gray-04: var(--clr-gs-60);
  --clr-gray-05: var(--clr-gs-50);
  --clr-gray-06: var(--clr-gs-40);
  --clr-gray-07: var(--clr-gs-30);
  --clr-gray-08: var(--clr-gs-20);
  --clr-gray-09: var(--clr-gs-10);
  --clr-gray-10: var(--clr-gs-00);
  --clr-er-30: #AF1523;
  --clr-er-20: #D20000;
  --clr-er-10: #F7E7E9;
  --clr-red-03: #AA2D2A;
  --clr-wo-20: #FFAD1F;
  --clr-wo-10: #FBEDC9;
  --clr-sg-30: #1B7B3A;
  --clr-sg-20: #3DB014;
  --clr-sg-10: #E8F2EB;
  --clr-base-text: var(--clr-gs-80);
}

html[data-brand=mini] {
  --clr-bb-90: #006583;
  --clr-bb-80: #1f9cc2;
  --clr-sb-20: #06ABA8;
  --clr-sb-40: #C9B900;
  --clr-sb-60: #CC0000;
  --clr-cc-rg: #998F86;
  --clr-cc-ib: #0F486E;
  --clr-cc-cr: #AA0F1D;
  --clr-cc-mg: #787875;
  --clr-cc-brg: #00693E;
  --clr-cc-eb: #111C24;
  --clr-cc-zy: #CED54B;
  --clr-er-80: #A30000;
  --clr-er-70: #BE1515;
  --clr-er-10: #F6E6E6;
  --clr-ao-60: #ED9300;
  --clr-ao-10: #FCEFDB;
  --clr-sg-80: #226E25;
  --clr-sg-70: #4C9A66;
  --clr-sg-10: #E8F3E9;
  --clr-er-10: #DEEFF4;
  --clr-gs-100: #000000;
  --clr-gs-80: #525252;
  --clr-gs-70: #666666;
  --clr-gs-60: #7A7A7A;
  --clr-gs-40: #B4B4B4;
  --clr-gs-30: #CCCCCC;
  --clr-gs-20: #E0E0E0;
  --clr-gs-10: #F5F5F5;
  --clr-gs-00: #ffffff;
  --clr-blue-04:#0085AC ;
  --clr-red-02: #A70D19;
  --clr-red-03: #AA2D2A;
  --clr-disabled: var(--clr-gs-40);
  --clr-base-text: var(--clr-gs-100);
}

:root {
  --base-size: 1rem;
  --size-50: calc(var(--base-size) * .25);
  --size-100: calc(var(--base-size) * .5);
  --size-200: calc(var(--base-size));
  --size-300: calc(var(--base-size) * 1.125);
  --size-350: calc(var(--base-size) * 1.25);
  --size-400: calc(var(--base-size) * 1.5);
  --size-500: calc(var(--base-size) * 2);
  --size-600: calc(var(--base-size) * 1.5);
  --size-700: calc(var(--base-size) * 1.5);
  --size-800: calc(var(--base-size) * 3);
  --size-900: calc(var(--base-size) * 1.5);
  --size-910: calc(var(--base-size) * 1.5);
  --size-920: calc(var(--base-size) * 1.5);
  --size-930: calc(var(--base-size) * 1.5);
  --size-940: calc(var(--base-size) * 4.5);
  --size-950: calc(var(--base-size) * 1.5);
  --size-960: calc(var(--base-size) * 1.5);
  --size-970: calc(var(--base-size) * 1.5);
}

html[data-brand=mini] {
  --base-size:16px;
}

:root {
  --space-unit: 1rem;
  --space-xxs: calc(.3125 * var(--space-unit));
  --space-xs: calc(.625 * var(--space-unit));
  --space-sm: calc(1.25 * var(--space-unit));
  --space-md: calc(2 * var(--space-unit));
  --space-lg: calc(3.75 * var(--space-unit));
  --space-xl: calc(5 * var(--space-unit));
  --space-xxl: calc(6.35 * var(--space-unit));
  --space-gnl: 0;
}

html[data-brand=mini] {
  /*
  96
  80
  72
  64
  56

  48
  40
  32
  24
  20
  16
  12
  8
  4

  */
  --space-unit: 16px;
  --space-xxs: calc(.5 * var(--space-unit));
  --space-xs: var(--space-unit);
  --space-sm: calc(1.5 * var(--space-unit));
  --space-md: calc(3 * var(--space-unit));
  --space-lg: calc(4 * var(--space-unit));
  --space-xl: calc(4.5 * var(--space-unit));
  --space-xxl: calc(6 * var(--space-unit));
}

@font-face {
  font-family: "BMWTypeNext";
  font-style: normal;
  font-weight: 700;
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Bold.woff2") format("woff2"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Bold.woff") format("woff");
}
@font-face {
  font-family: "BMWTypeNext";
  font-style: normal;
  font-weight: 400;
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Light.woff2") format("woff2"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Light.woff") format("woff");
}
@font-face {
  font-family: "BMWTypeNext";
  font-style: normal;
  font-weight: 200;
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Thin.woff2") format("woff2"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/bmw/BMWTypeNextLatin-Thin.woff") format("woff");
}
@font-face {
  font-family: "MINISansSerif-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISansSerif-Regular.woff2") format("woff2"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISansSerif-Regular.woff") format("woff");
}
@font-face {
  font-family: "MINISansSerif-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISansSerif-Bold.woff") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISansSerif-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "MINISerif-Regular";
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Regular.woff") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "MINISerif-Medium";
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Medium.woff") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "MINISerif-Bold";
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Bold.woff") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "MINISerif-Italic";
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Italic.woff") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini/MINISerif-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "MINI-Icons-Webfonts";
  src: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini") format("woff"), url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/fonts/mini") format("truetype");
}
:root {
  --ff-bmw: "BMWTypeNext", sans-serif;
  --ff-mini: "MINISerif-Regular", serif;
  --ff-mini-sans: "MINISansSerif-Regular", serif;
  --ff-primary: var(--ff-bmw);
  --fw-bold: 700;
  --fw-reg: 400;
  --fw-light: 300;
}

html[data-brand=mini] {
  --ff-primary: var(--ff-mini-sans);
  --ff-secondary: var(--ff-mini);
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html, body {
  min-height: 100%;
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
*::before,
*::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--ff-primary);
  font-weight: var(--fw-light);
  font-size: var(--size-200);
}

p {
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  cursor: pointer;
}

html[data-brand=mini] body {
  font-family: var(--ff-primary);
  font-size: var(--size-300);
  line-height: var(--size-400);
}

@media (min-width: 64rem) {
  .tsc-vehicle-details {
    max-width: 80%;
    -webkit-margin-start: 2rem;
            margin-inline-start: 2rem;
  }
}
/* IMPORTANT = all layout elements are prefixed with "l-" as to distinguish that this is a layout element class*/
/* || **************************************************** SECTIONS

  - fullwidth
  - block padding depends on responsive layout

  Important: do not add inline padding to container!!

*/
.l-section {
  --padding: 3rem;
  padding-block: var(--padding);
}
@media (min-width: 48rem) {
  .l-section {
    --padding: 4rem;
  }
}
@media (min-width: 64rem) {
  .l-section {
    --padding: 5rem;
  }
}

/* || *************************************************** CONTAINERS

  - limited to 1920px wide 
  - inline padding depends on responsive layout
  Important: do not add block padding to container - if required use a utility class
*/
.l-container {
  --padding: 1.5rem;
  width: min(1920px, 100% - var(--padding) * 2);
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .l-container {
    --padding: 3rem;
  }
}
@media (min-width: 80rem) {
  .l-container {
    --padding: 6rem;
  }
}

html[data-brand=mini] .l-section {
  --padding: calc(var(--base-size) * 3);
  padding-block: var(--padding);
}
@media (min-width: 48rem) {
  html[data-brand=mini] .l-section {
    --padding: calc(var(--base-size) * 4);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] .l-section {
    --padding: calc(var(--base-size) * 4.5);
  }
}
html[data-brand=mini] .l-container {
  --padding: calc(var(--base-size) * 1.25);
  width: min(1792px, 100% - var(--padding) * 2);
  margin-inline: auto;
}
@media (min-width: 32rem) {
  html[data-brand=mini] .l-container {
    --padding: calc(var(--base-size) * 1.5);
  }
}
@media (min-width: 48rem) {
  html[data-brand=mini] .l-container {
    --padding: calc(var(--base-size) * 2);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] .l-container {
    --padding: calc(var(--base-size) * 3.5);
  }
}
html[data-brand=mini].-max-width {
  max-width: var(--max-width);
}

/* || *************************************************** GRID LAYOUT
*/
.grid, .l-grid {
  --gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.l-grid > * {
  grid-column: span 12;
}

@media (min-width: 48rem) {
  .l-col-sm-1 {
    grid-column: span 1;
  }
  .l-col-sm-2 {
    grid-column: span 2;
  }
  .l-col-sm-3 {
    grid-column: span 3;
  }
  .l-col-sm-4 {
    grid-column: span 4;
  }
  .l-col-sm-5 {
    grid-column: span 5;
  }
  .l-col-sm-6 {
    grid-column: span 6;
  }
  .l-col-sm-7 {
    grid-column: span 7;
  }
  .l-col-sm-8 {
    grid-column: span 8;
  }
  .l-col-sm-9 {
    grid-column: span 9;
  }
  .l-col-sm-10 {
    grid-column: span 10;
  }
  .l-col-sm-11 {
    grid-column: span 11;
  }
  .l-col-sm-12 {
    grid-column: span 12;
  }
}
@media (min-width: 64rem) {
  .l-col-md-1 {
    grid-column: span 1;
  }
  .l-col-md-2 {
    grid-column: span 2;
  }
  .l-col-md-3 {
    grid-column: span 3;
  }
  .l-col-md-4 {
    grid-column: span 4;
  }
  .l-col-md-5 {
    grid-column: span 5;
  }
  .l-col-md-6 {
    grid-column: span 6;
  }
  .l-col-md-7 {
    grid-column: span 7;
  }
  .l-col-md-8 {
    grid-column: span 8;
  }
  .l-col-md-9 {
    grid-column: span 9;
  }
  .l-col-md-10 {
    grid-column: span 10;
  }
  .l-col-md-11 {
    grid-column: span 11;
  }
  .l-col-md-12 {
    grid-column: span 12;
  }
}
@media (min-width: 80rem) {
  .l-col-lg-1 {
    grid-column: span 1;
  }
  .l-col-lg-2 {
    grid-column: span 2;
  }
  .l-col-lg-3 {
    grid-column: span 3;
  }
  .l-col-lg-4 {
    grid-column: span 4;
  }
  .l-col-lg-5 {
    grid-column: span 5;
  }
  .l-col-lg-6 {
    grid-column: span 6;
  }
  .l-col-lg-7 {
    grid-column: span 7;
  }
  .l-col-lg-8 {
    grid-column: span 8;
  }
  .l-col-lg-9 {
    grid-column: span 9;
  }
  .l-col-lg-10 {
    grid-column: span 10;
  }
  .l-col-lg-11 {
    grid-column: span 11;
  }
  .l-col-lg-12 {
    grid-column: span 12;
  }
  .l-col-lg-8-11 {
    grid-column: span 8/11;
  }
}
/* || *************************************************** FLEX LAYOUT
*/
.flex, .l-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-c, .l-flex-c {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

html[data-brand=mini] .grid, html[data-brand=mini] .l-grid {
  --gap: var(--base-size);
}
@media (min-width: 48rem) {
  html[data-brand=mini] .grid, html[data-brand=mini] .l-grid {
    --gap: calc(var(--base-size) * 1.25);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] .grid, html[data-brand=mini] .l-grid {
    --gap: calc(var(--base-size) * 2);
  }
}

.grid-1-1 {
  gap: var(--size-300);
}
@media (min-width: 48rem) {
  .grid-1-1 {
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr;
  }
}

.grid-2-1 {
  gap: var(--size-300);
}
@media (min-width: 48rem) {
  .grid-2-1 {
    grid-auto-flow: column;
    grid-auto-columns: 2fr 1fr;
  }
}

@media (min-width: 48rem) {
  .grid-3-2 {
    grid-auto-flow: column;
    grid-template-columns: 3fr 2fr;
  }
}

.l-cta-container {
  --gap: var(--base-size);
}
.l-cta-container.-bb, .l-cta-container.-bl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  -webkit-margin-before: var(--size-800);
          margin-block-start: var(--size-800);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.l-cta-container.-bb.-ll, .l-cta-container.-bl.-ll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  -webkit-margin-before: var(--size-300);
          margin-block-start: var(--size-300);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 64rem) {
  .c-btn-group,
.l-cta-container.-bb,
.l-cta-container.-bl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .c-btn-group > *,
.l-cta-container.-bb > *,
.l-cta-container.-bl > * {
    min-width: 200px;
  }
}

@media (min-width: 64rem) {
  .l-cta-container.-bl > * {
    margin: 0;
  }
}

html[data-brand=mini] .l-cta-container.-bb, html[data-brand=mini] .l-cta-container.-bl {
  gap: var(--base-size);
  -webkit-margin-before: var(--size-800);
          margin-block-start: var(--size-800);
}
@media (min-width: 64rem) {
  html[data-brand=mini] .c-btn-group,
html[data-brand=mini] .l-cta-container.-bb,
html[data-brand=mini] .l-cta-container.-bl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 80rem) {
  html[data-brand=mini] .c-btn-group,
html[data-brand=mini] .l-cta-container.-bb,
html[data-brand=mini] .l-cta-container.-bl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

html[data-brand=mini].-max-width {
  max-width: var(--max-width);
}
html[data-brand=mini].-us, html[data-brand=mini].-ca {
  background: white;
  padding: 18px;
}
html[data-brand=mini].-us {
  width: 100%;
}
html[data-brand=mini] input[type=checkbox]:checked {
  background: black;
  accent-color: black;
}
html[data-brand=mini] .l-cta-container.-bb > * {
  margin: 0;
}

.l-image-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 64rem) {
  html[data-brand=bmw] .l-image-wrapper img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
}

.l-thumbnail-wrapper {
  width: 80px;
  -webkit-margin-end: 2rem;
          margin-inline-end: 2rem;
  border-radius: 8px;
  overflow: hidden;
}
.l-thumbnail-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1/1;
  width: 100%;
}

.aspect--1-1 {
  aspect-ratio: 1/1;
}
.aspect--2-1 {
  aspect-ratio: 2/1;
}
.aspect--3-1 {
  aspect-ratio: 3/1;
}
.aspect--3-2 {
  aspect-ratio: 3/2;
}
.aspect--4-3 {
  aspect-ratio: 4/3;
}
.aspect--16-9 {
  aspect-ratio: 16/9;
}

.c-card-1 {
  padding: 2rem;
}

html[data-brand=mini] .c-card, html[data-brand=mini] .c-card-1 {
  border-radius: var(--size-100);
  -webkit-box-shadow: 0 0 0 1px var(--clr-gs-40);
          box-shadow: 0 0 0 1px var(--clr-gs-40);
  overflow: hidden;
  padding: calc(var(--space-unit) * 2);
  position: relative;
}
html[data-brand=mini] .c-card.--full-frame-img, html[data-brand=mini] .--full-frame-img.c-card-1 {
  padding: 0;
}
html[data-brand=mini] .c-card.--full-frame-img .c-card__content, html[data-brand=mini] .--full-frame-img.c-card-1 .c-card__content {
  padding: 4rem 1.5rem 2rem;
  position: relative;
}
html[data-brand=mini] .c-card.--active:hover, html[data-brand=mini] .--active.c-card-1:hover {
  -webkit-box-shadow: 0 0 0 2px var(--clr-bb-80);
          box-shadow: 0 0 0 2px var(--clr-bb-80);
}

input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=tel] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--clr-gray-06);
  padding: var(--space-xs) var(--space-xs);
  font-size: calc(var(--base-size) * 1.125);
  width: 100%;
  margin-top: 5px;
  -webkit-margin-after: var(--space-xxs);
          margin-block-end: var(--space-xxs);
}

input.--sm {
  padding: calc(var(--space-xs) * 0.5);
}

input:hover,
input:focus-visible {
  outline: none;
  -webkit-box-shadow: inset 0 0 0 2px var(--clr-bb-80);
          box-shadow: inset 0 0 0 2px var(--clr-bb-80);
}

input[data-valid=false] {
  -webkit-box-shadow: inset 0 0 0 2px var(--clr-red-03);
          box-shadow: inset 0 0 0 2px var(--clr-red-03);
  background: url("src/main/webpack/etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/exclamation-mark.svg") no-repeat;
  background-size: 3rem 1rem;
  background-position: right 16px;
}

input[type=checkbox],
input[type=radio] {
  height: 30px;
  width: 30px;
  border: 1px solid var(--clr-gray-01);
  -webkit-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;
  cursor: pointer;
  accent-color: var(--clr-gray-01);
}

input[type=radio] {
  accent-color: var(--clr-gray-01);
}

input#nickname {
  max-width: 60%;
  height: 40px;
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
}

select {
  border: 1px solid var(--clr-gray-06);
  padding: var(--space-xs) var(--space-xs);
  font-size: calc(var(--base-size) * 1.125);
  -webkit-margin-after: var(--space-xs);
          margin-block-end: var(--space-xs);
  width: 100%;
  cursor: pointer;
}

select:focus-visible {
  outline: none;
  border: 2px solid var(--clr-bb-80);
}

select[data-valid=false] {
  border: 1px solid var(--clr-red-03);
}

.subscription-list {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
}
@media (min-width: 64rem) {
  .subscription-list {
    -webkit-margin-after: 1.5rem;
            margin-block-end: 1.5rem;
  }
}
.subscription-list__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (min-width: 64rem) {
  .subscription-list__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media (min-width: 64rem) {
  .subscription-list__content > * {
    width: clamp(100px, 44%, 205px);
  }
}

div[role=listitem] {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
}
@media (min-width: 64rem) {
  div[role=listitem] {
    -webkit-margin-after: 1.5rem;
            margin-block-end: 1.5rem;
  }
}
div[role=listitem]:hover .l-thumbnail-wrapper {
  -webkit-box-shadow: 0 0 0 2px var(--clr-bb-80);
          box-shadow: 0 0 0 2px var(--clr-bb-80);
}
div[role=listitem]:hover .a-link-arrow::after {
  border-color: var(--clr-bb-80);
}

.sub-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--clr-gs-30);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 3.75rem;
  padding-block: 1rem;
}

.c-subnav {
  border-bottom: 1px solid var(--clr-gs-40);
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.c-subnav__inner {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-subnav__inner .a-cta__primary {
  margin: 0 !important;
  height: 40px !important;
}

.c-menu {
  list-style: none;
}
@media (min-width: 64rem) {
  .c-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.c-menu__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: 1rem;
  height: 60px;
  text-decoration: none;
  color: var(--clr-gs-100);
  border-bottom: 4px solid var(--clr-bb-90);
}

/* Horizontal & vertical navigation */
.c-step-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--clr-gs-40);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}
.c-step-nav__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  list-style: none;
  color: var(--clr-gs-100);
}
.c-step-nav__item .nav-index {
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50px;
  padding: 7px;
  color: var(--clr-gs-40);
  font-size: var(--base-size);
}
.c-step-nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--clr-gs-40);
  text-decoration: none;
  position: absolute;
  left: 0;
  display: none;
}
@media (min-width: 64rem) {
  .c-step-nav__link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.c-step-nav__link--label {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8.75rem;
}
@media (min-width: 64rem) {
  .c-step-nav__link--label {
    max-width: none;
  }
}

.c-step-nav__item.-active a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--clr-base-text);
}
.c-step-nav__item.-active .nav-index {
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--clr-gs-100);
  border-radius: 50px;
  padding: 7px;
  color: var(--clr-gs-20);
  font-size: var(--base-size);
}

.c-step-nav__item.-complete a {
  color: var(--clr-base-text);
}
.c-step-nav__item.-complete .nav-index {
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--clr-gs-100);
  color: var(--clr-gs-00);
  border-radius: 50px;
  padding: 7px;
  font-size: var(--base-size);
}

html[data-brand=bmw] {
  --border-color: var(--clr-gs-40);
  --clr-step--active: var(--clr-gs-80);
}
html[data-brand=bmw] .c-step-nav__item {
  border-bottom: 0.25rem solid var(--border-color);
}
html[data-brand=bmw] .c-step-nav__item .nav-index {
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
html[data-brand=bmw] .c-step-nav__item.-active, html[data-brand=bmw] .c-step-nav__item.-complete {
  border-color: var(--clr-step--active);
}
html[data-brand=bmw] .c-step-nav__item.-active .nav-index, html[data-brand=bmw] .c-step-nav__item.-complete .nav-index {
  background-color: inherit;
  color: var(--clr-base-text);
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
html[data-brand=bmw] .c-step-nav__link {
  font-weight: var(--fw-bold);
  font-size: var(--content-3);
  bottom: 0;
}

html[data-brand=mini] {
  --border-color:var(--clr-gs-40);
  --clr-step--active: var(--clr-bb-90);
}
html[data-brand=mini] .c-step-nav__item {
  border-top: 0.25rem solid var(--border-color);
}
html[data-brand=mini] .c-step-nav__item.-active, html[data-brand=mini] .c-step-nav__item.-complete {
  border-color: var(--clr-step--active);
}

.a-horizontal-nav__item.-active a .content__2 {
  color: var(--clr-gs-100);
}

.a-horizontal-nav__item.-active a .nav-index {
  background-color: var(--clr-gs-100);
  color: var(--clr-gs-00);
}

.a-horizontal-nav__item.-complete a .content__2 {
  color: var(--clr-gs-100);
}

.a-horizontal-nav__item.-complete a .nav-index {
  background-color: var(--clr-gs-100);
  color: var(--clr-gs-00);
}

.a-vertical-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--clr-gs-40);
  list-style: none;
  margin: 0;
  padding: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 25px;
}

.a-vertical-nav__item {
  list-style: none;
  color: var(--clr-gs-100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.a-vertical-nav__item a {
  text-decoration: none;
  padding: 5px 0;
  display: inline-block;
  width: 100%;
  color: #999999;
  font-weight: normal;
}
.a-vertical-nav__item :hover {
  text-decoration: none;
}
.a-vertical-nav__item::before {
  content: " ";
}
.a-vertical-nav__item.-active::before {
  content: "•";
  font-size: 70px;
  line-height: 14px;
  vertical-align: middle;
  color: var(--clr-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -24px;
}

.a-vertical-nav__item.-active a {
  color: var(--clr-gs-100);
}

html[data-brand=bmw] .card-1 {
  padding: 32px;
  height: 100%;
}
html[data-brand=bmw] .a-vertical-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--clr-gs-40);
  list-style: none;
  margin: 0;
  padding: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 25px;
}
html[data-brand=bmw] .a-vertical-nav__item {
  list-style: none;
  color: var(--clr-gs-100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
html[data-brand=bmw] .a-vertical-nav__item a {
  text-decoration: none;
  padding: 5px 0;
  display: inline-block;
  width: 100%;
  color: #999999;
  font-weight: normal;
}
html[data-brand=bmw] .a-vertical-nav__item :hover {
  text-decoration: none;
}
html[data-brand=bmw] .a-vertical-nav__item::before {
  content: " ";
}
html[data-brand=bmw] .a-vertical-nav__item.-active::before {
  content: "•";
  font-size: 50px;
  line-height: 14px;
  vertical-align: middle;
  color: var(--clr-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -22px;
}
html[data-brand=bmw] .a-vertical-nav__item.-active a {
  color: var(--clr-gs-100);
}

.headline__1, .headline__1.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-1);
  font-weight: var(--fw-light);
}
.headline__1.-bold {
  font-weight: var(--fw-bold);
}

.headline__2, .headline__2.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-2);
  font-weight: var(--fw-light);
}
.headline__2.-bold {
  font-weight: var(--fw-bold);
}

.headline__3, .headline__3.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-3);
  font-weight: var(--fw-light);
}
.headline__3.-bold {
  font-weight: var(--fw-bold);
}

.headline__4, .headline__4.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-4);
  font-weight: var(--fw-light);
}
.headline__4.-bold {
  font-weight: var(--fw-bold);
}

.headline__5, .headline__5.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-5);
  font-weight: var(--fw-light);
}
.headline__5.-bold {
  font-weight: var(--fw-bold);
}

.headline__6, .headline__6.-bold {
  font-family: var(--ff-primary);
  font-size: var(--headline-6);
  font-weight: var(--fw-light);
}
.headline__6.-bold {
  font-weight: var(--fw-bold);
}

:root {
  --headline-1: 3.125em;
  --headline-2: 2.5em;
  --headline-3: 2em;
  --headline-4: 1.5em;
  --headline-5: 1.25rem;
  --headline-6: 1em;
  --line-height-2: 21px;
}
@media (min-width: 48rem) {
  :root {
    --headline-1: 5em;
    --headline-2: 3.5em;
    --headline-3: 2.625em;
    --headline-4: 1.875em;
    --headline-5: 1.4375em;
    --headline-6: 1.125em;
    --line-height-2: 24px;
  }
}
@media (min-width: 80rem) {
  :root {
    --headline-1: 8.125em;
    --headline-2: 4.75em;
    --headline-3: 3.5em;
    --headline-4: 2.4375em;
    --headline-5: 1.75em;
    --headline-6: 1.25em;
    --line-height-2: 26px;
  }
}
@media (min-width: 125rem) {
  :root {
    --headline-1: 11.25em;
    --headline-2: 6.25em;
    --headline-3: 4.75em;
    --headline-4: 3.375em;
    --headline-5: 2.375em;
    --headline-6: 1.5em;
  }
}

html[data-brand=mini] {
  --fs-d1: var(--size-940);
  --fs-d2: var(--size-800);
  --fs-d3: var(--size-500);
  --fs-d4: var(--size-400);
  --fs-d5: var(--size-400);
  --fs-d6: var(--size-400);
  --headline-1: var(--fs-d3);
  --headline-2: var(--fs-d4);
  --headline-3: var(--fs-d4);
  --headline-4: var(--fs-d4);
  --headline-5: var(--fs-d5);
}
@media (min-width: 48rem) {
  html[data-brand=mini] {
    --headline-1: var(--fs-d2);
    --headline-2: var(--fs-d3);
    --headline-3: var(--fs-d4);
    --headline-4: var(--fs-d5);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] {
    --headline-1: var(--fs-d2);
    --headline-2: var(--fs-d3);
    --headline-3: var(--fs-d4);
    --headline-4: var(--fs-d5);
  }
}
@media (min-width: 80rem) {
  html[data-brand=mini] {
    --headline-1: var(--fs-d1);
    --headline-2: var(--fs-d2);
    --headline-3: var(--fs-d3);
    --headline-4: var(--fs-d4);
  }
}

html[data-brand=mini] .headline__1,
html[data-brand=mini] .headline__2,
html[data-brand=mini] .headline__3,
html[data-brand=mini] .headline__4,
html[data-brand=mini] .headline__5,
html[data-brand=mini] .headline__6 {
  text-transform: uppercase;
  line-height: 100%;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
}
html[data-brand=mini] .headline__1 {
  font-size: var(--headline-1);
}
html[data-brand=mini] .headline__2 {
  font-size: var(--headline-2);
}
html[data-brand=mini] .headline__3 {
  font-size: var(--headline-3);
}
html[data-brand=mini] .headline__4 {
  font-size: var(--headline-3);
}
html[data-brand=mini] .headline__5 {
  font-size: var(--headline-4);
}

h6.headline__6.-bold.-att {
  position: relative;
  -webkit-padding-start: calc(var(--base-size) * 3);
          padding-inline-start: calc(var(--base-size) * 3);
  -webkit-margin-after: var(--base-size);
          margin-block-end: var(--base-size);
}

h6.headline__6.-bold.-att::before {
  content: "";
  width: 36px;
  height: 36px;
  position: absolute;
  display: block;
  -webkit-mask: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/icon-warning--circle.svg");
  mask: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/icon-warning--circle.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--clr-red-03);
}

h6.headline__6.-bold.-att.-succ::before {
  -webkit-mask: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/icon-success--circle.svg");
  mask: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/icon-success--circle.svg");
  background-color: var(--clr-sg-30);
}

.content__1, .content__1.-bold {
  font-family: var(--ff-primary);
  font-size: var(--content-1);
  line-height: var(--line-height-1);
  white-space: pre-wrap;
}
.content__1.-bold {
  font-weight: var(--fw-bold);
}

.content__2, .content__2.-bold {
  font-family: var(--ff-primary);
  font-size: var(--content-2);
  line-height: var(--line-height-2);
  white-space: pre-wrap;
}
.content__2.-bold {
  font-weight: var(--fw-bold);
}

.content__3, .content__3.-bold {
  font-family: var(--ff-primary);
  font-size: var(--content-3);
  line-height: var(--line-height-3);
  white-space: pre-wrap;
}
.content__3.-bold {
  font-weight: var(--fw-bold);
}

:root {
  --content-1: var(--base-size);
  --content-2: calc(var(--base-size) * 0.875);
  --content-3: calc(var(--base-size) * 0.75);
}
@media (min-width: 48rem) {
  :root {
    --content-1: calc(var(--base-size) * 1.125);
    --content-2: var(--base-size);
    --content-3: calc(var(--base-size) * 0.8125);
  }
}
@media (min-width: 80rem) {
  :root {
    --content-1: calc(var(--base-size) * 1.25);
    --content-2: var(--base-size);
    --content-3: calc(var(--base-size) * 0.8125);
  }
}
@media (min-width: 125rem) {
  :root {
    --content-1: calc(var(--base-size) * 1.5);
    --content-2: calc(var(--base-size) * 1.25);
    --content-3: calc(var(--base-size) * 0.875);
  }
}

html[data-brand=mini] {
  --content-1: calc(var(--base-size) * 3.125);
  --content-2: var(--size-300);
  --content-3: var(--size-200);
}
@media (min-width: 48rem) {
  html[data-brand=mini] {
    --content-2: var(--size-300);
    --content-3: var(--size-200);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] {
    --content-2: var(--size-300);
    --content-3: var(--size-200);
  }
}
@media (min-width: 80rem) {
  html[data-brand=mini] {
    --content-2: var(--size-300);
    --content-3: var(--size-200);
  }
}
@media (min-width: 125rem) {
  html[data-brand=mini] {
    --content-2: var(--size-300);
    --content-3: var(--size-200);
  }
}
html[data-brand=mini] .disclaimer {
  font-size: calc(var(--base-size) * 0.875);
  color: var(--clr-gs-60);
}

.eyebrow__1, html[data-brand=mini] .eyebrow__1.-bold, .eyebrow__1.-bold {
  font-family: var(--ff-primary);
  font-size: var(--eyebrow-1);
  line-height: var(--line-height-eye-1);
  letter-spacing: var(--letter-spacing-eye-1);
  text-transform: uppercase;
}
.eyebrow__1.-bold, html[data-brand=mini] .-bold.eyebrow__1 {
  font-weight: var(--fw-bold);
}

.eyebrow__2, .eyebrow__2.-bold {
  font-family: var(--ff-primary);
  font-size: var(--eyebrow-2);
  line-height: var(--line-height-eye-2);
  letter-spacing: var(--letter-spacing-eye-2);
  text-transform: uppercase;
}
.eyebrow__2.-bold {
  font-weight: var(--fw-bold);
}

.eyebrow__3, .eyebrow__3.-bold {
  font-family: var(--ff-primary);
  font-size: var(--eyebrow-3);
  line-height: var(--line-height-eye-3);
  letter-spacing: var(--letter-spacing-eye-3);
  text-transform: uppercase;
}
.eyebrow__3.-bold {
  font-weight: var(--fw-bold);
}

:root {
  --eyebrow-1: calc(var(--base-size) * 0.875);
  --eyebrow-2: calc(var(--base-size) * 0.875);
}
@media (min-width: 48rem) {
  :root {
    --eyebrow-1: calc(var(--base-size) * 0.875);
    --eyebrow-2: var(--base-size);
  }
}
@media (min-width: 80rem) {
  :root {
    --eyebrow-1: var(--base-size);
    --eyebrow-2: calc(var(--base-size) * 0.875);
  }
}
@media (min-width: 125rem) {
  :root {
    --eyebrow-1: var(--base-size);
    --eyebrow-2: calc(var(--base-size) * 0.875);
  }
}

.eyebrow__1, html[data-brand=mini] .eyebrow__1.-bold, .eyebrow__1.-bold, .eyebrow__2, .eyebrow__2.-bold {
  line-height: 1;
  letter-spacing: 1.25px !important;
}

html[data-brand=mini] {
  --eyebrow-1: var(--size-100);
  --eyebrow-2: var(--size-200);
}
html[data-brand=mini] .eyebrow__1, html[data-brand=mini] .eyebrow__1.-bold {
  font-family: var(--ff-primary);
  font-size: var(--eyebrow-1);
  line-height: var(--line-height-eye-1);
  letter-spacing: var(--letter-spacing-eye-1);
  text-transform: uppercase;
}
html[data-brand=mini] .eyebrow__1.-bold {
  font-weight: var(--fw-bold);
}

/*========== BMW CI base text font-size setup ===========*/
.error__1, .error__1.-bold {
  font-family: var(--ff-primary);
  font-size: 14px;
  white-space: pre-wrap;
  color: var(--clr-red-03);
}
.error__1.-bold {
  font-weight: var(--fw-bold);
}

.error__2, .error__2.-bold {
  font-family: var(--ff-primary);
  font-size: 14px;
  white-space: pre-wrap;
  color: var(--clr-red-03);
}
.error__2.-bold {
  font-weight: var(--fw-bold);
}

.error__3, .error__3.-bold {
  font-family: var(--ff-primary);
  font-size: 14px;
  white-space: pre-wrap;
  color: var(--clr-red-03);
}
.error__3.-bold {
  font-weight: var(--fw-bold);
}

.a-cta, .a-cta__outline, .a-cta__secondary, .a-cta__primary {
  border-radius: 4px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: var(--fw-bold);
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
  padding-inline: 2rem;
  text-decoration: none;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  width: 100%;
}
@media (min-width: 32rem) {
  .a-cta, .a-cta__outline, .a-cta__secondary, .a-cta__primary {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}
.a-cta__primary {
  background-color: var(--clr-primary);
  color: var(--clr-gs-00);
}
.a-cta__secondary {
  background-color: var(--clr-secondary);
  color: var(--clr-gs-00);
}
.a-cta__outline {
  background-color: transparent;
  border: 1px solid var(--clr-gray-02);
  color: var(--clr-gray-02);
}

.cta:hover {
  text-decoration: none;
}

.a-cta__primary:hover:not([disabled]) {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__secondary:hover:not([disabled]) {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__outline:hover:not([disabled]) {
  background-color: var(--clr-gray-02);
  color: var(--clr-gs-00);
  text-decoration: none;
}

.a-cta__primary:active {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__secondary:active {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__outline:active {
  background-color: var(--clr-gray-02);
  color: var(--clr-gs-00);
  text-decoration: none;
}

.a-cta__primary:focus-within {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__secondary:focus-within {
  background-color: var(--clr-hover);
  color: var(--clr-gs-00);
  text-decoration: none;
}
.a-cta__outline:focus-within {
  background-color: var(--clr-gray-02);
  color: var(--clr-gs-00);
  text-decoration: none;
}

.a-cta__primary[disabled],
.a-cta__primary:disabled,
.a-cta__secondary[disabled],
.a-cta__secondary:disabled {
  background-color: var(--clr-disabled);
  cursor: not-allowed;
}

html[data-brand=bmw] .a-cta, html[data-brand=bmw] .a-cta__primary, html[data-brand=bmw] .a-cta__secondary, html[data-brand=bmw] .a-cta__outline {
  height: 3.125rem;
}
@media (min-width: 64rem) {
  html[data-brand=bmw] .a-cta, html[data-brand=bmw] .a-cta__primary, html[data-brand=bmw] .a-cta__secondary, html[data-brand=bmw] .a-cta__outline {
    height: 3.125rem;
  }
}
html[data-brand=bmw] .a-cta__primary {
  border: none;
}
html[data-brand=bmw] .a-cta__primary.-sm, html[data-brand=bmw] .a-cta__secondary.-sm, html[data-brand=bmw] .a-cta__outline.-sm {
  height: 40px;
}
html[data-brand=bmw] .cta__checkout {
  margin-top: 0;
  font-size: 20px !important;
  padding-inline: 1.2rem;
  text-transform: capitalize !important;
  height: 70px !important;
  border-radius: 0;
}
@media (min-width: 64rem) {
  html[data-brand=bmw] .cta__checkout {
    min-width: 400px;
  }
}
html[data-brand=bmw] .cta__checkout svg {
  -webkit-margin-start: 3.5rem;
          margin-inline-start: 3.5rem;
  width: 16px !important;
  fill: var(--clr-gs-00);
}
@media (min-width: 64rem) {
  html[data-brand=bmw] .cta__checkout svg {
    -webkit-margin-start: 13.5rem;
            margin-inline-start: 13.5rem;
  }
}
html[data-brand=bmw] .cta__checkout :hover svg {
  fill: var(--clr-gray-00) !important;
}

html[data-brand=mini] .a-cta, html[data-brand=mini] .a-cta__primary, html[data-brand=mini] .a-cta__secondary, html[data-brand=mini] .a-cta__outline {
  border-radius: 10rem;
  font-family: var(--ff-mini-sans);
  font-size: calc(var(--base-size) * 1.125);
  font-weight: var(--fw-light);
  height: calc(var(--base-size) * 3.125);
  -webkit-margin-before: var(--size-800);
          margin-block-start: var(--size-800);
  text-align: center;
  width: 100%;
}
html[data-brand=mini] .a-cta__primary {
  background-color: var(--clr-bb-90);
  border: 2px solid var(--clr-bb-90);
  color: var(--clr-gs-00);
}
html[data-brand=mini] .a-cta__secondary {
  background-color: var(--clr-gs-100);
  border: 2px solid var(--clr-gs-100);
  color: var(--clr-gs-00);
}
html[data-brand=mini] .a-cta__outline {
  border: 2px solid var(--clr-gs-100);
  color: var(--clr-gs-100);
}
@media (min-width: 32rem) {
  html[data-brand=mini] .a-cta, html[data-brand=mini] .a-cta__primary, html[data-brand=mini] .a-cta__secondary, html[data-brand=mini] .a-cta__outline {
    width: clamp(200px, 100%, 300px);
  }
}
html[data-brand=mini] .a-cta__primary:hover:not([disabled]) {
  background-color: var(--clr-bb-80);
  border-color: var(--clr-bb-80);
  color: var(--clr-gs-00);
  text-decoration: none;
}
html[data-brand=mini] .a-cta__secondary:hover:not([disabled]) {
  background-color: var(--clr-gs-80);
  border: 1px solid var(--clr-gs-80);
  color: var(--clr-gs-00);
  text-decoration: none;
}
html[data-brand=mini] .a-cta__outline:hover:not([disabled]) {
  background: transparent;
  border: 2px solid var(--clr-bb-80);
  color: var(--clr-bb-80);
}
html[data-brand=mini] .a-cta__primary[disabled],
html[data-brand=mini] .a-cta__primary:disabled {
  border-color: var(--clr-disabled);
  background: var(--clr-disabled);
  cursor: not-allowed;
}
html[data-brand=mini] .a-cta__primary:focus-visible {
  background-color: var(--clr-bb-90);
  border: 2px solid var(--clr-bb-80);
  outline: none;
}
html[data-brand=mini] .a-cta__secondary:focus-visible {
  background-color: var(--clr-gs-100);
  border: 2px solid var(--clr-bb-80);
  outline: none;
}
html[data-brand=mini] .a-cta__outline:focus-visible {
  background-color: transparent;
  border: 2px solid var(--clr-bb-80);
  outline: none;
}
html[data-brand=mini] .a-cta__secondary.-inverse {
  background-color: var(--clr-gs-00);
  border: 1px solid var(--clr-gs-00);
  color: var(--clr-gs-100);
}
html[data-brand=mini] .a-cta__outline.-inverse {
  background-color: transparent;
  border: 1px solid var(--clr-gs-00);
  color: var(--clr-gs-00);
}
html[data-brand=mini] .a-cta__primary.-inverse:hover:not([disabled]), html[data-brand=mini] .a-cta__secondary.-inverse:hover:not([disabled]) {
  background-color: transparent;
  border: 1px solid var(--clr-gs-00);
  color: var(--clr-gs-00);
  text-decoration: none;
}
html[data-brand=mini] .a-cta__outline.-inverse:hover {
  background-color: var(--clr-gs-100);
  border: 1px solid var(--clr-gs-100);
  color: var(--clr-gs-00);
}
html[data-brand=mini] .cta__checkout {
  margin-top: 0;
  font-size: 20px !important;
  padding-inline: 1.2rem;
  text-transform: capitalize !important;
  height: 70px !important;
  border-radius: 0;
}
@media (min-width: 64rem) {
  html[data-brand=mini] .cta__checkout {
    min-width: 400px;
  }
}
html[data-brand=mini] .cta__checkout svg {
  -webkit-margin-start: 3.5rem;
          margin-inline-start: 3.5rem;
  width: 16px !important;
  fill: var(--clr-gs-00);
}
@media (min-width: 64rem) {
  html[data-brand=mini] .cta__checkout svg {
    -webkit-margin-start: 13.5rem;
            margin-inline-start: 13.5rem;
  }
}
html[data-brand=mini] .cta__checkout :hover svg {
  fill: var(--clr-gs-00) !important;
}
html[data-brand=mini] .cta__checkout:hover svg {
  fill: var(--clr-gs-00) !important;
}

.c-divider-1 {
  border-top: 1px solid var(--clr-gray-08);
  margin-block: var(--size-400);
}

.c-divider-2 {
  border-top: 3px solid var(--clr-gray-01);
}

.link-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.a-link-arrow {
  word-break: break-word;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

html[data-brand=bmw] .a-link-arrow {
  color: var(--clr-gray-02);
  text-decoration: none;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: start;
      align-self: flex-start;
  font-weight: var(--fw-bold);
  font-size: var(--base-size);
  -webkit-padding-end: 1.25rem;
          padding-inline-end: 1.25rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
html[data-brand=bmw] .a-link-arrow:hover {
  text-decoration: none;
}
html[data-brand=bmw] .a-link-arrow::after {
  content: "";
  height: 0.5rem;
  width: 0.5rem;
  border-top: 2px solid var(--clr-blue-04);
  border-right: 2px solid var(--clr-blue-04);
  position: absolute;
  right: 0;
  top: 55%;
  rotate: 45deg;
  translate: 0 -50%;
}

@media screen and (min-width: 768px) {
  html[data-brand=mini] .link-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1.25rem;
  }
}
html[data-brand=mini] .m-btn-links-ps .m-btn-link {
  background-color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  color: var(--clr-white, white);
  font-family: var(--ff-secondary);
  text-transform: uppercase;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding-inline: 1.25rem;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}
html[data-brand=mini] .m-btn-links-ps .m-btn-link:hover {
  text-decoration: none;
  border: 1px solid black;
  background-color: white;
  color: black;
}
html[data-brand=mini] .m-btn-links-ps .m-btn-link:last-child {
  background-color: transparent;
  border: 1px solid var(--clr-gray-01);
  color: var(--clr-gray-01);
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}
html[data-brand=mini] .m-btn-links-ps .m-btn-link:last-child:hover {
  text-decoration: none;
  border: 1px solid black;
  background-color: black;
  color: white;
}
html[data-brand=mini] .a-link-arrow {
  color: var(--clr-gs-100);
  text-decoration: none;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  font-weight: var(--fw-bold);
  font-size: calc(var(--base-size) * 1.125);
  -webkit-padding-end: calc(var(--base-size) * 1.25);
          padding-inline-end: calc(var(--base-size) * 1.25);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
html[data-brand=mini] .a-link-arrow:hover {
  text-decoration: none;
  color: var(--clr-bb-80);
}
html[data-brand=mini] .a-link-arrow:hover::after {
  border-color: var(--clr-bb-80);
}
html[data-brand=mini] .a-link-arrow::after {
  content: "";
  border-right: 2px solid var(--clr-gs-100);
  border-top: 2px solid var(--clr-gs-100);
  height: calc(var(--base-size) * 0.75);
  position: absolute;
  right: 0;
  rotate: 45deg;
  top: 55%;
  translate: 0 -50%;
  width: calc(var(--base-size) * 0.75);
}

.a-link-accordion {
  color: var(--clr-gs-100);
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  font-weight: var(--fw-bold);
  font-size: var(--base-size);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background-color: transparent;
  border: 0;
}
.a-link-accordion::after {
  content: "";
  height: 0.5rem;
  width: 0.5rem;
  border-top: 2px solid var(--clr-gs-100);
  border-right: 2px solid var(--clr-gs-100);
  right: 0;
}
.a-link-accordion:hover {
  text-decoration: none;
}
.a-link-accordion.-closed {
  rotate: -45deg;
}
.a-link-accordion.-open {
  rotate: 135deg;
}

.link {
  color: var(--clr-gray-02);
  font-weight: var(--fw-bold);
}
.link:hover {
  text-decoration: none;
  color: var(--clr-blue-04);
}
.link.-warning {
  color: var(--clr-er-30);
}

.a-list__item {
  padding-block: 1rem;
  padding-inline: 1rem 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.a-list__item:hover {
  background-color: var(--clr-gray-07);
  cursor: pointer;
}

.a-list__item.-border {
  border-block: 1px solid var(--clr-gray-06);
}

.a-list__item.-border + .a-list__item.-border,
.a-list__item.-border-no-top {
  -webkit-border-before: none;
          border-block-start: none;
}

.a-list__item.-no-hover {
  background-color: initial;
}

.m-pflag, .m-pflag--marketing {
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: 3.5rem 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  position: absolute;
  z-index: 4;
}
.m-pflag--marketing {
  background-color: var(--clr-db10);
  color: var(--clr-gs-80);
}
.m-pflag--marketing::before {
  content: url("../../../etc.clientlibs/mybmw/clientlibs/common/resources/img/icons/cart.svg");
  position: absolute;
  height: 11px;
  width: 11px;
  left: 1.5rem;
  top: 16px;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
}
.m-pflag--marketing::after {
  content: "";
  width: 0;
  height: 0;
  background: transparent;
  position: absolute;
  border-top: 36px var(--clr-db10) solid;
  right: -16px;
  border-right: 16px transparent solid;
  z-index: 34;
}

.spacer, html[data-brand=mini] .spacer.-lg, html[data-brand=mini] .spacer.-md, html[data-brand=mini] .spacer.-sm, html[data-brand=mini] .spacer.-xs, .spacer.-lg, .spacer.-md, .spacer.-sm, .spacer.-xs {
  position: relative;
  width: 100%;
}
.spacer.-xs, html[data-brand=mini] .-xs.spacer {
  height: var(--space-xxs);
}
.spacer.-sm, html[data-brand=mini] .-sm.spacer {
  height: 15px;
}
.spacer.-md, html[data-brand=mini] .-md.spacer {
  height: 25px;
}
.spacer.-lg, html[data-brand=mini] .-lg.spacer {
  height: 40px;
}
@media (min-width: 48rem) {
  .spacer.-sm, html[data-brand=mini] .-sm.spacer {
    height: 20px;
  }
  .spacer.-md, html[data-brand=mini] .-md.spacer {
    height: 40px;
  }
  .spacer.-lg, html[data-brand=mini] .-lg.spacer {
    height: 60px;
  }
}
@media (min-width: 64rem) {
  .spacer.-xxs, html[data-brand=mini] .-xxs.spacer.-lg, html[data-brand=mini] .-xxs.spacer.-md, html[data-brand=mini] .-xxs.spacer.-sm, html[data-brand=mini] .-xxs.spacer.-xs {
    height: 4px;
  }
  .spacer.-xs, html[data-brand=mini] .-xs.spacer {
    height: 10px;
  }
  .spacer.-sm, html[data-brand=mini] .-sm.spacer {
    height: 25px;
  }
  .spacer.-md, html[data-brand=mini] .-md.spacer {
    height: 48px;
  }
  .spacer.-lg, html[data-brand=mini] .-lg.spacer {
    height: 80px;
  }
}

html[data-brand=mini] .spacer, html[data-brand=mini] .spacer.-lg, html[data-brand=mini] .spacer.-md, html[data-brand=mini] .spacer.-sm, html[data-brand=mini] .spacer.-xs {
  position: relative;
  width: 100%;
}
html[data-brand=mini] .spacer.-xs {
  height: var(--space-xxs);
}
html[data-brand=mini] .spacer.-sm {
  height: var(--space-xs);
}
html[data-brand=mini] .spacer.-md {
  height: var(--space-sm);
}
html[data-brand=mini] .spacer.-lg {
  height: var(--space-md);
}
@media (min-width: 48rem) {
  html[data-brand=mini] .spacer.-sm {
    height: var(--space-md);
  }
  html[data-brand=mini] .spacer.-md {
    height: calc(var(--base-size) * 2);
  }
  html[data-brand=mini] .spacer.-lg {
    height: calc(var(--base-size) * 3.75);
  }
}
@media (min-width: 64rem) {
  html[data-brand=mini] .spacer.-xxs {
    height: var(--space-xxs);
  }
  html[data-brand=mini] .spacer.-xs {
    height: var(--space-xs);
  }
  html[data-brand=mini] .spacer.-sm {
    height: var(--space-sm);
  }
  html[data-brand=mini] .spacer.-md {
    height: var(--space-md);
  }
  html[data-brand=mini] .spacer.-lg {
    height: var(--space-lg);
  }
}

#cvc_form {
  border: 1px solid var(--clr-gray-06);
  padding: var(--space-xs) var(--space-sm);
  width: 105px;
  height: 45px;
}

.m-carousel {
  position: relative;
}

.m-carousel-nav__item {
  -webkit-margin-end: 0.25rem;
          margin-inline-end: 0.25rem;
  width: 8px;
  height: 8px;
  display: block;
  background-color: var(--clr-gs-40);
  border-radius: 50px;
}
.m-carousel-nav__item.-active {
  width: 10px;
  height: 10px;
  background-color: var(--clr-gs-60);
}

.m-carousel__navigation--left,
.m-carousel__navigation--right {
  height: 50px;
  width: 50px;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.m-carousel__navigation--left::before,
.m-carousel__navigation--right::before {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border-top: 1px solid var(--clr-gs-80);
  border-left: 1px solid var(--clr-gs-80);
  top: 50%;
  left: 50%;
}

.m-carousel-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}

.m-carousel__navigation--left {
  left: 0;
}

.m-carousel__navigation--right {
  right: 0;
}

.m-carousel__navigation--left::before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.m-carousel__navigation--right::before {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
}

body.modal-open {
  overflow: hidden;
}

.c-modal {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1000;
  display: none;
}
.c-modal .scrollbar-vertical {
  padding: 3rem 0 1rem 2rem;
}
.c-modal__container, .c-modal__container--md, .c-modal__container--sm {
  background: var(--clr-gs-10);
  position: relative;
  padding: 3rem 2rem;
  width: 100%;
  height: 100%;
}
@media (min-width: 64rem) {
  .c-modal__container, .c-modal__container--md, .c-modal__container--sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    width: 80%;
    max-width: 1076px;
    max-height: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    padding-inline: 3.125rem;
    padding-block: 3.75rem;
  }
}
@media (min-width: 64rem) {
  .c-modal__container--sm {
    max-width: 720px;
  }
}
@media (min-width: 64rem) {
  .c-modal__container--md {
    max-width: 1076px;
  }
}
.c-modal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-modal--left .c-modal__inner {
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
  -webkit-padding-after: var(--space-md);
          padding-block-end: var(--space-md);
  -webkit-padding-start: var(--space-md);
          padding-inline-start: var(--space-md);
  -webkit-padding-end: var(--space-sm);
          padding-inline-end: var(--space-sm);
}

.c-modal--right .c-modal__inner {
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
  -webkit-padding-after: var(--space-md);
          padding-block-end: var(--space-md);
  -webkit-padding-end: var(--space-md);
          padding-inline-end: var(--space-md);
  -webkit-padding-start: var(--space-sm);
          padding-inline-start: var(--space-sm);
}

.c-modal__slot {
  padding-block: 4.5rem 4rem;
  padding-inline: 4rem;
  overflow-y: auto;
}

.c-modal__slot.--left {
  background: white;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.c-modal__slot.--right {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.height--100 {
  height: 100%;
}

.m-card-product {
  width: 100%;
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem;
  position: relative;
}
.m-card-product img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.m-subscribed__overlay {
  position: absolute;
  color: white;
  text-align: center;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
  font-size: 14px;
}

@media (min-width: 64rem) {
  .m-subscribed__overlay:hover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-transition: 0.4s all ease-in-out;
    transition: 0.4s all ease-in-out;
    cursor: pointer;
  }
}

.m-card-product__status {
  position: absolute;
  height: 50px;
  width: 50px;
  z-index: 2;
  top: -25px;
  left: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.m-card-product__image-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.m-card-product__image-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.m-card-product__add {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: white;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.m-card-product__add:disabled {
  background: #4c4c4c;
}
.m-card-product__add:not(.disabled):hover {
  background: var(--clr-blue-04);
  color: white;
}
.m-card-product__add:not(.disabled):hover svg path {
  fill: white;
}
.m-card-product__add .icon-plus {
  display: block;
}
.m-card-product__add .icon-check {
  display: none;
}
.m-card-product__add.selected {
  background: var(--clr-blue-04);
}
.m-card-product__add.selected .icon-plus {
  display: none;
}
.m-card-product__add.selected .icon-check {
  display: block;
}
.m-card-product__add.selected svg path {
  fill: white;
}

.m-card-product__add svg {
  -webkit-margin-end: 0 !important;
          margin-inline-end: 0 !important;
}

.m-card-product__add.disabled {
  background: #4c4c4c;
}

.m-card-product__add.disabled svg path {
  fill: white;
}

.c-banner, .c-banner--store {
  isolation: isolate;
  position: relative;
}
.c-banner__overlay {
  z-index: -1;
}
.c-banner--store {
  background: url("../../../etc.clientlibs/my-garage-services/clientlibs/clientlib-site/resources/images/store-bg.jpg");
  background-size: cover;
  background-position: center center;
  color: white;
  min-height: 280px;
}
@media (min-width: 32rem) {
  .c-banner--store {
    min-height: 380px;
  }
}
@media (min-width: 48rem) {
  .c-banner--store {
    min-height: 360px;
  }
}
@media (min-width: 64rem) {
  .c-banner--store {
    min-height: 460px;
  }
}
@media (min-width: 80rem) {
  .c-banner--store {
    min-height: 560px;
  }
}

.banner__vehicle-image {
  position: absolute;
  bottom: 0;
  right: 2rem;
  width: 80%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (min-width: 32rem) {
  .banner__vehicle-image {
    width: 65%;
  }
}
@media (min-width: 48rem) {
  .banner__vehicle-image {
    width: 65%;
  }
}
@media (min-width: 80rem) {
  .banner__vehicle-image {
    width: 60%;
    bottom: -6rem;
  }
}

.is-pesa {
  background-color: var(--clr-gray-09);
}

.pesa-terms {
  -webkit-margin-before: var(--size-300);
          margin-block-start: var(--size-300);
}

html[data-brand=bmw] .b-max-ch {
  max-width: 80ch;
}

html[data-brand=mini] .is-pesa {
  background-color: inherit;
}
html[data-brand=mini] .is-pesa + .is-pesa {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
html[data-brand=mini] .pesa-terms {
  width: 100%;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  .grid-3-2.max-c {
    grid-template-columns: 2fr minmax(-webkit-max-content, 1fr);
    grid-template-columns: 2fr minmax(max-content, 1fr);
  }
}

.max-ch {
  max-width: var(--ch-80);
}

.-is-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 64rem) {
  .-is-mobile {
    display: none;
  }
}

.-is-desktop {
  display: none;
}
@media (min-width: 64rem) {
  .-is-desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.p-0 {
  padding: 0;
}

.pb-0 {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

.pbl-0 {
  padding-block: 0;
}

.pi-0 {
  padding-inline: 0;
}

.pl-0 {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.pr-0 {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.pt-0 {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

.m-0 {
  margin: 0;
}

.mb-0 {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

.mbl-0 {
  margin-block: 0;
}

.mi-0 {
  margin-inline: 0;
}

.ml-0 {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}

.ml-a {
  margin-left: auto;
}

.mr-0 {
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}

.mr-a {
  margin-right: auto;
}

.mt-0 {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.pos-relative {
  position: relative;
}

.theme-dark > * {
  color: white !important;
}

.sr-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.t-ac {
  text-align: center;
}

.t-ae {
  text-align: end;
}

.t-aj {
  text-align: justify;
}

.t-al {
  text-align: left;
}

.t-ar {
  text-align: right;
}

.t-as {
  text-align: start;
}

.jc-c {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.jc-fe {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.jc-fs {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.jc-sb {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ai-c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ai-fe {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.ai-fs {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.fw-w {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.fg-g {
  gap: var(--space-sm);
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flow-i > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (min-width: 48rem) {
  .flow-i > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48.5%;
            flex: 0 0 48.5%;
  }
}
@media (min-width: 64rem) {
  .flow-i > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 var(--flow);
            flex: 0 0 var(--flow);
  }
}