/* =========================================================
   PLIS ME — страница каталога
   Размеры сняты с макета 1920 px (Catalog default / Active filters / Gift popup).
   Цвета — только токены tokens.css. Общие компоненты — site.css.
   ========================================================= */

.catalog { padding: 40px var(--gutter) 0; max-width: var(--container-max); margin: 0 auto; }
.catalog__head { display: flex; flex-direction: column; gap: 32px; }
.catalog__title { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-medium); text-align: center; }
.catalog__title:focus { outline: none; }   /* программная точка возврата фокуса, не интерактивный элемент */

/* ---------- Ряд управления: фильтры · вкладки · сортировка ---------- */
.catalog-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 40px; position: relative; z-index: 3;
}
.catalog-filters { display: flex; align-items: center; gap: 19px; min-width: 0; }
.catalog-filters__label, .filter-dd__trigger, .catalog-tabs__tab { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.catalog-filters__label { flex: none; }
.catalog-filters__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 19px; }

.filter-dd { position: relative; }
.filter-dd__trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; margin-inline: -8px;
  border-radius: var(--radius-btn); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur-fast), color var(--dur-fast);
}
.filter-dd__trigger:hover { color: var(--text-secondary); }
.filter-dd.is-open .filter-dd__trigger { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-primary); }
.filter-dd__chev { width: 14px; height: 14px; stroke-width: 1.7; transition: transform var(--dur-fast) var(--ease); }
.filter-dd.is-open .filter-dd__chev { transform: rotate(180deg); }
.filter-dd__count { color: var(--text-secondary); font-weight: var(--fw-regular); }
.filter-dd__count:empty { display: none; }
.filter-dd__menu { left: -8px; top: calc(100% + 4px); min-width: 240px; max-height: min(360px, 60vh); overflow-y: auto; }
.filter-dd__menu .scent__dot { width: 8px; height: 8px; margin-right: -2px; }
.filter-dd__menu .scent__dot[data-scent="clean-h2o"] { box-shadow: inset 0 0 0 .5px var(--border-strong); }
.filter-dd__menu .scent__dot[data-scent="wood-sea"], .filter-dd__menu .scent__dot[data-scent="revelation"] { box-shadow: inset 0 0 0 .5px var(--border-default); }

.catalog-tabs__list { display: flex; gap: 40px; }
.catalog-tabs__tab {
  display: block; padding: 0 0 8px; color: var(--text-secondary); white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.catalog-tabs__tab:hover { color: var(--text-primary); }
.catalog-tabs__tab[aria-pressed="true"] { color: var(--text-primary); border-bottom-color: var(--color-pink); }

.catalog-sort { justify-self: end; width: 178px; }
.catalog-sort .filter-dd__trigger { justify-content: space-between; width: calc(100% + 16px); }
.catalog-sort .filter-dd__menu { left: auto; right: -8px; min-width: 220px; }

/* ---------- Активные фильтры ---------- */
.catalog-active {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-top: -8px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default);
}
.catalog-active[hidden] { display: none; }
.catalog-active__groups { display: flex; flex-wrap: wrap; gap: 8px 19px; min-width: 0; }
.catalog-active__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.catalog-active__label { font-weight: var(--fw-medium); }
.catalog-active__values { display: contents; }
.catalog-active__value { display: inline-flex; align-items: center; gap: 4px; }
.catalog-active__value .scent__dot { width: 8px; height: 8px; margin-right: 1px; }
.catalog-active__value .scent__dot[data-scent="clean-h2o"] { box-shadow: inset 0 0 0 .5px var(--border-strong); }
.catalog-active__remove { position: relative; display: grid; place-items: center; width: 14px; height: 14px; color: var(--text-primary); transition: color var(--dur-fast); }
.catalog-active__remove::after { content: ""; position: absolute; inset: -8px; }
.catalog-active__remove:hover { color: var(--text-secondary); }
.catalog-active__clear { flex: none; font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast); }
.catalog-active__clear:hover { color: var(--text-secondary); }

/* ---------- Секции и сетка ---------- */
.catalog__sections { display: flex; flex-direction: column; gap: 50px; margin-top: 50px; }
.catalog-section[hidden] { display: none; }
.catalog-section__title { margin-bottom: 32px; font-size: var(--fs-20); line-height: 24px; font-weight: var(--fw-medium); }
.catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.catalog-grid__item { display: flex; min-width: 0; }
.catalog-promo { display: flex; align-items: center; min-width: 0; }
.catalog-promo__media { width: 100%; aspect-ratio: 358 / 553; object-fit: cover; border-radius: 2px; background: var(--bg-placeholder); }
.catalog-promo--video .catalog-promo__media { border-radius: var(--radius-s); }
.catalog-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 0; text-align: center; }
.catalog-empty[hidden] { display: none; }
.catalog-empty .empty-state__text { max-width: 320px; }

/* ---------- Рассылка: видео вместо фото ---------- */
.catalog__newsletter { margin-top: 160px; }
.catalog .newsletter .container { padding-inline: 0; }
.catalog__newsletter video.newsletter__img { display: block; }

/* =========================================================
   Welcome gift popup
   ========================================================= */
.gift-modal { width: min(846px, calc(100vw - 32px)); }
.gift-modal .gift-modal__panel { display: grid; grid-template-columns: 387px minmax(0, 1fr); gap: 24px; padding: 24px; }
.gift-modal__img { width: 100%; height: 444px; object-fit: cover; border-radius: var(--radius-panel); background: var(--bg-placeholder); }
.gift-modal__side { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gift-modal__close { position: absolute; top: 0; right: 0; }
.gift-modal__content { padding-top: 40px; text-align: center; }
.gift-modal__title { font-size: var(--fs-20); line-height: 24px; font-weight: var(--fw-regular); }
.gift-modal__copy { display: grid; gap: 2px; margin-top: 12px; }
.gift-modal__form { display: grid; gap: 16px; margin-top: 32px; text-align: left; }
.gift-modal__form .field-line { gap: 0; }
.gift-modal__form .field-line__error { margin-top: 6px; }
.gift-modal__submit { gap: 8px; }
.gift-modal__consent { color: var(--text-secondary); font-weight: var(--fw-light); text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1439px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .catalog-controls { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs tabs" "filters sort"; row-gap: 20px; }
  .catalog-tabs { grid-area: tabs; justify-self: center; }
  .catalog-filters { grid-area: filters; }
  .catalog-sort { grid-area: sort; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .gift-modal .gift-modal__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gift-modal__img { height: 100%; min-height: 360px; }
}
@media (max-width: 767px) {
  .catalog { padding-top: 24px; }
  .catalog__head { gap: 20px; }
  .catalog-controls { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "filters" "sort"; row-gap: 12px; }
  .catalog-tabs { justify-self: stretch; margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; scrollbar-width: none; }
  .catalog-tabs::-webkit-scrollbar { display: none; }
  .catalog-tabs__list { gap: 24px; width: max-content; padding-inline: var(--gutter); }
  /* на мобильном меню фильтров — во всю ширину под рядом */
  .catalog-filters { position: relative; flex-wrap: wrap; gap: 0 16px; }
  .catalog-filters__label { flex-basis: 100%; color: var(--text-secondary); }
  .catalog-filters__list { gap: 0 16px; }
  .catalog-filters .filter-dd { position: static; }
  .catalog-filters .filter-dd__menu { left: 0; right: 0; min-width: 0; }
  .catalog-sort { justify-self: start; width: auto; }
  .catalog-sort .filter-dd__trigger { width: auto; }
  .catalog-sort .filter-dd__menu { left: -8px; right: auto; }
  .catalog-active { flex-direction: column; gap: 12px; margin-top: 0; }
  .catalog__sections { gap: 40px; margin-top: 32px; }
  .catalog-section__title { margin-bottom: 20px; font-size: var(--fs-16); line-height: 22px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .catalog__newsletter { margin-top: 88px; }
  .gift-modal .gift-modal__panel { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px; }
  .gift-modal__img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .gift-modal__close { top: -8px; right: -8px; }
  .gift-modal__content { padding-top: 24px; }
  .gift-modal__form { margin-top: 24px; }
}

/* ---------- OpenCart: описание категории, ссылки-вкладки ---------- */
a.catalog-tabs__tab { text-decoration: none; }
.catalog__seo { max-width: 880px; margin: 0 auto; padding: 0 32px 64px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.catalog-filters[hidden] { display: none; }