/**
 * Applied only when preview server injects retargeting mode.
 * Hides sale / rebate / percentage chrome so partner messaging can stand alone.
 */
html.mirage-retarget .promo-date,
html.mirage-retarget .promo-offer,
html.mirage-retarget .promo-label,
html.mirage-retarget .promo-rule,
html.mirage-retarget .v2-promo-date,
html.mirage-retarget .v2-promo-offer,
html.mirage-retarget .v2-promo-label,
html.mirage-retarget #ijwdve,
html.mirage-retarget #ivx5rw,
html.mirage-retarget #irzrcmk,
html.mirage-retarget #i6yqx4,
html.mirage-retarget #ifghg,
html.mirage-retarget #io23gj,
html.mirage-retarget #im5evh,
html.mirage-retarget #iivwxfy {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Headline: originals use 2–3 spans (e.g. HARDWOOD / FLOORING / SALE). Hide extras. ── */
html.mirage-retarget .promo-sale > span:nth-child(n + 3),
html.mirage-retarget .v2-promo-sale > span:nth-child(n + 3) {
  display: none !important;
}

/* ── Widescraper + interstitial: sale chrome hid the right-side wash purpose; remove it and center the stack ── */
html.mirage-retarget .promo-opener--widescraper .promo-panel::before,
html.mirage-retarget .promo-opener--interstitial .promo-panel::before {
  display: none !important;
}

html.mirage-retarget .promo-opener--widescraper .promo-copy {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 88px !important;
  width: min(280px, 86%) !important;
  max-width: min(232px, calc(100% - 100px)) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html.mirage-retarget .promo-opener--interstitial .promo-copy {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 82px !important;
  width: min(260px, 88%) !important;
  max-width: 88% !important;
  text-align: center !important;
}

html.mirage-retarget .promo-opener--widescraper .promo-copy-small {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 6px !important;
  width: min(280px, 90%) !important;
  max-width: min(232px, calc(100% - 100px)) !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.2);
  box-sizing: border-box !important;
}

html.mirage-retarget .promo-opener--interstitial .promo-copy-small {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 6px !important;
  width: min(260px, 90%) !important;
  max-width: 90% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.2);
}

html.mirage-retarget .promo-opener--widescraper .promo-cta {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 34px !important;
  max-width: min(232px, calc(100% - 100px)) !important;
  z-index: 6 !important;
  box-sizing: border-box !important;
}

/* Swatch in opener: spring CSS hides .promo-floor; show it in retarget and bottom-align with CTA */
html.mirage-retarget .promo-opener--widescraper .promo-floor {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 10px !important;
  top: auto !important;
  width: 76px !important;
  height: 76px !important;
  max-width: 26vw !important;
  max-height: 26vw !important;
  bottom: 34px !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

html.mirage-retarget .promo-opener--interstitial .promo-cta {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 30px !important;
  z-index: 6 !important;
}

html.mirage-retarget .promo-opener--interstitial .promo-floor {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 10px !important;
  top: auto !important;
  width: 64px !important;
  height: 64px !important;
  bottom: 30px !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

html.mirage-retarget .promo-opener--widescraper .promo-sale span,
html.mirage-retarget .promo-opener--interstitial .promo-sale span {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html.mirage-retarget .promo-opener--widescraper .promo-sale span:first-child,
html.mirage-retarget .promo-opener--interstitial .promo-sale span:first-child {
  font-size: 30px !important;
  letter-spacing: 0.03em !important;
}

html.mirage-retarget .promo-opener--widescraper .promo-sale span:nth-child(2),
html.mirage-retarget .promo-opener--widescraper .promo-sale span:last-child,
html.mirage-retarget .promo-opener--interstitial .promo-sale span:nth-child(2),
html.mirage-retarget .promo-opener--interstitial .promo-sale span:last-child {
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  line-height: 0.95 !important;
  -webkit-text-stroke-width: 1.4px !important;
}

html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--widescraper .promo-sale span:first-child,
html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--interstitial .promo-sale span:first-child {
  font-size: 26px !important;
}

html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--widescraper .promo-sale span:nth-child(2),
html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--widescraper .promo-sale span:last-child,
html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--interstitial .promo-sale span:nth-child(2),
html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--interstitial .promo-sale span:last-child {
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
}

/* ── Bigbox: remove right white wash; center headline, legal, CTA over full photo ── */
html.mirage-retarget .promo-opener--bigbox .promo-panel::before {
  display: none !important;
}

html.mirage-retarget .promo-opener--bigbox .promo-copy {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 92px !important;
  width: min(300px, 88%) !important;
  max-width: 88% !important;
  text-align: center !important;
}

html.mirage-retarget .promo-opener--bigbox .promo-copy-small {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 4px !important;
  width: min(280px, 92%) !important;
  max-width: 92% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.2);
}

html.mirage-retarget .promo-opener--bigbox .promo-cta {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 26px !important;
}

html.mirage-retarget .promo-opener--bigbox .promo-sale span:last-child {
  font-size: 22px !important;
  letter-spacing: 0.05em !important;
  line-height: 0.95 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--bigbox .promo-sale span:last-child {
  font-size: 18px !important;
}

/* ── Billboard frame 1: sale block uses huge type; retargeting lines are longer ── */
html.mirage-retarget .promo-opener--billboard .promo-sale span:first-child {
  font-size: 68px !important;
  letter-spacing: 0.02em !important;
  line-height: 0.88 !important;
}

html.mirage-retarget .promo-opener--billboard .promo-sale span:last-child {
  font-size: 44px !important;
  letter-spacing: 0.05em !important;
  line-height: 0.88 !important;
  -webkit-text-stroke-width: 2px !important;
  white-space: normal !important;
  max-width: 92vw;
  overflow-wrap: anywhere;
}

html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--billboard .promo-sale span:first-child {
  font-size: 52px !important;
}

html.mirage-retarget[data-mirage-lang="fr"] .promo-opener--billboard .promo-sale span:last-child {
  font-size: 34px !important;
  letter-spacing: 0.03em !important;
}

/* Billboard v2 left stack */
html.mirage-retarget .v2-promo-sale span:first-child {
  font-size: 30px !important;
  letter-spacing: 0.03em !important;
}

html.mirage-retarget .v2-promo-sale span:last-child {
  font-size: 20px !important;
  letter-spacing: 0.06em !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-text-stroke-width: 1.2px !important;
}

html.mirage-retarget[data-mirage-lang="fr"] .v2-promo-sale span:first-child {
  font-size: 24px !important;
}

html.mirage-retarget[data-mirage-lang="fr"] .v2-promo-sale span:last-child {
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
}

/* ── Billboard (970×250): same empty right-panel issue; center stack over full bleed ── */
html.mirage-retarget .promo-opener--billboard .promo-panel::before {
  display: none !important;
}

/*
 * Spring HTML nests .promo-cta inside .promo-copy; base CSS uses top:50% on the CTA,
 * which centers it inside the short headline box and collides with .promo-sale.
 * Reserve foot space on .promo-copy and pin the CTA to the bottom of that box.
 */
html.mirage-retarget .promo-opener--billboard .promo-copy {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 22px !important;
  width: min(900px, 88%) !important;
  max-width: 88% !important;
  text-align: center !important;
  padding-bottom: 58px !important;
  box-sizing: border-box !important;
}

html.mirage-retarget .promo-opener--billboard .promo-copy .promo-cta {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

html.mirage-retarget .promo-opener--billboard .promo-copy-small {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 6px !important;
  width: min(480px, 78%) !important;
  max-width: 78% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.25);
}