/* Homepage hero CTA: physical right edge on desktop, independent of RTL/LTR flow. */
@media (min-width:781px){
  html body.home-page .commerce-carousel .commerce-slide .commerce-slide__content{
    align-items:stretch!important;
  }
  html body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions,
  html[dir="rtl"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions,
  html[dir="ltr"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    direction:ltr!important;
    justify-content:flex-end!important;
    align-items:center!important;
    text-align:right!important;
    margin-top:24px!important;
    margin-right:0!important;
    margin-left:0!important;
    padding:0!important;
    float:none!important;
  }
  html body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions>.commerce-button,
  html[dir="rtl"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions>.commerce-button,
  html[dir="ltr"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions>.commerce-button{
    flex:0 0 auto!important;
    float:none!important;
    align-self:auto!important;
    margin-left:auto!important;
    margin-right:0!important;
    inset:auto!important;
  }
}

/* V48: On EN desktop put the entire headline/CTA column at the
   PHYSICAL RIGHT edge of the slider. A right-aligned button alone does not
   move a left-anchored content column. Do not change Persian or mobile. */
@media (min-width: 781px) {
  html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel .commerce-slide .commerce-slide__content {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    right: clamp(14px, 2.4vw, 46px) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: min(44vw, 640px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 48px) !important;
    box-sizing: border-box !important;
    padding: clamp(16px, 2.2vw, 30px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    direction: ltr !important;
    text-align: left !important;
  }
  html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel .commerce-slide .commerce-slide__content > h1,
  html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel .commerce-slide .commerce-slide__content > h2 {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    direction: ltr !important;
    text-align: left !important;
  }
  html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-flow: row nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    direction: ltr !important;
    float: none !important;
  }
  html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions > .commerce-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
    float: none !important;
    align-self: auto !important;
    inset: auto !important;
  }
}

/* Mobile inherits the exact V47 positioning and sizing, unchanged. */
/* The action is aligned to the right WITHIN the copy column, not the full
   carousel, at mobile and desktop widths. */
html[dir="ltr"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  direction: ltr !important;
  text-align: right !important;
  padding: 0 !important;
  float: none !important;
  overflow: visible !important;
}
html[dir="ltr"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content .commerce-slide__actions > .commerce-button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  float: none !important;
  align-self: auto !important;
  margin: 0 !important;
  inset: auto !important;
}
@media (max-width: 780px) {
  html[dir="ltr"] body.home-page .commerce-carousel .commerce-slide .commerce-slide__content {
    left: 16px !important;
    right: auto !important;
    direction: ltr !important;
    text-align: left !important;
  }
}


/* V49 | EN-only arrow placement. The previous grid anchored navigation to the
   first (left) grid cell even when the hero copy moved to the physical right.
   Keep the progress/dots independently centered and leave FA untouched. */
html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel > .commerce-carousel__controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  direction: ltr !important;
}
html[dir="ltr"] body.home-page .commerce-hero .commerce-carousel > .commerce-carousel__controls > .commerce-carousel__arrows {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: ltr !important;
}