/*
 * SECRETIK — ONE UNIFIED PUBLIC PROFILE CARD
 *
 * This file is the single source of truth for public cards on:
 * - Home
 * - Individual city pages
 * - Massage city pages
 * - VIP sections
 *
 * Do not create page-specific card geometry in HTML files.
 */

:root {
  --secretik-card-width: 250px;
  --secretik-card-height: 340px;
  --secretik-card-gap: 18px;
}

/* =========================
   COMMON CARD / GRID GEOMETRY
   ========================= */

.profile.new-profile-card,
.profile.vip-profile-card,
.city-profiles-grid > a.new-profile-card,
.massage-profile-grid > a.new-profile-card,
.salon-grid > a.new-profile-card,
.vip-carousel .profiles-track > a.vip-profile-card {
  position: relative !important;
  width: var(--secretik-card-width) !important;
  min-width: var(--secretik-card-width) !important;
  max-width: var(--secretik-card-width) !important;
  height: var(--secretik-card-height) !important;
  min-height: var(--secretik-card-height) !important;
  max-height: var(--secretik-card-height) !important;
  flex: 0 0 var(--secretik-card-width) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: #0d1018 !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.22) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.profile.new-profile-card:hover,
.profile.vip-profile-card:hover,
.profile.new-profile-card:focus-visible,
.profile.vip-profile-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(255,79,163,.60) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 18px rgba(255,79,163,.08) !important;
}

/* Every public grid uses the same card width. Only the number of columns changes. */
.profiles,
.city-profiles-grid,
.massage-profile-grid,
.salon-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--secretik-card-width)) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: var(--secretik-card-gap) !important;
}

.vip-carousel {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.vip-carousel .profiles-track {
  display: flex !important;
  gap: var(--secretik-card-gap) !important;
  width: max-content !important;
  align-items: flex-start !important;
  will-change: transform !important;
}

/* =========================
   CARD INTERNAL STRUCTURE
   ========================= */

.compact-body {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.compact-body .profile-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #11141c !important;
}

.compact-body .profile-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform .35s ease !important;
}

.new-profile-card:hover .profile-photo img,
.vip-profile-card:hover .profile-photo img {
  transform: scale(1.035) !important;
}

.compact-body .profile-photo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(to top, rgba(4,6,12,.92), rgba(4,6,12,.05) 55%) !important;
}

.compact-head {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 30 !important;
  height: 50px !important;
  padding: 9px 11px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  background: linear-gradient(to top, rgba(4,6,12,.96), rgba(4,6,12,0)) !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}

.compact-head strong {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================
   HOVER INFORMATION
   ========================= */

.compact-details {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 43px 13px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: rgba(10,13,20,.97) !important;
  border: 1px solid rgba(255,79,163,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.10), 0 0 14px rgba(255,79,163,.08) !important;
  border-radius: 11px !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.new-profile-card:hover .compact-details,
.vip-profile-card:hover .compact-details,
.new-profile-card:focus-visible .compact-details,
.vip-profile-card:focus-visible .compact-details {
  z-index: 100 !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.new-profile-card:hover .compact-head,
.vip-profile-card:hover .compact-head,
.new-profile-card:focus-visible .compact-head,
.vip-profile-card:focus-visible .compact-head {
  opacity: 0 !important;
  z-index: 1 !important;
}

/* =========================
   VIP BADGE
   Visible at rest; ALWAYS behind hover details.
   ========================= */

.compact-body > .compact-vip.vip-badge-image {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 54px !important;
  max-width: 54px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 50 !important;
  transition: opacity .18s ease !important;
  pointer-events: none !important;
}

.new-profile-card:hover .compact-body > .compact-vip.vip-badge-image,
.vip-profile-card:hover .compact-body > .compact-vip.vip-badge-image,
.new-profile-card:focus-visible .compact-body > .compact-vip.vip-badge-image,
.vip-profile-card:focus-visible .compact-body > .compact-vip.vip-badge-image {
  z-index: 1 !important;
}

/* =========================
   INFORMATION TYPOGRAPHY
   ========================= */

.compact-city {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 28px !important;
  color: #9297a4 !important;
  font-size: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.compact-city i {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50% !important;
  background: #3de58c !important;
}

.compact-specs,
.compact-prices {
  display: grid !important;
  gap: 0 !important;
}

.compact-specs div,
.compact-prices div {
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.compact-specs span,
.compact-prices span {
  color: #858b9a !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

.compact-specs b,
.compact-prices b {
  color: #ff4fa3 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.compact-prices { margin-top: 8px !important; }

.compact-appearance {
  margin-top: 7px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: #9fa7b7 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.compact-appearance b {
  color: #e6e9ef !important;
  font-weight: 600 !important;
}

/* =========================
   RESPONSIVE
   Same geometry, fewer columns.
   ========================= */

@media (max-width: 700px) {
  :root {
    --secretik-card-width: min(250px, calc(50vw - 24px));
    --secretik-card-height: 340px;
    --secretik-card-gap: 12px;
  }
}

@media (max-width: 520px) {
  :root {
    --secretik-card-width: calc(100vw - 36px);
    --secretik-card-height: 340px;
  }
}


/* =====================================================================
   SECRETIK — CANONICAL CARD SYSTEM V10
   Single source of truth for public cards across home, individual and
   massage pages. Legacy page CSS is left intact; these high-specificity
   rules are intentionally last so they cannot change card geometry.
   ===================================================================== */
:root{
  --secretik-card-width:250px;
  --secretik-card-height:340px;
  --secretik-card-gap:18px;
}
html body .profiles,
html body .city-profiles-grid,
html body .massage-profile-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,250px) !important;
  grid-auto-rows:340px !important;
  justify-content:start !important;
  align-items:start !important;
  gap:18px !important;
}
html body .vip-carousel{width:100% !important;overflow:hidden !important;position:relative !important;}
html body .vip-carousel .profiles-track{display:flex !important;width:max-content !important;gap:18px !important;align-items:flex-start !important;}
html body a.profile.new-profile-card,
html body a.profile.vip-profile-card,
html body .profiles > a.new-profile-card,
html body .city-profiles-grid > a.new-profile-card,
html body .massage-profile-grid > a.new-profile-card,
html body .salon-grid > a.new-profile-card,
html body .vip-carousel .profiles-track > a.vip-profile-card{
  position:relative !important;box-sizing:border-box !important;display:block !important;
  width:250px !important;min-width:250px !important;max-width:250px !important;
  height:340px !important;min-height:340px !important;max-height:340px !important;
  flex:0 0 250px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;border-radius:12px !important;
}
html body a.profile.new-profile-card .compact-body,
html body a.profile.vip-profile-card .compact-body{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;}
html body a.profile.new-profile-card .profile-photo,
html body a.profile.vip-profile-card .profile-photo{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;overflow:hidden !important;}
html body a.profile.new-profile-card .profile-photo img,
html body a.profile.vip-profile-card .profile-photo img{position:absolute !important;inset:0 !important;display:block !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:cover !important;object-position:center center !important;}
html body a.profile.new-profile-card > .compact-head,
html body a.profile.vip-profile-card > .compact-head{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:100% !important;height:54px !important;min-height:54px !important;max-height:54px !important;box-sizing:border-box !important;z-index:30 !important;padding:9px 11px !important;}
html body a.profile.new-profile-card > .compact-body > .compact-details,
html body a.profile.vip-profile-card > .compact-body > .compact-details{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:100% !important;box-sizing:border-box !important;overflow:hidden !important;z-index:200 !important;}
html body a.profile.new-profile-card:hover > .compact-body > .compact-details,
html body a.profile.new-profile-card:focus-visible > .compact-body > .compact-details,
html body a.profile.vip-profile-card:hover > .compact-body > .compact-details,
html body a.profile.vip-profile-card:focus-visible > .compact-body > .compact-details{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important;z-index:300 !important;}
html body a.profile.new-profile-card:hover > .compact-body > .compact-vip.vip-badge-image,
html body a.profile.new-profile-card:focus-visible > .compact-body > .compact-vip.vip-badge-image,
html body a.profile.vip-profile-card:hover > .compact-body > .compact-vip.vip-badge-image,
html body a.profile.vip-profile-card:focus-visible > .compact-body > .compact-vip.vip-badge-image{z-index:1 !important;}
html body a.profile.new-profile-card > .compact-body > .compact-vip.vip-badge-image,
html body a.profile.vip-profile-card > .compact-body > .compact-vip.vip-badge-image{position:absolute !important;top:10px !important;right:10px !important;left:auto !important;bottom:auto !important;width:54px !important;min-width:54px !important;max-width:54px !important;height:auto !important;margin:0 !important;padding:0 !important;display:block !important;object-fit:contain !important;background:transparent !important;border:0 !important;z-index:50 !important;pointer-events:none !important;}
html body .profile-list-card,
html body .massage-profile-grid > .massage-profile{box-sizing:border-box !important;width:250px !important;min-width:250px !important;max-width:250px !important;height:340px !important;min-height:340px !important;max-height:340px !important;overflow:hidden !important;}
@media(max-width:700px){
  html body .profiles,html body .city-profiles-grid,html body .massage-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:auto !important;gap:12px !important;}
  html body a.profile.new-profile-card,html body a.profile.vip-profile-card,html body .profiles > a.new-profile-card,html body .city-profiles-grid > a.new-profile-card,html body .massage-profile-grid > a.new-profile-card,html body .vip-carousel .profiles-track > a.vip-profile-card{width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;min-height:0 !important;max-height:none !important;aspect-ratio:250 / 340 !important;flex:0 0 auto !important;}
}
@media(max-width:460px){html body .profiles,html body .city-profiles-grid,html body .massage-profile-grid{grid-template-columns:1fr !important;}}


/* ================================================================
   SECRETIK V11 — FINAL UNIFIED CARD OVERRIDE
   One geometry for homepage, VIP, individual and massage cards.
   This block intentionally comes last so legacy page CSS cannot
   change card dimensions independently.
   ================================================================ */
:root{
  --secretik-card-width:250px;
  --secretik-card-height:340px;
  --secretik-card-gap:18px;
}

#vip-profiles .profiles-track > a.profile.new-profile-card,
#new-profiles .profiles > a.profile.new-profile-card,
#profiles .profiles > a.profile.new-profile-card,
#profiles .profiles > a.profile.profile-list-card,
.city-profiles-grid > a.profile.new-profile-card,
.massage-profile-grid > a.profile.new-profile-card,
.massage-profile-grid > a.profile.massage-profile,
.vip-carousel .profiles-track > a.profile.vip-profile-card{
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
  height:340px !important;
  min-height:340px !important;
  max-height:340px !important;
  flex:0 0 250px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  position:relative !important;
}

#new-profiles .profiles,
#profiles .profiles,
.city-profiles-grid,
.massage-profile-grid{
  grid-template-columns:repeat(auto-fill,250px) !important;
  grid-auto-rows:340px !important;
  align-items:start !important;
  justify-content:start !important;
  gap:18px !important;
}

#vip-profiles .profiles-track,
.vip-carousel .profiles-track{
  gap:18px !important;
  align-items:flex-start !important;
}

#vip-profiles .profiles-track > a.profile.new-profile-card,
#vip-profiles .profiles-track > a.profile.vip-profile-card{
  height:340px !important;
  max-height:340px !important;
}

/* All card content is clipped to the common rectangle. */
#new-profiles .profile.new-profile-card .compact-body,
#profiles .profile.new-profile-card .compact-body,
#profiles .profile.profile-list-card .compact-body,
.city-profiles-grid .profile.new-profile-card .compact-body,
.massage-profile-grid .profile.new-profile-card .compact-body{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  overflow:hidden !important;
}

/* Hover panel always covers the complete card and therefore the VIP badge. */
#new-profiles .profile.new-profile-card .compact-details,
#profiles .profile.new-profile-card .compact-details,
.city-profiles-grid .profile.new-profile-card .compact-details,
.massage-profile-grid .profile.new-profile-card .compact-details,
#vip-profiles .profile.new-profile-card .compact-details{
  position:absolute !important;
  inset:0 !important;
  z-index:200 !important;
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  box-sizing:border-box !important;
}

#new-profiles .profile.new-profile-card:hover .compact-details,
#profiles .profile.new-profile-card:hover .compact-details,
.city-profiles-grid .profile.new-profile-card:hover .compact-details,
.massage-profile-grid .profile.new-profile-card:hover .compact-details,
#vip-profiles .profile.new-profile-card:hover .compact-details{
  opacity:1 !important;
  visibility:visible !important;
  z-index:200 !important;
}

#new-profiles .profile.new-profile-card:hover .compact-vip.vip-badge-image,
#profiles .profile.new-profile-card:hover .compact-vip.vip-badge-image,
.city-profiles-grid .profile.new-profile-card:hover .compact-vip.vip-badge-image,
.massage-profile-grid .profile.new-profile-card:hover .compact-vip.vip-badge-image,
#vip-profiles .profile.new-profile-card:hover .compact-vip.vip-badge-image{
  opacity:0 !important;
  visibility:hidden !important;
  z-index:1 !important;
}

@media(max-width:700px){
  #new-profiles .profiles,
  #profiles .profiles,
  .city-profiles-grid,
  .massage-profile-grid{
    grid-template-columns:repeat(2,250px) !important;
    grid-auto-rows:340px !important;
    justify-content:start !important;
  }
}
@media(max-width:540px){
  #new-profiles .profiles,
  #profiles .profiles,
  .city-profiles-grid,
  .massage-profile-grid{
    grid-template-columns:250px !important;
    grid-auto-rows:340px !important;
  }
}

/* ================================================================
   SECRETIK V12 — HOMEPAGE 5-COLUMN GRID + STRICT VIP BOUNDS
   ================================================================ */

/* On desktop the "Новые анкеты" and "Все анкеты" sections always
   show exactly five unified cards in one row. */
@media (min-width: 701px) {
  html body #new-profiles .profiles,
  html body #profiles .profiles {
    grid-template-columns: repeat(5, 250px) !important;
    grid-auto-columns: 250px !important;
    grid-auto-rows: 340px !important;
    width: 1318px !important;
    max-width: 100% !important;
    gap: 18px !important;
    justify-content: start !important;
    align-items: start !important;
  }
}

/* Keep every unified card strictly inside its own rectangle. */
html body #new-profiles .profile.new-profile-card,
html body #profiles .profile.new-profile-card,
html body #profiles .profile.profile-list-card,
html body #vip-profiles .profile.new-profile-card,
html body #vip-profiles .profile.vip-profile-card,
html body .city-profiles-grid .profile.new-profile-card,
html body .massage-profile-grid .profile.new-profile-card {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  outline: none !important;
}

/* The VIP badge must stay completely inside the photo/card bounds. */
html body .compact-body > .compact-vip.vip-badge-image,
html body #vip-profiles .compact-vip.vip-badge-image {
  top: 8px !important;
  right: 8px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: auto !important;
  max-height: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0 !important;
  z-index: 50 !important;
}

/* No visual element may paint outside the photo itself. */
html body .compact-body,
html body .compact-body .profile-photo,
html body .compact-body .profile-photo img {
  overflow: hidden !important;
}

/* Hover details are clipped to the same exact rectangle. */
html body #new-profiles .compact-details,
html body #profiles .compact-details,
html body #vip-profiles .compact-details,
html body .city-profiles-grid .compact-details,
html body .massage-profile-grid .compact-details {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

@media (max-width: 700px) {
  html body #new-profiles .profiles,
  html body #profiles .profiles {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }
}

@media (max-width: 540px) {
  html body #new-profiles .profiles,
  html body #profiles .profiles {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ================================================================
   SECRETIK V12.1 — FINAL DESKTOP GEOMETRY / NO CARD BLEED
   ================================================================ */

:root{
  --secretik-card-width:250px;
  --secretik-card-height:340px;
  --secretik-card-gap:18px;
  --secretik-five-column-width:1322px; /* 5×250 + 4×18 */
}

/* The three home profile sections share exactly the same horizontal boundary
   as five 250px cards. Nothing is allowed to overflow the section. */
@media (min-width: 1400px){
  html body #vip-profiles > .container,
  html body #new-profiles > .container,
  html body #profiles > .container{
    width:var(--secretik-five-column-width) !important;
    max-width:calc(100% - 36px) !important;
    box-sizing:border-box !important;
  }

  html body #vip-profiles .vip-carousel,
  html body #new-profiles .profiles,
  html body #profiles .profiles{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  html body #new-profiles .profiles,
  html body #profiles .profiles{
    grid-template-columns:repeat(5, var(--secretik-card-width)) !important;
    grid-template-rows:repeat(1, var(--secretik-card-height)) !important;
    grid-auto-rows:var(--secretik-card-height) !important;
    gap:var(--secretik-card-gap) !important;
    width:var(--secretik-five-column-width) !important;
    max-width:100% !important;
    justify-content:start !important;
  }

  html body #vip-profiles .profiles-track{
    width:var(--secretik-five-column-width) !important;
    max-width:var(--secretik-five-column-width) !important;
    gap:var(--secretik-card-gap) !important;
    box-sizing:border-box !important;
  }
}

/* On narrower screens retain the same card geometry until five cards no
   longer physically fit, then reduce the number of columns cleanly. */
@media (min-width: 1100px) and (max-width: 1399px){
  html body #new-profiles .profiles,
  html body #profiles .profiles{
    grid-template-columns:repeat(4, var(--secretik-card-width)) !important;
    width:calc(var(--secretik-card-width) * 4 + var(--secretik-card-gap) * 3) !important;
    max-width:100% !important;
    gap:var(--secretik-card-gap) !important;
  }
}

/* Absolute clipping boundary for every unified card. Borders, badge and
   hover layer stay inside the exact same rectangle as the photograph. */
html body .profile.new-profile-card,
html body .profile.vip-profile-card,
html body .city-profiles-grid > a.new-profile-card,
html body .massage-profile-grid > a.new-profile-card{
  overflow:hidden !important;
  overflow:clip !important;
  contain:paint !important;
  isolation:isolate !important;
  outline:0 !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
}

html body .profile.new-profile-card:hover,
html body .profile.vip-profile-card:hover{
  /* Do not move the border outside its visual footprint on hover. */
  transform:none !important;
}

html body .compact-body,
html body .compact-body .profile-photo,
html body .compact-body .profile-photo img,
html body .compact-details{
  overflow:hidden !important;
  overflow:clip !important;
  border-radius:inherit !important;
}

html body .compact-body > .compact-vip.vip-badge-image{
  top:8px !important;
  right:8px !important;
  width:50px !important;
  min-width:50px !important;
  max-width:50px !important;
  max-height:18px !important;
  object-fit:contain !important;
  transform:none !important;
}

/* Hover information is exactly the card rectangle — never larger. */
html body .compact-details{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  border:0 !important;
}

/* Keep five cards and the right boundary aligned on the home page. */
@media (min-width: 1400px){
  html body #vip-profiles .section-title,
  html body #new-profiles .section-title,
  html body #profiles .section-title{
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* HOME: 25 profiles per page in the "Все анкеты" section. */
#profiles .profiles-pagination,
.profiles-pagination{box-sizing:border-box;}
#profiles .profiles-pagination a,
.profiles-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;box-sizing:border-box;}

/* V15 — homepage grid alignment and unified hover outline */
@media (min-width: 1201px) {
  #new-profiles .profiles,
  #profiles .profiles {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: start !important;
    justify-content: stretch !important;
  }

  #new-profiles .new-profile-card,
  #profiles .profile-list-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* The hover information panel always follows the exact card boundary. */
#profiles .profile-list-card .profile-details {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,79,163,.72) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.10), 0 0 14px rgba(255,79,163,.08) !important;
  overflow: hidden !important;
}

#new-profiles .new-profile-card .compact-details,
#vip-profiles .vip-profile-card .compact-details {
  border: 1px solid rgba(255,79,163,.72) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.10), 0 0 14px rgba(255,79,163,.08) !important;
  overflow: hidden !important;
}

/* Keep the same five-column rhythm on the homepage as the section width changes. */
@media (min-width: 701px) and (max-width: 1200px) {
  #new-profiles .profiles,
  #profiles .profiles {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #new-profiles .new-profile-card,
  #profiles .profile-list-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }
}

/* ================================================================
   SECRETIK V16 — PINK HOVER OUTLINE ON INDIVIDUAL + MASSAGE PAGES
   ================================================================ */

/* Individual city pages: the hover information layer gets the same
   pink outline as the homepage cards. */
html body .city-profiles-grid > a.new-profile-card .compact-details,
html body .city-profiles-grid > a.new-profile-card:hover .compact-details,
html body .city-profiles-grid > a.new-profile-card:focus-visible .compact-details {
  border: 1px solid rgba(255,79,163,.72) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.10), 0 0 14px rgba(255,79,163,.08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Massage pages: same pink outline for both unified compact-details
   cards and the dedicated massage-card-details layer. */
html body .massage-profile-grid > a.new-profile-card .compact-details,
html body .massage-profile-grid > a.new-profile-card:hover .compact-details,
html body .massage-profile-grid > a.new-profile-card:focus-visible .compact-details,
html body .massage-profile-grid .massage-card-details,
html body .massage-profile-grid .massage-profile:hover .massage-card-details,
html body .massage-profile-grid .massage-profile:focus-visible .massage-card-details {
  border: 1px solid rgba(255,79,163,.72) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.10), 0 0 14px rgba(255,79,163,.08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* SALONS — no demo cards; only moderated profiles are shown */
.salon-empty{grid-column:1/-1;min-height:120px;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#0d1018;color:#8f97a8;font-size:14px;box-sizing:border-box;}

/* Filter controller visibility */
.city-profiles-grid > a.filter-card-hidden, .massage-profile-grid > a.filter-card-hidden{display:none!important;visibility:hidden!important;}


/* FINAL V3: card containment / hidden-card isolation */
html body .city-profiles-grid > a.new-profile-card,
html body .massage-profile-grid > a.new-profile-card{position:relative!important;overflow:hidden!important;clip-path:inset(0 round 12px)!important;isolation:isolate!important;}
html body .city-profiles-grid > a.new-profile-card > .compact-body,
html body .massage-profile-grid > a.new-profile-card > .compact-body{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;}
html body .city-profiles-grid > a.new-profile-card > .compact-body > .compact-vip.vip-badge-image,
html body .massage-profile-grid > a.new-profile-card > .compact-body > .compact-vip.vip-badge-image{position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;width:50px!important;min-width:50px!important;max-width:50px!important;height:auto!important;max-height:18px!important;margin:0!important;padding:0!important;transform:none!important;z-index:50!important;pointer-events:none!important;}
html body .city-profiles-grid > a.filter-card-hidden,
html body .massage-profile-grid > a.filter-card-hidden{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;width:0!important;height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(100%)!important;}
html body .city-profiles-grid > .compact-vip.vip-badge-image,
html body .massage-profile-grid > .compact-vip.vip-badge-image{display:none!important;}


/* V129 — empty profile slots use the same compact card size as real profiles */
.secretik-placeholder-card{
  position:relative!important;
  width:100%!important;
  height:340px!important;
  min-height:340px!important;
  max-height:340px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:block!important;
  overflow:hidden!important;
  border:1px solid rgba(255,0,119,.42)!important;
  border-radius:11px!important;
  background:#000!important;
  box-shadow:0 8px 30px rgba(0,0,0,.20)!important;
}
.secretik-placeholder-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:#000!important;
  overflow:hidden!important;
}
.secretik-placeholder-photo img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
}
.secretik-placeholder-title,.secretik-placeholder-text{display:none!important}
@media(max-width:700px){
  .secretik-placeholder-card{height:340px!important;min-height:340px!important;max-height:340px!important}
}


/* V140 FINAL — city and massage cards use the same frame, spacing and dimensions as "Новые анкеты". */
html body .massage-profile-grid,
html body .city-profiles-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
html body .massage-profile-grid > a.new-profile-card,
html body .city-profiles-grid > a.new-profile-card{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:370px !important;
  min-height:370px !important;
  max-height:370px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,79,163,.72) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#0d1018 !important;
  box-shadow:inset 0 0 0 1px rgba(255,79,163,.10),0 0 14px rgba(255,79,163,.08) !important;
}
html body .massage-profile-grid > a.new-profile-card .compact-head,
html body .city-profiles-grid > a.new-profile-card .compact-head{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  z-index:30 !important;
  height:58px !important;
  box-sizing:border-box !important;
  padding:18px 14px 12px !important;
  background:linear-gradient(to top,rgba(4,6,12,.96),rgba(4,6,12,0)) !important;
}
html body .massage-profile-grid > a.new-profile-card .compact-body,
html body .city-profiles-grid > a.new-profile-card .compact-body{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  padding:0 !important; margin:0 !important; overflow:hidden !important;
}
html body .massage-profile-grid > a.new-profile-card .profile-photo,
html body .city-profiles-grid > a.new-profile-card .profile-photo{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  overflow:hidden !important; background:#0d1018 !important;
}
html body .massage-profile-grid > a.new-profile-card .profile-photo img,
html body .city-profiles-grid > a.new-profile-card .profile-photo img{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important;
}
html body .massage-profile-grid > a.new-profile-card .profile-photo:after,
html body .city-profiles-grid > a.new-profile-card .profile-photo:after{
  content:"" !important; position:absolute !important; inset:auto 0 0 !important; height:45% !important;
  background:linear-gradient(to top,rgba(4,6,12,.96),rgba(4,6,12,.55) 48%,rgba(4,6,12,0)) !important;
  pointer-events:none !important;
}
html body .massage-profile-grid > a.new-profile-card .compact-details,
html body .city-profiles-grid > a.new-profile-card .compact-details{
  position:absolute !important; inset:0 !important; z-index:40 !important;
  width:100% !important; height:100% !important; max-height:100% !important;
  box-sizing:border-box !important; overflow:hidden !important;
  border:1px solid rgba(255,79,163,.72) !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 1px rgba(255,79,163,.10),0 0 14px rgba(255,79,163,.08) !important;
}
@media(max-width:1200px){html body .massage-profile-grid,html body .city-profiles-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}}
@media(max-width:900px){html body .massage-profile-grid,html body .city-profiles-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(max-width:700px){html body .massage-profile-grid,html body .city-profiles-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}html body .massage-profile-grid > a.new-profile-card,html body .city-profiles-grid > a.new-profile-card{height:340px !important;min-height:340px !important;max-height:340px !important;}}
@media(max-width:460px){html body .massage-profile-grid,html body .city-profiles-grid{grid-template-columns:1fr !important;}}

/* V159 — salon cards: no mid-card dark overlay. The title is already rendered by
   the bottom compact-head gradient; the photograph itself must stay clean. */
html body .salon-grid > a.new-profile-card .compact-body .profile-photo::after,
html body .salon-grid > a.vip-profile-card .compact-body .profile-photo::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
html body .salon-grid > a.new-profile-card .compact-body .profile-photo img,
html body .salon-grid > a.vip-profile-card .compact-body .profile-photo img{
  filter:none !important;
}


/* ================================================================
   SECRETIK V161 — UNIFIED BOTTOM PHOTO SHADOW
   The dark gradient belongs ONLY to the lower part of every public
   profile photo, directly behind the name. No mid-photo overlay.
   Applies equally to homepage, individual, massage and salon cards.
   ================================================================ */
html body .profile.new-profile-card .compact-body .profile-photo::after,
html body .profile.vip-profile-card .compact-body .profile-photo::after,
html body .profile.profile-list-card .compact-body .profile-photo::after,
html body .city-profiles-grid > a.profile .compact-body .profile-photo::after,
html body .massage-profile-grid > a.profile .compact-body .profile-photo::after,
html body .salon-grid > a.profile .compact-body .profile-photo::after,
html body .vip-carousel .profiles-track > a.profile .compact-body .profile-photo::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  width:100% !important;
  height:45% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:linear-gradient(to top,
    rgba(4,6,12,.96) 0%,
    rgba(4,6,12,.58) 45%,
    rgba(4,6,12,0) 100%) !important;
  border:0 !important;
  box-shadow:none !important;
}

/* The name layer sits above the bottom shadow. */
html body .profile.new-profile-card .compact-head,
html body .profile.vip-profile-card .compact-head,
html body .profile.profile-list-card .compact-head,
html body .city-profiles-grid > a.profile .compact-head,
html body .massage-profile-grid > a.profile .compact-head,
html body .salon-grid > a.profile .compact-head,
html body .vip-carousel .profiles-track > a.profile .compact-head {
  z-index:30 !important;
}


/* SECRETIK MOBILE V206 — final two-card override */
@media (max-width:700px){
  html body .profiles,
  html body .city-profiles-grid,
  html body .massage-profile-grid,
  html body .salon-grid,
  html body #new-profiles .profiles,
  html body #profiles .profiles{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }
  html body .profile.new-profile-card,
  html body .profile.vip-profile-card,
  html body .city-profiles-grid > a.new-profile-card,
  html body .massage-profile-grid > a.new-profile-card,
  html body .salon-grid > a.new-profile-card,
  html body #new-profiles .profiles > a,
  html body #profiles .profiles > a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:250 / 340 !important;
    flex:none !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  html body .vip-carousel{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x !important;
  }
  html body .vip-carousel::-webkit-scrollbar{display:none !important}
  html body .vip-carousel .profiles-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    gap:10px !important;
  }
  html body .vip-carousel .profiles-track > a.vip-profile-card{
    flex:0 0 min(250px, calc((100vw - 34px) / 2)) !important;
    width:min(250px, calc((100vw - 34px) / 2)) !important;
    min-width:min(250px, calc((100vw - 34px) / 2)) !important;
    max-width:min(250px, calc((100vw - 34px) / 2)) !important;
    height:auto !important;
    aspect-ratio:250 / 340 !important;
    scroll-snap-align:start !important;
  }
}


/* SECRETIK V211 — FINAL MOBILE TWO-COLUMN GEOMETRY
   This is the authoritative mobile rule. It intentionally comes LAST. */
@media (max-width:700px){
  html body{overflow-x:hidden!important;}
  html body .container{width:calc(100% - 24px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;}

  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,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  html body #new-profiles .profiles>a.profile,
  html body #new-profiles .profiles>a.new-profile-card,
  html body #profiles .profiles>a.profile,
  html body #profiles .profiles>a.new-profile-card,
  html body #profiles .profiles>.profile-list-card,
  html body .city-profiles-grid>a.profile,
  html body .city-profiles-grid>a.new-profile-card,
  html body .massage-profile-grid>a.profile,
  html body .massage-profile-grid>a.new-profile-card,
  html body .salon-grid>a.profile,
  html body .salon-grid>a.new-profile-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:250/340!important;
    flex:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /* New profiles: exactly 4 visible = 2 columns x 2 rows. */
  html body #new-profiles .profiles>a:nth-child(n+5){display:none!important;}

  /* All public lists: 2 columns. Pagination limits the mobile page to 16. */
  html body #profiles .profiles>a:nth-child(n+17){display:none!important;}

  /* VIP: same width as one normal grid column, no finger scrolling. */
  html body #vip-profiles .vip-carousel{
    width:100%!important;max-width:none!important;min-width:0!important;
    overflow:hidden!important;overflow-x:hidden!important;
    padding:0!important;margin:0!important;box-sizing:border-box!important;
    touch-action:none!important;overscroll-behavior:none!important;
    -webkit-overflow-scrolling:auto!important;scrollbar-width:none!important;
  }
  html body #vip-profiles .vip-carousel::-webkit-scrollbar{display:none!important;}
  html body #vip-profiles .vip-carousel .profiles-track{
    display:flex!important;flex-wrap:nowrap!important;width:max-content!important;
    gap:10px!important;padding:0!important;margin:0!important;
    animation:none!important;touch-action:none!important;
  }
  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 calc((100vw - 44px)/2)!important;
    width:calc((100vw - 44px)/2)!important;
    min-width:calc((100vw - 44px)/2)!important;
    max-width:calc((100vw - 44px)/2)!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:250/340!important;margin:0!important;box-sizing:border-box!important;
    touch-action:none!important;scroll-snap-align:none!important;
  }
}
@media (max-width:380px){
  html body #new-profiles .profiles,html body #profiles .profiles,html body .city-profiles-grid,html body .massage-profile-grid,html body .salon-grid{gap:8px!important;}
  html body #vip-profiles .vip-carousel .profiles-track>a.profile,html body #vip-profiles .vip-carousel .profiles-track>a.vip-profile-card{flex-basis:calc((100vw - 40px)/2)!important;width:calc((100vw - 40px)/2)!important;min-width:calc((100vw - 40px)/2)!important;max-width:calc((100vw - 40px)/2)!important;}
}

/* ================================================================
   SECRETIK V212 — MOBILE MASTER CARD SIZE
   Reference: current VIP card on 390px viewport = 172.6 x 235.3px.
   Exactly the same geometry is used everywhere on mobile:
   homepage (VIP/new/all), cities, individual, massage, salons.
   ================================================================ */
@media (max-width:700px){
  :root{
    --secretik-mobile-card-width:calc((100vw - 44px) / 2);
    --secretik-mobile-card-height:calc(((100vw - 44px) / 2) * 340 / 250);
    --secretik-mobile-card-gap:12px;
  }

  /* Every public-card grid uses the same two-column geometry. */
  html body #new-profiles .profiles,
  html body #profiles .profiles,
  html body .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-width)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:var(--secretik-mobile-card-height) !important;
    column-gap:var(--secretik-mobile-card-gap) !important;
    row-gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:start !important;
    align-items:start !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  /* Same card width/height for every profile type. */
  html body #new-profiles .profiles > a.profile,
  html body #new-profiles .profiles > a.new-profile-card,
  html body #profiles .profiles > a.profile,
  html body #profiles .profiles > a.new-profile-card,
  html body #profiles .profiles > .profile-list-card,
  html body .profiles > a.profile,
  html body .city-profiles-grid > a.profile,
  html body .city-profiles-grid > a.new-profile-card,
  html body .massage-profile-grid > a.profile,
  html body .massage-profile-grid > a.new-profile-card,
  html body .massage-profile-grid > a.massage-profile,
  html body .salon-grid > a.profile,
  html body .salon-grid > a.new-profile-card{
    width:var(--secretik-mobile-card-width) !important;
    min-width:var(--secretik-mobile-card-width) !important;
    max-width:var(--secretik-mobile-card-width) !important;
    height:var(--secretik-mobile-card-height) !important;
    min-height:var(--secretik-mobile-card-height) !important;
    max-height:var(--secretik-mobile-card-height) !important;
    aspect-ratio:250 / 340 !important;
    flex:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* New = exactly 4 cards on mobile (2 x 2). */
  html body #new-profiles .profiles > a:nth-child(n+5){display:none !important;}

  /* All = exactly 16 cards on mobile (2 x 8); pagination continues below. */
  html body #profiles .profiles > a:nth-child(n+17){display:none !important;}
  html body #profiles .profiles > .profile-list-card:nth-child(n+17){display:none !important;}

  /* VIP is a slow automatic carousel, but never a finger-draggable strip. */
  html body #vip-profiles .vip-carousel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    touch-action:pan-y !important;
    overscroll-behavior-x:none !important;
    -webkit-overflow-scrolling:auto !important;
    scrollbar-width:none !important;
  }
  html body #vip-profiles .vip-carousel::-webkit-scrollbar{display:none !important;}
  html body #vip-profiles .vip-carousel .profiles-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    gap:var(--secretik-mobile-card-gap) !important;
    padding:0 !important;
    margin:0 !important;
    touch-action:pan-y !important;
    will-change:transform !important;
  }
  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-width) !important;
    width:var(--secretik-mobile-card-width) !important;
    min-width:var(--secretik-mobile-card-width) !important;
    max-width:var(--secretik-mobile-card-width) !important;
    height:var(--secretik-mobile-card-height) !important;
    min-height:var(--secretik-mobile-card-height) !important;
    max-height:var(--secretik-mobile-card-height) !important;
    aspect-ratio:250 / 340 !important;
    touch-action:pan-y !important;
    user-select:none !important;
  }
}

@media (max-width:380px){
  :root{
    --secretik-mobile-card-width:calc((100vw - 40px) / 2);
    --secretik-mobile-card-height:calc(((100vw - 40px) / 2) * 340 / 250);
  }
}