/*
  Conversion Drawer Default Theme

  ----------------------------------------

  NOTE: These are the default (fall-back) token values that should be imported in 
  the proxy component before the brand specific tokens. This should help prevent
  difficult to debug LESS compilation errors.

  This file can be used as a starting point for creating new component themes.

  ----------------------------------------

  The tokens are organized by those that are common to all of a brand's themes,
  and those which must be changed for each theme--which is mainly colors.

  Brand Tokens
  - Core Drawer Styles (tab, slider, overlay)
  - Utilities (disclaimer modal, action)
  - Card Templates (text card)

  Theme Tokens
  - Light (Default)
  - Dark

*/
/* 
  ------------------
  Core Drawer Styles
  ------------------
*/
/*
  Tab
*/
/* Common (Open or Closed) */
/* Closed State */
/*
  Slider
*/
/* 
  Overlay 
*/
/* 
  ---------
  Utilities
  ---------
*/
/*
  Disclaimer Modal
*/
/*
  Card Action
*/
/* 
  --------------
  Card Templates
  --------------
*/
/*
  Text Card
*/
/* Overline */
/* End Date */
/* Headline */
/* Body */
/*
  Conversion Drawer Theme Variables

  Core Drawer Styles (tab, slider, overlay)
  Utilities (disclaimer modal, action)
  Card Templates (text card)
*/
/* 
  ------------------
  Core Drawer Styles
  ------------------
*/
/*
  Tab
*/
/* Common (Open or Closed) */
/* 
  ---------
  Utilities
  ---------
*/
/*
  Disclaimer Modal
*/
/*
  Card Action
*/
/* 
  --------------
  Card Templates
  --------------
*/
/*
  Text Card
*/
/* Overline */
/* End Date */
/* Headline */
/* Body */
/*
  Drawer Theme
*/
/* Light Theme (Default) */
.digital-platform__conversion-drawer,
.digital-platform__conversion-drawer.light {
  --drawer__background: #ffffff;
  --drawer__box-shadow: 0px -4px 74px 0px rgba(255, 255, 255, 0.35);
  --tab__box-shadow: 0px -3px 34px 0px rgba(255, 255, 255, 0.35);
  --outline-color: #2e2e2e;
  --authoring-border: 2px dashed #2e2e2e;
  /* Closed State */
  --tab-offer-count__color: #c41239;
  --tab-offer-count__background-color: #ffffff;
  --tab-offer-count__color--hover: #c41239;
  --tab-offer-count__background-color--hover: #ffffff;
  --tab__color: #ffffff;
  --tab__background-color: #c41239;
  --tab__background-color--hover: #9b132b;
  --tab-open-close__color--hover: #ffffff;
  --tab-open-close__background-color--hover: #c41239;
  /* Open State */
  --tab-offer-count__color--open: #ffffff;
  --tab-offer-count__background-color--open: #c41239;
  --tab__color--open: #2e2e2e;
  --tab__background-color--open: #ffffff;
  --tab__background-color--open--hover: #ffffff;
  /* Pagination Control Buttons (Open Only) */
  --tab-pagination-controls__color: #2e2e2e;
  --tab-pagination-controls__background-color: transparent;
  --tab-pagination-controls__color--hover: #ffffff;
  --tab-pagination-controls__background-color--hover: #9b132b;
  --tab-pagination-controls__color--disabled: #7f7f7f;
  --tab-pagination-controls__background-color--disabled: transparent;
  /* Disclaimer Modals */
  --modal__color: #2e2e2e;
  --modal__background-color: #ffffff;
  --modal-close__color: #ffffff;
  --modal-close__background-color: transparent;
  --modal-close__color--hover: #000000;
  --modal-close__background-color--hover: #ffffff;
}
/* Dark Theme */
.digital-platform__conversion-drawer.dark {
  --drawer__background: #121212;
  --drawer__box-shadow: 0px -4px 74px 0px rgba(255, 255, 255, 0.35);
  --tab__box-shadow: 0px -3px 34px 0px rgba(255, 255, 255, 0.35);
  --outline-color: #ffffff;
  --authoring-border: 2px solid #c41239;
  /* Closed State */
  --tab-offer-count__color: #ffffff;
  --tab-offer-count__background-color: #c41239;
  --tab-offer-count__color--hover: #c41239;
  --tab-offer-count__background-color--hover: #ffffff;
  --tab__color: #ffffff;
  --tab__background-color: #121212;
  --tab__background-color--hover: #c41239;
  --tab-open-close__color--hover: #ffffff;
  --tab-open-close__background-color--hover: #9b132b;
  /* Open State */
  --tab-offer-count__color--open: #c41239;
  --tab-offer-count__background-color--open: #ffffff;
  --tab__color--open: #ffffff;
  --tab__background-color--open: #121212;
  --tab__background-color--open--hover: #121212;
  /* Pagination Control Buttons (Open Only) */
  --tab-pagination-controls__color: #ffffff;
  --tab-pagination-controls__background-color: transparent;
  --tab-pagination-controls__color--hover: #c41239;
  --tab-pagination-controls__background-color--hover: #ffffff;
  --tab-pagination-controls__color--disabled: #7f7f7f;
  --tab-pagination-controls__background-color--disabled: transparent;
  /* Disclaimer Modals */
  --modal__color: #ffffff;
  --modal__background-color: #121212;
  --modal-close__color: #ffffff;
  --modal-close__background-color: transparent;
  --modal-close__color--hover: #000000;
  --modal-close__background-color--hover: #ffffff;
}
/*
  Card Theme

  Cards inherit their their theme from the drawer by default, so these custom
  css properties are added to the drawer and overwritten at the card level
  if a theme class is added to the card.
*/
/* Light Theme (Default) */
.digital-platform__conversion-drawer .conversion-drawer-text-card,
.digital-platform__conversion-drawer.light .conversion-drawer-text-card,
.digital-platform__conversion-drawer section.conversion-drawer-text-card.light {
  --outline-color: #000000;
  /* Text Card */
  --text-card__color: #2e2e2e;
  --text-card__background-color: #f2f2f2;
  /* Actions */
  --action__color: #ffffff;
  --action__background-color: #c41239;
  --action__color--hover: #ffffff;
  --action__background-color--hover: #9b132b;
  --action__color--success: #ffffff;
  --action__background-color--success: #080;
  --action__color--error: #000000;
  --action__background-color--error: #ffffff;
  --action__border-color--error: #c41239;
  /* Modal Trigger ("i" icon) */
  --modal-trigger__color: #2e2e2e;
  --modal-trigger__color--hover: #ffffff;
  --modal-trigger__background-color--hover: #2e2e2e;
}
/* Dark Theme */
.digital-platform__conversion-drawer.dark .conversion-drawer-text-card,
.digital-platform__conversion-drawer section.conversion-drawer-text-card.dark {
  --outline-color: #ffffff;
  /* Text Card */
  --text-card__color: #f2f2f2;
  --text-card__background-color: #222222;
  /* Actions */
  --action__color: #ffffff;
  --action__background-color: #c41239;
  --action__color--hover: #ffffff;
  --action__background-color--hover: #9b132b;
  --action__color--success: #ffffff;
  --action__background-color--success: #080;
  --action__color--error: #000000;
  --action__background-color--error: #ffffff;
  --action__border-color--error: #c41239;
  /* Modal Trigger ("i" icon) */
  --modal-trigger__color: #f2f2f2;
  --modal-trigger__color--hover: #222222;
  --modal-trigger__background-color--hover: #f2f2f2;
}
/* Accent Theme (Card Only) */
.digital-platform__conversion-drawer section.conversion-drawer-text-card.accent {
  --outline-color: #ffffff;
  /* Text Card */
  --text-card__color: #ffffff;
  --text-card__background-color: #c41239;
  /* Actions */
  --action__color: #c41239;
  --action__background-color: #ffffff;
  --action__color--hover: #ffffff;
  --action__background-color--hover: #9b132b;
  --action__color--success: #ffffff;
  --action__background-color--success: #080;
  --action__color--error: #000000;
  --action__background-color--error: #ffffff;
  --action__border-color--error: #9b132b;
  /* Modal Trigger ("i" icon) */
  --modal-trigger__color: #f2f2f2;
  --modal-trigger__color--hover: #c41239;
  --modal-trigger__background-color--hover: #f2f2f2;
}
/*
    Closed Initial State

    Position the drawer just below the screen
*/
.digital-platform__conversion-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform 500ms cubic-bezier(0.28, 0.47, 0.57, 0.97);
  z-index: 10;
  background: var(--drawer__background);
  font-family: 'Avenir-Roman', 'Avenir', sans-serif;
  /*
    Remove conflict with global rule. It's a long story:
    https://whirlpool.atlassian.net/browse/USAB-3151?focusedCommentId=7254032
  */
  /*
    Add element resets to prevent custom code bleed
  */
}
.digital-platform__conversion-drawer svg:not(:root) {
  height: 100%;
}
.digital-platform__conversion-drawer *:focus {
  outline: none;
}
.digital-platform__conversion-drawer a:focus-visible,
.digital-platform__conversion-drawer button:focus-visible,
.digital-platform__conversion-drawer [role="button"]:focus-visible {
  outline: 1px dashed var(--outline-color);
  outline-offset: 3px;
}
.digital-platform__conversion-drawer h1,
.digital-platform__conversion-drawer h2,
.digital-platform__conversion-drawer h3,
.digital-platform__conversion-drawer h4,
.digital-platform__conversion-drawer h5,
.digital-platform__conversion-drawer h6,
.digital-platform__conversion-drawer p,
.digital-platform__conversion-drawer a {
  margin: 0;
  padding: 0;
  color: inherit;
}
/*
    Open State
*/
.digital-platform__conversion-drawer[data-open="true"] {
  /* Unsets the translate value */
  transform: translateY(0);
  z-index: 1055;
  box-shadow: var(--drawer__box-shadow);
}
.digital-platform__conversion-drawer .conversion-drawer-tab {
  display: grid;
  grid-template-columns: repeat(4, auto);
  width: fit-content;
  padding-block: 9px;
  padding-inline: 18px;
  align-items: center;
  gap: 10px;
  position: absolute;
  transform: translate(calc(50vw - 50%), calc(-100% + 1px));
  text-align: center;
  border-radius: 0;
  background-color: var(--tab__background-color);
  font-family: 'Avenir-Heavy', 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  transition: color 200ms ease-in, background-color 200ms ease-in, translate 0.5s ease-out;
}
.digital-platform__conversion-drawer .conversion-drawer-tab::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 0;
  box-shadow: var(--tab__box-shadow);
  clip-path: inset(-100px -100px 1px -100px);
  z-index: -1;
}
.digital-platform__conversion-drawer .conversion-drawer-tab:focus-visible,
.digital-platform__conversion-drawer .conversion-drawer-tab:hover:not(:has(.conversion-drawer-tab__pagination-controls:hover)) {
  background-color: var(--tab__background-color--hover);
  outline-color: var(--outline-color);
}
.digital-platform__conversion-drawer .conversion-drawer-tab:focus-visible .conversion-drawer-tab__offer-count,
.digital-platform__conversion-drawer .conversion-drawer-tab:hover:not(:has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__offer-count {
  color: var(--tab-offer-count__color--hover);
  background-color: var(--tab-offer-count__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-tab:focus-visible .conversion-drawer-tab__open-close,
.digital-platform__conversion-drawer .conversion-drawer-tab:hover:not(:has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__open-close {
  background-color: var(--tab-open-close__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-tab:focus-visible .conversion-drawer-tab__open-close path,
.digital-platform__conversion-drawer .conversion-drawer-tab:hover:not(:has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__open-close path {
  fill: var(--tab-open-close__color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__message {
  color: var(--tab__color);
  text-transform: none;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__offer-count {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  width: 1.5em;
  color: var(--tab-offer-count__color);
  background-color: var(--tab-offer-count__background-color);
  border-radius: 100%;
  transition-property: color, background-color;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls {
  display: none;
  height: calc(100% +  18px );
  margin-left: 75px;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  cursor: default;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button {
  display: flex;
  height: 30px;
  width: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--tab-pagination-controls__background-color);
  border-radius: 100%;
  transition-property: color, background-color;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button path {
  fill: var(--tab-pagination-controls__color);
  transition: fill 200ms ease-in;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button:hover {
  background-color: var(--tab-pagination-controls__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button:hover path {
  fill: var(--tab-pagination-controls__color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button[disabled] {
  background-color: var(--tab-pagination-controls__background-color--disabled);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls button[disabled] path {
  fill: var(--tab-pagination-controls__color--disabled);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__pages {
  height: fit-content;
  width: 20px;
  min-width: max-content;
  font-size: 12px;
  color: var(--tab-pagination-controls__color);
}
.digital-platform__conversion-drawer .conversion-drawer-tab__open-close {
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: transform 500ms cubic-bezier(0.28, 0.47, 0.57, 0.97), background-color 200ms ease-in;
}
.digital-platform__conversion-drawer .conversion-drawer-tab__open-close path {
  fill: var(--tab__color);
  transition: fill 200ms ease-in;
}
@supports (transform: translateX(calc(50dvw - 50%)) translateY(calc(-100% + 1px))) {
  .digital-platform__conversion-drawer .conversion-drawer-tab {
    transform: translateX(calc(50dvw - 50%)) translateY(calc(-100% + 1px));
  }
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab {
  background-color: var(--tab__background-color--open);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:focus-visible,
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:hover:not( :has(.conversion-drawer-tab__pagination-controls:hover)) {
  background-color: var(--tab__background-color--open--hover);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:focus-visible .conversion-drawer-tab__offer-count,
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:hover:not( :has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__offer-count {
  color: var(--tab-offer-count__color--open);
  background-color: var(--tab-offer-count__background-color--open);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:focus-visible .conversion-drawer-tab__open-close,
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:hover:not( :has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__open-close {
  background-color: var(--tab-pagination-controls__background-color--hover);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:focus-visible .conversion-drawer-tab__open-close path,
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab:hover:not( :has(.conversion-drawer-tab__pagination-controls:hover)) .conversion-drawer-tab__open-close path {
  fill: var(--tab-pagination-controls__color--hover);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab__offer-count {
  color: var(--tab-offer-count__color--open);
  background-color: var(--tab-offer-count__background-color--open);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab__message {
  color: var(--tab__color--open);
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab__open-close {
  transform: rotate(180deg);
  padding-bottom: 2px;
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab__open-close path {
  fill: var(--tab__color--open);
}
.digital-platform__conversion-drawer.loading .conversion-drawer-tab {
  translate: 0 100%;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-tab__pagination-controls {
    display: flex;
    visibility: hidden;
  }
}
@media only screen and (min-width: 1024px) {
  .digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-tab__pagination-controls {
    visibility: visible;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-slider {
  display: grid;
  grid-auto-flow: column;
  gap: 15px;
  min-height: 160px;
  max-width: fit-content;
  margin-inline: auto;
  padding: 15px;
  overflow-x: auto;
  /* Scrolls on overflow */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* 
    Temporarily hide scroll-bar

    It's quite ugly on Maytag and the dark themes
  */
  scrollbar-width: none;
}
.digital-platform__conversion-drawer .conversion-drawer-slider > section {
  user-select: none;
  scroll-snap-align: center;
  scroll-behavior: smooth;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-slider {
    min-height: 185px;
    padding: 20px;
    gap: 20px;
    scroll-snap-type: x proximity;
  }
  .digital-platform__conversion-drawer .conversion-drawer-slider > section {
    scroll-snap-align: start;
    scroll-margin-inline: 20px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-slider:hover {
  cursor: grab;
}
.digital-platform__conversion-drawer .conversion-drawer-slider:active {
  cursor: grabbing;
}
.digital-platform__conversion-drawer .conversion-drawer-overlay {
  display: none;
  background-color: transparent;
  transition: background-color 500ms ease-in;
}
.digital-platform__conversion-drawer[data-open="true"] .conversion-drawer-overlay {
  display: block;
  height: 100vh;
  inset: 0;
  position: fixed;
  transform: translateY(-100%);
  z-index: -1;
  background-color: #1e1e1e80;
}
.digital-platform__conversion-drawer .conversion-drawer-action {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-action {
    margin-top: 24px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-action__button {
  display: flex;
  height: fit-content;
  width: fit-content;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--action__background-color);
  text-transform: none;
  text-decoration: none;
  color: var(--action__color);
  text-align: center;
  font-family: 'Avenir-Heavy', 'Avenir', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0;
  transition-property: background-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
}
.digital-platform__conversion-drawer .conversion-drawer-action__button svg path {
  transition: fill 200ms ease-in;
  fill: var(--action__color);
}
.digital-platform__conversion-drawer .conversion-drawer-action__button * {
  text-transform: none;
}
.digital-platform__conversion-drawer .conversion-drawer-action__button:hover,
.digital-platform__conversion-drawer .conversion-drawer-action__button:focus-visible {
  color: var(--action__color--hover);
  background-color: var(--action__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-action__button:hover path,
.digital-platform__conversion-drawer .conversion-drawer-action__button:focus-visible path {
  fill: var(--action__color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-action__button--icon {
  display: flex;
  align-items: center;
  gap: 5px;
}
.digital-platform__conversion-drawer .conversion-drawer-action__button--link {
  display: flex;
  padding-block: 5px;
  align-items: center;
}
.digital-platform__conversion-drawer .conversion-drawer-action__button--link span {
  height: fit-content;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper {
  width: fit-content;
  position: static;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="copy"] .conversion-drawer-action__status--success,
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="copy"] .conversion-drawer-action__status--failure {
  display: none;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="success"] .conversion-drawer-action__status--copy,
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="success"] .conversion-drawer-action__status--failure {
  display: none;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="success"] .conversion-drawer-action__coupon-code-button {
  background-color: var(--action__background-color--success);
  color: var(--action__color--success);
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="success"] .conversion-drawer-action__coupon-code-button path {
  fill: var(--action__color--success);
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="failure"] .conversion-drawer-action__coupon-code-button {
  display: none;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="failure"] .conversion-drawer-action__button {
  border-radius: 999px;
  border: 1px solid var(--action__border-color--error);
  color: var(--action__color--error);
  background: var(--action__background-color--error);
  user-select: text;
  cursor: text;
}
.digital-platform__conversion-drawer .conversion-drawer-action__coupon-code-wrapper[data-state="failure"] .conversion-drawer-action__button svg path {
  fill: var(--action__border-color--error);
}
.digital-platform__conversion-drawer .conversion-drawer-action__utility-message {
  margin-bottom: 4px;
}
.digital-platform__conversion-drawer .conversion-drawer-modal {
  min-width: 250px;
  width: 75%;
  max-width: 45ch;
  height: fit-content;
  margin: 0;
  padding: 0;
  background-color: var(--modal__background-color);
  border: none;
  border-radius: 0;
  overflow: visible;
  cursor: auto;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-modal {
    width: 66%;
    max-width: 600px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-modal::backdrop {
  background-color: transparent;
  cursor: pointer;
}
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger {
  display: inline-block;
  font-size: 14px;
  height: 0.75em;
  width: 0.75em;
  padding: 0;
  background: none;
  border-radius: 100%;
  position: relative;
}
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger svg path {
  fill: var(--modal-trigger__color);
}
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:hover,
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:focus-visible {
  background-color: var(--modal-trigger__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:hover svg path#i_line,
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:focus-visible svg path#i_line,
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:hover path#i_dot,
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger:focus-visible path#i_dot {
  fill: var(--modal-trigger__color--hover);
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-modal__trigger {
    font-size: 16px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-modal__trigger-click-target {
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  transform: translateX(-0.375em) translateY(-0.375em);
}
.digital-platform__conversion-drawer .conversion-drawer-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(calc(-100% - 10px));
}
.digital-platform__conversion-drawer .conversion-drawer-modal__close svg {
  height: initial;
}
.digital-platform__conversion-drawer .conversion-drawer-modal__container {
  height: fit-content;
  max-height: 70vh;
  padding: 15px;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-modal__container {
    padding: 30px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-modal__container p {
  font-family: 'Avenir-Roman', 'Avenir', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: 0;
  text-transform: none;
}
.digital-platform__conversion-drawer .conversion-drawer-modal__container p:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-modal__container p {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-modal__container p,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h1,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h2,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h3,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h4,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h5,
.digital-platform__conversion-drawer .conversion-drawer-modal__container h6 {
  color: var(--modal__color);
}
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button {
  color: var(--modal-close__color);
  background-color: var(--modal-close__background-color);
  user-select: auto;
}
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button:hover,
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button:focus-visible {
  color: var(--modal-close__color--hover);
  background-color: var(--modal-close__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button--icon svg path {
  fill: var(--modal-close__color);
}
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button--icon:hover,
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button--icon:focus-visible {
  outline-color: var(--modal-close__background-color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button--icon:hover svg path,
.digital-platform__conversion-drawer .conversion-drawer-modal .conversion-drawer-action__button--icon:focus-visible svg path {
  fill: var(--modal-close__color--hover);
}
.digital-platform__conversion-drawer .conversion-drawer-modal[open] {
  position: fixed;
  top: calc(-100vh + 100%);
  transform: translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%));
}
.digital-platform__conversion-drawer .conversion-drawer-modal[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
@supports (transform: translateX(calc(50dvw - 50%)) translateY(calc(50dvh - 50%))) {
  .digital-platform__conversion-drawer .conversion-drawer-modal[open] {
    top: calc(-100dvh + 100%);
    transform: translateX(calc(50dvw - 50%)) translateY(calc(50dvh - 50%));
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card {
  display: grid;
  min-height: fit-content;
  height: 100%;
  width: 280px;
  grid-template-rows: 1fr max-content;
  padding: 15px;
  color: var(--text-card__color);
  background-color: var(--text-card__background-color);
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card {
    width: 330px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card > :first-child {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: min-content max-content;
  grid-template-areas: "overline date" "main-content main-content";
  gap: 17px;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card > :first-child {
    gap: 20px 10px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__main-content {
  grid-area: main-content;
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__overline,
.digital-platform__conversion-drawer .conversion-drawer-text-card__headline {
  text-transform: none;
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__overline {
  font-family: 'Avenir-Heavy', 'Avenir', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card__overline {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__end-date {
  height: fit-content;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  grid-area: date;
  align-self: start;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card__end-date {
    font-size: 12px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__headline {
  display: inline;
  font-family: 'Avenir-Heavy', 'Avenir', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0.2px;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card__headline {
    font-size: 16px;
    letter-spacing: 0.8px;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__body,
.digital-platform__conversion-drawer .conversion-drawer-text-card .conversion-drawer-action__utility-message {
  font-size: 12px;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .digital-platform__conversion-drawer .conversion-drawer-text-card__body,
  .digital-platform__conversion-drawer .conversion-drawer-text-card .conversion-drawer-action__utility-message {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__body {
  margin-top: 6px;
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__body a {
  text-decoration: underline;
}
.digital-platform__conversion-drawer .conversion-drawer-text-card__body a:hover,
.digital-platform__conversion-drawer .conversion-drawer-text-card__body a:focus-visible {
  opacity: 0.8;
}
