/* MK Sale v1.0.8 — exact title values supplied from the live site CSS. */
.mk-sale,
.mk-sale *{box-sizing:border-box}

.mk-sale{
  --mk-sale-text:#ffffff;
  margin:28px auto;
  max-width:2048px;
  padding:0;
  width:100%;
}
.mk-sale__banner {
    aspect-ratio: 2048 / 341;
    background-color: #78a6c7;
    background-image: linear-gradient(
        180deg,
        #2f7fad 0%,
        #5e9fc4 48%,
        #cbdde4 100%
    );
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--mk-sale-text);
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.mk-sale__banner:hover,
.mk-sale__banner:focus{color:var(--mk-sale-text);text-decoration:none}
.mk-sale__content{
  color:inherit;
  display:block;
  inset:0;
  padding:0;
  position:absolute;
  width:100%;
}
/* The coordinates below mirror the existing 2048 x 341 desktop Sale banner. */
.mk-sale__title{
  color:inherit;
  display:block;
  font-family:"GothamProMedium","Gotham Pro Medium",Arial,Helvetica,sans-serif !important;
  font-size:clamp(28px,2.65vw,44px);
  font-weight:400 !important;
  left:0;
  letter-spacing:.12px;
  line-height:1.08;
  margin:0;
  position:absolute;
  right:0;
  text-transform:uppercase;
  top:17.4%;
  -webkit-font-smoothing:antialiased;
}
.mk-sale__title--mobile{display:none}
.mk-sale__text{
  color:inherit;
  display:block;
  font-family:"GothamProRegular","Gotham Pro Regular",Arial,Helvetica,sans-serif !important;
  font-size:clamp(14px,1.18vw,24px);
  font-weight:400 !important;
  left:4%;
  letter-spacing:.18px;
  line-height:1.24;
  margin:0;
  max-width:92%;
  position:absolute;
  right:4%;
  text-transform:uppercase;
  top:51.8%;
  white-space:pre-line;
  -webkit-font-smoothing:antialiased;
}
.mk-sale__cta{
  color:inherit;
  display:block;
  font-family:"GothamProBold","Gotham Pro Bold",Arial,Helvetica,sans-serif !important;
  font-size:clamp(11px,.82vw,17px);
  font-weight:400 !important;
  left:0;
  letter-spacing:.08px;
  line-height:1.15;
  margin:0;
  position:absolute;
  right:0;
  text-transform:uppercase;
  top:80.6%;
  -webkit-font-smoothing:antialiased;
}

@media(max-width:1035px){
  .mk-sale{margin:18px auto 24px}
}

/* Existing mobile banner is 1125 x 843. Positions match its original quiet vertical rhythm. */
@media(max-width:760px){
  .mk-sale{margin:0;padding:0;width:100%}
  .mk-sale__banner{aspect-ratio:1125 / 843}
  .mk-sale__title--desktop{display:none}
  /* Mobile: leave a real gap after the two-line heading.
     The previous version let the description climb into the second title line. */
  .mk-sale__title--mobile{
    display:block;
    font-family:"GothamProMedium","Gotham Pro Medium",Arial,Helvetica,sans-serif !important;
    font-size:clamp(32px,7.4vw,34px);
    font-weight:400 !important;
    left:0;
    letter-spacing:0;
    line-height:.71;
    max-width:100%;
    right:0;
    top:14.2%;
    white-space:pre-line;
  }
  .mk-sale__text{
    font-family:"GothamProRegular","Gotham Pro Regular",Arial,Helvetica,sans-serif !important;
    font-size:clamp(12px,3.60vw,16px);
    letter-spacing:.02px;
    left:6%;
    line-height:1.30;
    max-width:88%;
    right:6%;
    top:52.8%;
  }
  .mk-sale__cta{
    font-family:"GothamProBold","Gotham Pro Bold",Arial,Helvetica,sans-serif !important;
    font-size:clamp(11px,3.00vw,13px);
    left:0;
    right:0;
    top:83.5%;
  }
}