/**
 * ECPDP related rail media lock
 * Scope: legacy ECPDP related sections using .leger-srp only.
 * Purpose: a single 3:4 media frame per product card, with both hover images
 * completely filling it. This intentionally does not touch PDP gallery media,
 * image source URLs, filters, colour, brightness, or optimization settings.
 */

.leger-srp{
  --ecpdp-related-rail-ratio: 3 / 4;
}

.leger-srp .leger-srp__card{
  min-width:0 !important;
  min-height:0 !important;
  align-self:start !important;
}

/* The card's actual image box. It cannot reserve a second natural-image height. */
.leger-srp .leger-srp__media{
  position:relative !important;
  display:block !important;
  isolation:isolate;
  box-sizing:border-box !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  aspect-ratio:var(--ecpdp-related-rail-ratio) !important;
  background:transparent !important;
  line-height:0 !important;
  font-size:0 !important;
}

/* Both product images become layers in the same frame instead of taking flow height. */
.leger-srp .leger-srp__media > .leger-srp__img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  vertical-align:top !important;
}

/* Preserve the existing primary/secondary hover behavior without a visible second image. */
.leger-srp .leger-srp__media > .leger-srp__img--primary{
  z-index:1 !important;
  opacity:1 !important;
}

.leger-srp .leger-srp__media > .leger-srp__img--secondary{
  z-index:2 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .28s ease !important;
}

@media (hover:hover) and (pointer:fine){
  .leger-srp .leger-srp__card:hover .leger-srp__img--primary,
  .leger-srp .leger-srp__card:focus-within .leger-srp__img--primary{
    opacity:0 !important;
  }

  .leger-srp .leger-srp__card:hover .leger-srp__img--secondary,
  .leger-srp .leger-srp__card:focus-within .leger-srp__img--secondary{
    opacity:1 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .leger-srp .leger-srp__media > .leger-srp__img--secondary{
    transition:none !important;
  }
}

/*
 * v2.1.30 related rail editorial reset
 * Rebuilds the legacy Fall in Love With / related rail into a cleaner top-label
 * + full-bleed product image strip. Scoped to .leger-srp only so PDP gallery,
 * buybox, wishlist, quick-add, and WooCommerce product data stay untouched.
 */
.leger-srp{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:visible !important;
}

/* Put the related-section copy above the rail instead of reserving a left column. */
.leger-srp > :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading),
.leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading):not(.leger-srp__card *){
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 0 clamp(18px,2.2vw,30px) !important;
  padding:0 clamp(22px,3vw,30px) !important;
  text-align:left !important;
}

/* Remove the big legacy headline: “Fall in Love With”. The small section label remains. */
.leger-srp :where(.leger-srp__title,.leger-srp__headline,.leger-srp__name,.leger-srp__main-title,.leger-srp__heading-title),
.leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading) > :where(h1,h2,h3){
  display:none !important;
}

/* Make the remaining related-section label larger, cleaner, and visually separate. */
.leger-srp :where(.leger-srp__eyebrow,.leger-srp__kicker,.leger-srp__label,.leger-srp__subtitle,.leger-srp__subheading,.leger-srp__meta),
.leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading) > :where(span,small,p):first-child,
.leger-srp > :where(span,small,p):first-child{
  display:inline-block !important;
  width:auto !important;
  max-width:min(720px,calc(100vw - 44px)) !important;
  margin:0 !important;
  padding:0 0 10px !important;
  border-bottom:1px solid rgba(17,17,17,.18) !important;
  color:#111 !important;
  opacity:.82 !important;
  font-family:inherit !important;
  font-size:clamp(12px,.82vw,14px) !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

/* Pull the image rail to the real viewport edge, not after the old text column. */
.leger-srp > :where(.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list,.products),
.leger-srp > ul.products,
.leger-srp > div:has(.leger-srp__card){
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.leger-srp :where(.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list,.products,ul.products):not(.leger-srp > *){
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.leger-srp :where(.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list,.products,ul.products){
  gap:1px !important;
  scroll-padding-left:0 !important;
  scroll-padding-right:0 !important;
}

.leger-srp .leger-srp__card:first-child{
  margin-left:0 !important;
}

@media (max-width:767px){
  .leger-srp > :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading),
  .leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading):not(.leger-srp__card *){
    padding:0 16px !important;
    margin-bottom:16px !important;
  }

  .leger-srp :where(.leger-srp__eyebrow,.leger-srp__kicker,.leger-srp__label,.leger-srp__subtitle,.leger-srp__subheading,.leger-srp__meta),
  .leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading) > :where(span,small,p):first-child,
  .leger-srp > :where(span,small,p):first-child{
    max-width:calc(100vw - 32px) !important;
    font-size:12px !important;
    letter-spacing:.12em !important;
  }
}


/*
 * v2.1.31 hard reset
 * Final override: never keep the related copy in a dedicated left column.
 * Force editorial rail wrappers into a single vertical stack: label on top,
 * products below, no empty left gutter.
 */
.leger-srp,
.leger-srp > :where(div,section,article),
.leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)){
  min-width:0 !important;
}

.leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important;
  max-width:none !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:none !important;
}

.leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)) > :not(.products):not(ul.products):not(.leger-srp__rail):not(.leger-srp__track):not(.leger-srp__scroller):not(.leger-srp__products):not(.leger-srp__grid):not(.leger-srp__list):not(.leger-srp__card){
  order:-1 !important;
  display:block !important;
  position:static !important;
  inset:auto !important;
  float:none !important;
  clear:both !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  flex:none !important;
  align-self:stretch !important;
  margin:0 0 clamp(18px,2vw,28px) !important;
  padding:0 clamp(22px,3vw,40px) !important;
  text-align:left !important;
}

.leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)) > :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list){
  order:2 !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  align-self:stretch !important;
}

.leger-srp :where(.leger-srp__title,.leger-srp__headline,.leger-srp__name,.leger-srp__main-title,.leger-srp__heading-title),
.leger-srp :where(h1,h2,h3):not(.product_title):not(.woocommerce-loop-product__title){
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.leger-srp :where(.leger-srp__eyebrow,.leger-srp__kicker,.leger-srp__label,.leger-srp__subtitle,.leger-srp__subheading,.leger-srp__meta),
.leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading) > :where(span,small,p):first-child,
.leger-srp > :where(span,small,p):first-child,
.leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)) > :not(.products):not(ul.products):not(.leger-srp__rail):not(.leger-srp__track):not(.leger-srp__scroller):not(.leger-srp__products):not(.leger-srp__grid):not(.leger-srp__list):not(.leger-srp__card) :where(span,small,p):first-child{
  display:inline-block !important;
  width:auto !important;
  max-width:min(760px,calc(100vw - 44px)) !important;
  margin:0 !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(17,17,17,.18) !important;
  color:#111 !important;
  opacity:.9 !important;
  font-family:inherit !important;
  font-size:clamp(15px,1vw,18px) !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

@media (max-width:767px){
  .leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)) > :not(.products):not(ul.products):not(.leger-srp__rail):not(.leger-srp__track):not(.leger-srp__scroller):not(.leger-srp__products):not(.leger-srp__grid):not(.leger-srp__list):not(.leger-srp__card){
    padding:0 16px !important;
    margin-bottom:16px !important;
  }

  .leger-srp :where(.leger-srp__eyebrow,.leger-srp__kicker,.leger-srp__label,.leger-srp__subtitle,.leger-srp__subheading,.leger-srp__meta),
  .leger-srp :where(.leger-srp__header,.leger-srp__intro,.leger-srp__copy,.leger-srp__content,.leger-srp__text,.leger-srp__heading) > :where(span,small,p):first-child,
  .leger-srp > :where(span,small,p):first-child,
  .leger-srp > :where(div,section,article):has(> :is(.products,ul.products,.leger-srp__rail,.leger-srp__track,.leger-srp__scroller,.leger-srp__products,.leger-srp__grid,.leger-srp__list)) > :not(.products):not(ul.products):not(.leger-srp__rail):not(.leger-srp__track):not(.leger-srp__scroller):not(.leger-srp__products):not(.leger-srp__grid):not(.leger-srp__list):not(.leger-srp__card) :where(span,small,p):first-child{
    max-width:calc(100vw - 32px) !important;
    font-size:14px !important;
    letter-spacing:.1em !important;
  }
}