@onlive.ai/common-121 0.2.199 → 0.2.228

package/themes/custom/cupra-diagonal.theme.css

@@ -2,6 +2,46 @@
  * Cupra Diagonal Theme
  */
 
+/* ========================================================================
+    FONTS
+    ======================================================================== */
+
+@font-face {
+  font-family: "cupra-screen";
+  src: url("https://ds-assets.cupra.com/fonts/cupra-diagonal/CupraScreen-Light.woff2")
+    format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "cupra-screen";
+  src: url("https://ds-assets.cupra.com/fonts/cupra-diagonal/CupraScreen-Book.woff2")
+    format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "cupra-screen";
+  src: url("https://ds-assets.cupra.com/fonts/cupra-diagonal/CupraScreen-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "cupra-screen";
+  src: url("https://ds-assets.cupra.com/fonts/cupra-diagonal/CupraScreen-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* ========================================================================
    THEME TOKENS
    ======================================================================== */
@@ -16,15 +56,22 @@
   text-rendering: optimizeSpeed;
 
   /* --- Brand surfaces --- */
-  --cupra-color-surface-glass: #c3c3cb0d; /* Grey glass surface (~5% opacity) */
-  --cupra-color-surface-glass-10: #c3c3cb1a; /* Grey glass surface at 10% opacity */
-  --cupra-color-surface-glass-15: #c3c3cb26; /* Grey glass surface at 15% opacity */
-  --cupra-color-surface-solid: #15181e; /* Dark solid background */
-  --cupra-color-surface-solid-96: #15181ef4; /* Dark solid at 96% opacity (backdrop) */
+  --cupra-color-surface-glass: #c3c3cb0d;
+  /* Grey glass surface (~5% opacity) */
+  --cupra-color-surface-glass-10: #c3c3cb1a;
+  /* Grey glass surface at 10% opacity */
+  --cupra-color-surface-glass-15: #c3c3cb26;
+  /* Grey glass surface at 15% opacity */
+  --cupra-color-surface-solid: #15181e;
+  /* Dark solid background */
+  --cupra-color-surface-solid-96: #15181ef4;
+  /* Dark solid at 96% opacity (backdrop) */
 
   /* --- Brand accent --- */
-  --cupra-color-accent: #b2764d; /* Primary accent (copper) */
-  --cupra-color-accent-soft: #c49678; /* Softer accent variant */
+  --cupra-color-accent: #b2764d;
+  /* Primary accent (copper) */
+  --cupra-color-accent-soft: #c49678;
+  /* Softer accent variant */
 
   /* --- White overlays (#fafafa at increasing opacity) --- */
   --cupra-color-overlay-01: #fafafa03;
@@ -40,7 +87,8 @@
   --cupra-gradient-stage-active: linear-gradient(47deg, #b77f58 0%, #9b613b 62.52%, #804620 96.18%);
 
   /* --- Misc --- */
-  --cupra-color-carousel-inactive: #5a5c67; /* Carousel pagination dot (inactive state) */
+  --cupra-color-carousel-inactive: #5a5c67;
+  /* Carousel pagination dot (inactive state) */
 
   /* --- Onlive UI Palette - Dark Theme overrides --- */
   --ol-color-primary-50: rgb(0 0 0);
@@ -79,12 +127,15 @@
   scrollbar-width: auto;
   scrollbar-color: var(--ol-color-neutral-400) transparent;
 }
+
 *::-webkit-scrollbar {
   width: 8px;
 }
+
 *::-webkit-scrollbar-track {
   background: transparent;
 }
+
 *::-webkit-scrollbar-thumb {
   background: transparent;
   border-radius: var(--ol-border-radius-large);
@@ -124,25 +175,30 @@ ol-button::part(base) {
   border-radius: var(--ol-border-radius-large);
   text-transform: uppercase;
 }
+
 ol-button::part(label) {
   padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
   font-weight: 500;
   font-family: var(--ol-font-sans);
 }
+
 ol-button[variant="primary"]::part(base) {
   border-color: var(--ol-color-neutral-1000);
   background-color: var(--ol-color-neutral-1000);
   color: var(--ol-color-neutral-0);
 }
+
 ol-button[variant="default"]::part(base) {
   background-color: transparent;
   border-color: var(--ol-color-neutral-1000);
   color: var(--ol-color-neutral-1000);
 }
+
 ol-button::part(spinner) {
   --track-width: 4px;
   font-size: 1.5em;
 }
+
 ol-button:hover:not([disabled])::part(base) {
   opacity: 0.8;
 }
@@ -166,9 +222,11 @@ ol-input::part(base) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-neutral-600);
 }
+
 ol-input:focus::part(base) {
   border-bottom-color: var(--cupra-color-accent);
 }
+
 ol-input::part(input) {
   color: var(--ol-color-neutral-900);
   margin-top: 28px;
@@ -176,9 +234,11 @@ ol-input::part(input) {
   background: transparent;
   padding: 0 var(--ol-spacing-x-small);
 }
+
 ol-input::part(form-control-label) {
   position: absolute;
 }
+
 ol-input::part(form-control-label)::after {
   margin-left: 1px;
 }
@@ -191,6 +251,7 @@ ol-textarea::part(base) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-neutral-600);
 }
+
 ol-textarea::part(textarea) {
   color: var(--ol-color-neutral-900);
   background: transparent;
@@ -210,6 +271,7 @@ ol-select::part(combobox) {
   );
   box-shadow: none;
 }
+
 ol-select::part(combobox):hover,
 ol-select[open]::part(combobox) {
   background: linear-gradient(
@@ -219,6 +281,7 @@ ol-select[open]::part(combobox) {
     var(--cupra-color-surface-glass-15) 100%
   );
 }
+
 ol-select::part(form-control-label) {
   font-family: var(--ol-font-sans);
   color: var(--ol-color-neutral-700);
@@ -226,15 +289,18 @@ ol-select::part(form-control-label) {
   margin-left: var(--ol-spacing-large);
   margin-bottom: var(--ol-spacing-2x-small);
 }
+
 ol-select::part(display-input) {
   font-family: var(--ol-font-sans);
   color: var(--ol-color-neutral-800);
 }
+
 ol-select::part(listbox) {
   border-radius: var(--ol-border-radius-large);
   margin-block: var(--ol-spacing-2x-small);
   background: transparent;
 }
+
 ol-select::part(listbox)::after {
   content: "";
   position: absolute;
@@ -254,13 +320,16 @@ ol-option::part(base) {
   padding: var(--ol-spacing-x-small) var(--ol-spacing-small);
   background: transparent;
 }
+
 ol-option:hover::part(base) {
   background-color: var(--cupra-color-surface-glass);
 }
+
 ol-option[aria-selected="true"]::part(base) {
   border-left: 4px solid var(--cupra-color-accent);
   background-color: var(--cupra-color-surface-glass);
 }
+
 ol-option::part(checked-icon) {
   display: none;
 }
@@ -282,14 +351,17 @@ ol-carousel::part(pagination-item) {
   width: 38px;
   background-color: var(--cupra-color-carousel-inactive);
 }
+
 ol-carousel::part(pagination-item--active) {
   transform: scale(1);
   background: var(--cupra-gradient-accent);
 }
+
 .ofl__carousel__item-label {
   font-family: var(--ol-font-sans);
   font-weight: 400;
 }
+
 .ofl__carousel__nav-container {
   padding: var(--ol-spacing-x-small);
   margin-top: calc(2 * var(--ol-spacing-medium));
@@ -299,24 +371,29 @@ ol-carousel::part(pagination-item--active) {
   border: 1px solid var(--cupra-color-overlay-10);
   gap: var(--ol-spacing-x-small);
 }
+
 .ofl__carousel__nav-item::part(button) {
   height: 50px;
   border-radius: 6px;
   border: 1px solid transparent;
 }
+
 .ofl__carousel__nav-item:hover::part(button) {
   background: transparent;
 }
+
 .ofl__carousel__nav-item[checked]::part(button--checked) {
   background: var(--cupra-color-overlay-15);
   border: 1px solid var(--cupra-color-overlay-10);
   outline: none;
 }
+
 .ofl__carousel__nav-item::part(label) {
   font-size: var(--ol-font-size-medium);
   font-weight: 400;
   color: var(--ol-color-neutral-900);
 }
+
 .ofl__carousel--showcase-mode::part(navigation-button) {
   background: var(--cupra-gradient-accent);
   color: var(--ol-color-neutral-1000);
@@ -325,13 +402,16 @@ ol-carousel::part(pagination-item--active) {
   opacity: 0;
   transition: opacity var(--ol-transition-medium) ease;
 }
+
 .ofl__carousel--showcase-mode:hover::part(navigation-button) {
   opacity: 1;
 }
+
 .ofl__carousel--showcase-mode::part(navigation-button--next) {
   position: absolute;
   right: 10vw;
 }
+
 .ofl__carousel--showcase-mode::part(navigation-button--previous) {
   position: absolute;
   left: 10vw;
@@ -341,28 +421,34 @@ ol-carousel::part(pagination-item--active) {
 ol-radio-button {
   margin-inline: 0;
 }
+
 ol-radio-button::part(label) {
   color: var(--ol-color-neutral-800);
 }
+
 ol-radio-button:hover::part(button),
 ol-radio-button[checked]::part(button) {
   background: var(--cupra-color-overlay-15);
 }
+
 ol-radio-button[checked]::part(button) {
   outline: 1px solid var(--cupra-color-outline-70);
 }
 
 /* --- Radio Group --- */
-ol-radio-group::part(form-control-label) {
+ol-radio-group::part(form-control-label),
+.ofl__rating__label {
   font-size: var(--ol-font-size-small);
   font-family: var(--ol-font-sans);
   font-weight: 300;
-  color: var(--ol-color-neutral-600);
+  color: var(--ol-color-neutral-700);
   margin-bottom: var(--ol-spacing-small);
 }
+
 ol-radio-group ol-radio + ol-radio {
   margin-top: var(--ol-spacing-x-small);
 }
+
 ol-radio-group ol-radio::part(control) {
   --toggle-size: 24px;
   margin: 2px;
@@ -388,6 +474,7 @@ ol-checkbox::part(control):after {
   z-index: 0;
   transition: opacity var(--ol-transition-fast) ease;
 }
+
 ol-radio-group ol-radio:hover::part(control)::after,
 ol-checkbox:hover::part(control)::after {
   opacity: 1;
@@ -396,10 +483,12 @@ ol-checkbox:hover::part(control)::after {
 ol-radio-group ol-radio::part(checked-icon) {
   transform: scale(1.3);
 }
+
 ol-radio-group ol-radio::part(control--checked) {
   color: var(--ol-color-primary-600);
   border-color: var(--ol-color-primary-600);
 }
+
 ol-radio-group ol-radio::part(label) {
   line-height: 1.75;
 }
@@ -411,15 +500,18 @@ ol-checkbox::part(label) {
   color: var(--ol-color-neutral-800);
   line-height: var(--ol-line-height-dense);
 }
+
 ol-checkbox::part(control) {
   border-radius: 6px;
   height: 24px;
   width: 24px;
   background: transparent;
 }
+
 ol-checkbox::part(control):after {
   border-radius: var(--ol-border-radius-large);
 }
+
 ol-checkbox::part(control--checked) {
   border-color: var(--cupra-color-accent-soft);
   background-color: var(--cupra-color-accent);
@@ -437,11 +529,13 @@ ol-dialog::part(panel) {
 .ofl__flow__transition-overlay {
   font-size: var(--ol-spacing-2x-large);
 }
+
 .ofl__flow__loading ol-spinner,
 .ofl__flow__loading-overlay ol-spinner,
 .ofl__flow__transition-overlay ol-spinner {
   --track-width: 6px;
 }
+
 .ofl__flow--theme-dark .ofl__flow__loading-overlay {
   background: transparent;
 }
@@ -454,23 +548,28 @@ ol-dialog::part(panel) {
 .ofl__map__search-input::part(base) {
   height: 50px;
 }
+
 .ofl__map__search-input::part(input) {
   height: 46px;
   margin-top: 0;
 }
+
 .ofl__map__autocomplete-list {
   backdrop-filter: blur(3px);
   background: var(--cupra-color-surface-solid-96);
   border-color: var(--cupra-color-surface-glass-10);
   border-radius: var(--ol-border-radius-medium);
 }
+
 .ofl__map__autocomplete-item {
   padding: var(--ol-spacing-small) var(--ol-spacing-medium);
 }
+
 .ofl__map__autocomplete-item:hover,
 .ofl__map__autocomplete-item--active {
   background: var(--cupra-color-surface-glass-15);
 }
+
 .ofl__map__distance-range {
   margin-bottom: var(--ol-spacing-2x-small);
 }
@@ -482,9 +581,11 @@ ol-dialog::part(panel) {
   border-radius: var(--ol-border-radius-x-large);
   overflow: hidden;
 }
+
 .ofl__map {
   gap: var(--ol-spacing-small);
 }
+
 .ofl__map__location-empty {
   text-align: left;
   align-items: flex-start;
@@ -499,18 +600,22 @@ ol-dialog::part(panel) {
   margin-bottom: var(--ol-spacing-medium);
   color: var(--ol-color-neutral-900);
 }
+
 .ofl__map__options-list {
   max-height: 300px;
   overflow: auto;
   scrollbar-width: auto;
   scrollbar-color: var(--ol-color-neutral-400) transparent;
 }
+
 .ofl__map__options-list::-webkit-scrollbar {
   width: 8px;
 }
+
 .ofl__map__options-list::-webkit-scrollbar-track {
   background: transparent;
 }
+
 .ofl__map__options-list::-webkit-scrollbar-thumb {
   background: transparent;
   border-radius: var(--ol-border-radius-large);
@@ -524,10 +629,12 @@ ol-dialog::part(panel) {
   border: 1px solid var(--ol-color-neutral-300);
   backdrop-filter: blur(24px);
 }
+
 .ofl__map__options-list--button
   .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(base) {
   border-color: var(--ol-color-neutral-1000);
 }
+
 .ofl__map__options-list--button .ofl__map__option-item::part(button) {
   border-radius: var(--ol-border-radius-x-large);
   background: linear-gradient(
@@ -537,10 +644,12 @@ ol-dialog::part(panel) {
     var(--dg-global-opacity-grey-10, hsla(240, 7%, 78%, 0.1)) 99.44%
   );
 }
+
 .ofl__map__options-list--button
   .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(button) {
   background-color: transparent;
 }
+
 .ofl__map__options-list--button .ofl__map__option-item:not([disabled]):hover::part(button) {
   background: linear-gradient(
     179deg,
@@ -558,9 +667,11 @@ ol-dialog::part(panel) {
   text-transform: uppercase;
   margin-bottom: var(--ol-spacing-2x-small);
 }
+
 .ofl__map__options-list--button .ofl__map__option-item__title {
   font-weight: 500;
 }
+
 .ofl__map__option-item__description,
 .ofl__map__option-item__properties {
   font-family: var(--ol-font-sans);
@@ -572,19 +683,30 @@ ol-dialog::part(panel) {
 .ofl__map__container--visible {
   gap: var(--ol-spacing-x-large);
 }
+
 .ofl__map__options-list--button::part(button-group__base) {
   gap: var(--ol-spacing-2x-small);
 }
 
 /* Rating Component Styling */
+.ofl__rating__scale {
+  width: 200px;
+  font-size: var(--ol-font-size-2x-small);
+}
+
 .ofl__rating {
-  --symbol-color: var(--ol-color-neutral-900);
-  --symbol-size: 2em;
-  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  --symbol-color: var(--ol-color-neutral-300);
+  --symbol-size: var(--ol-font-size-x-large);
+  --symbol-spacing: 0 var(--ol-spacing-large) 0 0;
   margin-bottom: var(--ol-spacing-large);
 }
-.ofl__rating__label {
-  margin-bottom: var(--ol-spacing-large);
+
+.ofl__form > [component="rating"].ofl__form__field,
+.ofl__form > [component="textarea"].ofl__form__field {
+  margin-top: var(--ol-spacing-2x-small);
+}
+
+[component="rating"].ofl__form__field + [component="label"].ofl__form__field {
   margin-top: var(--ol-spacing-large);
 }
 
@@ -600,39 +722,47 @@ ol-dialog::part(panel) {
   background-repeat: repeat-y;
   background-size: 100% auto;
 }
+
 .oip__page__header {
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
   backdrop-filter: blur(12px);
 }
+
 .oip__page__content {
   flex: 1;
   max-width: 1400px;
   margin: 0 auto;
   align-items: center;
 }
+
 .oip__page__content .oip__page__installation {
   display: flex;
   align-items: self-start;
   justify-content: center;
-  width: 50%;
   padding: var(--ol-spacing-large);
 }
+
 .oip__page__content .oip__page__image_container {
   background: transparent;
 }
+
 .oip__page__content .oip__page__image_container .oip__page__image {
   background-color: transparent;
   object-fit: contain;
 }
 
-.ofl__widget,
-.ofl__flow {
+.ofl__widget {
   max-width: 100%;
   margin: 0 auto;
 }
 
+.ofl__flow {
+  max-width: 664px;
+  margin: 0 auto;
+}
+
 /* ========================================================================
    FLOW FORM BLOCK
    ======================================================================== */
@@ -641,9 +771,11 @@ ol-dialog::part(panel) {
 .ofl__form > :not(:first-child) {
   margin-top: var(--ol-spacing-2x-large);
 }
+
 .ofl__form > [component="label"] + [component="checkbox"] {
   margin-top: 0;
 }
+
 .ofl__form__field[component="checkbox"] + .ofl__form__field[component="label"] {
   margin-top: var(--ol-spacing-large);
 }
@@ -652,25 +784,31 @@ ol-dialog::part(panel) {
 .ofl__flow__actions--bottom {
   margin-top: var(--ol-spacing-2x-large);
 }
+
 .ofl__actions__item,
 .ofl__actions__button {
   width: 100%;
 }
+
 .ofl__flow__actions--top {
   margin-bottom: var(--ol-spacing-small);
 }
+
 .ofl__actions--top .ofl__actions__button {
   width: max-content;
 }
+
 .ofl__actions--top .ofl__actions__button::part(base) {
   padding: 0;
   border: none;
 }
+
 .ofl__actions--top .ofl__actions__button::part(label) {
   font-size: var(--ol-font-size-medium);
   font-weight: 300;
   padding: var(--ol-spacing-2x-small) 10px;
 }
+
 .ofl__actions--top .ofl__actions__button::part(prefix) {
   font-size: 20px;
 }
@@ -681,13 +819,16 @@ ol-dialog::part(panel) {
   font-weight: 300;
   color: var(--ol-color-neutral-900);
 }
+
 .ofl__label h2 {
   font-size: var(--ol-font-size-medium);
   font-weight: 400;
 }
+
 .ofl__label p {
   margin-top: 0;
 }
+
 .ofl__label a {
   color: var(--ol-color-neutral-900);
 }
@@ -698,17 +839,21 @@ ol-dialog::part(panel) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-danger-500);
 }
+
 .ofl__input--error::part(form-control-help-text) {
   color: var(--ol-color-danger-500);
 }
+
 .ofl__input--error::part(form-control-label) {
   color: var(--ol-color-neutral-600);
 }
+
 .ofl__input--success::part(base),
 .ofl__input--success:focus::part(base) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-neutral-900);
 }
+
 .ofl__input__error-message {
   position: absolute;
 }
@@ -722,14 +867,17 @@ ol-dialog::part(panel) {
   background: transparent;
   box-shadow: none;
 }
+
 .ofl__phone-input .ofl__phone-input__prefix::part(form-control) {
   height: 74px;
   background-color: var(--cupra-color-surface-glass);
   border-radius: var(--ol-border-radius-medium) var(--ol-border-radius-medium) 0 0;
 }
+
 .ofl__phone-input .ofl__phone-input__prefix::part(form-control-input) {
   padding-top: 34px;
 }
+
 .ofl__phone-input .ofl__phone-input__prefix::part(form-control-label) {
   position: absolute;
   font-size: var(--ol-font-size-small);
@@ -739,24 +887,30 @@ ol-dialog::part(panel) {
   padding: var(--ol-spacing-x-small);
   margin: 0;
 }
+
 .ofl__phone-input--success .ofl__phone-input__prefix::part(combobox) {
   border-bottom-color: var(--ol-color-neutral-900);
 }
+
 .ofl__phone-input--error .ofl__phone-input__prefix::part(combobox) {
   color: var(--ol-color-neutral-600);
   border-bottom-color: var(--ol-color-danger-500);
 }
+
 .ofl__phone-input--error .ofl__phone-input__number::part(form-control-label) {
   color: var(--ol-color-neutral-600);
 }
+
 .ofl__phone-input--error .ofl__phone-input__number::part(base) {
   color: inherit;
   border-color: transparent;
   border-bottom-color: var(--ol-color-danger-500);
 }
+
 .ofl__phone-input .ofl__phone-input__error-message {
   color: var(--ol-color-danger-500);
 }
+
 .ofl__phone-input.ofl__phone-input__number--label:not(.ofl__phone-input__number--prefix-label):not(
     .ofl__phone-input__number--floating-label
   )
@@ -773,11 +927,13 @@ ol-dialog::part(panel) {
   font-family: var(--ol-font-sans);
   font-weight: 400;
 }
+
 .ofl__stages--tabs .ofl__stages__stage {
   line-height: 1.5;
   text-transform: uppercase;
   border-bottom: none;
 }
+
 .ofl__stages--tabs .ofl__stages__stage::after {
   content: "";
   display: inline-block;
@@ -786,12 +942,15 @@ ol-dialog::part(panel) {
   border-radius: var(--ol-border-radius-x-large);
   background: var(--ol-color-neutral-200);
 }
+
 .ofl__stages--tabs .ofl__stages__stage.ofl__stages__stage--active::after {
   background: var(--cupra-gradient-stage-active);
 }
+
 .ofl__stages--tabs .ofl__stages__stage .ofl__stages__stage-number {
   display: none;
 }
+
 .ofl__flow__stages.ofl__flow__stages--top {
   margin-bottom: var(--ol-spacing-medium);
 }
@@ -804,6 +963,7 @@ ol-dialog::part(panel) {
   border: 1px solid var(--cupra-color-overlay-10);
   padding: var(--ol-spacing-large) var(--ol-spacing-small);
 }
+
 .ofl__calendar__time-label {
   font-size: var(--ol-font-size-medium);
   font-family: var(--ol-font-sans);
@@ -811,9 +971,11 @@ ol-dialog::part(panel) {
   color: var(--ol-color-neutral-900);
   margin: var(--ol-spacing-3x-large) 0 var(--ol-spacing-x-small);
 }
+
 .ofl__calendar__time-item {
   width: 100%;
 }
+
 .ofl__calendar__time-list--list {
   max-width: 100%;
 }
@@ -822,32 +984,39 @@ ol-dialog::part(panel) {
 .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button__label) {
   font-weight: var(--ol-font-weight-normal);
 }
+
 .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
   min-height: 50px;
   border-color: transparent;
   background: var(--cupra-color-overlay-05);
 }
+
 .ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
   font-size: var(--ol-font-size-medium);
   font-family: var(--ol-font-sans);
   font-weight: 300;
 }
+
 .ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(button) {
   color: var(--ol-color-neutral-900);
   background-color: var(--cupra-color-overlay-15);
 }
+
 .ofl__calendar__time-list--list::part(button-group) {
   width: 100%;
 }
+
 .ofl__calendar__time-list--list
   .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
   background: var(--cupra-color-overlay-10);
   border: transparent;
 }
+
 .ofl__calendar__time-list--list
   .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button):after {
   border: none;
 }
+
 .ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button--checked) {
   border: none;
 }
@@ -865,15 +1034,18 @@ ol-dialog::part(panel) {
 .ofl__radio-button__group::part(button-group) {
   width: 100%;
 }
+
 .ofl__radio-button__group .ofl__radio-button__button {
   flex: 1;
 }
+
 .ofl__radio-button__group .ofl__radio-button__button::part(button) {
   border-radius: var(--ol-border-radius-pill);
   min-height: var(--ol-spacing-3x-large);
   background-color: var(--cupra-color-surface-glass);
   border: none;
 }
+
 .ofl__radio-button__group::part(button-group__base) {
   gap: var(--ol-spacing-large);
 }
@@ -895,11 +1067,13 @@ ol-dialog::part(panel) {
     position: sticky;
     top: 0;
   }
+
   .oip__page__content {
     height: 100%;
     justify-content: center;
     align-items: center;
   }
+
   .oip__page__content .oip__page__installation {
     height: auto;
     width: 100%;
@@ -910,20 +1084,25 @@ ol-dialog::part(panel) {
     display: flex;
     gap: var(--ol-spacing-x-small) var(--ol-spacing-2x-small);
   }
+
   ol-carousel::part(pagination-item) {
     width: 24px;
     transition: width var(--ol-transition-fast) ease;
   }
+
   ol-carousel::part(pagination-item--active) {
     width: 36px;
   }
-  ol-carousel.ofl__carousel--showcase-mode {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode {
     width: 100%;
     transform: none;
   }
-  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode::part(base) {
     height: 100%;
   }
+
   .ofl__carousel__nav-container {
     margin: var(--ol-spacing-4x-large) 0 0 0;
     justify-content: space-between;
@@ -933,9 +1112,11 @@ ol-dialog::part(panel) {
   .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
     min-height: 40px;
   }
+
   .ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
     font-size: var(--ol-font-size-small);
   }
+
   .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -948,6 +1129,7 @@ ol-dialog::part(panel) {
   .ofl__map__map-container {
     aspect-ratio: 3 / 3;
   }
+
   .ofl__flow__title,
   .ofl__flow__form-container,
   .ofl__flow__description,
@@ -960,12 +1142,15 @@ ol-dialog::part(panel) {
   .ofl__stages--tabs .ofl__stages__progress {
     --height: 4px;
   }
+
   .ofl__stages--tabs .ofl__stages__progress::part(base) {
     border-radius: var(--ol-border-radius-large);
   }
+
   .ofl__stages--tabs.ofl__stages--small {
     padding: var(--ol-spacing-medium);
   }
+
   .ofl__stages--tabs.ofl__stages--small .ofl__stages__stage-name {
     line-height: 2.2;
     text-transform: uppercase;
@@ -981,34 +1166,50 @@ ol-dialog::part(panel) {
   ol-carousel.ofl__carousel--showcase-mode::part(pagination) {
     display: none;
   }
-  ol-carousel.ofl__carousel--showcase-mode {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode {
     width: 100vw;
     transform: translateX(min(0px, calc(686px - 50vw)));
   }
-  ol-carousel.ofl__carousel--showcase-mode::part(base) {
-    height: max(320px, 45vh);
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode::part(base) {
+    height: max(500px, 45vh);
   }
-  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode
+    ol-carousel-item {
     opacity: 1;
     transition:
       transform 0.3s ease,
       opacity 0.3s ease;
   }
-  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item img {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode
+    ol-carousel-item
+    img {
     transform: scale(0.7);
     opacity: 0.4;
     transition:
       transform 0.3s ease,
       opacity 0.3s ease;
   }
-  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item.--is-active + ol-carousel-item img {
+
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode
+    ol-carousel-item.--is-active
+    + ol-carousel-item
+    img {
     transform: scale(1.4);
     opacity: 1;
   }
+
+  ol-carousel.ofl__carousel--showcase-mode-small .ofl__carousel__item-image {
+    object-fit: contain;
+    max-height: 350px;
+  }
 }
 
 @media (min-width: 2000px) {
-  ol-carousel.ofl__carousel--showcase-mode {
+  ol-carousel:not(.ofl__carousel--showcase-mode-small).ofl__carousel--showcase-mode {
     width: 2000px;
     transform: translateX(-330px);
   }
@@ -1022,6 +1223,7 @@ ol-dialog::part(panel) {
 .ofl__flow.ofl__flow--step-modelSelection {
   max-width: 1372px;
 }
+
 .ofl__flow.ofl__flow--step-paymentPreferences,
 .ofl__flow.ofl__flow--step-customerDetails,
 .ofl__flow.ofl__flow--step-dealerSelection,
@@ -1036,15 +1238,18 @@ ol-dialog::part(panel) {
 .olcs__title {
   margin-bottom: var(--ol-spacing-large);
 }
+
 .olcs__title h2,
 .olcs__title p {
   text-transform: uppercase;
   font-weight: 300;
   margin: 0;
 }
+
 .olcs__title p {
   color: var(--ol-color-neutral-800);
 }
+
 .olcs__title h2 {
   line-height: 1.5;
   font-weight: 200;
@@ -1059,6 +1264,7 @@ ol-dialog::part(panel) {
   color: var(--ol-color-neutral-800);
   margin: 0;
 }
+
 .olcs__carousel-label h2 {
   text-transform: uppercase;
   font-size: var(--ol-font-size-2x-large);
@@ -1072,14 +1278,17 @@ ol-dialog::part(panel) {
 .olcs__model-image {
   width: 100%;
 }
+
 .olcs__card {
   text-align: center;
 }
+
 .olcs__label {
   font-weight: 200;
   text-align: center;
   margin: 0;
 }
+
 h3.olcs__label {
   font-weight: 200;
 }
@@ -1088,28 +1297,41 @@ h3.olcs__label {
 .olcs__dealer {
   margin-top: var(--ol-spacing-large);
 }
+
 .olcs__datetime {
   font-weight: 500;
   font-size: var(--ol-font-size-large);
   margin: var(--ol-spacing-3x-large) auto var(--ol-spacing-large);
 }
+
 .olcs__customer-details {
   margin: var(--ol-spacing-2x-large) 0 0 0;
   font-weight: 300;
 }
+
 .olcs__row__text {
   display: flex;
   align-items: center;
   gap: var(--ol-spacing-large);
 }
+
 .olcs__row__text h4 {
   width: 50px;
 }
+
 .olcs__row__text h4,
 .olcs__row__text p {
   margin: var(--ol-spacing-x-small) 0;
 }
 
+.olcs__table {
+  text-align: left;
+}
+
+.olcs__table tbody th {
+  padding-right: var(--ol-spacing-2x-large);
+}
+
 /* ========================================================================
    RESPONSIVE (MOBILE) — Custom styles
    ======================================================================== */
@@ -1119,12 +1341,15 @@ h3.olcs__label {
     text-align: center;
     margin-bottom: var(--ol-spacing-large);
   }
+
   .olcs__carousel-label p {
     font-size: var(--ol-font-size-medium);
   }
+
   .olcs__carousel-label h2 {
     font-size: var(--ol-font-size-2x-large);
   }
+
   .olcs__title h2 {
     font-size: calc(2 * var(--ol-font-size-medium));
   }
@@ -1138,9 +1363,11 @@ h3.olcs__label {
   .olcs__carousel-label p {
     font-size: var(--ol-font-size-x-large);
   }
+
   .olcs__title p {
     font-size: var(--ol-font-size-small);
   }
+
   .olcs__carousel-label h2 {
     font-size: var(--ol-font-size-3x-large);
   }