/* FITRICH Website v52 — align the desktop storefront with the latest app language. */

/* The product story should feel like one continuous editorial surface, not a stack of panels. */
.product-drop{
  padding-top:74px!important;
  padding-bottom:58px!important;
  background:#eef0ed!important
}
.product-drop .section-head{margin-bottom:34px}
.product-drop .product-flow{margin-top:-5px;margin-bottom:14px}
.product-drop .product-rail{gap:6px;padding-bottom:12px}
.product-drop .product-card{
  border-color:rgba(11,13,12,.22)!important;
  box-shadow:none!important
}
.product-drop .concept-note{margin-top:12px}

/* Routine follows the app: quiet controls beside a cinematic lifestyle result. */
.routine{
  padding-top:72px!important;
  padding-bottom:72px!important;
  gap:clamp(28px,5vw,76px)!important;
  align-items:stretch;
  background:#eef0ed!important
}
.routine-intro{padding-top:8px}
.routine-intro>h2{max-width:680px;margin-top:15px!important}
.routine-intro>p:not(.overline){margin-bottom:30px!important}
.routine-output{display:block!important}
.routine-screen{
  width:100%!important;
  min-height:590px!important;
  padding:34px!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  background:
    linear-gradient(180deg,rgba(5,7,6,.13),rgba(5,7,6,.33) 43%,rgba(5,7,6,.94) 100%),
    url("assets/lifestyle-facecare-v1.jpg") center/cover no-repeat!important
}
.routine-screen:before{
  width:340px!important;
  height:340px!important;
  right:-115px!important;
  top:58px!important;
  border-color:rgba(143,225,207,.38)!important
}
.routine .screen-top{color:rgba(255,255,255,.74)!important}
.routine .screen-top i,
.routine-screen>p,
.routine-foot button{color:var(--fitrich-sage)!important}
.routine-object{height:276px!important;color:#fff!important}
.routine-object i{
  background:rgba(8,12,10,.2)!important;
  border-color:rgba(143,225,207,.62)!important;
  backdrop-filter:blur(4px)
}
.routine-object span:last-child{color:var(--fitrich-sage)!important}
.routine-screen>h3{max-width:390px;color:#fff!important;font-size:clamp(34px,3.4vw,52px)!important;letter-spacing:-.055em}
.routine-screen li{
  border-top-color:rgba(255,255,255,.28)!important;
  color:rgba(255,255,255,.78)!important
}
.routine-screen li:before{color:var(--fitrich-sage)!important}
.routine-foot span{color:rgba(255,255,255,.58)!important}
.routine-foot button{
  padding:12px 15px!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:999px!important;
  background:rgba(7,10,8,.25)!important;
  backdrop-filter:blur(8px)
}

@media(max-width:760px){
  .product-drop{padding-top:52px!important;padding-bottom:44px!important}
  .product-drop .section-head{margin-bottom:26px}
  .routine{padding:48px 18px 0!important;gap:34px!important}
  .routine-intro{padding-top:0}
  .routine-screen{
    width:calc(100% + 36px)!important;
    min-height:620px!important;
    margin-inline:-18px;
    padding:30px 22px!important
  }
  .routine-object{height:265px!important}
  .routine-foot{left:22px!important;right:22px!important}
}