/* TOCHKA_APPROVED_PHOTOREAL_MALE_V5 · 2026-11-02
   SOURCE OF TRUTH: assets/home-approved-longhair-photoreal-20261102.webp
   One real photograph, not a cropped poster. Text/nav are real controls.
   Female styling and app data are untouched. Previous male photos disabled. */
body[data-gender="male"] .app > .intro-shell{
  display:block !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#103b32 !important;
  background-image:none !important;
  border:0;
  min-height:0;
  padding-bottom:106px;
}
body[data-gender="male"] .app > .intro-shell::before{
  display:none !important;content:none !important;background:none !important;
}
body[data-gender="male"] .app > .intro-shell::after{
  content:"" !important;display:block !important;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,37,33,.28) 0%,
    rgba(6,45,40,.10) 24%,
    rgba(4,42,37,.11) 42%,
    rgba(5,45,39,.49) 70%,
    rgba(5,43,37,.73) 100%);
}
body[data-gender="male"] .approved-male-photo{
  display:block !important;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  object-fit:cover;
  object-position:49% 41%;
  pointer-events:none;
  user-select:none;
}
.approved-male-photo{display:none}
body[data-gender="male"] .intro-shell .hero,
body[data-gender="male"] .intro-shell .genderbar{
  position:relative;z-index:2;
}
body[data-gender="male"] .intro-shell .hero{
  display:flex;
  flex-direction:column;
  min-height:645px;
  padding:24px clamp(18px,4vw,52px) 22px;
  background:transparent !important;
  background-image:none !important;
  border:0;
  overflow:visible;
}
body[data-gender="male"] .intro-shell .hero::before,
body[data-gender="male"] .intro-shell .hero::after{
  content:none !important;display:none !important;
  background-image:none !important;
}
body[data-gender="male"] .intro-shell .top{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;
  gap:12px;align-items:center;justify-content:space-between;
  padding:0;background:transparent;border:0;box-shadow:none;
}
body[data-gender="male"] .intro-shell .brand b{
  color:#fffdf3 !important;
  text-shadow:0 1px 8px rgba(0,24,22,.63);
}
body[data-gender="male"] .intro-shell .brand small{
  color:#faf1d8 !important;
  text-shadow:0 1px 6px rgba(0,25,21,.55);
}
body[data-gender="male"] .intro-shell .switch{
  background:rgba(248,248,241,.77) !important;
  color:#204236 !important;
  border:1px solid rgba(249,239,212,.75);
  border-radius:13px;
  backdrop-filter:blur(7px);
}
body[data-gender="male"] .intro-shell .hero-main{
  position:relative;z-index:2;
  box-sizing:border-box;
  width:min(60%,630px);
  max-width:630px;
  margin:clamp(92px,15vw,180px) 0 20px auto;
  padding:clamp(18px,3.2vw,32px);
  border:1px solid rgba(247,220,165,.44);
  border-radius:22px;
  color:#fff8e7;
  background:rgba(7,51,44,.54);
  box-shadow:0 10px 32px rgba(0,20,17,.17);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
body[data-gender="male"] .intro-shell .hero-main .eyebrow{
  color:#f8eacd;
  font-size:11px;
  letter-spacing:1.4px;
}
body[data-gender="male"] .intro-shell .hero-main h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(32px,3.65vw,48px);
  line-height:1.13;
  color:#fff9ee !important;
  margin:16px 0;
  text-shadow:0 2px 7px rgba(0,27,24,.4);
}
body[data-gender="male"] .intro-shell .hero-main h1 em{color:#f4d391 !important}
body[data-gender="male"] .intro-shell .hero-main p{
  color:#faf7eb !important;
  max-width:550px;
  line-height:1.52;
  font-size:clamp(13px,1.14vw,16px);
}
body[data-gender="male"] .intro-shell .hero .actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;
}
body[data-gender="male"] .intro-shell .hero .actions .btn{
  min-height:46px;
  padding:11px 16px;
  background:rgba(249,234,198,.75) !important;
  color:#243e30 !important;
  border:1px solid rgba(255,246,224,.66);
  box-shadow:0 4px 15px rgba(0,24,20,.1);
  opacity:.90;
  border-radius:13px;
  transition:background .17s,opacity .17s,box-shadow .17s,transform .13s;
  cursor:pointer;
}
body[data-gender="male"] .intro-shell .hero .actions .btn.outline{
  background:rgba(7,65,51,.64) !important;
  color:#fff8ea !important;
}
body[data-gender="male"] .intro-shell .hero .actions .btn:hover,
body[data-gender="male"] .intro-shell .hero .actions .btn:active,
body[data-gender="male"] .intro-shell .hero .actions .btn:focus-visible{
  background:#f4d08a !important;color:#203c2f !important;
  opacity:1;box-shadow:0 5px 17px rgba(0,28,22,.28);
}
body[data-gender="male"] .intro-shell .hero .actions .btn:active{transform:scale(.98)}
body[data-gender="male"] .intro-shell .genderbar{
  width:calc(100% - 30px);
  max-width:1100px;
  margin:0 auto 14px;
  padding:19px clamp(16px,3vw,28px);
  border:1px solid rgba(244,212,150,.65);
  border-radius:20px;
  background:rgba(6,55,44,.58) !important;
  box-shadow:0 7px 25px rgba(0,27,20,.20);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body[data-gender="male"] .intro-shell .genderbar::after{content:none !important;display:none !important}
body[data-gender="male"] .intro-shell .genderbar b{color:#fff9ee !important}
body[data-gender="male"] .intro-shell .genderbar p{color:#f5f2e6 !important}
body[data-gender="male"] .intro-shell .genderbtn{
  min-height:46px;
  border-radius:13px;
  border:1px solid rgba(238,222,188,.58);
  background:rgba(252,250,242,.68) !important;
  color:#214236 !important;
  opacity:.86;
  box-shadow:none;
  backdrop-filter:blur(5px);
  transition:background .16s,opacity .16s;
}
body[data-gender="male"] .intro-shell .genderbtn:hover,
body[data-gender="male"] .intro-shell .genderbtn:active,
body[data-gender="male"] .intro-shell .genderbtn.active{
  opacity:1;
  background:#f4d08b !important;
  color:#193e31 !important;
  border-color:#f4d08b;
}
/* Native navigation overlaps the same background photo, not a second image. */
body[data-gender="male"] .app > .nav{
  display:flex !important;
  position:sticky;
  top:0;
  z-index:30;
  width:calc(100% - 26px);
  margin:-92px auto 13px;
  padding:7px 9px;
  gap:5px;
  border:1px solid rgba(245,218,162,.62);
  border-radius:17px;
  background:rgba(5,56,45,.69) !important;
  box-shadow:0 8px 23px rgba(0,30,25,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow-x:auto;
}
body[data-gender="male"] .app > .nav button{
  background:rgba(10,81,60,.30) !important;
  color:#faf5e7;
  opacity:.80;
  border:1px solid rgba(248,235,200,.10);
  border-radius:12px;
  transition:background .14s,opacity .14s,color .14s;
}
body[data-gender="male"] .app > .nav button:hover,
body[data-gender="male"] .app > .nav button:active,
body[data-gender="male"] .app > .nav button:focus-visible,
body[data-gender="male"] .app > .nav button.active{
  opacity:1;
  background:#f3d18c !important;
  border-color:#f3d18c;
  color:#143d2f !important;
  font-weight:760;
  box-shadow:0 3px 12px rgba(8,42,34,.15);
}
body[data-gender="male"] .app > .nav button.active::before,
body[data-gender="male"] .app > .nav button:active::before{filter:brightness(.42)}
body[data-gender="male"] main.content{
  scroll-margin-top:110px;
  background:#f8f6ee !important;
  background-image:linear-gradient(180deg,#f8f6ee,#fcfbf6 440px,#f2f6ee 100%) !important;
}
/* Hide old male decorative photos behind modules but do not touch module cards. */
body[data-gender="male"] .app{background-image:none !important}
body[data-gender="male"] .app > .home-design-traits{display:none !important}
body[data-gender="male"] .native-approved-longhair{display:none !important}
@media(max-width:759px){
  body[data-gender="male"] .app > .intro-shell{padding-bottom:99px}
  body[data-gender="male"] .approved-male-photo{object-position:38% 35%}
  body[data-gender="male"] .intro-shell .hero{
    min-height:735px;
    padding:17px 15px 20px;
  }
  body[data-gender="male"] .intro-shell .hero-main{
    width:100%;
    max-width:100%;
    margin:clamp(220px,42vh,345px) 0 0;
    padding:19px 17px;
    background:rgba(5,49,41,.56);
    border-radius:17px;
  }
  body[data-gender="male"] .intro-shell .hero-main h1{
    font-size:clamp(30px,7vw,40px);
    margin:15px 0 14px;
  }
  body[data-gender="male"] .intro-shell .hero-main p{font-size:13px;line-height:1.5}
  body[data-gender="male"] .intro-shell .hero .actions .btn{font-size:12px;padding:10px 12px;min-height:42px}
  body[data-gender="male"] .intro-shell .genderbar{width:calc(100% - 24px);padding:16px;margin:0 12px 12px}
  body[data-gender="male"] .intro-shell .genderbtns{grid-template-columns:1fr;gap:8px}
  body[data-gender="male"] .app > .nav{width:calc(100% - 14px);margin:-88px 7px 12px;padding:6px 5px;gap:2px}
  body[data-gender="male"] .app > .nav button{min-height:69px;font-size:10px;flex:0 0 calc((100% - 8px)/5)}
}
@media(prefers-reduced-motion:reduce){
 body[data-gender="male"] .app > .nav button,
 body[data-gender="male"] .intro-shell .genderbtn,
 body[data-gender="male"] .intro-shell .hero .actions .btn{transition:none}
}