/* =============================================================================
  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("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;
  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;
}

.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 ---------- */

.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;
  }
}

/* ---------- 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;
  }
}