/* Final single-image hero background
   Uses desktop and mobile responsive images. Old rotating hero cards are removed from the homepage. */

.hero{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: calc(100vh - var(--nav-height, 82px)) !important;
  padding-top: clamp(48px, 7vh, 96px) !important;
  padding-bottom: clamp(72px, 9vh, 120px) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.78) 34%, rgba(255,255,255,.30) 60%, rgba(255,255,255,.04) 100%),
    url('assets/hero/hero-bg-desktop.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}

.hero-bg-image,
.hero-images{
  display: none !important;
}

.hero-text{
  position: relative !important;
  z-index: 2 !important;
  max-width: min(980px, 58vw) !important;
  margin-top: 0 !important;
}

.hero .main-heading,
.hero .hero-description,
.hero .social-bar{
  position: relative !important;
  z-index: 2 !important;
}

.hero .hero-description p{
  color: rgba(0,0,0,.68) !important;
}

@media (min-width: 1181px){
  .hero{
    grid-template-columns: minmax(640px, 980px) 1fr !important;
    transform: none !important;
    max-width: none !important;
    width: calc(100% + 80px) !important;
    margin-left: -40px !important;
    margin-right: -40px !important;
    padding-left: clamp(40px, 7vw, 130px) !important;
    padding-right: clamp(40px, 7vw, 130px) !important;
  }
}

@media (max-width: 1180px){
  .hero{
    display: grid !important;
    grid-template-columns: 1fr !important;
    transform: none !important;
    max-width: none !important;
    width: calc(100% + 48px) !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: 760px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 36%, rgba(255,255,255,.28) 66%, rgba(255,255,255,.05) 100%),
      url('assets/hero/hero-bg-mobile.jpg') !important;
    background-position: center top !important;
  }

  .hero-text{
    max-width: 760px !important;
  }
}

@media (max-width: 768px){
  .page{
    padding-top: var(--nav-height, 82px) !important;
  }

  .hero{
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    min-height: 820px !important;
    padding: 32px 18px 420px !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 34%, rgba(255,255,255,.34) 58%, rgba(255,255,255,.06) 100%),
      url('assets/hero/hero-bg-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
  }

  .hero-text{
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero .hero-description{
    max-width: min(100%, 420px) !important;
  }

  .hero .hero-description p{
    max-width: 100% !important;
  }
}

@media (max-width: 480px){
  .hero{
    min-height: 800px !important;
    padding-top: 26px !important;
    padding-bottom: 390px !important;
    background-position: center bottom !important;
  }
}

/* === Final hero/product boundary cleanup ===
   Stops the hero background from bleeding visually into OUR PRODUCTS
   and keeps the next section clean on desktop + mobile. */
.hero{
  margin-bottom: 0 !important;
}

.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(90px, 13vh, 160px);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 58%, #fff 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-text{
  z-index: 2 !important;
}

.product-section{
  position: relative !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  padding-top: clamp(38px, 5vw, 74px) !important;
  background: #fff !important;
  overflow: hidden !important;
}

@media (max-width: 768px){
  .hero::after{
    height: 132px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.80) 54%, #fff 100%);
  }

  .product-section{
    margin-top: 0 !important;
    padding-top: 34px !important;
  }
}

@media (max-width: 480px){
  .hero::after{
    height: 118px;
  }

  .product-section{
    padding-top: 30px !important;
  }
}

/* === FINAL MOBILE HERO FULL-FILL FIX ===
   Fixes mobile hero side gaps, top spacing, and weak background fill.
   Desktop layout and all other sections stay unchanged. */
@media (max-width: 768px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .page{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-top:var(--mobile-nav-height, 66px) !important;
    overflow-x:hidden !important;
  }

  .page > main{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .hero{
    box-sizing:border-box !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    border-radius:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:0 !important;
    min-height:calc(100svh - var(--mobile-nav-height, 66px)) !important;
    padding:42px 14px calc(var(--mobile-tabbar-height, 76px) + 34px) !important;
    overflow:hidden !important;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.60) 34%, rgba(255,255,255,.22) 62%, rgba(255,255,255,.05) 100%),
      url('assets/hero/hero-bg-mobile.jpg') !important;
    background-size:cover !important;
    background-position:center bottom !important;
    background-repeat:no-repeat !important;
  }

  .hero-text{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .hero .main-heading{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    color:#000 !important;
  }

  .hero .top-line{
    font-size:clamp(38px, 13.2vw, 58px) !important;
    line-height:.86 !important;
    letter-spacing:.002em !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  .hero .bottom-line{
    font-size:clamp(29px, 10.2vw, 44px) !important;
    line-height:.94 !important;
    letter-spacing:-.055em !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  .hero .hero-description{
    width:100% !important;
    max-width:100% !important;
  }

  .hero .hero-description p{
    width:100% !important;
    max-width:100% !important;
    margin-top:20px !important;
    font-size:14px !important;
    line-height:1.62 !important;
    color:rgba(0,0,0,.63) !important;
  }

  .hero .social-bar{
    width:100% !important;
    max-width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  .hero .social-link{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
  }

  .hero::after{
    height:58px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.48) 70%, #fff 100%) !important;
  }

  .product-section{
    width:100% !important;
    max-width:100% !important;
    margin-top:0 !important;
    padding-top:34px !important;
    background:#fff !important;
  }
}

@supports (height: 100dvh){
  @media (max-width: 768px){
    .hero{
      min-height:calc(100dvh - var(--mobile-nav-height, 66px)) !important;
    }
  }
}

@media (max-width: 420px){
  .hero{
    padding-top:38px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    padding-bottom:calc(var(--mobile-tabbar-height, 76px) + 28px) !important;
    background-position:center bottom !important;
  }

  .hero .top-line{
    font-size:clamp(36px, 12.7vw, 50px) !important;
  }

  .hero .bottom-line{
    font-size:clamp(27px, 9.45vw, 38px) !important;
  }

  .hero .hero-description p{
    margin-top:18px !important;
    font-size:14px !important;
    line-height:1.58 !important;
  }

  .hero .social-bar{
    gap:9px !important;
  }

  .hero .social-link{
    height:46px !important;
    min-height:46px !important;
  }
}


/* === FINAL MOBILE HERO TITLE WRAP FIX ===
   Splits OUTFIT / REVOLUTION on mobile so the heading never clips off-screen.
   Desktop stays as the original single-line style. */
.hero .bottom-line .word-outfit,
.hero .bottom-line .word-revolution{
  display:inline !important;
}

@media (max-width: 768px){
  .hero .bottom-line{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-wrap:balance !important;
    font-size:clamp(31px, 11.2vw, 48px) !important;
    line-height:.88 !important;
    letter-spacing:-.048em !important;
  }

  .hero .bottom-line .word-outfit,
  .hero .bottom-line .word-revolution{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
  }
}

@media (max-width: 420px){
  .hero .bottom-line{
    font-size:clamp(30px, 10.8vw, 42px) !important;
    line-height:.88 !important;
    letter-spacing:-.045em !important;
  }
}

/* === FINAL MOBILE CUSTOMIZE PREVIEW GRID FIX ===
   Mobile only: keep the main preview image on top and move the four option cards
   into the empty space below it as a clean 2x2 grid. Desktop stays untouched. */
@media (max-width: 768px){
  .customize-section-premium .customize-stage-panel-premium{
    width:100% !important;
    max-width:100% !important;
  }

  .customize-section-premium .customize-stage-frame-premium{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:auto !important;
    padding:18px !important;
    gap:14px !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  .customize-section-premium .customize-stage-backdrop{
    inset:12px !important;
    border-radius:22px !important;
    pointer-events:none !important;
  }

  .customize-section-premium .customize-stage-glow-orb{
    display:none !important;
  }

  .customize-section-premium .customize-main-image-premium{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:2 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:clamp(310px, 78vw, 430px) !important;
    min-height:310px !important;
    max-height:430px !important;
    object-fit:cover !important;
    object-position:center top !important;
    border-radius:24px !important;
    box-shadow:0 16px 34px rgba(0,0,0,.26) !important;
    margin:0 !important;
    transform:none !important;
  }

  .customize-section-premium .customize-option-rail-premium{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    z-index:3 !important;
    width:100% !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    transform:none !important;
  }

  .customize-section-premium .preview-card-premium{
    position:relative !important;
    width:100% !important;
    height:128px !important;
    min-height:128px !important;
    border-radius:20px !important;
    overflow:hidden !important;
    transform:none !important;
    box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
  }

  .customize-section-premium .preview-card-premium:hover,
  .customize-section-premium .preview-card-premium.is-active{
    transform:translateY(-2px) !important;
  }

  .customize-section-premium .preview-card-premium img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .customize-section-premium .preview-chip{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    height:28px !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
  }

  .customize-section-premium .customize-labels-premium,
  .customize-section-premium .customize-labels{
    display:none !important;
  }
}

@media (max-width: 420px){
  .customize-section-premium .customize-stage-frame-premium{
    padding:16px !important;
    gap:12px !important;
    border-radius:28px !important;
  }

  .customize-section-premium .customize-main-image-premium{
    height:330px !important;
    min-height:330px !important;
    border-radius:22px !important;
  }

  .customize-section-premium .customize-option-rail-premium{
    gap:10px !important;
  }

  .customize-section-premium .preview-card-premium{
    height:116px !important;
    min-height:116px !important;
    border-radius:18px !important;
  }
}

/* FINAL MOBILE CUSTOMIZE PREVIEW HEIGHT FIX
   Keeps the 2x2 option grid but gives the main preview more breathing room. */
@media (max-width: 768px){
  .customize-section-premium .customize-stage-frame-premium{
    padding:18px !important;
    gap:14px !important;
  }

  .customize-section-premium .customize-main-image-premium{
    height:clamp(390px, 104vw, 520px) !important;
    min-height:390px !important;
    max-height:520px !important;
    object-fit:cover !important;
    object-position:center top !important;
  }
}

@media (max-width: 420px){
  .customize-section-premium .customize-main-image-premium{
    height:430px !important;
    min-height:430px !important;
    max-height:430px !important;
  }

  .customize-section-premium .preview-card-premium{
    height:112px !important;
    min-height:112px !important;
  }
}

/* === FINAL MOBILE HERO BOTTOM BALANCE FIX ===
   Mobile only: moves the hero copy/social group slightly down for a cleaner
   composition over the full background image. Desktop and other sections stay untouched. */
@media (max-width: 768px){
  .hero{
    justify-content:flex-start !important;
    padding-top:64px !important;
    padding-bottom:calc(var(--mobile-tabbar-height, 76px) + 22px) !important;
    background-position:center bottom !important;
  }

  .hero-text{
    transform:translateY(10px) !important;
  }

  .hero .hero-description p{
    margin-top:20px !important;
    line-height:1.56 !important;
  }

  .hero .social-bar{
    margin-top:22px !important;
  }
}

@media (max-width: 420px){
  .hero{
    padding-top:58px !important;
    padding-bottom:calc(var(--mobile-tabbar-height, 76px) + 20px) !important;
  }

  .hero-text{
    transform:translateY(8px) !important;
  }

  .hero .hero-description p{
    margin-top:18px !important;
    line-height:1.55 !important;
  }

  .hero .social-bar{
    margin-top:22px !important;
  }
}