----------------------------
| *********  CSS ********* |
---------------------------- 

/* Card Displays */
/* Comment in to hide card */
/* Add one for each card */
/* #hsd-sh-nissan-MODELlower {display: none !important;} */

/* Inner Card Displays (add one for each model)*/
/* Comment out to show offer */
/* Show one at a time */

/* |==---------------==| */
/* Nissan MODEL */
/* Lease Offer */
/* #hsd-sh-nissan-MODELlower .hsd-sh-lease,
#hsd-sh-nissan-MODELlower .hsd-sh-lease-heading {
  display: none !important;
} */
/* Finance Offer */
#hsd-sh-nissan-MODELlower .hsd-sh-finance,
#hsd-sh-nissan-MODELlower .hsd-sh-finance-heading {
  display: none !important;
}
/* Miscelaneous Offer */
#hsd-sh-nissan-MODELlower .hsd-sh-miscellaneous,
#hsd-sh-nissan-MODELlower .hsd-sh-miscellaneous-heading {
  display: none !important;
}

/* Font Imports */
@font-face {
  font-family: "Nissan Brand";
  src: url("https://firebasestorage.googleapis.com/v0/b/hseo-cdn.appspot.com/o/OEM-Fonts%2FNissan%2FNissanBrand-Regular.ttf?alt=media&token=c0e0c5a5-e1d7-4486-9744-3ef36718d353");
}

/* Variables */
:root {
  /* SH = Specials Hub */

  --hsd-sh-custom-title-font-size: 32px;
  --hsd-sh-page-bkg-color: #f0ece8;
  /* Section Title */
  --hsd-sh-section-title-font-color: #000;
  --hsd-sh-section-title-font-family: "Nissan Brand";
  --hsd-sh-section-title-font-size: 32px;

  /*|==------==|*/
  /* Card Container */
  --hsd-sh-card-background-color: #fff;
  --hsd-sh-card-border-radius: 8px;
  --hsd-sh-card-border: 0;

  /* Top Half of Card */
  --hsd-sh-card-top-background-color: transparent;

  /*|==------==|*/
  /* Card Title */
  /* Year + Make Heading */
  --hsd-sh-card-title-ym-font-color: #000;
  --hsd-sh-card-title-ym-font-family: "Nissan Brand";
  --hsd-sh-card-title-ym-font-size: 13px;
  /* Model Heading */
  --hsd-sh-card-title-m-font-color: #000;
  --hsd-sh-card-title-m-font-family: "Nissan Brand";
  --hsd-sh-card-title-m-font-size: 22px;
  /* Trim Heading */
  --hsd-sh-card-title-t-font-color: #000;
  --hsd-sh-card-title-t-font-family: "Nissan Brand";
  --hsd-sh-card-title-t-font-size: 13px;

  /* Bottom Half of Card */
  --hsd-sh-card-bottom-background-color: transparent;

  /*|==------==|*/
  /* Card Offer */
  --hsd-card-offer-cont-border: 1px solid #d2d2d2;
  /* Card Offer Heading */
  --hsd-sh-card-offer-heading-font-color: #000;
  --hsd-sh-card-offer-heading-font-family: "Nissan Brand";
  --hsd-sh-card-offer-heading-font-size: 13px;

  /* Key */
  --hsd-sh-card-key-font-size: 12px;
  --hsd-sh-card-key-font-family: "Nissan Brand";
  --hsd-sh-card-key-font-color: #767676;
  /* Value */
  --hsd-sh-card-value-font-size: 32px;
  --hsd-sh-card-value-font-family: "Nissan Brand";
  --hsd-sh-card-value-font-color: #000;

  /* Signing */
  --hsd-sh-card-signing-font-size: 10px;

  /*|==------==|*/
  /* Card BTNs */
  --hsd-sh-card-btn-font-family: "Nissan Brand";
  --hsd-sh-card-btn-border-radius: 0;
  --hsd-sh-card-btn-font-size: 16px;
  --hsd-sh-card-btn-width: 100%;
  --hsd-sh-card-btn-height: 56px;

  /* Card BTN Pri */
  --hsd-sh-card-btn-pri-background: #b32535;
  --hsd-sh-card-btn-pri-font-color: #fff;
  --hsd-sh-card-btn-pri-border: 2px solid #b32535;
  /* Card BTN Pri Hover */
  --hsd-sh-card-btn-pri-background-hover: #000;
  --hsd-sh-card-btn-pri-font-color-hover: #b32535;
  --hsd-sh-card-btn-pri-border-hover: 2px solid #000;

  /* Card BTN Sec */
  --hsd-sh-card-btn-sec-background: #000;
  --hsd-sh-card-btn-sec-font-color: #fff;
  --hsd-sh-card-btn-sec-border: 2px solid #000;
  /* Card BTN Sec Hover */
  --hsd-sh-card-btn-sec-background-hover: #000;
  --hsd-sh-card-btn-sec-font-color-hover: #b32535;
  --hsd-sh-card-btn-sec-border-hover: 2px solid #000;

  /*|==---------==|*/
  /* Modal Trigger */
  --hsd-disclaimer-font-family: "Nissan Brand";
  --hsd-disclaimer-font-size: 12px;
  --hsd-disclaimer-font-color: #000;
  --hsd-disclaimer-border: ;

  /*|==-==|*/
  /* Modal */
  --hsd-modal-bkg-color: #fefefe;
  --hsd-modal-close-color: #aaaaaa;
  --hsd-modal-close-size: 28px;
  --hsd-modal-font-color: #000;
  --hsd-modal-font-size: 14px;
}
@media screen and (max-width: 460px) {
  :root {
    --hsd-sh-card-value-font-size: 26px;
  }
}

h1.ddc-page-title.font-weight-bold.bg-transparent.spacing-reset {
  margin: 0 auto !important;
  text-align: center !important;
}
.container-max-xl {
  margin: 0px !important;
  padding: 0px !important;
  max-width: 100% !important;
}

#hsd-specials-hub {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: var(--hsd-sh-page-bkg-color);
}

/* Page Title */
.hsd-custom-title {
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  font-size: var(--hsd-sh-custom-title-font-size) !important;
}

/* Specials Hub Hero */
.hsd-specials-hub-hero {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

/*  */
.hsd-sh-content-cont {
  max-width: 1440px;
  padding: 2rem;
  margin: 0 auto;
}

/* Specials Hub Grid */
.hsd-sh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1440px;
  width: fit-content;
  padding: 2rem;
}

/* |==---  --------------------  ---==| */
/* |==---  Specials Card Styles  ---==| */

.hsd-sh-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  width: 412px;
  min-height: 628px;
  height: 100%;
  /* height: 616px; */
  background-color: var(--hsd-sh-card-background-color);
  border-radius: var(--hsd-sh-card-border-radius);
  border: var(--hsd-sh-card-border);
}

/* |==---  ----------=----------------  ---==| */
/* |==---  Specials Top Section Styles  ---==| */
.hsd-sh-card-top {
  background: var(--hsd-sh-card-top-background-color);
}

/* Specials Card Title */
.hsd-sh-card-title-cont {
  display: flex;
  justify-content: space-between;
  padding: 32px 24px 16px;
}
.hsd-sh-card-title {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding-top: 2px;
}
.hsd-sh-card-title-year-make {
  color: var(--hsd-sh-card-title-ym-font-color);
  font-family: var(--hsd-sh-card-title-ym-font-family);
  font-size: var(--hsd-sh-card-title-ym-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 13px */
}
.hsd-sh-card-title-model {
  color: var(--hsd-sh-card-title-m-font-color);
  font-family: var(--hsd-sh-card-title-m-font-family);
  font-size: var(--hsd-sh-card-title-m-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 18px */
}
.hsd-sh-card-title-trim {
  color: var(--hsd-sh-card-title-t-font-color);
  font-family: var(--hsd-sh-card-title-t-font-family);
  font-size: var(--hsd-sh-card-title-t-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 13px */
}

/* |==---  -------------------  ---==| */
/* |==---  Specials Img Styles  ---==| */
.hsd-sh-card-image {
  width: 100%;
}

/* |==---  ------------------------------  ---==| */
/* |==---  Specials Bottom Section Styles  ---==| */

.hsd-sh-card-bottom {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  background: var(--hsd-sh-card-bottom-background-color);
}

/* |==---  ---------------------  ---==| */
/* |==---  Specials Offer Styles  ---==| */

.hsd-sh-offer {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

/* Lease Offer */
.hsd-sh-lease-heading,
.hsd-sh-finance-heading,
.hsd-sh-miscellaneous-heading {
  color: var(--hsd-sh-card-offer-heading-font-color);
  font-family: var(--hsd-sh-card-offer-heading-font-family);
  font-size: var(--hsd-sh-card-offer-heading-font-size) !important;
  margin: 0;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 13px */
}
.hsd-sh-lease {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* margin: 10px 0 42px; */
}

.hsd-sh-offer-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  border-right: var(--hsd-card-offer-cont-border);
  padding: 0 10px;
  /* padding: 24px 0; */
}

.hsd-sh-offer-value {
  color: var(--hsd-sh-card-value-font-color);
  font-family: var(--hsd-sh-card-value-font-family);
  font-size: var(--hsd-sh-card-value-font-size) !important;
  width: fit-content;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 93.75% */
}
.hsd-sh-offer-key {
  color: var(--hsd-sh-card-key-font-color);
  font-family: var(--hsd-sh-card-key-font-family);
  font-size: var(--hsd-sh-card-key-font-size) !important;

  /* Figma Font Styles */
  text-align: center;
  font-style: normal;
  font-weight: 300;
  line-height: 25px;
}

.hsd-signing-key {
  font-size: var(--hsd-sh-card-signing-font-size) !important;
}

/* Finance Offer */

.hsd-sh-finance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* margin: 10px 0 42px; */
}

/* Miscellaneous Offer */
.hsd-sh-miscellaneous {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 63.5px; */
}

.hsd-sh-last-detail {
  border-right: 0;
}

/* |==---  -----------------------------  ---==| */
/* |==---  Specials BTN Disc Cont Styles  ---==| */
.hsd-sh-btn-disc-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  /* gap: 8px; */
}

/* |==---  --------------------  ---==| */
/* |==---  Specials BTNs Styles  ---==| */

.hsd-sh-btn-cont {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  gap: 8px;
  width: 100%;
}

/* Card BTNs */
.hsd-sh-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--hsd-sh-card-btn-font-family);
  font-size: var(--hsd-sh-card-btn-font-size) !important;
  width: var(--hsd-sh-card-btn-width);
  height: var(--hsd-sh-card-btn-height);
  border-radius: var(--hsd-sh-card-btn-border-radius);
  text-decoration: none !important;
  transition: all 0.25s;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

/* Card BTN Pri */
.hsd-sh-btn-pri {
  background: var(--hsd-sh-card-btn-pri-background);
  color: var(--hsd-sh-card-btn-pri-font-color) !important;
  border: var(--hsd-sh-card-btn-pri-border);
}
.hsd-sh-btn-pri:hover {
  background: var(--hsd-sh-card-btn-pri-background-hover);
  color: var(--hsd-sh-card-btn-pri-font-color-hover) !important;
  border: var(--hsd-sh-card-btn-pri-border-hover);
}

/* Card BTN Sec */
.hsd-sh-btn-sec {
  background: var(--hsd-sh-card-btn-sec-background);
  color: var(--hsd-sh-card-btn-sec-font-color) !important;
  border: var(--hsd-sh-card-btn-sec-border);
}
.hsd-sh-btn-sec:hover {
  background: var(--hsd-sh-card-btn-sec-background-hover);
  color: var(--hsd-sh-card-btn-sec-font-color-hover) !important;
  border: var(--hsd-sh-card-btn-sec-border-hover);
}

/* |==---  --------------------  ---==| */
/* |==---  Specials BTNs Styles  ---==| */
.hsd-sh-disc-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: center;
  border-bottom: var(--hsd-disclaimer-border);
  color: var(--hsd-disclaimer-font-color);
  font-family: var(--hsd-disclaimer-font-family);
  font-size: var(--hsd-disclaimer-font-size) !important;
  cursor: pointer;
  margin: 0 24px 14px;
  padding: 0 0 2px;

  /* Figma Font Styles */
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 12px */
}

/*|==-==|*/
/* Modal */

@media screen and (max-width: 1325px) {
  .hsd-sh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 890px) {
  .hsd-sh-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 460px) {
  .hsd-sh-card {
    width: 100%;
  }
}

.hsd-sh-modal {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  background-color: var(--hsd-modal-bkg-color);
  color: var(--hsd-modal-font-color) !important;
  padding: 20px;
  overflow-y: scroll;
}

.hsd-sh-modal-head {
  position: sticky;
  top: -20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  /* padding: 20px 0; */
  background-color: var(--hsd-modal-bkg-color);
}

.hsd-sh-modal-close {
  text-align: right;
  cursor: pointer;
  color: var(--hsd-modal-close-color);
  font-size: var(--hsd-modal-close-size) !important;
}
.hsd-sh-modal-content {
  font-size: var(--hsd-modal-font-size) !important;
  color: var(--hsd-modal-font-color) !important;
}