/* FITRICH App v49 — seamless Profile header and a premium Member identity feed. */

/* Remove the unfinished-looking canvas strip between the fixed header and media. */
@media(max-width:760px){
  #view-profile.active,#view-member.active{margin-top:-33px}
}
@media(min-width:761px){
  #view-profile.active,#view-member.active{margin-top:-37px}
}

/* MEMBER — identity first, then points, tier, access and benefits as one mobile feed. */
#view-member .member-layout{display:block!important;margin:0!important;background:#fafaf7!important}
#view-member .member-hero{
  min-height:clamp(620px,78svh,780px)!important;
  margin:0!important;
  padding:32px 22px 34px!important;
  border:0!important;
  display:flex;
  flex-direction:column;
  color:#fff!important;
  background:
    linear-gradient(180deg,rgba(5,7,6,.08) 15%,rgba(5,7,6,.22) 48%,rgba(5,7,6,.95) 100%),
    url("assets/hero-unisex-products-mobile-v3-optimized.jpg") center 20%/cover no-repeat!important
}
#view-member .member-hero:before{display:none!important}
#view-member .member-hero-top{position:relative;z-index:1}
#view-member .member-hero-top span,#view-member .member-hero-top i{
  color:#fff!important;
  font-size:10px!important;
  line-height:1.3;
  letter-spacing:.14em;
  text-shadow:0 2px 10px rgba(0,0,0,.5)
}
#view-member .member-hero-top i{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(7,10,8,.38);
  color:var(--fitrich-sage)!important;
  backdrop-filter:blur(8px)
}
#view-member .member-hero-mark{
  width:auto!important;
  height:auto!important;
  margin:auto 0 0!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
  background:none!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:clamp(98px,30vw,148px)!important;
  line-height:.68!important;
  letter-spacing:-.12em;
  text-shadow:0 8px 30px rgba(0,0,0,.46)
}
#view-member .member-name{position:relative;z-index:1;margin-top:31px}
#view-member .member-name small{
  color:var(--fitrich-sage)!important;
  font-size:10px!important;
  letter-spacing:.15em
}
#view-member .member-name h2{
  margin:9px 0 20px!important;
  color:#fff!important;
  font-size:clamp(40px,11vw,54px)!important;
  line-height:.88!important;
  letter-spacing:-.065em!important
}
#view-member .member-code{
  position:relative;
  z-index:1;
  justify-content:space-between;
  gap:8px!important;
  padding-top:16px!important;
  border-color:rgba(255,255,255,.34)!important;
  color:rgba(255,255,255,.72)!important;
  font-size:8px!important;
  line-height:1.2;
  letter-spacing:.1em!important
}

#view-member .member-panel{
  display:block!important;
  min-height:0!important;
  margin:0!important;
  background:#fafaf7!important
}
#view-member .member-panel .card{
  margin:0!important;
  padding:34px 20px!important;
  border:0!important;
  border-bottom:1px solid rgba(11,13,12,.14)!important;
  background:#fafaf7!important
}
#view-member .member-panel article>span{
  color:var(--fitrich-sage-deep)!important;
  font-size:10px!important;
  line-height:1.3;
  letter-spacing:.14em
}
#view-member .points-card strong{
  display:block;
  margin:22px 0 12px!important;
  color:#101412!important;
  font-size:clamp(78px,23vw,112px)!important;
  line-height:.73!important;
  letter-spacing:-.09em!important
}
#view-member .member-panel p{
  max-width:340px;
  margin:0;
  color:#6d7571!important;
  font-size:14px!important;
  line-height:1.5
}
#view-member .member-panel .tier-card{background:var(--fitrich-sage)!important}
#view-member .tier-card>span{color:#183c31!important}
#view-member .tier-card h3,#view-member .access-card h3{
  margin:25px 0 17px!important;
  font-size:clamp(34px,9vw,44px)!important;
  line-height:.9!important;
  letter-spacing:-.055em!important
}
#view-member .tier-card>div{height:5px!important;border-radius:999px;background:rgba(11,13,12,.18)!important;overflow:hidden}
#view-member .tier-card i{background:#0b0d0c!important}
#view-member .tier-card>p{margin-top:11px!important;color:#28453b!important;font-size:10px!important;letter-spacing:.09em}
#view-member .member-panel .access-card{
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff!important;
  background:
    linear-gradient(180deg,rgba(7,9,8,.05),rgba(7,9,8,.18) 40%,rgba(7,9,8,.91) 100%),
    url("assets/lifestyle-grooming-tools-v1.jpg") center/cover no-repeat!important
}
#view-member .access-card>span{color:var(--fitrich-sage)!important}
#view-member .access-card h3{color:#fff!important}
#view-member .access-card p{color:rgba(255,255,255,.76)!important}
#view-member .access-card button{
  width:max-content;
  min-height:46px;
  margin-top:21px;
  padding:0 17px!important;
  border:1px solid rgba(255,255,255,.6)!important;
  border-radius:999px;
  background:rgba(7,10,8,.28)!important;
  color:#fff!important;
  font-size:11px!important;
  backdrop-filter:blur(8px)
}

#view-member .benefit-grid{
  display:block!important;
  margin:0!important;
  background:#fafaf7!important
}
#view-member .benefit-grid article,#view-member .benefit-grid article:nth-child(2){
  min-height:128px;
  margin:0!important;
  padding:27px 20px!important;
  border:0!important;
  border-bottom:1px solid rgba(11,13,12,.14)!important;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:15px;
  align-content:center;
  background:#fafaf7!important
}
#view-member .benefit-grid i{
  grid-row:1/3;
  align-self:start;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e1e6e1;
  color:#174035!important;
  font-size:10px!important
}
#view-member .benefit-grid h3{
  margin:0 0 7px!important;
  color:#171c19!important;
  font-size:18px!important;
  line-height:1.05
}
#view-member .benefit-grid p{
  margin:0!important;
  color:#707773!important;
  font-size:13px!important;
  line-height:1.45
}

@media(min-width:761px){
  #view-member .member-hero,#view-member .member-panel,#view-member .benefit-grid{width:calc(100% + 30px);margin-inline:-15px!important}
}

@media(max-width:420px){
  #view-member .member-hero{min-height:74svh!important;background-position:center 20%!important}
  #view-member .member-hero-mark{font-size:102px!important}
  #view-member .member-name h2{font-size:42px!important}
  #view-member .points-card strong{font-size:82px!important}
}