/* public/assets/css/app-home.css */
/* Только главная страница в WebView-приложении */

html.mhk-app-webview,
html.mhk-app-webview body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mhk-app-webview body {
  background: var(--page-body-bg) !important;
}

/* Общая обёртка главной */
html.mhk-app-webview .wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 10px 10px 24px !important;

  overflow: hidden !important;
}

/* Верхний баннер */
html.mhk-app-webview .bannerHome {
  width: 100% !important;
  height: 150px !important;
  border-radius: 20px !important;
  margin: 0 0 12px !important;
}

html.mhk-app-webview .bannerHome .slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html.mhk-app-webview .bannerHome__caption {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;

  padding: 8px 10px !important;
  border-radius: 12px !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
}

html.mhk-app-webview .bannerHome .dots {
  left: 10px !important;
  bottom: 10px !important;
  padding: 6px 8px !important;
}

/* Hero */
html.mhk-app-webview .heroIntro {
  width: 100% !important;
  margin-top: 12px !important;

  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 12px !important;
  padding: 14px !important;
  padding-right: 48px !important;

  border-radius: 22px !important;
}

html.mhk-app-webview .heroClose {
  top: 9px !important;
  right: 9px !important;
  width: 32px !important;
  height: 32px !important;
}

html.mhk-app-webview .heroBadge {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html.mhk-app-webview .heroTitle {
  margin: 9px 0 7px !important;
  max-width: 100% !important;

  font-size: 23px !important;
  line-height: 1.08 !important;
}

html.mhk-app-webview .heroText {
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html.mhk-app-webview .heroQuick {
  gap: 7px !important;
  margin-top: 11px !important;
}

html.mhk-app-webview .heroQuick a {
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

html.mhk-app-webview .heroStats {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.mhk-app-webview .heroStat {
  padding: 11px 12px !important;
  border-radius: 16px !important;
}

html.mhk-app-webview .heroStat__value {
  font-size: 14px !important;
}

/* Основная сетка */
html.mhk-app-webview .pageGrid {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 14px !important;
  margin-top: 14px !important;
}

html.mhk-app-webview .pageGrid main,
html.mhk-app-webview .pageGrid aside,
html.mhk-app-webview .sticky {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Карточки секций */
html.mhk-app-webview .sectionCard {
  width: 100% !important;
  max-width: 100% !important;

  border-radius: 22px !important;
  overflow: hidden !important;
}

html.mhk-app-webview .sectionHead {
  padding: 14px 14px 13px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 10px !important;
}

html.mhk-app-webview .sectionHead::after {
  left: 14px !important;
  width: 70px !important;
}

html.mhk-app-webview .h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

html.mhk-app-webview .sub {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html.mhk-app-webview .sectionCounter {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

/* Счётчики свежих объявлений */
html.mhk-app-webview .freshCounters {
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 7px !important;
}

html.mhk-app-webview .sectionHead:has(.freshCounters) {
  flex-direction: column !important;
}

/* Топ сервисов */
html.mhk-app-webview .svcGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 10px !important;
  padding: 12px !important;
}

html.mhk-app-webview .svcCard {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  gap: 12px !important;

  padding: 12px !important;
  border-radius: 18px !important;
}

html.mhk-app-webview .svcLogoWrap {
  width: 82px !important;
  height: 82px !important;
  border-radius: 16px !important;
}

html.mhk-app-webview .svcBody {
  min-width: 0 !important;
}

html.mhk-app-webview .svcTopRow {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html.mhk-app-webview .svcBadgesRight {
  justify-content: flex-start !important;
}

html.mhk-app-webview .svcTitle {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html.mhk-app-webview .svcDesc {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Свежие авто/товары */
html.mhk-app-webview .freshGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;
  padding: 12px !important;
}

html.mhk-app-webview .item {
  min-width: 0 !important;
  border-radius: 18px !important;
}

html.mhk-app-webview .itemImg {
  aspect-ratio: 1 / 1 !important;
}

html.mhk-app-webview .itemBody {
  padding: 10px !important;
}

html.mhk-app-webview .itemTitle {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html.mhk-app-webview .itemMeta,
html.mhk-app-webview .itemMeta2,
html.mhk-app-webview .itemMeta3,
html.mhk-app-webview .itemLoc,
html.mhk-app-webview .itemPrice {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Бейджи на карточках */
html.mhk-app-webview .itemPromoBadge,
html.mhk-app-webview .itemDealBadge,
html.mhk-app-webview .topRibbon {
  font-size: 10px !important;
  min-height: 25px !important;
  padding: 0 8px !important;
}

html.mhk-app-webview .itemDealBadges {
  top: 9px !important;
  left: 9px !important;
  gap: 5px !important;
}

/* Топ мастера */
html.mhk-app-webview .mastersInner {
  padding: 12px !important;
}

/* Топ мастера — только WebView/mobile */
html.mhk-app-webview #topMastersGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

html.mhk-app-webview #topMastersGrid > .rankCard {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: auto !important;
  justify-self: stretch !important;
  flex: none !important;
}

html.mhk-app-webview .mastersGrid .rankCard {
  width: auto !important;
  max-width: none !important;
}

html.mhk-app-webview .rankCard {
  width: auto !important;
  min-width: 0 !important;

  border-radius: 18px !important;
  padding: 10px !important;
}

html.mhk-app-webview .rankImgWrap {
  width: 68px !important;
  height: 68px !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
}

html.mhk-app-webview .rankName {
  font-size: 14px !important;
}

html.mhk-app-webview .rankMeta {
  font-size: 11px !important;
}

/* Popup реклама */
html.mhk-app-webview .adModal__card {
  width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;

  border-radius: 20px !important;
}

html.mhk-app-webview .adModal__close {
  width: 38px !important;
  height: 38px !important;
}

/* Очень узкие телефоны */
@media (max-width: 370px) {
  html.mhk-app-webview .freshGrid {
    grid-template-columns: 1fr !important;
  }

  html.mhk-app-webview .svcCard {
    flex-direction: column !important;
  }

  html.mhk-app-webview .svcLogoWrap {
    width: 100% !important;
    height: 150px !important;
  }
}
/* Fix: кнопка закрытия приветственного блока в WebView */
html.mhk-app-webview .heroIntro {
  position: relative !important;
}

html.mhk-app-webview .heroIntro::before,
html.mhk-app-webview .heroIntro::after {
  pointer-events: none !important;
}

html.mhk-app-webview .heroIntro__left,
html.mhk-app-webview .heroIntro__right {
  pointer-events: auto !important;
}

html.mhk-app-webview .heroClose {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  z-index: 50 !important;
  pointer-events: auto !important;

  width: 36px !important;
  height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  touch-action: manipulation !important;
}
/* WebView: убрать синий квадрат при нажатии и починить close hero */
html.mhk-app-webview .heroClose,
html.mhk-app-webview .heroClose *,
html.mhk-app-webview .adModal__close,
html.mhk-app-webview .adModal__close * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}

html.mhk-app-webview .heroClose {
  outline: none !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

html.mhk-app-webview .heroClose:focus,
html.mhk-app-webview .heroClose:active,
html.mhk-app-webview .heroClose:focus-visible {
  outline: none !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.mhk-app-webview .heroIntro.is-hidden {
  display: none !important;
}