/* =============================================================================
  AT-HP-components-v1.css  |  Ann Taylor homepage component library
  Replaces: AT-HP-2024-CSS-Constantv6.css
            AT-HP-2026-CSS-092826.css
            the hp-promobar block that lived in the HP inline <style>

  Upload to: webassets/AT-HP-components-v1.css  (webassets ROOT — the
  @font-face urls below are relative to that folder)

  RULES FOR THIS FILE
  1. Components only. No date-stamped classes (hpMain102326 etc.) ever go here.
  2. One owner. Changes = edit the component in place, then save as -v2, -v3…
     and update the <link> in the HP asset (the version in the filename is the
     cache-buster).
  3. Per-campaign values (colors, images, positions) are CSS custom properties
     set inline on the section, never new selectors.
  4. No new !important. Existing ones are legacy and get removed as components
     are touched.
  5. Adobe Target hooks: <section> elements for hp-rfk and hp-curalate also
     carry g3-rfk / g3-curalate (Target selects section.g3-rfk and
     section.g3-curalate). Keep those classes in markup; never style them.

  Sections
    1. Foundation, utilities and core components   (was Constantv6)
    2. HP section components and site overrides   (was changeout 092826)
    3. hp-promobar component (+ --tiles modifier) (was HP inline <style>)
============================================================================= */


/* =============================================================================
   1. FOUNDATION, UTILITIES AND CORE COMPONENTS
============================================================================= */

.homepage {
  max-width: none;
  margin-top: 0px;
}

@font-face { font-family: modernline; src: url("font/modernline.otf?$staticlink$") format("opentype"); }

@font-face { font-family: "Ethic Serif"; src: url("font/ethicserif-light-webfont.woff2?$staticlink$") format("woff2"); }

@font-face { font-family: "Ethic Serif"; src: url("font/ethicserif-lightitalic-webfont.woff2?$staticlink$") format("woff2"); font-style: italic; }

.hp-root {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  margin: 0px auto;
  padding: 0px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: sofia-pro, sans-serif;
  font-size: 1.56vw;
  text-decoration-skip-ink: none;
}

@media (min-width: 1024px) and (max-width: 1680px) {
  .hp-root {
    font-size: 0.95vw !important;
  }
}

@media (min-width: 1680px) {
  .hp-root {
    font-size: 1em;
  }
}

.hp-root *,
.hp-root ::before,
.hp-root ::after {
  box-sizing: border-box;
}

.hp-root img {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  max-width: none;
}

.hp-root a {
  color: inherit;
}

.hp-root h1,
.hp-root h2,
.hp-root h3,
.hp-root h4,
.hp-root h5,
.hp-root h6,
.hp-root blockquote,
.hp-root p {
  position: relative;
  display: block;
  margin: 0px;
}

.hp-root p {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

@media (min-width: 1024px) {
  .hp-root p {
    font-size: 1.164em;
  }
}

.hp-root h1 {
  color: inherit;
  font-family: kudryashev-d-contrast, serif;
  font-size: 4.21875em;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
}

.hp-root h2 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 2.53125em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.hp-root h3 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 2.53125em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.hp-root h4 {
  color: inherit;
  font-family: kudryashev-d-contrast, serif;
  font-size: 4.21875em;
  font-weight: 400;
  line-height: 1.15;
}

.hp-root h5 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 4.455em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.hp-root h6 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 1.755em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.hp-root blockquote {
  color: inherit;
  font-family: kudryashev-d-contrast, serif;
  font-size: 4.21875em;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
}

@media (min-width: 1024px) {
  .hp-root h2 {
    font-size: 1.25em;
  }

  .hp-root h3 {
    font-size: 1.5132em;
  }

  .hp-root h4 {
    font-size: 4.1904em;
  }

  .hp-root h5 {
    font-size: 4.074em;
  }

  .hp-root h6 {
    font-size: 1.8915em;
  }

  .hp-root blockquote {
    font-size: 2.91em;
  }
}

.hp-root h3 > sup,
.hp-root h4 > sup {
  font-size: 0.7em;
  vertical-align: 0.4em;
  margin-left: 0.1em;
}

.hp-root section {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.hp-root picture {
  position: relative;
  display: block;
  width: 100%;
}

.hp-root picture img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
}

.hp-root .hp-video-responsive video {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0px;
  display: none;
}

@media (min-width: 1024px) {
  div.hp-16-9::before,
  section.hp-16-9::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

.hp-rel {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.hp-abs {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.hp-flex-break {
  flex-basis: 100%;
  height: 0px;
}

.hp-modernline {
  color: inherit;
  font-family: modernline, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: normal;
  padding-top: 0.2em;
  width: 100%;
}

.hp-kudryashev {
  display: inline-block;
  color: inherit;
  font-family: kudryashev-d-contrast, serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
}

.hp-it {
  font-style: italic;
}

.hp-white {
  color: rgb(255, 255, 255);
}

.hp-black {
  color: rgb(0, 0, 0);
}

.hp-sb {
  font-weight: 600 !important;
}

.hp-bold {
  font-weight: 700 !important;
}

.hp-fadein {
  opacity: 0;
}

/* ---------- CTAs ---------- */

.hp-root a.hp-cta--block,
.hp-root span.hp-cta--block {
  display: inline-block;
  position: relative;
  height: auto;
  width: auto;
  margin: 0px 0.8em;
  padding: 0px 2em;
  overflow: hidden;
  font-family: sofia-pro, sans-serif;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 2.3;
  letter-spacing: normal;
  text-align: center;
  color: inherit;
  border: 0.08em solid;
  white-space: nowrap;
  text-decoration: none !important;
}

.hp-root a.hp-cta--block-solid,
.hp-root span.hp-cta--block-solid {
  display: inline-block;
  position: relative;
  margin: 0px 0.8em;
  overflow: hidden;
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-align: center;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  white-space: nowrap;
  text-decoration: none !important;
}

.hp-root a.hp-cta--block-solid--black {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

.hp-root a.hp-cta--block--outline,
.hp-root span.hp-cta--block--outline {
  display: inline-block;
  position: relative;
  height: auto;
  width: auto;
  margin: 0px 0.4em;
  padding: 0px 2.4em;
  overflow: hidden;
  font-family: sofia-pro, sans-serif;
  font-size: 2.7em;
  font-weight: 400;
  line-height: 2.6;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: transparent;
  border: 1px solid;
  white-space: nowrap;
  text-decoration: none !important;
}

.hp-root a.hp-cta--block::after,
.hp-root span.hp-cta--block::after,
.hp-root a.hp-cta--mob-ul-dt-block::after,
.hp-root span.hp-cta--mob-ul-dt-block::after,
.hp-root a.hp-cta--block-solid::after,
.hp-root span.hp-cta--block-solid::after {
  content: "";
  display: block;
  padding-top: 0.2em;
}

.hp-root a.hp-cta--block--tight,
.hp-root span.hp-cta--block--tight {
  padding: 0px 1.2em !important;
}

.hp-root a.hp-cta--block--med,
.hp-root span.hp-cta--block--med {
  padding: 0px 1.6em !important;
}

.hp-root a.hp-cta--ul,
.hp-root span.hp-cta--ul {
  display: inline-block;
  position: relative;
  font-family: sofia-pro, sans-serif;
  font-size: 2.5em;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0px 0.95em;
}

.hp-root a.hp-cta--ul--kud,
.hp-root span.hp-cta--ul--kud {
  display: inline-block;
  position: relative;
  font-family: kudryashev-d-contrast, serif;
  font-size: 2.86875em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0px;
}

.hp-root a.hp-cta--mob-ul-dt-block,
.hp-root span.hp-cta--mob-ul-dt-block {
  display: inline-block;
  position: relative;
  font-family: sofia-pro, sans-serif;
  font-size: 2.025em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0px 1em;
  white-space: nowrap;
}

.hp-plus {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0.2em 0px 0px;
  text-align: center;
  font-family: sofia-pro, sans-serif;
  font-size: 2.7em;
  font-weight: 400;
  line-height: 0.75;
  letter-spacing: 0.02em;
  color: inherit;
}

.hp-ctas {
  text-align: center;
}

@media (min-width: 1024px) {
  .hp-root a.hp-cta--block,
  .hp-root span.hp-cta--block {
    font-size: 1em;
    padding: 0px 2.5em;
    line-height: 2.3;
  }

  .hp-root a.hp-cta--block-solid {
    font-size: 1em;
    padding: 0px 1.8em;
    line-height: 2.3;
  }

  .hp-root a.hp-cta--block--outline,
  .hp-root span.hp-cta--block--outline {
    padding: 0px 2.4em;
    font-size: 1em;
    line-height: 2.6;
  }

  .hp-root a.hp-cta--ul,
  .hp-root span.hp-cta--ul {
    font-size: 1.364em;
    margin: 0px 1em;
  }

  .hp-root a.hp-cta--ul--kud,
  .hp-root span.hp-cta--ul--kud {
    font-size: 1.3125em;
  }

  .hp-root a.hp-cta--mob-ul-dt-block,
  .hp-root span.hp-cta--mob-ul-dt-block {
    margin: 0px 0.8em;
    padding: 0px 2.8em;
    overflow: hidden;
    font-size: 1.164em;
    line-height: 2.3;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    text-decoration: none !important;
  }
}

a.hp-cta--block--no-pad {
  padding-left: 0px;
  padding-right: 0px;
}

.hp-ctas {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

/* ---------- Promo offer / eyebrow / coupon ---------- */

.hp-promo-offer {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-promo-offer__lg,
.hp-promo-offer__sm {
  display: block;
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0px;
}

.hp-promo-offer__lg sup {
  position: absolute;
  font-size: 0.5em;
  top: 0.2em;
  margin: 0px 0px 0px 0.05em;
  line-height: inherit;
}

.hp-coupon-area {
  display: inline-block;
  position: relative;
  width: 100%;
  font-family: sofia-pro, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.01em;
}

.hp-coupon-area a {
  color: inherit;
  text-decoration: underline;
}

.hp-eyebrow {
  display: inline-block;
  font-family: sofia-pro, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.06em;
  width: 100%;
}

@media (min-width: 1024px) {
  .hp-coupon-area {
    font-size: 1.164em;
  }

  .hp-eyebrow {
    font-size: 1.164em;
  }
}

/* ---------- hp-carousel ---------- */

.hp-carousel {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  opacity: 0;
}

.hp-carousel__stage {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px;
  overflow: hidden;
}

.hp-carousel__offset {
  position: relative;
  left: 0px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}

.hp-carousel__slider {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}

a.hp-carousel__slide {
  color: inherit;
  text-decoration: none;
}

.hp-carousel__slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}

.hp-carousel__slide img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
}

.hp-carousel__arrow {
  display: block;
  position: absolute;
  width: 4%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  margin: 0px 4.8em;
  z-index: 500;
  cursor: pointer;
}

.hp-carousel__arrow--l {
  left: 0px;
}

.hp-carousel__arrow--r {
  right: 0px;
}

/* ---------- JS-driven states (AT-HP-components-v1.js; replaces GSAP) ---------- */

.hp-carousel.is-ready {
  opacity: 1;
  transition: opacity 0.5s;
}

.hp-carousel__slider {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  touch-action: pan-y;
}

.hp-carousel__arrow {
  touch-action: manipulation;
}

/* .hp-anim--blink[data-animspeed="0.5"]: on/off every N seconds */
.hp-anim--blink {
  animation: hp-blink calc(var(--hp-blink-speed, 1s) * 2) step-end infinite;
}

@keyframes hp-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* .hp-fade: fades in once its images load */
.hp-fade {
  transition: opacity 0.3s 0.3s;
}

.hp-fade.is-loaded {
  opacity: 1;
}

/* .hpSeeAll__Trigger toggles the sibling .hpDD */
.hpDD {
  overflow: hidden;
  transition: height 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hp-anim--blink {
    animation: none;
  }

  .hp-carousel__slider,
  .hpDD {
    transition: none;
  }
}

/* ---------- Disclaimer / separator ---------- */

/* "Details" opens the promo modal anywhere on the HP */
.hp-root .global-promo-modal-btn {
  cursor: pointer;
  text-decoration: underline;
}

.hp-disclaimer {
  display: block;
  position: relative;
  width: 100%;
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 1.51875em;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: normal;
  z-index: 100;
}

.hp-disclaimer--fixed {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 1em;
  left: 0px;
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 1.51875em;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: normal;
  z-index: 100;
}

.hp-disclaimer > a,
.hp-disclaimer--fixed > a {
  display: inline-block;
  color: inherit;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.hp-sep {
  position: relative;
  width: 1px;
  min-height: 1em;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  font-size: 1.85625em;
}

@media (min-width: 1024px) {
  .hp-disclaimer {
    font-size: 0.9312em;
  }

  .hp-disclaimer--fixed {
    font-size: 0.7275em;
    bottom: 1.8em;
  }
}

.hp-disclaimer > sup,
.hp-disclaimer--fixed > sup {
  font-size: 0.7em;
  vertical-align: top;
  top: 0px;
  line-height: inherit;
}

picture.hp-hero-bg--abs,
img.hp-hero-bg--abs {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  margin: 0px;
  z-index: -1;
}

/* ---------- hp-mobile-cats (mobile quicklinks) ----------
   Native horizontal scroll (replaces the GSAP Draggable slider). */

.hp-mobile-cats__content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 9em;
  margin: 0px;
  padding: 1.8em 0px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.hp-mobile-cats__content::-webkit-scrollbar {
  display: none;
}

.hp-mobile-cats__slider {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px 3.5em;
  overflow: visible;
  white-space: nowrap;
}

.hp-mobile-cats__slider a {
  display: inline-block;
  padding: 0px 1em;
  font-style: normal;
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: sofia-pro, sans-serif;
  font-size: 2.3625em;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.04em;
  margin: 0px;
  background-color: rgb(238, 238, 238);
}

.hp-mobile-cats__slider a:not(:first-of-type) {
  margin-left: 0.7em;
}

@media (min-width: 1024px) {
  section.hp-mobile-cats {
    display: none;
  }
}

/* ---------- hp-cats ---------- */

section.hp-cats {
  padding-top: 5em;
  padding-bottom: 8.2em;
}

.hp-cats .hp-content {
  position: relative;
  width: 92.5%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
  overflow: visible;
  text-align: left;
}

.hp-cats .hp-cats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7em 0px;
  width: 100%;
  height: auto;
  margin: 2em auto 0px;
  padding: 0px;
  overflow: visible;
}

.hp-cats a.hp-cat {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  min-width: 0px;
  text-align: center;
  font-size: 1em;
}

.hp-cats a.hp-cat .hp-cat__img {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}

.hp-cats a.hp-cat .hp-cat__img > img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  z-index: -1;
}

.hp-cats a.hp-cat > span {
  display: inline-block;
  color: rgb(0, 0, 0);
  font-family: kudryashev-d-contrast, serif;
  font-size: 2.86875em;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0.9em 0px 0px;
}

@media (min-width: 1024px) {
  section.hp-cats {
    padding-top: 2em;
    padding-bottom: 3.8em;
  }

  .hp-cats .hp-content {
    width: 91%;
  }

  .hp-cats .hp-cats__grid {
    width: 95.4%;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px 0.75em;
    margin: 0px auto;
    padding-top: 1em;
  }

  .hp-cats a.hp-cat {
    margin: 0px;
  }

  .hp-cats a.hp-cat > span {
    margin-top: 0.4em;
    font-size: 1.3125em;
  }
}

section.hp-cats--v1 {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px 0px 4%;
  padding: 0px;
  overflow: hidden;
  text-align: left;
}

.hp-cats--v1 > .hp-rel {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}

.hp-cats--v1 .hp-cats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 3em 2.2em;
  width: 100%;
  height: auto;
  margin: 1.8em 0px;
  padding-left: 2em;
  overflow-x: scroll;
  scrollbar-width: none;
}

.hp-cats--v1 a.hp-cat {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 0px 0px 0.2em;
  font-size: 1.35em;
  text-align: left;
}

.hp-cats--v1 a.hp-cat > img {
  display: block;
  position: relative;
  width: auto;
  height: 330px;
  margin: 0px;
}

.hp-cats--v1 a.hp-cat .hp-cat__title {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  font-family: sofia-pro, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 2px;
  color: rgb(0, 0, 0);
  text-align: center;
  text-transform: uppercase;
}

.hp-cats--v1 .hp-cats__title {
  margin: 0px 0px 2%;
  font-family: sofia-pro;
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  letter-spacing: 2px;
  color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
  .hp-cats--v1 > .hp-rel {
    width: 90.2778%;
  }

  .hp-cats--v1 .hp-cats__grid {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2em;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
  }

  .hp-cats--v1 a.hp-cat > img {
    width: 100%;
    height: auto;
  }

  .hp-cats--v1 a.hp-cat .hp-cat__title {
    padding: 0.9em 0px 0px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .hp-cats--v1 .hp-section-title {
    text-align: center;
    margin-bottom: 1.4em;
  }
}

/* ---------- hp-promo (classic promo banner) ---------- */

.hp-promo {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}

.hp-promo__content {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0px auto;
  padding: 1.6em 0px 0.3em;
  overflow: hidden;
}

.hp-promo__txt {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  white-space: nowrap;
}

.hp-promo .hp-eyebrow {
  padding-bottom: 1em;
  font-size: 2em;
  font-weight: 600;
}

.hp-promo a.hp-cta--ul {
  margin: 0.45em 0px 0.2em;
  padding-bottom: 1em;
  font-size: 15px;
  font-weight: 500;
}

.hp-promo > h1 {
  font-family: sofia-pro, sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.hp-promo h2 {
  font-size: var(--hp-promo-head-fs-m, 3.5em);
  line-height: 1.3;
  letter-spacing: normal;
  padding-bottom: 0.2em;
}

.hp-promo h3 {
  font-size: 1.5em;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.hp-promo__txt--left {
  width: 100%;
  text-align: center;
}

.hp-promo__txt--left p {
  font-size: 2em;
  padding-bottom: 0.2em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hp-promo__txt--right {
  text-align: center;
  width: 65%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
}

.hp-promo__txt--center {
  text-align: center;
  padding: 1.5em 0px 0.5em;
}

.hp-promo__txt--center > div {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.hp-promo__txt .hp-sep {
  height: 50%;
  margin: 0px;
  transform: translateY(40%);
}

.hp-promo__txt .hp-coupon-area {
  font-size: 1.3em;
  margin-top: 0.5em;
}

.hp-promo .hp-disclaimer {
  margin-top: -0.3em;
  padding-bottom: 1.8em;
  font-size: 1.2em;
}

@media (min-width: 1024px) {
  .hp-promo__content {
    width: 92%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 2em 0px 0.3em;
  }

  .hp-promo .hp-eyebrow {
    padding-bottom: 0.2em;
    font-size: 0.95em;
  }

  .hp-promo h2 {
    font-size: var(--hp-promo-head-fs-dt, 1.5em);
    padding-bottom: 0em;
  }

  .hp-promo__txt {
    width: auto;
  }

  .hp-promo a.hp-cta--ul {
    margin: 0.45em 0.8em 0.2em;
    padding-bottom: 0.3em;
    font-size: 1em;
  }

  .hp-promo__txt .hp-sep {
    height: 1.5em;
    margin: 0px 1.3em;
    transform: none;
  }

  .hp-promo__txt--left {
    width: auto;
    text-align: left;
    padding-left: 4em;
  }

  .hp-promo__txt--left p {
    font-size: 1.1em;
    padding-bottom: 0px;
  }

  .hp-promo__txt--center {
    padding: 0px 0px 0.5em;
  }

  .hp-promo__txt--right {
    display: block;
    text-align: right;
    width: auto;
    padding-right: 0px;
    padding-top: 0.5em;
    right: 0px;
  }

  .hp-promo__txt .hp-coupon-area {
    font-size: 0.8125em;
    margin-top: 0px;
  }

  .hp-promo .hp-disclaimer {
    margin-top: -0.5em;
    padding-bottom: 2.6em;
    font-size: 0.7em;
  }
}

/* 2+ CTAs in the right column: space them (a later rule zeroes CTA margins) */
.hp-root .hp-promo__txt--right a + a {
  margin-left: 1.6em;
}

@media (max-width: 1023px) {
  .hp-root .hp-promo__txt--right a + a {
    margin-left: 0;
  }
}

/* hp-promo--split: script line + "Details" on the left, headline in the
   middle, CTAs stacked on the right. On mobile: copy left, CTAs right.
   Same markup as the classic banner, just add the class. The section becomes
   the grid (.hp-promo__content uses display: contents), so the disclaimer
   can sit under the left line without moving it in the markup. */
.hp-root section.hp-promo.hp-promo--split {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "left   right"
    "center right"
    "disc   right";
  align-content: center;
  align-items: center;
  column-gap: 1em;
  padding: 3.2em 5.5% 3em;
  text-align: left;
}

.hp-root .hp-promo--split .hp-promo__content {
  display: contents;
}

.hp-root .hp-promo--split .hp-promo__txt {
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

.hp-root .hp-promo--split .hp-promo__txt--left {
  grid-area: left;
}

.hp-root .hp-promo--split .hp-promo__txt--center {
  grid-area: center;
}

.hp-root .hp-promo--split .hp-promo__txt--right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9em;
  text-align: right;
}

.hp-root .hp-promo--split .hp-promo__txt--left p {
  padding: 0;
  font-family: "Ethic Serif", baskerville-urw, serif;
  font-size: 2.7em;
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

.hp-root .hp-promo--split h2 {
  padding: 0.05em 0 0;
  font-size: var(--hp-promo-head-fs-m, 2.8em);
  line-height: 1.2;
}

.hp-root .hp-promo--split .hp-promo__txt--right a.hp-cta--ul,
.hp-root .hp-promo--split .hp-promo__txt--right a.hp-cta--ul + a {
  margin: 0;
  padding-bottom: 0.15em;
  font-size: 1.9em;
}

.hp-root .hp-promo--split .hp-disclaimer {
  grid-area: disc;
  width: auto;
  margin: 1.5em 0 0;
  padding: 0;
  font-size: 1em;
  text-align: left;
}

@media (min-width: 1024px) {
  .hp-root section.hp-promo.hp-promo--split {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "left center right"
      "disc center right";
    column-gap: 2em;
    padding: 1.9em 4.6% 1.9em;
  }

  .hp-root .hp-promo--split .hp-promo__txt--left {
    align-self: end;
  }

  .hp-root .hp-promo--split .hp-promo__txt--center {
    text-align: center;
  }

  .hp-root .hp-promo--split .hp-promo__txt--right {
    gap: 0.55em;
  }

  .hp-root .hp-promo--split .hp-promo__txt--left p {
    font-size: 2.1em;
  }

  .hp-root .hp-promo--split h2 {
    padding: 0;
    font-size: var(--hp-promo-head-fs-dt, 1.45em);
  }

  .hp-root .hp-promo--split .hp-promo__txt--right a.hp-cta--ul,
  .hp-root .hp-promo--split .hp-promo__txt--right a.hp-cta--ul + a {
    font-size: 0.85em;
  }

  .hp-root .hp-promo--split .hp-disclaimer {
    align-self: start;
    margin-top: 0.4em;
    font-size: 0.6em;
  }
}

/* =============================================================================
   hp-promo LAYOUTS (AT promo banner templates)
   Same markup as the classic banner: .hp-promo__content > .hp-promo__txt--left /
   --center / --right, then .hp-disclaimer. Add one layout class to the section:
     (none) ........ T1, 1b, 1c, 10   classic
     --split ....... T3a              script line left, CTAs stacked right
     --stack ....... T2               copy stacked left, CTAs right (all sizes)
     --stack-m ..... T3               classic desktop, stacked-left mobile (eyebrow on top)
     --duo ......... T6               two offers with a divider
     --title-l ..... T5 (+ --disc-right-m for T5b)  image title left
     --center ...... T9, 9b           everything centered on art
     --flank ....... T7, 7b           title in the middle, an offer each side
   Optional pieces:
     p.hp-promo__title--serif / --script   Ethic Serif title (T7, 9, 10)
     span.hp-promo__sub                    small caps line under a title (T10)
     picture.hp-promo__title-img           baked title art (T1c, 5, 5b, 9b)
     span.hp-promo__line + span.hp-promo__bar  "A | B" on desktop, 2 lines on mobile (T5)
     .hp-promo__offer                      one offer block (T6, 7; <a> for T7b)
     span.hp-promo__arrow                  the ▶ after a linked offer (T7b)
   Per-campaign knobs, set inline on the section:
     --hp-promo-img-dt / -m         background art (url() or a gradient). With
                                    these, set the color with background-color,
                                    not the background shorthand.
     --hp-promo-head-fs-dt / -m     headline size
     --hp-promo-title-fs-dt / -m    serif/script title size
     --hp-promo-title-w-dt / -m     image title width
============================================================================= */

/* ---------- shared pieces ---------- */

.hp-root section.hp-promo {
  background-image: var(--hp-promo-img-m, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp-root .hp-promo .hp-promo__title--serif,
.hp-root .hp-promo .hp-promo__title--script {
  padding: 0;
  font-family: "Ethic Serif", baskerville-urw, serif;
  font-size: var(--hp-promo-title-fs-m, 4em);
  font-style: normal;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
}

.hp-root .hp-promo .hp-promo__title--script {
  font-style: italic;
  letter-spacing: 0;
}

.hp-root .hp-promo .hp-promo__sub {
  display: block;
  margin-top: 0.35em;
  font-family: sofia-pro, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hp-root .hp-promo .hp-promo__title-img {
  display: block;
  width: var(--hp-promo-title-w-m, 55%);
  margin: 0 auto;
}

.hp-root .hp-promo .hp-promo__title-img img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-root .hp-promo .hp-promo__line {
  display: block;
}

.hp-root .hp-promo .hp-promo__bar {
  display: none;
}

.hp-root .hp-promo .hp-promo__offer {
  display: block;
  color: inherit;
  text-decoration: none;
  white-space: normal;
}

.hp-root .hp-promo .hp-promo__arrow {
  margin-left: 0.3em;
  font-size: 0.6em;
  vertical-align: 0.15em;
}

@media (min-width: 1024px) {
  .hp-root section.hp-promo {
    background-image: var(--hp-promo-img-dt, var(--hp-promo-img-m, none));
  }

  .hp-root .hp-promo .hp-promo__title--serif,
  .hp-root .hp-promo .hp-promo__title--script {
    font-size: var(--hp-promo-title-fs-dt, 2em);
  }

  .hp-root .hp-promo .hp-promo__sub {
    font-size: 0.6em;
  }

  .hp-root .hp-promo .hp-promo__title-img {
    width: var(--hp-promo-title-w-dt, 11em);
    margin: 0;
  }

  .hp-root .hp-promo .hp-promo__line {
    display: inline;
  }

  .hp-root .hp-promo .hp-promo__bar {
    display: inline;
    margin: 0 0.35em;
    font-weight: 300;
  }
}

/* ---------- --stack (T2) / --stack-m (T3) ----------
   Copy stacked on the left (left line, headline, disclaimer), CTAs on the
   right. --stack does this at every size; --stack-m only on mobile (classic
   banner on desktop). */
@media (max-width: 1023px) {
  .hp-root section.hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    align-items: center;
    column-gap: 1em;
    padding: 2.4em 5%;
    text-align: left;
  }

  .hp-root section.hp-promo.hp-promo--stack {
    grid-template-areas:
      "left   right"
      "center right"
      "disc   right";
  }

  .hp-root section.hp-promo.hp-promo--stack-m {
    grid-template-areas:
      "left   right"
      "center right"
      "disc   right";
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__content {
    display: contents;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--left {
    grid-area: left;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--center {
    grid-area: center;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--right {
    grid-area: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.9em;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--left p {
    padding: 0;
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--left p {
    padding-bottom: 0.2em;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) h2 {
    padding: 0;
    font-size: var(--hp-promo-head-fs-m, 2.8em);
    line-height: 1.2;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-promo__txt--right a.hp-cta--ul {
    margin: 0;
    padding-bottom: 0.15em;
    font-size: 1.9em;
  }

  .hp-root .hp-promo:is(.hp-promo--stack, .hp-promo--stack-m) .hp-disclaimer {
    grid-area: disc;
    width: auto;
    margin: 0.7em 0 0;
    padding: 0;
    font-size: 1.15em;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .hp-root section.hp-promo.hp-promo--stack {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left   right"
      "center right"
      "disc   right";
    align-content: center;
    align-items: center;
    column-gap: 2em;
    padding: 1.7em 2.3%;
    text-align: left;
  }

  .hp-root .hp-promo--stack .hp-promo__content {
    display: contents;
  }

  .hp-root .hp-promo--stack .hp-promo__txt {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .hp-root .hp-promo--stack .hp-promo__txt--left {
    grid-area: left;
  }

  .hp-root .hp-promo--stack .hp-promo__txt--center {
    grid-area: center;
  }

  .hp-root .hp-promo--stack .hp-promo__txt--right {
    grid-area: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
  }

  .hp-root .hp-promo--stack .hp-promo__txt--left p {
    padding: 0 0 0.25em;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  .hp-root .hp-promo--stack h2 {
    padding: 0;
    font-size: var(--hp-promo-head-fs-dt, 1.5em);
    line-height: 1.3;
  }

  .hp-root .hp-promo--stack .hp-promo__txt--right a.hp-cta--ul,
  .hp-root .hp-promo--stack .hp-promo__txt--right a.hp-cta--ul + a {
    margin: 0;
    padding-bottom: 0.1em;
    font-size: 0.94em;
  }

  .hp-root .hp-promo--stack .hp-disclaimer {
    grid-area: disc;
    width: auto;
    margin: 0.3em 0 0;
    padding: 0;
    font-size: 0.6em;
    text-align: left;
  }
}

/* ---------- --duo (T6) ----------
   Two offers in the middle with a divider (.hp-sep between two .hp-promo__offer
   blocks). On mobile the offers sit side by side with a CTA under each; with
   one CTA it centers under both. */
.hp-root .hp-promo--duo .hp-promo__offer h2 {
  padding: 0;
  font-size: var(--hp-promo-head-fs-m, 2.8em);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.hp-root .hp-promo--duo .hp-promo__offer .hp-coupon-area {
  margin: 0.4em 0 0;
  font-size: 1.8em;
}

.hp-root .hp-promo--duo .hp-promo__txt .hp-sep {
  display: block;
  width: 1px;
  margin: 0;
  background: currentColor;
  transform: none;
}

@media (max-width: 1023px) {
  .hp-root section.hp-promo.hp-promo--duo {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-areas:
      "left left left"
      "o1   sep  o2"
      "c1   .    c2"
      "disc disc disc";
    align-items: start;
    column-gap: 1.6em;
    padding: 2.6em 5% 2.2em;
    text-align: center;
  }

  .hp-root .hp-promo--duo :is(.hp-promo__content, .hp-promo__txt--center, .hp-promo__txt--right) {
    display: contents;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--left {
    grid-area: left;
    width: auto;
    padding: 0 0 1.4em;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--center > .hp-promo__offer:first-child {
    grid-area: o1;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--center > .hp-promo__offer:last-child {
    grid-area: o2;
  }

  .hp-root .hp-promo--duo .hp-promo__txt .hp-sep {
    grid-area: sep;
    align-self: center;
    height: 4.5em;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--right > a.hp-cta--ul {
    justify-self: center;
    margin: 1em 0 0;
    padding-bottom: 0.1em;
    font-size: 2.4em;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--right > a:first-child {
    grid-area: c1;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--right > a:last-child {
    grid-area: c2;
  }

  .hp-root .hp-promo--duo .hp-promo__txt--right > a:only-child {
    grid-area: auto;
    grid-column: 1 / -1;
  }

  .hp-root .hp-promo--duo .hp-disclaimer {
    grid-area: disc;
    margin: 1.4em 0 0;
    padding: 0;
    font-size: 1.3em;
  }
}

@media (min-width: 1024px) {
  .hp-root .hp-promo--duo .hp-promo__txt--center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6em;
  }

  .hp-root .hp-promo--duo .hp-promo__offer h2 {
    font-size: var(--hp-promo-head-fs-dt, 1.2em);
  }

  .hp-root .hp-promo--duo .hp-promo__offer .hp-coupon-area {
    margin: 0;
    font-size: 0.6em;
  }

  .hp-root .hp-promo--duo .hp-promo__txt .hp-sep {
    flex: 0 0 1px;
    align-self: center;
    height: 2.2em;
  }
}

/* ---------- --title-l (T5) + --disc-right-m (T5b) ----------
   Image title on the left. Desktop: title | offer | CTAs, disclaimer under
   the title. Mobile: title left, offer + CTAs right-aligned beside it,
   disclaimer along the bottom (--disc-right-m: under the CTAs, right-aligned). */
.hp-root section.hp-promo.hp-promo--title-l {
  display: grid;
  grid-template-columns: var(--hp-promo-title-w-m, 33%) 1fr;
  grid-template-areas:
    "left center"
    "left right"
    "disc disc";
  align-content: center;
  align-items: center;
  column-gap: 4%;
  padding: 2em 4.5% 1.6em;
  text-align: right;
}

.hp-root section.hp-promo.hp-promo--title-l.hp-promo--disc-right-m {
  grid-template-areas:
    "left center"
    "left right"
    "left disc";
}

.hp-root .hp-promo--title-l .hp-promo__content {
  display: contents;
}

.hp-root .hp-promo--title-l .hp-promo__txt {
  width: auto;
  margin: 0;
  padding: 0;
}

.hp-root .hp-promo--title-l .hp-promo__txt--left {
  grid-area: left;
}

.hp-root .hp-promo--title-l .hp-promo__title-img {
  width: 100%;
  margin: 0;
}

.hp-root .hp-promo--title-l .hp-promo__txt--center {
  grid-area: center;
  align-self: end;
  text-align: right;
}

.hp-root .hp-promo--title-l .hp-promo__txt--center .hp-eyebrow {
  display: block;
  padding: 0 0 0.3em;
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.hp-root .hp-promo--title-l h2 {
  padding: 0;
  font-size: var(--hp-promo-head-fs-m, 2.4em);
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.hp-root .hp-promo--title-l .hp-promo__txt--right {
  grid-area: right;
  align-self: start;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 1.4em;
  margin-top: 0.7em;
}

.hp-root .hp-promo--title-l .hp-promo__txt--right a.hp-cta--ul,
.hp-root .hp-promo--title-l .hp-promo__txt--right a.hp-cta--ul + a {
  margin: 0;
  padding-bottom: 0.1em;
  font-size: 1.7em;
}

.hp-root .hp-promo--title-l .hp-disclaimer {
  grid-area: disc;
  width: auto;
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 1em;
  text-align: left;
}

.hp-root .hp-promo--title-l.hp-promo--disc-right-m .hp-disclaimer {
  align-self: start;
  margin-top: 0.9em;
  text-align: right;
}

@media (min-width: 1024px) {
  .hp-root section.hp-promo.hp-promo--title-l,
  .hp-root section.hp-promo.hp-promo--title-l.hp-promo--disc-right-m {
    grid-template-columns: var(--hp-promo-title-w-dt, 19em) 1fr auto;
    grid-template-areas:
      "left center right"
      "disc center right";
    column-gap: 2em;
    padding: 1.2em 5.5% 1em;
    text-align: left;
  }

  .hp-root .hp-promo--title-l .hp-promo__txt--left {
    align-self: end;
  }

  .hp-root .hp-promo--title-l .hp-promo__title-img {
    width: 100%;
  }

  .hp-root .hp-promo--title-l .hp-promo__txt--center {
    align-self: center;
    text-align: center;
  }

  .hp-root .hp-promo--title-l .hp-promo__txt--center .hp-eyebrow {
    padding-bottom: 0.3em;
    font-size: 0.8em;
  }

  .hp-root .hp-promo--title-l h2 {
    font-size: var(--hp-promo-head-fs-dt, 1.75em);
  }

  .hp-root .hp-promo--title-l .hp-promo__txt--right {
    align-self: center;
    gap: 1.6em;
    margin: 0;
  }

  .hp-root .hp-promo--title-l .hp-promo__txt--right a.hp-cta--ul,
  .hp-root .hp-promo--title-l .hp-promo__txt--right a.hp-cta--ul + a {
    font-size: 0.9em;
  }

  .hp-root .hp-promo--title-l .hp-disclaimer,
  .hp-root .hp-promo--title-l.hp-promo--disc-right-m .hp-disclaimer {
    align-self: start;
    margin: 0.3em 0 0;
    font-size: 0.65em;
    text-align: left;
  }
}

/* ---------- --center (T9, 9b) ----------
   Title (serif text or image), offer, CTAs and disclaimer centered in one
   column at every size, usually over --hp-promo-img-dt / -m art. */
.hp-root .hp-promo--center .hp-promo__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2.6em 6% 0.3em;
}

.hp-root .hp-promo--center .hp-promo__txt {
  width: auto;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: normal;
}

.hp-root .hp-promo--center .hp-promo__txt--left {
  padding-bottom: 0.6em;
}

.hp-root .hp-promo--center .hp-promo__title--serif,
.hp-root .hp-promo--center .hp-promo__title--script {
  font-size: var(--hp-promo-title-fs-m, 2.2em);
}

.hp-root .hp-promo--center .hp-promo__title-img {
  width: var(--hp-promo-title-w-m, 60%);
  margin: 0 auto;
}

.hp-root .hp-promo--center h2 {
  padding: 0;
  font-size: var(--hp-promo-head-fs-m, 3.8em);
  line-height: 1.15;
}

.hp-root .hp-promo--center .hp-promo__txt--center .hp-coupon-area {
  margin: 0.3em 0 0;
  font-size: 2em;
}

.hp-root .hp-promo--center .hp-promo__txt--right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2.2em;
  margin-top: 1.2em;
}

.hp-root .hp-promo--center .hp-promo__txt--right a.hp-cta--ul,
.hp-root .hp-promo--center .hp-promo__txt--right a.hp-cta--ul + a {
  margin: 0;
  padding-bottom: 0.1em;
  font-size: 2.4em;
}

.hp-root .hp-promo--center .hp-disclaimer {
  margin: 1.4em 0 0;
  padding: 0 0 2.4em;
  font-size: 1.4em;
  text-align: center;
}

@media (min-width: 1024px) {
  .hp-root .hp-promo--center .hp-promo__content {
    display: flex;
    width: 100%;
    padding: 1.6em 0 0;
  }

  .hp-root .hp-promo--center .hp-promo__txt--left {
    padding: 0 0 0.25em;
    text-align: center;
  }

  .hp-root .hp-promo--center .hp-promo__title--serif,
  .hp-root .hp-promo--center .hp-promo__title--script {
    font-size: var(--hp-promo-title-fs-dt, 1.5em);
  }

  .hp-root .hp-promo--center .hp-promo__title-img {
    width: var(--hp-promo-title-w-dt, 15em);
    margin: 0 auto;
  }

  .hp-root .hp-promo--center h2 {
    font-size: var(--hp-promo-head-fs-dt, 1.8em);
  }

  .hp-root .hp-promo--center .hp-promo__txt--center .hp-coupon-area {
    margin: 0.15em 0 0;
    font-size: 0.8em;
  }

  .hp-root .hp-promo--center .hp-promo__txt--right {
    display: flex;
    gap: 1.6em;
    margin-top: 0.5em;
    padding: 0;
    text-align: center;
  }

  .hp-root .hp-promo--center .hp-promo__txt--right a.hp-cta--ul,
  .hp-root .hp-promo--center .hp-promo__txt--right a.hp-cta--ul + a {
    font-size: 0.9em;
  }

  .hp-root .hp-promo--center .hp-disclaimer {
    margin: 0.7em 0 0;
    padding: 0 0 1.4em;
    font-size: 0.55em;
  }
}

/* ---------- --flank (T7, 7b) ----------
   A title in the middle (.hp-promo__title--script/--serif in __txt--center)
   with one .hp-promo__offer on each side (in __txt--left and __txt--right).
   Each offer: h2, then a CTA or nothing, then its own .hp-disclaimer.
   T7b: make the offer an <a class="hp-promo__offer"> and end the h2 with
   <span class="hp-promo__arrow">&#9654;</span> (no CTA).
   Mobile: title on top, offers stacked with a short rule between. */
.hp-root .hp-promo--flank .hp-promo__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.6em 10% 2.4em;
}

.hp-root .hp-promo--flank .hp-promo__txt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: normal;
}

.hp-root .hp-promo--flank .hp-promo__txt--center {
  order: -1;
  padding-bottom: 1.2em;
}

.hp-root .hp-promo--flank .hp-promo__txt--right::before {
  content: "";
  display: block;
  width: 30%;
  height: 1px;
  margin: 1.8em auto;
  background: currentColor;
}

.hp-root .hp-promo--flank .hp-promo__title--serif,
.hp-root .hp-promo--flank .hp-promo__title--script {
  font-size: var(--hp-promo-title-fs-m, 4.6em);
}

.hp-root .hp-promo--flank .hp-promo__offer h2 {
  padding: 0;
  font-size: var(--hp-promo-head-fs-m, 2.6em);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.hp-root .hp-promo--flank .hp-promo__offer a.hp-cta--ul {
  margin: 0.6em 0 0;
  padding-bottom: 0.1em;
  font-size: 2.1em;
}

.hp-root .hp-promo--flank .hp-promo__offer .hp-disclaimer {
  display: block;
  margin: 0.9em 0 0;
  padding: 0;
  font-size: 1em;
  text-align: center;
}

@media (min-width: 1024px) {
  .hp-root .hp-promo--flank .hp-promo__content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 1.1em 9%;
  }

  .hp-root .hp-promo--flank .hp-promo__txt--center {
    order: 0;
    padding: 0 2em;
  }

  .hp-root .hp-promo--flank .hp-promo__txt--right::before {
    display: none;
  }

  .hp-root .hp-promo--flank .hp-promo__title--serif,
  .hp-root .hp-promo--flank .hp-promo__title--script {
    font-size: var(--hp-promo-title-fs-dt, 2.8em);
  }

  .hp-root .hp-promo--flank .hp-promo__offer h2 {
    font-size: var(--hp-promo-head-fs-dt, 1em);
  }

  .hp-root .hp-promo--flank .hp-promo__offer a.hp-cta--ul {
    margin: 0.3em 0 0;
    font-size: 0.78em;
  }

  .hp-root .hp-promo--flank .hp-promo__offer .hp-disclaimer {
    margin: 0.55em 0 0;
    font-size: 0.5em;
  }
}

span.hp-pct-stack--knockout {
  display: inline-grid;
  grid-template-columns: 1fr;
  text-align: center;
  vertical-align: 0.3em;
  margin-left: -0.06em;
}

.hp-pct-stack--knockout sup {
  position: relative;
  color: inherit;
  font-family: inherit;
  font-size: 0.55em;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  vertical-align: text-top;
  top: 0.1em;
}

.hp-pct-stack--knockout sub {
  position: relative;
  color: inherit;
  font-family: inherit;
  font-size: 0.2em;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: 0.02em;
  top: 0px;
}

/* ---------- hp-hero-sc3 (single image hero, centered copy) ---------- */

.hp-hero-sc3 .hp-img-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  margin: 0px;
  left: auto;
  right: 0px;
}

.hp-hero-sc3 .hp-v-center {
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px 0px 9.6em;
  overflow: hidden;
}

.hp-hero-sc3__txt {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-hero-sc3__txt .hp-eyebrow {
  padding-bottom: 0.4em;
  font-size: 3em;
  font-weight: 600;
  display: inline-block;
}

.hp-hero-sc3__txt h1 {
  font-size: 8em;
  line-height: 1.1;
  font-family: kudryashev-d-contrast, serif;
  font-weight: 500;
}

.hp-hero-sc3__txt .hp-modernline {
  position: relative;
  width: auto;
  font-size: 1em;
}

.hp-hero-sc3__txt > p {
  display: block;
}

.hp-hero-sc3__txt .hp-promo-offer__sm {
  font-size: 2.6em;
}

.hp-hero-sc3__txt sup {
  position: relative;
  vertical-align: 1.3em;
  font-size: 0.4em;
}

.hp-hero-sc3__txt .hp-ctas {
  white-space: nowrap;
}

.hp-hero-sc3__txt a.hp-cta--block-solid {
  margin: 0px 0.6em;
  font-size: 2.3em;
}

.hp-hero-sc3 .hp-disclaimer--fixed {
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  bottom: 2.2em;
}

.hp-hero-sc3 .hp-background {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  z-index: -1;
}

@media (min-width: 1024px) {
  section.hp-hero-sc3 .hp-img-overlay {
    width: 50%;
    left: 28%;
  }

  section.hp-hero-sc3.hp-text-block--left .hp-img-overlay {
    left: 0px;
    right: auto;
    margin: 0px;
  }

  section.hp-hero-sc3.hp-text-block--right .hp-img-overlay {
    right: 0px;
    left: auto;
    margin: 0px;
  }

  section.hp-hero-sc3.hp-text-block--center .hp-img-overlay {
    left: 0px;
    right: 0px;
    margin: 0px auto;
  }

  .hp-hero-sc3 .hp-v-center {
    padding: 0px 0px 11.1em;
  }

  .hp-hero-sc3__txt .hp-eyebrow {
    font-size: 0.875em;
    padding-bottom: 3.2em;
  }

  .hp-hero-sc3__txt h1 {
    font-size: 7.2em;
    padding-bottom: 0.05em;
  }

  .hp-hero-sc3__txt .hp-promo-offer__sm {
    font-size: 1.9em;
    font-weight: 600;
  }

  .hp-hero-sc3__txt h1 > .hp-modernline {
    font-size: 1em;
    margin-left: -0.05em;
  }

  .hp-hero-sc3__txt > p {
    display: block;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  .hp-hero-sc3__txt .hp-ctas {
    margin-top: 1.85em;
  }

  .hp-hero-sc3__txt a.hp-cta--block-solid {
    margin: 0px 0.6em;
    font-size: 1em;
  }

  .hp-hero-sc3 .hp-disclaimer--fixed {
    font-size: 0.75em;
    bottom: 9.6em;
  }
}

/* ---------- hp-hero-sc3--placed: CTAs + disclaimer placed on the art ----------
   For heroes whose CTAs/legal sit at a specific spot on the image. Replaces the
   per-campaign positioning CSS: set the custom properties inline on the section.

   <section class="hp-hero-sc3 hp-hero-sc3--placed [hp-hero-sc3--ctas-split-m]"
     style="--hp-hero-cta-x: 85.9%; --hp-hero-cta-y: 68%; ...">

   Desktop: CTA group and disclaimer are centered on (x, y), measured on the image.
   Mobile:  CTAs sit in a row, --hp-hero-cta-bottom-m up from the bottom of the art
            (default: full-width white blocks; add --ctas-split-m for two blocks,
            each a third of the screen, centered with a gap). The disclaimer sits
            --hp-hero-disc-bottom-m up from the bottom. Use hp-mobile-only /
            hp-desktop-only on the disclaimer to show it on one breakpoint only.
   CTAs are white blocks with black text (hp-cta--mob-ul-dt-block); JS width
   matching is skipped for placed heroes. */

.hp-root section.hp-hero-sc3.hp-hero-sc3--placed {
  --hp-hero-cta-x: 50%;            /* desktop: CTA group center, from left */
  --hp-hero-cta-y: 85%;            /* desktop: CTA group center, from top */
  --hp-hero-cta-w: 12vw;           /* desktop: each CTA width */
  --hp-hero-cta-min-w: 12cqi;
  --hp-hero-cta-h: 2.2vw;          /* desktop: each CTA height */
  --hp-hero-cta-fs: 1vw;           /* desktop: CTA font size */
  --hp-hero-cta-gap: 1.5vw;        /* desktop: space between the CTAs */
  --hp-hero-disc-x: 50%;           /* desktop: disclaimer center, from left */
  --hp-hero-disc-y: 95%;           /* desktop: disclaimer center, from top */
  --hp-hero-disc-color: #ffffff;
  --hp-hero-disc-fs: 0.8em;        /* desktop: disclaimer size */
  --hp-hero-cta-bottom-m: 8.5%;    /* mobile: CTA row distance from the bottom (% of width) */
  --hp-hero-disc-bottom-m: 1.5em;  /* mobile: disclaimer distance from the bottom */
  --hp-hero-disc-color-m: #ffffff;
  --hp-hero-disc-fs-m: 1.1em;
}

.hp-root .hp-hero-sc3--placed .hp-v-center {
  padding: 0 0 var(--hp-hero-cta-bottom-m) 0;
}

.hp-root .hp-hero-sc3--placed .hp-ctas {
  display: flex;
  flex-direction: row;
  gap: 0;
}

.hp-root .hp-hero-sc3--placed .hp-ctas a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 0.5em 0;
  border: none;
  background: white;
  color: black;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
}

.hp-root .hp-hero-sc3--placed .hp-disclaimer--fixed {
  bottom: var(--hp-hero-disc-bottom-m);
  color: var(--hp-hero-disc-color-m);
  font-size: var(--hp-hero-disc-fs-m);
}

@media (max-width: 1023px) {
  .hp-root .hp-hero-sc3--ctas-split-m .hp-hero-sc3__txt {
    width: 100%;
  }

  .hp-root .hp-hero-sc3--ctas-split-m .hp-ctas {
    justify-content: center;
    gap: 4.5%;
  }

  .hp-root .hp-hero-sc3--ctas-split-m .hp-ctas a {
    flex: 0 0 33%;
    margin: 0;
    padding: 0.27em 0;
  }
}

@media (min-width: 1024px) {
  .hp-root .hp-hero-sc3--placed .hp-background {
    position: relative;
    z-index: 1;
  }

  /* overlay covers the whole image; CTAs and disclaimer position against it */
  .hp-root section.hp-hero-sc3.hp-hero-sc3--placed .hp-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    overflow: visible;
    z-index: 2;
  }

  /* wrappers are neutral so they don't trap the CTAs or disclaimer */
  .hp-root .hp-hero-sc3--placed .hp-v-center,
  .hp-root .hp-hero-sc3--placed .hp-hero-sc3__txt {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
  }

  .hp-root .hp-hero-sc3--placed .hp-ctas {
    position: absolute;
    top: var(--hp-hero-cta-y);
    left: var(--hp-hero-cta-x);
    width: auto; /* shrink to the buttons so (x, y) is the group's true center */
    margin: 0; /* ignore the base hero CTA margin so (x, y) is exact */
    z-index: 3;
    gap: var(--hp-hero-cta-gap);
    transform: translate(-50%, -50%);
  }

  .hp-root .hp-hero-sc3--placed .hp-ctas a {
    flex: none;
    margin: 0; /* spacing comes only from --hp-hero-cta-gap */
    width: var(--hp-hero-cta-w);
    min-width: var(--hp-hero-cta-min-w);
    height: var(--hp-hero-cta-h);
    padding: 0;
    font-size: var(--hp-hero-cta-fs);
    font-weight: normal;
    white-space: nowrap;
  }

  .hp-root .hp-hero-sc3--placed .hp-disclaimer--fixed {
    position: absolute;
    top: var(--hp-hero-disc-y);
    right: auto;
    bottom: auto;
    left: var(--hp-hero-disc-x);
    z-index: 3;
    color: var(--hp-hero-disc-color);
    font-size: var(--hp-hero-disc-fs);
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }
}

/* ---------- hp-hero-ts5 (two-column text + promos hero) ---------- */

section.hp-hero-ts5::before {
  content: "";
  display: block;
}

.hp-hero-ts5 .hp-img-overlay {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 57%;
  height: 100%;
  top: 0px;
  right: 0px;
  left: auto;
  margin: 0px;
}

.hp-hero-ts5__txt__left {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-hero-ts5__txt__right {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px 0px 9em;
  overflow: visible;
  text-align: center;
}

.hp-hero-ts5 .hp-v-center {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.hp-hero-ts5__txt__left h1 {
  font-size: 3.807em;
  line-height: 1;
  padding: 0px 0px 0.65em;
  letter-spacing: -0.05em;
}

.hp-hero-ts5__txt__left .hp-modernline {
  position: relative;
  font-size: 1em;
  letter-spacing: normal;
  margin: 0px 0px -0.2em -0.3em;
}

.hp-hero-ts5__txt__promos {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* promo stack centered in its column (was pinned to the top) */
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.hp-hero-ts5__txt__right .hp-promo-offer {
  width: auto;
}

.hp-hero-ts5__txt__right .hp-eyebrow {
  display: block;
  font-size: 2.53125em;
  letter-spacing: 0.02em;
  margin-bottom: -0.4em;
}

.hp-hero-ts5__txt__right .hp-promo-offer__lg {
  font-size: 4.455em;
  line-height: 1;
}

.hp-hero-ts5__txt__right sup {
  position: relative;
  vertical-align: 1.3em;
  font-size: 0.4em;
}

.hp-hero-ts5__txt__right .hp-plus {
  font-size: 4.455em;
  padding: 0.2em 0px;
}

.hp-hero-ts5__txt__right .hp-ctas {
  margin-top: 4em;
  padding: 0px 4em;
}

.hp-hero-ts5__txt__right a.hp-cta--mob-ul-dt-block {
  margin: 0px 0.5em 1em;
}

.hp-hero-ts5 .hp-disclaimer--fixed {
  width: 100%;
  padding: 0px 3.5em;
  margin-bottom: 0.7em;
  left: auto;
  right: 0px;
  text-align: center;
}

/* background art always fills the hero, even if it isn't exactly 1680x700 / 750x1367 */
.hp-hero-ts5 picture.hp-hero-bg--abs {
  height: 100%;
}

.hp-hero-ts5 picture.hp-hero-bg--abs img,
.hp-hero-ts5 img.hp-hero-bg--abs {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-hero-ts5 .hp-background {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  z-index: -1;
}

@media (min-width: 1024px) {
  section.hp-hero-ts5::before {
    content: "";
    display: block;
  }

  .hp-hero-ts5 .hp-img-overlay {
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: auto;
  }

  div.hp-hero-ts5__txt__left {
    width: 36%;
  }

  div.hp-hero-ts5__txt__right {
    width: 34%;
    height: 100%;
    padding: 0px;
  }

  .hp-hero-ts5 .hp-v-center {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .hp-hero-ts5__txt__left h1 {
    margin-top: -0.55em;
    font-family: kudryashev-d-contrast, serif;
    font-size: 7.4496em;
    line-height: 0.98;
    padding-bottom: 0px;
    letter-spacing: -0.03em;
  }

  .hp-hero-ts5__txt__left h1 .hp-text--tight {
    letter-spacing: -0.09em;
  }

  .hp-hero-ts5__txt__left .hp-modernline {
    margin-bottom: -0.35em;
    font-size: 0.75em;
    line-height: 2.35;
  }

  .hp-hero-ts5__txt__right .hp-eyebrow {
    font-size: 2.0952em;
    margin-bottom: -0.3em;
  }

  .hp-hero-ts5__txt__right .hp-promo-offer .hp-promo-offer__lg {
    font-size: 4.074em;
  }

  .hp-hero-ts5__txt__right .hp-plus {
    font-size: 4.074em;
    padding: 0.1em 0px;
  }

  .hp-hero-ts5__txt__right .hp-ctas {
    margin-top: 3.6em;
    padding: 0px;
  }

  .hp-hero-ts5__txt__right a.hp-cta--mob-ul-dt-block {
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    margin: 0px 0.8em;
  }

  .hp-hero-ts5.hp-flipflop .hp-hero-ts5__txt__right {
    order: -1;
  }

  .hp-hero-ts5.hp-flipflop div.hp-hero-ts5__txt__left {
    padding-right: 8em;
    padding-left: 0em;
  }

  .hp-hero-ts5.hp-flipflop div.hp-hero-ts5__txt__right {
    padding-left: 4em;
    padding-right: 0px;
  }
}

.hp-modernline {
  display: inline;
  margin-left: -0.15em;
}

/* ---------- hp-trio-classic ---------- */

section.hp-trio-classic {
  padding: 5em 0px;
}

div.hp-trio-classic__content {
  position: relative;
  width: 85.3%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
  overflow: hidden;
}

a.hp-trio-classic__item .TrioHeader {
  display: block;
  font-family: kudryashev-d-contrast, serif;
  font-size: 4.2em;
}

a.hp-trio-classic__item {
  display: block;
  position: relative;
  width: 71.5%;
  height: auto;
  margin: 0px auto;
  padding: 0px 0px 2px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: 1em;
}

a.hp-trio-classic__item:nth-of-type(2) {
  width: 100%;
}

a.hp-trio-classic__item:not(:last-of-type) {
  margin-bottom: 9em;
}

a.hp-trio-classic__item > img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px 0px 1.5em;
}

a.hp-trio-classic__item .hp-cta--block {
  margin-top: 0.5em;
}

@media (min-width: 1024px) {
  section.hp-trio-classic {
    padding: 3em 0px;
  }

  div.hp-trio-classic__content {
    width: 88.6905%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  a.hp-trio-classic__item {
    width: 28.8591%;
    margin: 0px;
  }

  a.hp-trio-classic__item .TrioHeader {
    font-size: 2em;
  }

  a.hp-trio-classic__item:nth-of-type(2) {
    width: 34.7651%;
  }

  a.hp-trio-classic__item:not(:last-of-type) {
    margin-bottom: 0px;
  }

  a.hp-trio-classic__item > img {
    margin: 0px 0px 1em;
  }
}

/* ---------- hp-rfk (recommendations) ----------
   Markup must ALSO carry the class "g3-rfk" on the <section>: Adobe Target
   activities select `section.g3-rfk`. It is a hook only; never style it. */

section.hp-rfk {
  background-color: rgb(246, 246, 246);
  padding: 7.8em 0px 15em;
}

.hp-rfk__content {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-rfk__content > h3 {
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  font-size: 4.725em;
  letter-spacing: 0.04em;
  line-height: 1;
}

.hp-rfk__embed {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  margin: 6.6em 0px 0px;
  padding: 0px;
  overflow: visible;
}

@media (min-width: 1024px) {
  section.hp-rfk {
    padding: 5.5em 0px 6.5em;
  }

  .hp-rfk__content {
    width: 91.4%;
    position: relative;
  }

  .hp-rfk__content > h3 {
    font-size: 2.5em;
  }

  .hp-rfk__embed {
    margin: 2.4em 0px 0px;
  }
}

/* ---------- hp-editorial__hero-1 ---------- */

.hp-editorial__hero-1 .hp-img-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px 0px 8.3em;
}

.hp-editorial__hero-1__txt {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-editorial__hero-1__txt h1 {
  font-size: 6.75em;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.hp-editorial__hero-1__txt sup {
  position: relative;
  vertical-align: 1.3em;
  font-size: 0.4em;
}

.hp-editorial__hero-1__txt p {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 2.3625em;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.hp-editorial__hero-1__txt .hp-ctas {
  width: auto;
  margin-top: 3.5em;
  text-align: center;
}

.hp-editorial__hero-1__txt a.hp-cta--block-solid {
  margin: 0px;
}

.hp-editorial__hero-1 .hp-disclaimer--fixed {
  width: 100%;
  text-align: center;
}

.hp-editorial__hero-1 .hp-background {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  z-index: -1;
}

@media (min-width: 1024px) {
  .hp-editorial__hero-1 .hp-img-overlay {
    padding: 0px 0px 8.3em 5.7em;
  }

  section.hp-editorial__hero-1.hp-text-block--left .hp-img-overlay {
    left: 0px;
    right: auto;
    margin: 0px;
    width: 50%;
  }

  section.hp-editorial__hero-1.hp-text-block--right .hp-img-overlay {
    right: 0px;
    left: auto;
    margin: 0px;
    width: 50%;
  }

  section.hp-editorial__hero-1.hp-text-block--center .hp-img-overlay {
    left: 0px;
    right: 0px;
    margin: 0px auto;
    width: 100%;
  }

  .hp-editorial__hero-1__txt {
    text-align: left;
  }

  .hp-editorial__hero-1__txt h1 {
    font-size: 3.75em;
    line-height: 0.9;
    letter-spacing: 0.01em;
    padding-bottom: 0.25em;
  }

  .hp-editorial__hero-1__txt p {
    font-size: 1em;
  }

  .hp-editorial__hero-1__txt .hp-ctas {
    margin-top: 1em;
    text-align: left;
  }

  .hp-editorial__hero-1__txt a.hp-cta--ul--kud {
    margin: 0px 0.85em;
  }

  .hp-editorial__hero-1 .hp-disclaimer--fixed {
    bottom: 0.5em;
  }
}

/* ---------- hp-curalate ----------
   Markup must ALSO carry the class "g3-curalate" on the <section>: Adobe Target
   activities select `section.g3-curalate`. It is a hook only; never style it. */

section.hp-curalate {
  padding: 10em 0px;
}

.hp-curalate__content {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
  overflow: visible;
  text-align: center;
}

.hp-curalate__content > h3 {
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  font-size: 3.3em;
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding: 0px 3em 0.3em;
}

.hp-curalate__content > p {
  font-family: sofia-pro, sans-serif;
  font-weight: 400;
  font-size: 2.025em;
  letter-spacing: 0.06em;
}

.hp-curalate__embed {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  margin: 9em 0px 0px;
  padding: 0px;
  overflow: visible;
}

.hp-curalate .hp-ctas {
  padding: 0px 1em;
  margin-top: 5.4em;
}

.hp-curalate a.hp-cta--block--outline {
  margin-bottom: 0.5em;
}

@media (min-width: 1024px) {
  section.hp-curalate {
    padding: 5em 0px;
  }

  .hp-curalate__content {
    width: 75%;
  }

  .hp-curalate__content > h3 {
    letter-spacing: 0.04em;
    line-height: 1;
    font-size: 2.5em;
    padding: 0px 0px 0.4em;
  }

  .hp-curalate__content > p {
    font-weight: 600;
    font-size: 1em;
  }

  .hp-curalate__embed {
    margin: 4em 0px 0px;
  }

  .hp-curalate .hp-ctas {
    padding: 0px;
    margin-top: 3em;
  }

  .hp-curalate a.hp-cta--block--outline {
    margin: 0px 0.9em;
  }
}

@media (max-width: 1023px) {
  .hp-curalate a.hp-cta--block--outline {
    border: none;
    background-color: transparent;
    text-underline-offset: 0.2em;
    text-decoration: underline !important;
  }
}

/* ---------- Font + visibility + spacing utilities ---------- */

.hp-root .baskerville {
  font-family: baskerville-urw, serif;
}

.hp-root .kfont {
  font-family: kudryashev-d-contrast, serif;
}

.ethicFont {
  font-family: "Ethic Serif";
}

.hp-desktop-only {
  display: none !important;
}

.hp-mobile-only {
  display: revert !important;
}

@media (min-width: 1024px) {
  .hp-desktop-only {
    display: revert !important;
  }

  .hp-mobile-only {
    display: none !important;
  }
}

.hp-nobreak--dt > br {
  display: revert;
}

.hp-nobreak--mob > br {
  display: none;
}

@media (min-width: 1024px) {
  .hp-nobreak--mob > br {
    display: revert;
  }

  .hp-nobreak--dt > br {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hp-margin-bot-1--m {
    margin-bottom: 5px !important;
  }

  .hp-margin-bot-2--m {
    margin-bottom: 1rem !important;
  }

  .hp-margin-top-1--m {
    margin-top: 5px !important;
  }

  .hp-margin-top-2--m {
    margin-top: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .hp-margin-bot-1--dt {
    margin-bottom: 0.7px !important;
  }

  .hp-margin-bot-2--dt {
    margin-bottom: 1rem !important;
  }

  .hp-margin-top-1--dt {
    margin-top: 7px !important;
  }

  .hp-margin-top-2--dt {
    margin-top: 1rem !important;
  }
}

@media (max-width: 1024px) {
  .hp-pad-bot-1--m {
    padding-bottom: 0.5rem !important;
  }

  .hp-pad-bot-2--m {
    padding-bottom: 1rem !important;
  }

  .hp-pad-top-1--m {
    padding-top: 0.5rem !important;
  }

  .hp-pad-top-2--m {
    padding-top: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .hp-pad-bot-1--dt {
    padding-bottom: 0.5rem !important;
  }

  .hp-pad-bot-2--dt {
    padding-bottom: 1rem !important;
  }

  .hp-pad-top-1--dt {
    padding-top: 0.5rem !important;
  }

  .hp-pad-top-2--dt {
    padding-top: 1rem !important;
  }
}

.hp-shell .container-sm,
.hp-shell .container {
  margin: 0px auto;
  padding: 0px;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.container-sm *,
.container * {
  box-sizing: border-box;
}

.container-sm a,
.container a {
  text-underline-offset: 0.5rem;
}

.mobile-hide {
  display: none;
}

@media (max-width: 480px) {
  .mobile-hide {
    display: block;
  }
}

/* =============================================================================
   2. HP SECTION COMPONENTS AND OVERRIDES
   Order matters: several rules here intentionally override section 1.
============================================================================= */

.small-symbol {
  font-size: 0.6em;
  vertical-align: 0.15em;
}

.homepage-curalate {
  display: none;
}

.hp-shell a {
  text-decoration: none;
}

.hp-shell img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-root .hp-recs img,
.hp-root .hp-recs .tile-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}

.hp-root a.hp-cta--block-solid,
.hp-root span.hp-cta--block-solid,
.hp-root a.hp-cta--ul,
.hp-root span.hp-cta--ul {
  margin: 0px;
  font-weight: 400;
  font-size: 2em;
}

/* Solid block CTA default size (overlay hero, video spot, CTA groups). */
.hp-root a.hp-cta--block-solid,
.hp-root span.hp-cta--block-solid {
  width: 123.5px;
  height: 2.6em;
  min-width: 0px;
  padding: 0px;
  font-size: 11px;
  line-height: 25.5px;
}

@media (min-width: 1024px) {
  .hp-root span.hp-cta--ul {
    margin: 0px;
    font-weight: 400;
    font-size: 1em;
  }

  .hp-root a.hp-cta--block-solid,
  .hp-root span.hp-cta--block-solid {
    width: 210.32px;
    height: 2.5em;
    font-size: 14px;
    line-height: 2.5em; /* = height, so the label is vertically centered (was 44px in a 35px box) */
  }

  .hp-spot a.hp-cta--block-solid {
    height: 44px;
    line-height: 44px;
  }
}

/* Image hero (hp-hero-sc3, standard layout): solid CTAs get side padding so
   the JS width match has something to measure, and space between them.
   (The hero rule further up loses to the reset above, so it lives here.) */
.hp-root .hp-hero-sc3__txt a.hp-cta--block-solid {
  margin: 0 0.6em;
  padding: 0 1.8em;
}

/* Set by the HP JS after it matches the widths of 2+ block CTAs: the width it
   sets already includes the side padding, so drop the padding. Same
   specificity as the CTA padding rules and later in the file, so it wins. */
.hp-root a.hp-cta--no-pad,
.hp-root span.hp-cta--no-pad {
  padding-left: 0;
  padding-right: 0;
}

.hp-root .hp-tile__cta {
  display: inline-block;
  color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
  .hp-root .hp-rail--top {
    display: none;
  }
}

.hp-root .hp-mobile-cats__slider a {
  text-decoration: underline;
  font-size: 11px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.0067em;
  text-underline-offset: 4px;
  color: rgb(17, 17, 17);
  background: transparent;
}

span.ethic-serif {
  font-weight: 200;
  letter-spacing: 0.5px;
  font-style: normal;
  font-size: 1.9em !important;
  font-family: "Ethic Serif" !important;
}

p.ethic-serif {
  font-weight: 200;
  letter-spacing: 0.5px;
  font-style: normal;
  font-size: 2.5em !important;
  font-family: "Ethic Serif" !important;
}

/* Superscripts in promo headlines (*, **, $): top of the mark lines up with the
   top of the capitals. A small "%" that sits on the baseline is
   <span class="hp-promo__pct">%</span>, not a <sup>. */
.hp-promo__txt--center h2 sup {
  font-size: 0.5em;
  vertical-align: 0.75em;
}

.hp-root .hp-promo h2 .hp-promo__pct {
  font-size: 0.5em;
  vertical-align: 0;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  span.ethic-serif {
    letter-spacing: 0.5px;
    font-style: normal;
    font-weight: 200 !important;
    font-size: 2.2em !important;
    font-family: "Ethic Serif" !important;
  }

  p.ethic-serif {
    letter-spacing: 0.5px;
    font-weight: 200 !important;
    font-size: 1.75em !important;
    font-family: "Ethic Serif" !important;
  }

  .hp-promo__txt--center h2 sup {
    font-size: 0.49em;
    vertical-align: 0.75em;
  }
}

/* ---------- hp-artband ---------- */

.hp-root .hp-artband {
  display: block;
  position: relative;
}

.hp-shell .hp-artband img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-shell .hp-artband img.hp-artband__img--dt {
  display: none;
}

.hp-shell .hp-artband img.hp-artband__img--m {
  display: block;
}

.hp-root span.hp-cta--ul.hp-artband__cta {
  display: flex;
  position: absolute;
  bottom: 6%;
  left: 13%;
}

@media (min-width: 1024px) {
  .hp-shell .hp-artband img.hp-artband__img--dt {
    display: block;
  }

  .hp-shell .hp-artband img.hp-artband__img--m {
    display: none;
  }
}

.hp-root .hp-artband--bleed {
  overflow: hidden;
}

.hp-shell .hp-artband--bleed img {
  width: 100%;
  margin-left: 0px;
}

.hp-artband--bleed .hp-artband__shop {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hp-artband--bleed .hp-artband__copy {
  position: absolute;
  z-index: 2;
  left: 18.4%;
  bottom: 8%;
  font-family: sofia-pro, sans-serif;
  pointer-events: none;
}

.hp-artband--bleed .hp-artband__title {
  display: none;
}

.hp-artband--bleed .hp-artband__fine {
  margin: 0px;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.hp-artband--bleed .global-promo-modal-btn {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .hp-artband--bleed .hp-artband__copy {
    top: 5.6%;
    bottom: 5.6%;
    left: 4.35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hp-artband--bleed .hp-artband__title {
    display: block;
    margin: 0px 0px 0.35em;
    font-size: min(1.19vw, 20px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .hp-artband--bleed .hp-artband__fine {
    font-size: min(0.536vw, 9px);
  }
}

/* ---------- hp-promo-nav (3-slot promo) ---------- */

section.hp-promo-nav {
  margin: 0px;
}

div.hp-promo-nav__content {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

div.hp-promo-nav__grid {
  position: relative;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 3.5em 0px;
  overflow: hidden;
  font-family: sofia-pro, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.02em;
  display: none;
}

a.hp-promo-nav__grid-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  height: auto;
  margin: 0px;
  padding: 0.4em;
  overflow: hidden;
  text-align: center;
  color: inherit;
  text-decoration: none;
  font-size: 1em;
}

a.hp-promo-nav__grid-item > div {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

a.hp-promo-nav__grid-item a {
  color: inherit;
  text-decoration: underline;
  display: inline-block;
}

div.hp-promo-nav__content h5 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 3em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

div.hp-promo-nav__content h6 {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

div.hp-promo-nav__content p {
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 4% 0px 0px;
}

div.hp-promo-nav__content .hp-eyebrow {
  font-size: 0.7em;
  padding-bottom: 4%;
}

/* hp-promo-nav--ctas (AT template 8b): slots are <div>s with their own CTAs
   (.hp-promo-nav__ctas) instead of whole-slot links. 2 slots = 50% each,
   3 = 33%, with a divider between. Mobile: the same arrow carousel. */
div.hp-promo-nav__grid-item {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4em;
  color: inherit;
  text-align: center;
}

div.hp-promo-nav__grid-item > div {
  position: relative;
  margin: 0;
  padding: 0;
}

.hp-root .hp-promo-nav--ctas .hp-promo-nav__ctas {
  display: flex;
  justify-content: center;
  gap: 1.4em;
  margin-top: 0.5em;
}

.hp-root .hp-promo-nav--ctas .hp-promo-nav__ctas a.hp-cta--ul {
  margin: 0;
  padding-bottom: 0.1em;
  font-size: 1.9em;
}

.hp-root .hp-promo-nav--ctas .hp-carousel__slide {
  padding: 4% 2%;
  text-align: center;
}

.hp-root .hp-promo-nav--ctas .hp-promo-nav__content .hp-eyebrow {
  display: block;
  padding-bottom: 0.4em;
  font-size: 1.4em;
}

.hp-root .hp-promo-nav--ctas .hp-promo-nav__content h5 {
  font-size: 2.3em;
}

.hp-root .hp-promo-nav--ctas .hp-promo-nav__content p {
  margin: 0.7em 0 0;
  font-size: 1.15em;
}

@media (min-width: 1024px) {
  .hp-root .hp-promo-nav--ctas div.hp-promo-nav__grid {
    padding: 1.3em 0;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__grid-item {
    padding: 0 1.5em;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__grid-item + .hp-promo-nav__grid-item {
    border-left: 1px solid;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__content .hp-eyebrow {
    padding-bottom: 0.3em;
    font-size: 0.7em;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__content h5 {
    font-size: 1.5em;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__ctas {
    gap: 1.2em;
    margin-top: 0.35em;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__ctas a.hp-cta--ul {
    font-size: 0.8em;
  }

  .hp-root .hp-promo-nav--ctas .hp-promo-nav__content p {
    margin: 0.6em 0 0;
    font-size: 0.55em;
  }
}

.hp-promo-nav .hp-carousel__stage,
.hp-promo-nav .hp-carousel__offset,
.hp-promo-nav .hp-carousel__slider,
.hp-promo-nav .hp-carousel__slide {
  height: auto;
}

.hp-promo-nav .hp-carousel__offset {
  width: 100%;
  overflow: hidden;
}

.hp-promo-nav .hp-carousel__slider {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  align-items: center;
}

.hp-promo-nav .hp-carousel__slide {
  position: relative;
  padding: 5% 0px;
}

.hp-promo-nav .hp-carousel__arrow {
  width: 8%;
  margin: 0px 0.8em;
}

@media (min-width: 1024px) {
  section.hp-promo-nav {
    margin: 1em 0px 1.4em;
  }

  .hp-carousel {
    display: none;
  }

  div.hp-promo-nav__grid {
    display: flex;
    padding: 0% 0px;
  }

  a.hp-promo-nav__grid-item:nth-child(2) {
    flex: 0 0 auto;
    min-width: 50%;
    white-space: nowrap;
    border-left: 1px solid;
    margin: 0.7em;
    padding: 0em;
  }

  div.hp-promo-nav__content h5 {
    font-size: 1.5em;
  }

  div.hp-promo-nav__content .hp-eyebrow {
    font-size: 0.9em;
    padding-bottom: 2%;
  }

  div.hp-promo-nav__content h6 {
    font-size: 1.4em;
  }

  div.hp-promo-nav__content p {
    font-size: 0.6em;
    margin: 3% 0px 0px;
  }
}

.hp-hero-sc3__txt .hp-promo-offer__lg {
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 1.01em;
}

.hp-root a.hp-cta--mob-ul-dt-block,
.hp-root span.hp-cta--mob-ul-dt-block {
  border: none;
  color: black;
  background: white;
}

@media (min-width: 1024px) {
  .hp-hero-sc3__txt .hp-promo-offer__lg {
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 1.01em;
  }

  .hp-root a.hp-cta--mob-ul-dt-block,
  .hp-root span.hp-cta--mob-ul-dt-block {
    border: none;
    color: black;
    background: white;
  }
}

section.hp-hero-ts5::before {
  padding-top: 182.3%;
}

@media (min-width: 1024px) {
  section.hp-hero-ts5::before {
    padding-top: 41.667%;
  }

  .hp-hero-ts5 .hp-disclaimer--fixed {
    width: 100%;
    padding: 0px 14em;
    margin-bottom: 1em;
  }
}

/* ---------- hp-hero-ts5 (split hero) options ----------
   All opt-in: with none of these classes/elements in the markup the hero
   renders exactly as before.
   Optional markup
     span.hp-eyebrow          inside .hp-hero-ts5__txt__left, above the h1
     span.hp-promo-offer__sm  inside .hp-hero-ts5__txt__right .hp-promo-offer
                              (sub copy, e.g. "Including new arrivals", "Use code CYBER")
     div.hp-ctas              inside .hp-hero-ts5__txt__left, with --ctas-left
   Modifiers
     section.hp-hero-ts5--ctas-left   buttons under the headline instead of in the promo stack
     div.hp-promo-offer--glow         soft pulsing glow on that offer line
   Custom properties (inline on the section)
     --hp-ts5-left-color    eyebrow + headline color (only applies when set)
     --hp-ts5-glow-color    glow color (default white)
     --hp-ts5-glow-period   one glow pulse (default 2.4s) */

/* left side: color (only when the variable is set, so hp-white/hp-black on the column still work), eyebrow */
.hp-hero-ts5[style*="--hp-ts5-left-color"] .hp-hero-ts5__txt__left {
  color: var(--hp-ts5-left-color);
}

.hp-hero-ts5__txt__left .hp-eyebrow {
  display: block;
  font-size: 2.53125em;
  letter-spacing: 0.02em;
  padding-bottom: 0.4em;
}

/* right side: sub copy under an offer */
.hp-hero-ts5__txt__right .hp-promo-offer__sm {
  display: block;
  font-size: 2.2em;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding-top: 0.25em;
}

.hp-hero-ts5__txt__right .hp-promo-offer__sm + .hp-promo-offer__lg {
  padding-top: 0;
}

/* --ctas-left: buttons under the headline */
.hp-hero-ts5--ctas-left .hp-hero-ts5__txt__left .hp-ctas {
  margin-top: 1.4em;
  padding: 0 2em;
}

.hp-hero-ts5--ctas-left .hp-hero-ts5__txt__left a.hp-cta--mob-ul-dt-block {
  margin: 0 0.5em 1em;
}

/* (the promo stack is centered by default now; kept for clarity) */
.hp-hero-ts5--ctas-left .hp-hero-ts5__txt__promos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --glow: pulsing glow on one offer line */
.hp-hero-ts5 .hp-promo-offer--glow .hp-promo-offer__lg {
  animation: hp-ts5-glow var(--hp-ts5-glow-period, 2.4s) ease-in-out infinite alternate;
}

.hp-hero-ts5:hover .hp-promo-offer--glow .hp-promo-offer__lg,
.hp-hero-ts5:focus-within .hp-promo-offer--glow .hp-promo-offer__lg {
  animation-play-state: paused;
}

@keyframes hp-ts5-glow {
  from {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  to {
    text-shadow: 0 0 0.18em var(--hp-ts5-glow-color, rgba(255, 255, 255, 0.95)),
      0 0 0.45em var(--hp-ts5-glow-color, rgba(255, 255, 255, 0.6));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero-ts5 .hp-promo-offer--glow .hp-promo-offer__lg {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .hp-hero-ts5__txt__left .hp-eyebrow {
    font-size: 2.0952em;
    padding-bottom: 0.9em;
  }

  /* the h1's negative top margin only applies when nothing sits above it; the
     serif caps draw ~0.3em above their line box, so leave room for them */
  .hp-hero-ts5__txt__left .hp-eyebrow + h1 {
    margin-top: 0;
    padding-top: 0.3em;
  }

  .hp-hero-ts5__txt__right .hp-promo-offer__sm {
    font-size: 1.7em;
    padding-top: 0.2em;
  }

  .hp-hero-ts5--ctas-left .hp-hero-ts5__txt__left .hp-ctas {
    margin-top: 2.2em;
    padding: 0;
  }

  .hp-hero-ts5--ctas-left .hp-hero-ts5__txt__left a.hp-cta--mob-ul-dt-block {
    border-color: #fff;
    background-color: #fff;
    color: #000;
    margin: 0 0.8em;
  }
}

/* ---------- hp-hero-ts5: mobile layout (updated split hero, WPP-102) ----------
   Under 1024px the hero is one full-width centered column on 750x937 art:
   eyebrow, headline, offers, then the buttons as white blocks, disclaimer at the
   bottom. With --ctas-left the buttons still come after the offers on mobile.
   Add hp-hero-ts5--col-m to keep the old mobile layout (text in the right 57%
   of 750x1367 art). */
@media (max-width: 1023px) {
  .hp-root section.hp-hero-ts5:not(.hp-hero-ts5--col-m)::before {
    padding-top: 125%;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-img-overlay {
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center;
    padding: 0 6% 12%;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-disclaimer--fixed {
    padding: 0 6%;
    font-size: 1.7em;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left,
  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right {
    display: contents;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left > *,
  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right > * {
    order: 1;
    width: 100%;
    text-align: center;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left > .hp-ctas {
    order: 2;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left .hp-eyebrow {
    font-size: 2.35em;
    letter-spacing: 0.06em;
    padding-bottom: 0.9em;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left h1 {
    padding: 0 0 0.35em;
    font-family: kudryashev-d-contrast, serif;
    font-size: 7.4em;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__left h1 .hp-modernline {
    font-size: 0.85em;
    margin: 0 0 0 -0.1em;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-v-center {
    height: auto;
    overflow: visible;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right .hp-eyebrow {
    font-size: 2.4em;
    margin-bottom: 0;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right .hp-promo-offer__lg {
    font-size: 5.6em;
    line-height: 1.05;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right .hp-promo-offer__sm {
    font-size: 2.3em;
    padding-top: 0.2em;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-hero-ts5__txt__right .hp-plus {
    font-size: 4.2em;
    line-height: 1;
    padding: 0.15em 0;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-ctas {
    display: flex;
    justify-content: center;
    gap: 4.6em;
    margin: 3em 0 0;
    padding: 0;
  }

  .hp-root .hp-hero-ts5:not(.hp-hero-ts5--col-m) .hp-ctas a.hp-cta--mob-ul-dt-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.4em;
    margin: 0;
    padding: 0 2em;
    border: 0;
    background: #fff;
    color: #000;
    font-size: 2.2em;
    line-height: 1;
    text-decoration: none;
  }
}

/* ---------- hp-hero ---------- */

.hp-hero {
  position: relative;
}

.hp-hero__overlay {
  position: absolute;
  inset: 0px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 0px 0px 7.5% 9.03%;
}

.hp-root .hp-hero .hp-hero__title {
  display: block;
  margin: 0px;
  color: rgb(255, 255, 255);
  font-family: "Ethic Serif", serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 33px;
  line-height: 0.927;
  letter-spacing: 0px;
}

.hp-hero__ctas {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}

.hp-hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 750 / 926;
}

.hp-hero__media img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-hero__media img.hp-hero__img--dt {
  display: none;
}

.hp-hero__media img.hp-hero__img--m {
  display: block;
}

@media (min-width: 1024px) {
  .hp-hero__overlay {
    justify-content: flex-start;
    padding: 14em 0px 0px 3.333%;
  }

  .hp-root .hp-hero .hp-hero__title {
    font-size: 3.4375em;
  }

  .hp-hero__ctas {
    gap: 1.5em;
    margin-top: 1.5625em;
    margin-left: 0.375em;
  }

  .hp-hero__media {
    aspect-ratio: 1680 / 665;
  }

  .hp-hero__media img.hp-hero__img--dt {
    display: block;
  }

  .hp-hero__media img.hp-hero__img--m {
    display: none;
  }
}

/* ---------- Hero autosize (taller art grows the hero) ----------
   The split hero and overlay hero used to lock their height to the design
   ratio and crop taller art. Now the ratio is only the minimum: the art and
   the ratio box share one grid cell, so the hero is as tall as whichever is
   taller (split hero: the copy shares the cell too, so long copy grows it). Correctly sized art looks exactly the same; shorter art still fills
   (object-fit: cover). The image hero and editorial hero already size to
   their art. The video spot keeps its fixed ratio on purpose: a video's size
   isn't known until it loads, so growing it would shift the page. */

/* split hero: ::before (ratio) + background art in one cell */
.hp-root section.hp-hero-ts5 {
  display: grid;
}

.hp-root section.hp-hero-ts5::before,
.hp-root .hp-hero-ts5 > picture.hp-hero-bg--abs,
.hp-root .hp-hero-ts5 > img.hp-hero-bg--abs,
.hp-root .hp-hero-ts5 > .hp-background {
  grid-area: 1 / 1;
}

.hp-root .hp-hero-ts5 > picture.hp-hero-bg--abs,
.hp-root .hp-hero-ts5 > img.hp-hero-bg--abs {
  position: relative;
  top: auto;
  left: auto;
  height: auto;
}

/* the copy is in the same cell too (in flow, not absolute), so copy that's
   taller than the art grows the hero instead of being cut off */
.hp-root .hp-hero-ts5 > .hp-img-overlay {
  position: relative;
  grid-area: 1 / 1;
  top: auto;
  box-sizing: border-box;
  height: auto;
  min-height: 100%;
}

/* old right-column mobile layout: keep the column on the right */
.hp-root .hp-hero-ts5--col-m > .hp-img-overlay {
  justify-self: end;
}

@media (min-width: 1024px) {
  /* equal space top and bottom (keeps the copy centered) so tall copy
     never runs into the disclaimer along the bottom */
  .hp-root .hp-hero-ts5 > .hp-img-overlay {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
  }
}

/* overlay hero: images in the ratio box. overflow: clip (not hidden) so the
   box can still grow past its aspect-ratio when the art is taller */
.hp-root .hp-hero__media {
  display: grid;
  overflow: clip;
}

.hp-root .hp-hero__media img {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Section spacing ---------- */

.hp-root .hp-trio--feature {
  margin-top: 35.5px;
}

.hp-root .hp-spot {
  margin-top: 34px;
}

.hp-root .hp-trio--editorial {
  margin-top: 40px;
}

.hp-artband--wtw {
  margin-top: 66px;
}

@media (min-width: 1024px) {
  .hp-root .hp-trio--feature {
    margin-top: 5.5em;
  }

  .hp-root .hp-spot {
    margin-top: 7.3125em;
  }

  .hp-root .hp-trio--editorial {
    margin-top: 7.0625em;
  }

  .hp-artband--wtw {
    margin-top: 6.875em;
  }
}

/* ---------- hp-rail (category quicklinks) ---------- */

.hp-rail {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 45px;
  padding: 25px 6.27% 0px;
  justify-content: safe center;
  white-space: nowrap;
}

.hp-rail::-webkit-scrollbar {
  display: none;
}

.hp-rail--top {
  padding: 12px 6.27%;
}

.hp-root .hp-rail a {
  color: rgb(17, 17, 17);
  margin: 0px;
}

@media (min-width: 1024px) {
  .hp-rail {
    overflow: visible;
    justify-content: center;
    gap: 8.125em;
    padding: 3em 0px 0px;
  }
}

/* ---------- hp-spot (video spot) ---------- */

.hp-spot {
  position: relative;
}

.hp-spot__overlay {
  position: absolute;
  inset: 0px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 106.97%;
}

.hp-spot__lockup {
  display: block;
  color: rgb(255, 255, 255);
  font-family: "Ethic Serif", serif;
  font-weight: 300;
  line-height: 52.5px;
  font-size: 60.5px;
  letter-spacing: 0px;
  margin: 0px 0px 49px;
}

.hp-spot__lockup-a {
  display: block;
}

.hp-spot__lockup-b {
  display: none;
}

.hp-spot__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 750 / 926;
}

.hp-spot__media video {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay video: plays over a still <picture> (e.g. a mobile-only animation).
   The still stays the fetchpriority / lazy <img>; the video loads from data-src
   after the page loads and covers it. Parent must be positioned. */
.hp-root .hp-video-responsive--overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* clicks fall through to the link/section */
}

.hp-root .hp-video-responsive--overlay video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-root .hp-spot__media .hp-video-responsive,
.hp-root .hp-spot__media .hp-video-responsive video {
  position: absolute; /* fill the fixed-ratio box (beats the generic .hp-video-responsive video rule) */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-spot__media video.hp-video--desktop {
  display: none;
}

.hp-spot__media video.hp-video--mobile {
  display: block;
}

@media (min-width: 1024px) {
  .hp-spot__overlay {
    padding-top: 16.35%;
  }

  .hp-spot__lockup {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 0.8354em;
  }

  .hp-spot__lockup-a {
    display: inline;
  }

  .hp-spot__lockup-b {
    display: inline;
  }

  .hp-spot__media {
    aspect-ratio: 1680 / 618;
  }

  .hp-spot__media video.hp-video--desktop {
    display: block;
  }

  .hp-spot__media video.hp-video--mobile {
    display: none;
  }
}

/* ---------- hp-trio ---------- */

.hp-root .hp-trio {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.hp-root .hp-trio::-webkit-scrollbar {
  display: none;
}

.hp-root .hp-trio__item {
  display: block;
  min-width: 0px;
}

.hp-root .hp-trio__item > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hp-root .hp-trio__item .hp-tile__cta {
  display: block;
}

@media (min-width: 1024px) {
  .hp-root .hp-trio {
    overflow: visible;
    gap: 0px;
    justify-content: space-between;
  }

  .hp-root .hp-trio__item {
    flex: 0 0 auto;
  }
}

.hp-root .hp-trio--feature {
  align-items: flex-end;
}

@media (max-width: 1023px) {
  .hp-root .hp-trio--feature {
    gap: 5%;
    padding: 0px 6%;
  }

  .hp-root .hp-trio--feature .hp-trio__item {
    flex: 0 0 64.64%;
  }

  .hp-root .hp-trio--feature .hp-trio__item--wide {
    flex-basis: 76.3%;
  }

  .hp-root .hp-trio--feature .hp-trio__item > img {
    aspect-ratio: 393 / 571;
  }

  .hp-root .hp-trio--feature .hp-tile__cta {
    margin-top: 9px;
  }
}

@media (min-width: 1024px) {
  .hp-root .hp-trio--feature {
    padding: 0px 7.202% 0px 7.44%;
  }

  .hp-root .hp-trio--feature .hp-trio__item--narrow-a,
  .hp-root .hp-trio--feature .hp-trio__item--narrow-b {
    width: 27.266%;
  }

  .hp-root .hp-trio--feature .hp-trio__item--wide {
    flex-basis: auto;
    width: 32.357%;
  }

  .hp-root .hp-trio--feature .hp-trio__item--narrow-a > img,
  .hp-root .hp-trio--feature .hp-trio__item--narrow-b > img {
    aspect-ratio: 391 / 571;
  }

  .hp-root .hp-trio--feature .hp-tile__cta {
    margin-top: 0.875em;
  }
}

.hp-root .hp-trio__item > img.hp-trio__img--tall {
  aspect-ratio: 485 / 596;
}

@media (max-width: 1023px) {
  .hp-root .hp-trio--editorial {
    gap: 7.05%;
    padding: 0px 8.4%;
  }

  .hp-root .hp-trio--editorial .hp-trio__item {
    flex: 0 0 62.66%;
  }

  .hp-root .hp-trio--editorial .hp-trio__item > img {
    aspect-ratio: 391 / 571;
  }

  .hp-root .hp-trio--editorial .hp-tile__cta {
    margin-top: 16px;
  }
}

@media (min-width: 1024px) {
  .hp-root .hp-trio--editorial {
    padding: 0px 6.369% 0px 7.44%;
  }

  .hp-root .hp-trio--editorial .hp-trio__item {
    width: 27.003%;
  }

  .hp-root .hp-trio--editorial .hp-trio__item > img {
    aspect-ratio: 391 / 571;
  }

  .hp-root .hp-trio--editorial .hp-trio__item:nth-child(3) {
    width: 27.417%;
  }

  .hp-root .hp-trio--editorial .hp-trio__item:nth-child(3) > img {
    aspect-ratio: 397 / 571;
  }

  .hp-root .hp-trio--editorial .hp-tile__cta {
    margin-top: 0.6875em;
  }
}

.hp-root .hp-artband--wtw img {
  aspect-ratio: 750 / 818;
}

@media (min-width: 1024px) {
  .hp-root .hp-artband--wtw img {
    aspect-ratio: 1680 / 513;
  }

  .hp-root span.hp-cta--ul.hp-artband__cta {
    display: inline-block;
    position: absolute;
    left: 7.38%;
    top: 55.36%;
    color: rgb(17, 17, 17);
    z-index: 2;
  }
}

/* ---------- hp-recs (Reflektion feed overrides) ---------- */

.hp-root section.hp-rfk.hp-recs {
  background: rgb(255, 255, 255) !important;
  padding: 27px 0px 40px !important;
  margin: 0px !important;
}

.hp-root section.hp-rfk.hp-recs .hp-rfk__content {
  background: rgb(255, 255, 255) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0px auto !important;
  padding: 0px 5.5% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.hp-root section.hp-rfk.hp-recs h3.hp-recs__title {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  font-family: "Ethic Serif", baskerville-urw, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  line-height: 0.98 !important;
  margin: 0px 0px 14px !important;
  padding: 0px !important;
  color: rgb(0, 0, 0) !important;
}

.hp-root section.hp-rfk.hp-recs h3.hp-recs__title em {
  font-family: "Ethic Serif", baskerville-urw, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

.hp-root section.hp-rfk.hp-recs .hp-rfk__embed {
  margin: 0px !important;
  min-height: 0px !important;
  padding: 0px !important;
  text-align: left !important;
}

.hp-root .hp-recs .reflektion-tiles.refhomepage1 {
  max-width: none !important;
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  box-sizing: border-box !important;
}

.hp-root .hp-recs .hp-product-grid,
.hp-root .hp-recs .wrapper-content,
.hp-root .hp-recs .html-slot-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0px !important;
  padding: 0px !important;
  overflow: visible !important;
}

.hp-root .hp-recs .reflektion-recommendations,
.hp-root .hp-recs .dressipi.reflektion-recommendations {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  box-sizing: border-box !important;
}

.hp-root .hp-recs .slick-list {
  margin: 0px !important;
  padding: 0px !important;
}

.hp-root .hp-recs .slick-slide {
  max-height: none !important;
  height: auto !important;
}

.hp-root .hp-recs .product-tile .image-container {
  height: auto !important;
}

.hp-root .hp-recs .reflektion-header,
.hp-root .hp-recs .slider-heading-section,
.hp-root .hp-recs .dressipi_title {
  display: none !important;
}

@media (min-width: 1024px) {
  .hp-root section.hp-rfk.hp-recs {
    padding: 6.2em 0px 3.5em !important;
  }

  .hp-root section.hp-rfk.hp-recs .hp-rfk__content {
    width: 91.4% !important;
    padding: 0px !important;
  }

  .hp-root section.hp-rfk.hp-recs h3.hp-recs__title {
    font-size: 2.36em !important;
    margin: 0px 0px 0.35em !important;
    letter-spacing: -0.026em !important;
  }
}

.hp-hero-sc3__txt .hp-ctas {
  margin-top: 1.2em;
}

.col-lg-3 {
  flex: 0 0 8%;
}

/* ---------- Social banner / video / loyalty ---------- */

.social-banner {
  max-width: 1680px;
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  height: auto;
  display: block;
}

.social-banner video {
  width: 100%;
}

.social-banner picture img {
  width: 100%;
  margin: 0px auto;
}

.video-responsive video {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0px;
}

#loyalty-banner-signincta,
#loyalty-banner-shop {
  display: none;
}

#loyalty-banner-joinnowcta,
#loyalty-banner-signincta,
#loyalty-banner-shop {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  font-weight: 400;
  font-size: 2.5em;
}

@media (min-width: 1024px) {
  #loyalty-banner-joinnowcta,
  #loyalty-banner-signincta,
  #loyalty-banner-shop {
    color: rgb(0, 0, 0);
    text-decoration: underline;
    font-weight: 400;
    font-size: 1em;
  }

  #loyalty-banner-joinnowcta,
  #loyalty-banner-signincta {
    color: rgb(0, 0, 0);
    text-decoration: underline;
    font-weight: 400;
    font-size: 1em;
    padding-top: 0.5em;
  }
}

/* =============================================================================
   3. hp-promobar COMPONENT
   Variants: --event, --framed, --flash, --cta-beside, --tiles
   Per-campaign values are set inline on the <section> as custom properties:
     --hp-promo-banner-bg / --hp-promo-banner-fg
     --hp-promobar-img-dt / --hp-promobar-img-m
     --hp-promobar-edge / --hp-promobar-edge-shade
     --hp-promobar-accent / --hp-promobar-accent-fg
     --hp-promobar-title-w-dt / --hp-promobar-title-w-m
     --hp-promobar-tile-a-bg/-fg, --hp-promobar-tile-b-bg/-fg   (--tiles)
============================================================================= */

.hp-promobar {
  --hp-promobar-accent: currentColor;
  --hp-promobar-accent-fg: #000;
  --hp-promobar-title-fg: currentColor;
  --hp-promobar-edge: #ffffff;
  --hp-promobar-edge-shade: #e5e5e5;
  --hp-promobar-img-dt: none;
  --hp-promobar-img-m: none;
  --hp-promobar-title-w-dt: 37.8125em;
  --hp-promobar-title-w-m: 190px;
  --hp-promobar-flash-period: 1.855s;
  --hp-promobar-flash-count: 2;
}

.hp-root section.hp-promobar {
  position: relative;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: var(--hp-promo-banner-bg);
  color: var(--hp-promo-banner-fg);
}

.hp-root .hp-promobar h2 > sup {
  top: 0px;
  font-size: 0.48em;
  line-height: 1;
  vertical-align: super;
}

.hp-root .hp-promobar__pct {
  font-size: max(9px, 0.55em);
  vertical-align: 0.55em;
  letter-spacing: 0.02em;
}

.hp-root .hp-promobar .global-promo-modal-btn {
  cursor: pointer;
  text-decoration: underline;
}

.hp-root .hp-promobar a.hp-cta--ul {
  margin: 0px;
  color: inherit;
  white-space: nowrap;
}

.hp-root .hp-promobar__head {
  margin: 0px;
  padding: 0px;
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.hp-root .hp-promobar__legal {
  display: block;
  margin: 0px;
  padding: 0px;
  color: inherit;
  font-family: sofia-pro, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ---------- Mobile carousel / desktop columns ---------- */

.hp-root .hp-promobar__dt {
  display: none;
}

.hp-root .hp-promobar__m {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hp-root .hp-promobar__m::-webkit-scrollbar {
  display: none;
}

.hp-root .hp-promobar__m-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8.27% 12px 6.27%;
  scroll-snap-align: start;
}

.hp-root .hp-promobar__m-copy {
  flex: 1 1 auto;
  min-width: 0px;
  text-align: left;
}

.hp-root .hp-promobar__m-copy .hp-promobar__legal {
  margin: 9px 0px 0px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
}

.hp-root .hp-promobar__m-slide > a.hp-cta--ul {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-bottom: 5px;
}

.hp-root .hp-promobar__m-dots {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 5px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.hp-root .hp-promobar__m-dot {
  width: 6px;
  height: 6px;
  margin: 0px;
  padding: 0px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.hp-root .hp-promobar__m-dot[aria-current="true"] {
  background: currentColor;
}

/* ---------- --event ---------- */

.hp-root section.hp-promobar--event {
  isolation: isolate;
  padding: 5px 0px;
  background: linear-gradient(
    90deg,
    var(--hp-promobar-edge) 0%,
    var(--hp-promobar-edge-shade) 22%,
    var(--hp-promobar-edge) 48%,
    var(--hp-promobar-edge-shade) 70%,
    var(--hp-promobar-edge) 100%
  );
}

.hp-root .hp-promobar--event::after {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 1;
  pointer-events: none;
  background: var(--hp-promobar-img-m) center / cover no-repeat;
}

.hp-root .hp-promobar__panel {
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 5.33%;
  background: var(--hp-promo-banner-bg);
  text-align: center;
}

.hp-root .hp-promobar--event .hp-promobar__offers,
.hp-root .hp-promobar--event .hp-promobar__offer {
  display: contents;
}

.hp-root .hp-promobar--event .hp-promobar__panel > *,
.hp-root .hp-promobar--event .hp-promobar__offers > *,
.hp-root .hp-promobar--event .hp-promobar__offer > * {
  position: relative;
  z-index: 2;
  order: 3;
}

.hp-root .hp-promobar--event .hp-promobar__eyebrow {
  order: 1;
}

.hp-root .hp-promobar--event .hp-promobar__title {
  order: 2;
}

.hp-root .hp-promobar--event .hp-promobar__ctas {
  order: 4;
}

.hp-root .hp-promobar--event .hp-promobar__legal--end {
  order: 5;
}

.hp-root .hp-promobar__eyebrow,
.hp-root .hp-promobar__sub {
  display: block;
  margin: 0px;
  font-family: sofia-pro, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.077em;
  text-transform: uppercase;
}

.hp-root .hp-promobar__sub {
  margin-top: 3px;
}

.hp-root .hp-promobar__title {
  margin: 3px 0px 0px;
  color: var(--hp-promobar-title-fg);
  font-family: var(--hp-font-editorial-display, "kudryashev-d-contrast", serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hp-root .hp-promobar--event .hp-promobar__head {
  margin: 10px 0px 0px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.0417em;
  text-align: center;
  text-transform: uppercase;
}

.hp-root .hp-promobar--event .hp-promobar__pct {
  font-size: 0.484em;
  vertical-align: 0.6em;
}

.hp-root .hp-promobar--event h2 > sup {
  font-size: 0.618em;
  vertical-align: 0.5em;
}

.hp-root .hp-promobar--event .hp-promobar__legal {
  margin: 8px 0px 0px;
}

.hp-root .hp-promobar__ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 7px;
}

/* ---------- --framed ---------- */

.hp-root section.hp-promobar--framed {
  --hp-promobar-title-w-m: 286px;
  --hp-promobar-title-w-dt: 22em;
  padding: 0px;
  background: var(--hp-promo-banner-bg);
}

.hp-root .hp-promobar--framed::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 2;
  pointer-events: none;
  border: 3px solid var(--hp-promobar-accent);
}

.hp-root .hp-promobar--framed .hp-promobar__panel {
  min-height: 203px;
  justify-content: flex-start;
  padding: 17px 4% 16px;
  background: transparent;
}

.hp-root .hp-promobar--framed .hp-promobar__title {
  margin: 0px;
  font-size: 21px;
  line-height: 1.1;
  white-space: nowrap;
}

.hp-root .hp-promobar__title.hp-promobar__title--img {
  font-size: 1em;
  line-height: 0;
}

.hp-root .hp-promobar__title--img img {
  display: block;
  width: var(--hp-promobar-title-w-m);
  max-width: 100%;
  height: auto;
}

.hp-root .hp-promobar--framed .hp-promobar__offers,
.hp-root .hp-promobar--framed .hp-promobar__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hp-root .hp-promobar--framed .hp-promobar__offers {
  margin-top: 8px;
}

.hp-root .hp-promobar--framed .hp-promobar__head {
  margin: 0px;
  font-size: 18.6px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.016em;
  white-space: nowrap;
}

.hp-root .hp-promobar--framed .hp-promobar__legal {
  margin: 1px 0px 0px;
}

.hp-root .hp-promobar--framed .hp-promobar__ctas {
  gap: 24px;
  margin-top: 9px;
}

.hp-root .hp-promobar--framed .hp-promobar__ctas > a.tia-cta--cap {
  font-size: 10px;
}

.hp-root .hp-promobar__plus {
  display: block;
  margin: 1px 0px 0px;
  font-family: sofia-pro, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.hp-root .hp-promobar__pill {
  display: inline-block;
  margin: 5px 0px 8px;
  padding: 1px 6px;
  background: var(--hp-promobar-accent);
  color: var(--hp-promobar-accent-fg);
  font-family: sofia-pro, sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.079em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- --flash ---------- */

.hp-root .hp-promobar--flash .hp-promobar__head {
  color: var(--hp-promobar-accent);
  animation: hp-promobar-flash var(--hp-promobar-flash-period) linear
    var(--hp-promobar-flash-count) forwards;
}

.hp-root .hp-promobar--flash:hover .hp-promobar__head,
.hp-root .hp-promobar--flash:focus-within .hp-promobar__head {
  animation-play-state: paused;
}

@keyframes hp-promobar-flash {
  0% {
    color: var(--hp-promobar-accent);
    animation-timing-function: step-end;
  }
  50% {
    color: var(--hp-promo-banner-fg);
    animation-timing-function: step-end;
  }
  100% {
    color: var(--hp-promobar-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-root .hp-promobar--flash .hp-promobar__head {
    animation: none;
  }
}

/* ---------- --stacked-m (columns, stacked rows on mobile) ----------
   Mobile shows the desktop columns as full-width rows (copy left, CTA right)
   instead of the swipe carousel, so the __m / __m-dots markup can be left out.
   Row backgrounds on mobile: --hp-promobar-row-1-bg / -2-bg / -3-bg
   (desktop keeps --hp-promo-banner-bg). Use with the --cta-beside markup. */
.hp-promobar--stacked-m {
  --hp-promobar-row-1-bg: transparent;
  --hp-promobar-row-2-bg: transparent;
  --hp-promobar-row-3-bg: transparent;
}

@media (max-width: 1023px) {
  .hp-root .hp-promobar--stacked-m .hp-promobar__m,
  .hp-root .hp-promobar--stacked-m .hp-promobar__m-dots,
  .hp-root .hp-promobar--stacked-m .hp-promobar__rule {
    display: none;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__dt {
    display: flex;
    flex-direction: column;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62px;
    padding: 13px 8.27% 13px 6.27%;
    text-align: left;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col:nth-child(1) {
    background: var(--hp-promobar-row-1-bg);
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col:nth-child(3) {
    background: var(--hp-promobar-row-2-bg);
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col:nth-child(5) {
    background: var(--hp-promobar-row-3-bg);
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col .hp-eyebrow {
    display: block;
    margin: 0 0 3px;
    color: inherit;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__head-row .hp-promobar__head {
    flex: 0 1 auto;
    min-width: 0;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__head-row > a {
    flex: 0 0 auto;
  }

  .hp-root .hp-promobar--stacked-m .hp-promobar__col .hp-promobar__legal {
    margin: 5px 0 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: left;
  }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
  .hp-root .hp-promobar__m,
  .hp-root .hp-promobar__m-dots {
    display: none;
  }

  .hp-root .hp-promobar__dt {
    width: 100%;
    min-height: 5.8125em;
    display: flex;
    align-items: stretch;
  }

  .hp-root .hp-promobar__col {
    flex: 1 1 0px;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1em;
    padding: 0.5em 1.25em;
    text-align: left;
  }

  .hp-root .hp-promobar:not(.hp-promobar--cta-beside) .hp-promobar__dt:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
  }

  .hp-root .hp-promobar:not(.hp-promobar--cta-beside) .hp-promobar__dt:has(> :nth-child(5)) {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
  }

  .hp-root .hp-promobar__col:first-child {
    padding-left: 2.9em;
  }

  .hp-root .hp-promobar__rule {
    flex: 0 0 1px;
    width: 1px;
    margin: 0.5em 0px;
    background: currentColor;
  }

  .hp-root .hp-promobar__col .hp-promobar__head {
    max-width: 100%;
    font-size: clamp(1.125em, 1.45vw, 1.5em);
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .hp-root .hp-promobar__col .hp-promobar__pct {
    font-size: 0.484em;
    vertical-align: 0.6em;
  }

  .hp-root .hp-promobar__foot {
    min-width: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
  }

  .hp-root .hp-promobar__foot > a {
    flex: 0 0 auto;
  }

  .hp-root .hp-promobar__col .hp-promobar__legal {
    flex: 0 1 auto;
    min-width: 0px;
    font-size: max(9px, 0.5625em);
    line-height: 1.5556;
    text-align: right;
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__col {
    align-items: flex-start;
    padding: 0.5em 1% 0.5em 1.5%;
    overflow-wrap: break-word;
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__col:first-child {
    padding-left: 1%;
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__rule {
    margin: 0.75em 0px;
  }

  .hp-root .hp-promobar__col .hp-eyebrow {
    display: block;
    margin: 0px 0px 0.2em;
    color: inherit;
    line-height: 1.2;
  }

  .hp-root .hp-promobar__head-row {
    align-self: stretch;
    min-width: 0px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
  }

  .hp-root .hp-promobar__head-row .hp-promobar__head {
    flex: 0 1 auto;
    min-width: 0px;
  }

  .hp-root .hp-promobar__head-row > a {
    flex: 0 0 auto;
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__col .hp-promobar__head {
    font-size: clamp(1em, 1.6vw, 1.6em);
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__col .hp-promobar__pct {
    font-size: 0.6em;
    vertical-align: 0.3em;
  }

  .hp-root .hp-promobar--cta-beside .hp-promobar__col .hp-promobar__legal {
    max-width: 100%;
    line-height: 1;
    text-align: left;
  }

  .hp-root section.hp-promobar--event {
    padding: 0.5em 0px;
  }

  .hp-root .hp-promobar--event::after {
    background-image: var(--hp-promobar-img-dt);
  }

  .hp-root .hp-promobar__panel {
    min-height: 10.3125em;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5625em 2.4% 0px 6.79%;
  }

  .hp-root .hp-promobar--event .hp-promobar__offers {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hp-root .hp-promobar--event .hp-promobar__offer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hp-root .hp-promobar__title {
    flex: 0 0 auto;
    margin: 0px;
    font-size: 2.85em;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
  }

  .hp-root .hp-promobar__eyebrow,
  .hp-root .hp-promobar__sub {
    font-size: 0.8125em;
    line-height: 1.54;
    letter-spacing: 0.077em;
  }

  .hp-root .hp-promobar__sub {
    margin-top: 0.35em;
  }

  .hp-root .hp-promobar--event .hp-promobar__head {
    margin: 0.5em 0px 0px;
    font-size: 1.87em;
    line-height: 1.15;
    white-space: nowrap;
  }

  .hp-root .hp-promobar--event .hp-promobar__legal {
    margin: 1.85em 0px 0px;
    font-size: max(9px, 0.5625em);
    line-height: 1.556;
  }

  .hp-root .hp-promobar__ctas {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 1.6em;
    margin: 0px 0px 0.5625em;
  }

  .hp-root section.hp-promobar--framed {
    padding: 0px;
  }

  .hp-root .hp-promobar--framed::before {
    border-width: 0.3125em;
  }

  .hp-root .hp-promobar--framed .hp-promobar__panel {
    min-height: 11.3125em;
    justify-content: space-between;
    padding: 0.875em 5.3% 0px 6.37%;
  }

  .hp-root .hp-promobar--framed .hp-promobar__title {
    font-size: 3.3em;
    line-height: 0.95;
  }

  .hp-root .hp-promobar__title.hp-promobar__title--img {
    font-size: 1em;
    line-height: 0;
  }

  .hp-root .hp-promobar__title--img img {
    width: var(--hp-promobar-title-w-dt);
  }

  .hp-root .hp-promobar--framed .hp-promobar__offers {
    flex-direction: row;
    align-items: baseline;
    gap: 3em;
    margin: 0.75em 3.5em 0px 0px;
  }

  .hp-root .hp-promobar--framed .hp-promobar__offer {
    position: relative;
  }

  .hp-root .hp-promobar--framed .hp-promobar__head {
    margin: 0px;
    font-size: 2.925em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.004em;
  }

  .hp-root .hp-promobar--framed .hp-promobar__head--sm {
    font-size: 2.509em;
  }

  .hp-root .hp-promobar--framed h2 > sup {
    font-size: 0.214em;
    font-weight: 500;
    vertical-align: 2.6em;
  }

  .hp-root .hp-promobar--framed .hp-promobar__head--sm > sup {
    font-size: 0.249em;
    vertical-align: 2.2em;
  }

  .hp-root .hp-promobar__head-sub {
    display: block;
    margin-top: 0.1em;
    font-size: 0.427em;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0px;
  }

  .hp-root .hp-promobar__head--sm .hp-promobar__head-sub {
    font-size: 0.498em;
  }

  .hp-root .hp-promobar__plus {
    margin: 0.15em 0px 0px;
    font-size: 2.1875em;
  }

  .hp-root .hp-promobar--event .hp-promobar__pill {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin: 0px 0px 0.78em;
    padding: 0.077em 0.6em;
    font-size: 0.8125em;
    line-height: 1.54;
    letter-spacing: 0.077em;
    transform: translateX(-50%);
  }

  .hp-root .hp-promobar--framed .hp-promobar__legal {
    margin: 1.1em 0px 0px;
    font-size: max(9px, 0.625em);
    line-height: 1.4;
  }

  .hp-root .hp-promobar--framed .hp-promobar__ctas {
    gap: 2.66em;
    margin: 0px;
  }

  .hp-root .hp-promobar--framed .hp-promobar__ctas > a.tia-cta--cap {
    font-size: 0.94em;
  }
}

/* ---------- tia-cta--cap (underlined caps CTA) ---------- */

.hp-root .hp-cta--ul.tia-cta--cap {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3333;
  letter-spacing: 0.0067em;
}

@media (min-width: 1024px) {
  .hp-root .hp-cta--ul.tia-cta--cap {
    font-size: 0.94em;
  }
}

/* ---------- --tiles (title + 2 colored offer tiles + CTAs) ----------
   NEW in v1. Values from Figma "10.26_STYLE_YOUR_SEASON":
     desktop frame 1680x167 (1em = 16px at 1680), mobile frame 390x156 (px).
   Markup template: hp-promobar--tiles.html                               */

.hp-promobar--tiles {
  --hp-promobar-tile-a-bg: #71076b;
  --hp-promobar-tile-a-fg: #ffffff;
  --hp-promobar-tile-b-bg: #c38bcd;
  --hp-promobar-tile-b-fg: #ffffff;
  --hp-promobar-title-w-m: 150px;
  --hp-promobar-title-w-dt: 27.75em;
}

.hp-root section.hp-promobar--tiles {
  padding: 0;
  background: var(--hp-promobar-img-m) center / cover no-repeat,
    var(--hp-promo-banner-bg);
}

.hp-root .hp-promobar--tiles .hp-promobar__panel {
  min-height: 156px;
  justify-content: flex-start;
  padding: 16px 4% 13px;
  background: transparent;
}

.hp-root .hp-promobar--tiles .hp-promobar__offers {
  display: contents;
}

.hp-root .hp-promobar--tiles .hp-promobar__panel > *,
.hp-root .hp-promobar--tiles .hp-promobar__offers > * {
  position: relative;
  z-index: 2;
}

/* Title: live text, Ethic Serif Italic 20px (mobile) / 40px (desktop).
   For an image title, add .hp-promobar__title--img and a <picture> instead. */
.hp-root .hp-promobar--tiles .hp-promobar__title {
  order: 1;
  margin: 0;
  font-family: "Ethic Serif", baskerville-urw, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.hp-root .hp-promobar--tiles .hp-promobar__tiles {
  order: 2;
}

.hp-root .hp-promobar--tiles .hp-promobar__ctas {
  order: 3;
  gap: 24px;
  margin-top: 12px;
}

.hp-root .hp-promobar--tiles .hp-promobar__ctas > a.tia-cta--cap {
  font-size: 11.44px;
  line-height: 1;
  letter-spacing: 0.0045em;
}

/* Legal: Figma has 7.28px Light on mobile. Kept at the site's 9px legal minimum,
   and Regular, because the Typekit kits have no Sofia Pro Light (300 falls back to Thin). */
.hp-root .hp-promobar--tiles .hp-promobar__legal {
  order: 4;
  margin: 9px 0 0;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.hp-root .hp-promobar__tiles {
  display: flex;
  justify-content: center;
  gap: 8.6px;
  width: 100%; /* otherwise the row shrinks to its text width on mobile */
  margin-top: 12px;
}

.hp-root .hp-promobar--tiles .hp-promobar__offer {
  flex: 0 1 146px;
  min-width: 0;
  min-height: 51px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  text-align: center;
}

.hp-root .hp-promobar--tiles .hp-promobar__offer--a {
  background: var(--hp-promobar-tile-a-bg);
  color: var(--hp-promobar-tile-a-fg);
}

.hp-root .hp-promobar--tiles .hp-promobar__offer--b {
  background: var(--hp-promobar-tile-b-bg);
  color: var(--hp-promobar-tile-b-fg);
}

/* --tiles + --flash: the two tiles swap colors back and forth (hard switch).
   --hp-promobar-flash-period = one full cycle (each tile holds a color for half).
   --hp-promobar-flash-count  = cycles before it stops (infinite by default here).
   Pauses on hover/focus; off for reduced motion. The head-text flash from
   plain --flash is turned off on tiles. */
.hp-root section.hp-promobar.hp-promobar--tiles.hp-promobar--flash {
  --hp-promobar-flash-period: 2.2s;
  --hp-promobar-flash-count: infinite;
}

.hp-root .hp-promobar--tiles.hp-promobar--flash .hp-promobar__head {
  color: inherit;
  animation: none;
}

.hp-root .hp-promobar--tiles.hp-promobar--flash .hp-promobar__offer--a {
  animation: hp-promobar-tile-swap-a var(--hp-promobar-flash-period) linear
    var(--hp-promobar-flash-count);
}

.hp-root .hp-promobar--tiles.hp-promobar--flash .hp-promobar__offer--b {
  animation: hp-promobar-tile-swap-b var(--hp-promobar-flash-period) linear
    var(--hp-promobar-flash-count);
}

.hp-root .hp-promobar--tiles.hp-promobar--flash:hover .hp-promobar__offer,
.hp-root .hp-promobar--tiles.hp-promobar--flash:focus-within .hp-promobar__offer {
  animation-play-state: paused;
}

@keyframes hp-promobar-tile-swap-a {
  0% {
    background: var(--hp-promobar-tile-a-bg);
    color: var(--hp-promobar-tile-a-fg);
    animation-timing-function: step-end;
  }
  50% {
    background: var(--hp-promobar-tile-b-bg);
    color: var(--hp-promobar-tile-b-fg);
    animation-timing-function: step-end;
  }
  100% {
    background: var(--hp-promobar-tile-a-bg);
    color: var(--hp-promobar-tile-a-fg);
  }
}

@keyframes hp-promobar-tile-swap-b {
  0% {
    background: var(--hp-promobar-tile-b-bg);
    color: var(--hp-promobar-tile-b-fg);
    animation-timing-function: step-end;
  }
  50% {
    background: var(--hp-promobar-tile-a-bg);
    color: var(--hp-promobar-tile-a-fg);
    animation-timing-function: step-end;
  }
  100% {
    background: var(--hp-promobar-tile-b-bg);
    color: var(--hp-promobar-tile-b-fg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-root .hp-promobar--tiles.hp-promobar--flash .hp-promobar__offer {
    animation: none;
  }
}

/* "40% OFF*": Sofia Pro Regular; % at 69.5%, * Medium at 25.8%, both of the head size */
.hp-root .hp-promobar--tiles .hp-promobar__head {
  margin: 0;
  font-size: 22.26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.0155em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.hp-root .hp-promobar--tiles .hp-promobar__pct {
  font-size: 0.695em;
  vertical-align: 0.15em;
  letter-spacing: 0;
}

.hp-root .hp-promobar--tiles h2 > sup {
  top: 0;
  font-size: 0.2576em;
  font-weight: 500;
  line-height: 1;
  vertical-align: 2em;
}

/* "TOPS & SWEATERS": Sofia Pro Medium at 43.8% of the head size */
.hp-root .hp-promobar--tiles .hp-promobar__head-sub {
  display: block;
  margin-top: -0.14em;
  font-size: 0.438em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.0118em;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .hp-root section.hp-promobar--tiles {
    background-image: var(--hp-promobar-img-dt), none;
    background-color: var(--hp-promo-banner-bg);
  }

  .hp-root .hp-promobar--tiles .hp-promobar__panel {
    min-height: 10.4375em; /* 167px */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 3.96%; /* symmetric so the middle column is truly centered */
  }

  .hp-root .hp-promobar--tiles .hp-promobar__title {
    grid-row: 1; /* mobile `order` would otherwise push items to row 2 */
    grid-column: 1;
    justify-self: start;
    margin-left: 0.35em; /* 14px at 40px type: title starts ~80px in at 1680 */
    font-size: 2.5em; /* 40px */
  }

  .hp-root .hp-promobar--tiles .hp-promobar__title.hp-promobar__title--img {
    font-size: 1em;
  }

  .hp-root .hp-promobar--tiles .hp-promobar__offers {
    grid-row: 1; /* mobile `order` would otherwise push items to row 2 */
    grid-column: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.9375em; /* tiles sit 31px from the top */
  }

  .hp-root .hp-promobar--tiles .hp-promobar__tiles {
    width: auto;
    gap: 0.9375em; /* 15px */
    margin: 0 0 1.0625em; /* 17px to the legal line (set here, in root em) */
  }

  .hp-root .hp-promobar--tiles .hp-promobar__offer {
    flex: 0 0 auto;
    width: 17.5em; /* 280px */
    min-height: 5.6875em; /* 91px */
    padding: 0.3em 0.5em;
  }

  .hp-root .hp-promobar--tiles .hp-promobar__head {
    font-size: 2.481em; /* 39.7px */
  }

  .hp-root .hp-promobar--tiles .hp-promobar__ctas {
    grid-row: 1; /* mobile `order` would otherwise push items to row 2 */
    grid-column: 3;
    justify-self: end;
    gap: 2.9em; /* ~46px */
    margin: 0;
  }

  .hp-root .hp-promobar--tiles .hp-promobar__ctas > a.tia-cta--cap {
    font-size: 0.875em; /* 14px */
    line-height: 1.43;
    letter-spacing: 0.0071em;
  }

  .hp-root .hp-promobar--tiles .hp-promobar__legal {
    margin: 0;
    font-size: max(9px, 0.5625em); /* 9px */
    font-weight: 400;
    line-height: 1.556; /* 14px */
    letter-spacing: 0.011em;
  }
}