/* FITRICH App v51 — continuous Home, Shop and Routine surfaces. */

/* HOME: compact story entry and remove the pasted white showcase panel. */
#view-home .app-stories{
  margin:0!important;
  padding:8px 0 4px!important;
  background:transparent!important
}
#view-home .app-stories-note{margin-bottom:4px!important}
#view-home .app-story-rail{padding-bottom:2px!important}
#view-home .home-product-showcase{
  margin:0!important;
  padding-top:19px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important
}
#view-home .home-product-head,#view-home .home-product-hint{background:transparent!important}

/* SHOP: media begins under the black logo bar; copy sits cleanly at bottom-right. */
#view-shop .shop-intro{
  align-items:flex-end!important;
  background:
    linear-gradient(180deg,rgba(6,8,7,.04) 15%,rgba(6,8,7,.14) 47%,rgba(6,8,7,.88) 100%),
    linear-gradient(270deg,rgba(6,8,7,.2),transparent 66%),
    url("assets/lifestyle-haircare-v1.jpg") center 44%/cover no-repeat!important
}
#view-shop .shop-intro>div{
  width:min(100%,355px);
  align-self:flex-end;
  text-align:right
}
#view-shop .shop-intro>div span{display:block;text-align:right}
#view-shop .shop-intro h2{margin-left:auto;text-align:right}
#view-shop .shop-intro p{
  width:min(100%,345px);
  align-self:flex-end;
  margin-left:auto!important;
  text-align:right
}

/* ROUTINE: no floating white card — controls flow directly from the app header. */
#view-routine .routine-layout{background:var(--fitrich-canvas)!important}
#view-routine .routine-builder{
  padding:18px 20px 4px!important;
  background:var(--fitrich-canvas)!important;
  box-shadow:none!important
}
#view-routine .routine-builder .card-head{align-items:flex-start}
#view-routine .builder-row:first-of-type{margin-top:25px!important}
#view-routine .builder-row:last-child{padding-bottom:27px!important}

@media(max-width:760px){
  #view-home.active{margin-top:-21px}
  #view-shop.active,#view-routine.active{margin-top:-33px}
}

@media(min-width:761px){
  #view-home.active{margin-top:-26px}
  #view-shop.active,#view-routine.active{margin-top:-37px}
}

@media(max-width:420px){
  #view-home .home-product-showcase{padding-top:17px!important}
  #view-shop .shop-intro{padding:27px 19px 29px!important}
  #view-routine .routine-builder{padding-top:16px!important}
}