/* ============================================================
   Product page — harmonization of side-blocks
   Приводит блоки "Автор парфюма" (.val-parfumer) и таблицу
   торговых предложений (.catalog-table__wrapper.grid-list__item)
   к единой визуальной системе с .stats-container и
   .pyramyda-compose — белая карточка с hairline-рамкой и
   inset-тенью для плотности.
   ============================================================ */

.val-parfumer,
.catalog-table__wrapper.grid-list__item.grid-list-border-outer{
  background:#fff !important;
  border:1px solid #ece6ef !important;
  border-radius:18px !important;
  box-shadow:inset 0 0 0 1px rgb(223,223,241) !important;
}

/* Автор парфюма — узкий блок справа от характеристик */
.val-parfumer{
  padding:18px 22px 16px !important;
}
.val-parfumer > h3{
  margin:0 0 12px !important;
  color:#20151f;
}

/* Таблица торговых предложений — широкий блок */
.catalog-table__wrapper.grid-list__item.grid-list-border-outer{
  padding:18px 22px 16px !important;
  margin-bottom:0 !important;
}

/* Внутренний контейнер таблицы — убираем встроенные фон/рамку,
   которые приходят из Aspro, чтобы не двоились границы */
.catalog-table__wrapper.grid-list__item.grid-list-border-outer
  > .catalog-table,
.catalog-table__wrapper.grid-list__item.grid-list-border-outer
  > .basket_props_block{
  background:transparent !important;
}

/* ============================================================
   Блоки рекомендаций под карточкой парфюма:
   - "Аромат … похож на:"         (.detail-block.ordered-block.associated)
   - "Покупатели … рекомендуют:"  (.detail-block.ordered-block.expandables)
   Приводим к той же визуальной системе (белая карточка + hairline
   + inset-shadow). Карточки товаров внутри получают тень и hover.
   ============================================================ */
.detail-block.ordered-block.associated,
.detail-block.ordered-block.expandables{
  background:#fff !important;
  border:0 !important;
  border-top:1px solid #ece6ef !important;
  border-bottom:1px solid #ece6ef !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:24px 0 !important;
}
/* На mobile весь блок получает горизонтальные отступы 16px (заголовок и
   слайдер карточек не упираются в край экрана). На desktop — padding 0,
   линии border-top/bottom идут на всю ширину. */
@media (max-width: 767px) {
  .detail-block.ordered-block.associated,
  .detail-block.ordered-block.expandables {
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Swiper.slider-solution имеет overflow:hidden и высоту 1в1 равную высоте
     карточки — 1px рамка плитки обрезается сверху/снизу при промотке.
     Даём +2px вертикального padding'а (горизонтальный clipping сохраняется,
     соседи сбоку всё так же прячутся, потому что overflow остаётся hidden). */
  .detail-block.ordered-block.associated  .swiper.slider-solution,
  .detail-block.ordered-block.expandables .swiper.slider-solution{
    padding-top:2px !important;
    padding-bottom:2px !important;
  }
}

/* Карточки парфюма внутри этих блоков — только рамка + hover, без теней
   (тени обрезались overflow:hidden у слайдера, ломали layout аккордов).
   Hover НЕ двигает плитку (translateY обрезался верхней границей слайдера) —
   усиливаем рамку через цвет + внутренний box-shadow «двойная обводка». */
.detail-block.ordered-block.associated  .catalog-block__item,
.detail-block.ordered-block.expandables .catalog-block__item{
  background:#fff;
  border:1px solid #e0dfe8;
  border-radius:14px;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.detail-block.ordered-block.associated  .catalog-block__item:hover,
.detail-block.ordered-block.expandables .catalog-block__item:hover{
  border-color:#7c2a8f;
  box-shadow:inset 0 0 0 1px #7c2a8f;
}

/* В этих блоках кнопка «Купить» лишняя — это «похожие/рекомендации» */
.detail-block.ordered-block.associated  .catalog-block__item .btn-actions__inner,
.detail-block.ordered-block.expandables .catalog-block__item .btn-actions__inner{
  display:none !important;
}

/* == Авторы парфюма: фикс сжатия фото длинным статусом (2026-07-03) ==
   Проблема: .perfumer-person a{display:flex} сжимал .perfumer-photo при
   длинном .perfumer-status (аватар превращался в овал через img max-width:100%). */
.perfumer-person .perfumer-photo {
	flex-shrink: 0;          /* фото не сжимается длинным текстом */
}
.perfumer-person .perfumer-text {
	min-width: 0;            /* корректный line-clamp внутри flex */
}
.perfumer-status {
	display: -webkit-box;
	-webkit-line-clamp: 2;   /* статус обрезается на 2 строках */
	-webkit-box-orient: vertical;
	overflow: hidden;
}