/* SECRETIK — MOBILE CARD FINAL REFERENCE
   Mobile public card size: 170 x 232 px (slightly enlarged, centered).
   This file is intentionally loaded LAST on public pages. */
@media (max-width:700px){
  :root{--secretik-mobile-card-w:170px;--secretik-mobile-card-h:232px;--secretik-mobile-card-gap:10px;}

  html body #new-profiles .profiles,
  html body #profiles .profiles,
  html body .city-profiles-grid,
  html body .massage-profile-grid,
  html body .salon-grid{
    display:grid!important;
    grid-template-columns:repeat(2,var(--secretik-mobile-card-w))!important;
    grid-auto-columns:var(--secretik-mobile-card-w)!important;
    grid-auto-rows:var(--secretik-mobile-card-h)!important;
    column-gap:var(--secretik-mobile-card-gap)!important;
    row-gap:var(--secretik-mobile-card-gap)!important;
    width:calc(var(--secretik-mobile-card-w) * 2 + var(--secretik-mobile-card-gap))!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    align-items:start!important;
    align-content:start!important;
  }

  /* Every public profile-card variant uses the exact same rectangle. */
  html body #new-profiles .profiles > a,
  html body #profiles .profiles > a,
  html body #profiles .profiles > .profile-list-card,
  html body .city-profiles-grid > a,
  html body .massage-profile-grid > a,
  html body .massage-profile-grid > .massage-profile,
  html body .salon-grid > a,
  html body .salon-grid > .salon-card,
  html body a.profile,
  html body a.profile.new-profile-card,
  html body a.profile.vip-profile-card,
  html body .profile-list-card{
    width:var(--secretik-mobile-card-w)!important;
    min-width:var(--secretik-mobile-card-w)!important;
    max-width:var(--secretik-mobile-card-w)!important;
    height:var(--secretik-mobile-card-h)!important;
    min-height:var(--secretik-mobile-card-h)!important;
    max-height:var(--secretik-mobile-card-h)!important;
    aspect-ratio:auto!important;
    flex:0 0 var(--secretik-mobile-card-w)!important;
    box-sizing:border-box!important;
    margin:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  /* Keep the card internals inside the fixed rectangle. */
  html body a.profile .compact-body,
  html body .profile-list-card .compact-body{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    box-sizing:border-box!important;
  }

  html body a.profile .profile-photo,
  html body .profile-list-card .profile-photo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  html body a.profile .profile-photo img,
  html body .profile-list-card .profile-photo img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* VIP carousel: same exact 160 x 218 card, without changing its behavior. */
  html body #vip-profiles .vip-carousel,
  html body .vip-carousel{
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  html body #vip-profiles .vip-carousel .profiles-track,
  html body .vip-carousel .profiles-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:var(--secretik-mobile-card-gap)!important;
    align-items:flex-start!important;
    width:max-content!important;
  }

  html body #vip-profiles .vip-carousel .profiles-track > a,
  html body #vip-profiles .vip-carousel .profiles-track > a.profile,
  html body #vip-profiles .vip-carousel .profiles-track > a.vip-profile-card{
    flex:0 0 var(--secretik-mobile-card-w)!important;
    width:var(--secretik-mobile-card-w)!important;
    min-width:var(--secretik-mobile-card-w)!important;
    max-width:var(--secretik-mobile-card-w)!important;
    height:var(--secretik-mobile-card-h)!important;
    min-height:var(--secretik-mobile-card-h)!important;
    max-height:var(--secretik-mobile-card-h)!important;
    aspect-ratio:auto!important;
    box-sizing:border-box!important;
    margin:0!important;
    overflow:hidden!important;
  }
}

@media (max-width:369px){
  :root{
    --secretik-mobile-card-w:calc((100vw - 40px)/2);
    --secretik-mobile-card-h:calc(var(--secretik-mobile-card-w) * 1.36470588);
  }
}