/*
 * Front module recovery locks.
 * This stylesheet is loaded last on the homepage, so keep these rules narrow:
 * they only restore the already-approved hero, path cards, and bag entry layout
 * when the legacy homepage CSS loses the expected generated-element/card rules.
 */

.hero,
body.home.front-page .hero,
body.pdl-static-theme-preview .hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.hero-grid,
body.home.front-page .hero-grid,
body.pdl-static-theme-preview .hero-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr) !important;
  gap: clamp(40px, 5vw, 80px) !important;
  align-items: center !important;
  min-height: clamp(630px, 47vw, 720px) !important;
}

.hero-copy,
body.home.front-page .hero-copy,
body.pdl-static-theme-preview .hero-copy {
  position: relative !important;
  z-index: 3 !important;
}

.hero-stage,
body.home.front-page .hero-stage,
body.pdl-static-theme-preview .hero-stage {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-height: clamp(500px, 42vw, 680px) !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.hero-stage::after,
body.home.front-page .hero-stage::after,
body.pdl-static-theme-preview .hero-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 7% 2% 7% 0 !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 58% 46%, rgba(255, 255, 255, .92) 0 24%, rgba(213, 231, 246, .45) 48%, rgba(213, 231, 246, 0) 70%),
    radial-gradient(circle at 64% 48%, rgba(7, 91, 199, .13), rgba(7, 91, 199, 0) 58%) !important;
  filter: blur(.2px) !important;
  pointer-events: none !important;
}

.hero-stage::before,
body.home.front-page .hero-stage::before,
body.pdl-static-theme-preview .hero-stage::before {
  content: "" !important;
  position: absolute !important;
  right: clamp(70px, 7.5vw, 178px) !important;
  bottom: clamp(24px, 3.7vw, 58px) !important;
  z-index: 1 !important;
  display: block !important;
  width: min(41vw, 650px) !important;
  height: min(39vw, 545px) !important;
  background: url("../../images/hero/hero-product-family.webp") center bottom / contain no-repeat !important;
  filter: drop-shadow(0 34px 48px rgba(7, 38, 70, .2)) !important;
  pointer-events: none !important;
  transform: translate3d(-24px, 0, 0) !important;
}

.hero-product-note,
body.home.front-page .hero-product-note,
body.pdl-static-theme-preview .hero-product-note {
  position: absolute !important;
  right: clamp(92px, 9vw, 210px) !important;
  bottom: clamp(10px, 1.8vw, 24px) !important;
  z-index: 3 !important;
  display: block !important;
  width: auto !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(159, 183, 207, .38) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: rgba(52, 69, 89, .78) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-shadow: 0 10px 26px rgba(7, 38, 70, .08) !important;
  backdrop-filter: blur(10px) !important;
}

.final-paths-section,
body.home.front-page .final-paths-section,
body.pdl-static-theme-preview .final-paths-section {
  position: relative !important;
  z-index: 1 !important;
  padding-block: clamp(72px, 7vw, 104px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 132, 224, .08), transparent 31%),
    radial-gradient(circle at 86% 6%, rgba(36, 181, 159, .08), transparent 30%),
    linear-gradient(180deg, #f7fbfe 0%, #ffffff 48%, #f2f8fc 100%) !important;
}

.final-path-grid,
body.home.front-page .final-path-grid,
body.pdl-static-theme-preview .final-path-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: clamp(20px, 2.5vw, 34px) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: var(--container, 1280px) !important;
  margin: clamp(30px, 3.2vw, 44px) auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.final-path-card,
body.home.front-page .final-path-card,
body.pdl-static-theme-preview .final-path-card {
  position: relative !important;
  display: block !important;
  height: clamp(330px, 27vw, 420px) !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #0b1c2e !important;
  opacity: 1 !important;
  color: #fff !important;
  box-shadow: 0 24px 62px rgba(18, 40, 63, .16) !important;
  text-decoration: none !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 260ms cubic-bezier(.22, .8, .25, 1), box-shadow 260ms ease !important;
  contain: layout paint !important;
}

.final-path-card img,
body.home.front-page .final-path-card img,
body.pdl-static-theme-preview .final-path-card img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: saturate(1.07) contrast(1.03) brightness(1.03) !important;
  transform: scale(1.01) !important;
  transition: transform 480ms cubic-bezier(.22, .8, .25, 1), filter 240ms ease !important;
}

.final-path-card:nth-child(2) img,
body.home.front-page .final-path-card:nth-child(2) img,
body.pdl-static-theme-preview .final-path-card:nth-child(2) img {
  object-position: center 52% !important;
  transform: scale(1.08) !important;
}

.final-path-card::before,
body.home.front-page .final-path-card::before,
body.pdl-static-theme-preview .final-path-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 35%),
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .18), transparent 38%) !important;
}

.final-path-card::after,
body.home.front-page .final-path-card::after,
body.pdl-static-theme-preview .final-path-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(3, 14, 25, 0) 0%, rgba(3, 14, 25, 0) 50%, rgba(5, 26, 45, .34) 72%, rgba(4, 20, 36, .86) 100%) !important;
}

.final-path-copy,
body.home.front-page .final-path-copy,
body.pdl-static-theme-preview .final-path-copy {
  position: absolute !important;
  left: clamp(22px, 2vw, 34px) !important;
  right: clamp(22px, 2vw, 34px) !important;
  bottom: clamp(22px, 2.2vw, 34px) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-align: left !important;
  background: transparent !important;
  text-shadow: 0 12px 28px rgba(0, 16, 30, .42) !important;
  transform: none !important;
}

.final-path-copy small,
body.home.front-page .final-path-copy small,
body.pdl-static-theme-preview .final-path-copy small {
  width: max-content !important;
  max-width: 100% !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(221, 243, 255, .28) !important;
  border-radius: 999px !important;
  background: rgba(5, 27, 46, .36) !important;
  color: #ecfbff !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  backdrop-filter: blur(10px) !important;
}

.final-path-copy strong,
body.home.front-page .final-path-copy strong,
body.pdl-static-theme-preview .final-path-copy strong {
  display: block !important;
  max-width: 8.5em !important;
  color: #fff !important;
  font-size: clamp(1.45rem, 1.72vw, 2rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.final-path-copy em,
body.home.front-page .final-path-copy em,
body.pdl-static-theme-preview .final-path-copy em {
  display: block !important;
  max-width: 18em !important;
  color: rgba(236, 249, 255, .9) !important;
  font-size: clamp(.9rem, .9vw, 1rem) !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

@media (hover: hover) {
  .final-path-card:hover,
  .final-path-card:focus-visible,
  body.home.front-page .final-path-card:hover,
  body.home.front-page .final-path-card:focus-visible,
  body.pdl-static-theme-preview .final-path-card:hover,
  body.pdl-static-theme-preview .final-path-card:focus-visible {
    box-shadow: 0 34px 84px rgba(17, 58, 92, .2) !important;
    transform: translate3d(0, -6px, 0) !important;
  }

  .final-path-card:hover img,
  .final-path-card:focus-visible img,
  body.home.front-page .final-path-card:hover img,
  body.home.front-page .final-path-card:focus-visible img,
  body.pdl-static-theme-preview .final-path-card:hover img,
  body.pdl-static-theme-preview .final-path-card:focus-visible img {
    filter: saturate(1.12) contrast(1.04) brightness(1.05) !important;
    transform: scale(1.06) !important;
  }

  .final-path-card:nth-child(2):hover img,
  .final-path-card:nth-child(2):focus-visible img,
  body.home.front-page .final-path-card:nth-child(2):hover img,
  body.home.front-page .final-path-card:nth-child(2):focus-visible img,
  body.pdl-static-theme-preview .final-path-card:nth-child(2):hover img,
  body.pdl-static-theme-preview .final-path-card:nth-child(2):focus-visible img {
    transform: scale(1.13) !important;
  }
}

#bag-types .bag-grid,
body.home.front-page #bag-types .bag-grid,
body.pdl-static-theme-preview #bag-types .bag-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 26px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#bag-types .bag-card,
body.home.front-page #bag-types .bag-card,
body.pdl-static-theme-preview #bag-types .bag-card {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 980px) {
  .hero-grid,
  body.home.front-page .hero-grid,
  body.pdl-static-theme-preview .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
    padding-top: 104px !important;
  }

  .hero-stage,
  body.home.front-page .hero-stage,
  body.pdl-static-theme-preview .hero-stage {
    min-height: 330px !important;
  }

  .hero-stage::before,
  body.home.front-page .hero-stage::before,
  body.pdl-static-theme-preview .hero-stage::before {
    right: 50% !important;
    bottom: 10px !important;
    width: min(86vw, 520px) !important;
    height: 320px !important;
    transform: translateX(50%) !important;
  }

  .hero-product-note,
  body.home.front-page .hero-product-note,
  body.pdl-static-theme-preview .hero-product-note {
    right: 50% !important;
    bottom: 0 !important;
    max-width: min(88vw, 330px) !important;
    transform: translateX(50%) !important;
  }

  .final-path-grid,
  body.home.front-page .final-path-grid,
  body.pdl-static-theme-preview .final-path-grid,
  #bag-types .bag-grid,
  body.home.front-page #bag-types .bag-grid,
  body.pdl-static-theme-preview #bag-types .bag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .final-paths-section,
  body.home.front-page .final-paths-section,
  body.pdl-static-theme-preview .final-paths-section {
    padding-block: 46px !important;
  }

  .final-path-grid,
  body.home.front-page .final-path-grid,
  body.pdl-static-theme-preview .final-path-grid,
  #bag-types .bag-grid,
  body.home.front-page #bag-types .bag-grid,
  body.pdl-static-theme-preview #bag-types .bag-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .final-path-card,
  body.home.front-page .final-path-card,
  body.pdl-static-theme-preview .final-path-card {
    height: 232px !important;
    border-radius: 20px !important;
  }

  .final-path-copy,
  body.home.front-page .final-path-copy,
  body.pdl-static-theme-preview .final-path-copy {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  .final-path-copy strong,
  body.home.front-page .final-path-copy strong,
  body.pdl-static-theme-preview .final-path-copy strong {
    max-width: 10em !important;
    font-size: 1.34rem !important;
  }
}

#applications .application-grid[data-deck="applications"] > .application-card .application-detail,
body.home.front-page #applications .application-grid[data-deck="applications"] > .application-card .application-detail,
body.pdl-static-theme-preview #applications .application-grid[data-deck="applications"] > .application-card .application-detail {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

@media (max-width: 980px) {
  #applications,
  #applications .container {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  @supports not (overflow: clip) {
    #applications,
    #applications .container {
      overflow-x: hidden !important;
    }
  }

  #applications .application-grid[data-deck="applications"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]),
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]):hover,
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]).is-auto-active {
    position: relative !important;
    display: block !important;
    min-height: 318px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #0b1c2e !important;
    box-shadow: 0 18px 42px rgba(18, 40, 63, .14) !important;
    transform: none !important;
  }

  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden])::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(4, 16, 29, 0) 28%, rgba(4, 16, 29, .32) 58%, rgba(4, 16, 29, .82) 100%) !important;
  }

  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]) img,
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]):hover img,
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]).is-auto-active img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    opacity: 1 !important;
    transform: none !important;
    filter: saturate(1.04) contrast(1.03) !important;
  }

  #applications .application-grid[data-deck="applications"] .application-copy,
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]):hover .application-copy,
  #applications .application-grid[data-deck="applications"] > .application-card:not([hidden]).is-auto-active .application-copy {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    padding: 0 18px 20px !important;
    color: #fff !important;
    text-align: left !important;
    background: transparent !important;
    transform: none !important;
  }

  #applications .application-grid[data-deck="applications"] .application-copy strong {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .42) !important;
  }

  #applications .application-grid[data-deck="applications"] .application-copy small {
    color: rgba(235, 244, 252, .9) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .38) !important;
  }

  #applications .application-grid[data-deck="applications"] .application-detail {
    display: none !important;
  }
}