/* === CATALOG LAYOUT (как было) === */

/* Контейнер страницы каталога */
.catalog-page .container,
.catalog-listing .container {
  max-width: 1000px;   /* подгони при необходимости */
  margin: 0 auto;
  padding: 0 20px;
}

/* Сетка карточек: 2 колонки на десктопе */
.catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 колонки */
  gap: 32px !important;
  align-items: stretch;
}

/* Планшет: одна колонка с нормальными отступами */
@media (max-width: 1024px) {
  .catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Карточка — растягивается на всю ячейку, не имеет фикс ширины */
.catalog-card {
  width: auto !important;
  min-width: 0 !important;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  overflow: hidden;
  display: block;
}

/* Картинка внутри карточки */
.catalog-card__img,
.catalog-card_img img,
.catalog-card__img img {
  display: block;
  width: 100%;
  height: 340px;              /* фиксированная высота */
  object-fit: cover;          /* обрезаем по контейнеру */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Картинка 
.catalog-card__img,
.catalog-card_img img,
.catalog-card__img img {
  display: block;
  width: 100%;
  height: auto;
}*/

/* Контент карточки */
.catalog-card__content {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Заголовок */
.catalog-card__title {
  margin: 0 0 6px;
  line-height: 1.25;
}
.catalog-card__title a {
  color: #111;
  text-decoration: none;
}

/* Рейтинг/иконки/локация */
.catalog-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.catalog-card__rating .star-icon {
  width: 18px; height: 18px; display: inline-block;
}
.catalog-card__location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* На всякий — убираем любые фиксированные размеры, которые могли прийти из старых стилей */
.catalog-card,
.catalog-card__content,
.catalog-card_img,
.catalog-card__img {
  box-sizing: border-box;
}


/* ===== [service_categories] — кнопки как в макете ===== */

/* Список */
.service-categories-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px 24px;
  list-style:none;
  padding:0;
  margin:24px 0;
  justify-content:center; /* центрируем блоки */
}

/* Элемент списка */
.service-category-item{
  flex:0 1 352px;          /* ширина из макета */
}

/* Ссылка-кнопка (контент блока) */
.service-category-item > a{
  display:flex;
  align-items:center;
  gap:32px;
  padding:30px 25px;        /* из макета */
  height:87px;
  background:rgba(255,255,255,0.05);
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Иконка слева */
.service-category-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  filter: grayscale(100%) opacity(.9); /* серые иконки */
}

/* Текст */
.service-category-name{
  color:#fff;
  font-size:24px;           /* подогнай при необходимости */
  line-height:1.2;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Ховер/фокус */
.service-category-item > a:hover,
.service-category-item > a:focus{
  background:rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}

/* Мобильная адаптация */
@media (max-width: 640px){
  .service-category-item{ flex:0 1 100%; }
  .service-category-item > a{
    gap:16px;
    padding:18px 16px;
    height:auto;
  }
  .service-category-name{ font-size:18px; }
  .service-category-icon{ width:24px; height:24px; }
}


.sc-area-center{
  display:flex;
  justify-content:center;
}
.sc-area-center .service-categories-list{
  justify-content:center;
}


/* ===== [selected_service] ===== */

/* Внешний контейнер блока (вертикальный отступ сверху) */
.selected-service-block{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:8px 0 0;
  width:350px;              /* как в фигме */
  max-width:100%;
  margin:0 auto;            /* центрируем */
}

/* Внутренняя строка (кнопка назад + «пилюля» с названием) */
.selected-service-block > *{
  /* чтобы элементы не расползались */
}

/* Кнопка «назад» (квадрат 56×59, скругление 16, полупрозрачный фон) */
.selected-service-back{
  display:flex;
  justify-content:center;
  align-items:center;
  width:56px;
  height:59px;
  padding:0;                /* по макету padding не нужен, центрируем по flex */
  background:rgba(255,255,255,0.05);
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  border-radius:16px;
  text-decoration:none;
  color:#fff;               /* на случай «←» символа */
  line-height:1;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
  margin-right:12px;        /* зазор до пилюли */
}

/* Если хочешь рисовать стрелку стилями, а не символом — закомментируй контент «←»
   в HTML и используй before: */
/*
.selected-service-back::before{
  content:'';
  display:block;
  width:16px; height:16px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
*/

.selected-service-back:hover{
  background:rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

/* «Пилюля» с названием услуги — 282×59, скругление 16, фон 5% белого */
.selected-service-name{
  display:flex;
  align-items:center;
  padding:16px 25px;
  gap:4px;
  min-width:0;
  width:282px;              /* как в макете */
  height:59px;
  background:rgba(255,255,255,0.05);
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  border-radius:16px;
  color:#fff;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:150%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Рядок «кнопка + пилюля» по центру */
.selected-service-block{
  /* у нас один ряд — делаем его flex-row через обёртку, если нужно */
}

/* Адаптив */
@media (max-width: 480px){
  .selected-service-block{ width:100%; }
  .selected-service-name{ width:calc(100% - 68px); } /* 56 + 12 отступ */
}