/* ==========================================================================
   Pages: каталог, карточка товара, главная, страницы.
   Mobile First. Классы БЭМ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Хлебные крошки на страницах
   -------------------------------------------------------------------------- */
.section-page > .container > .breadcrumbs,
main > .container > .breadcrumbs { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Главная: hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

.hero__wrapper { position: relative; }

.hero__label {
  display: inline-block;
  padding: 0.3em 0.9em;
  margin-bottom: 1em;
  border: 1px solid oklch(0.8 0.05 150 / 0.4);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-accent);
}

.hero__title { max-width: 22ch; margin-bottom: 0.5em; }

.hero__subtitle { max-width: 58ch; color: oklch(0.87 0.01 150); font-size: 1.02rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1.5em; }

.hero__callback { border-color: oklch(0.8 0.05 150 / 0.5); color: var(--white); }
.hero__callback:hover { background: var(--white); color: var(--green-ink); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--px70);
  padding-top: var(--px35);
  border-top: 1px solid oklch(0.32 0.03 155);
}

.hero__stat { display: flex; flex-direction: column; gap: 0.15em; }

.hero__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  font-weight: 700;
  color: var(--green-accent);
}

.hero__stat-label { font-size: 0.82rem; color: oklch(0.8 0.01 150); }

/* --------------------------------------------------------------------------
   Главная: разделы каталога (плитки)
   -------------------------------------------------------------------------- */
.sections__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.section-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  height: 100%;
  padding: var(--px35);
  padding-right: calc(var(--px35) + 2em);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--green-ink);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.section-tile:hover {
  border-color: var(--green-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  color: var(--green-ink);
}

.section-tile__name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }

.section-tile__count { font-size: 0.85rem; color: var(--text-muted); }

.section-tile__arrow {
  position: absolute;
  top: 50%;
  right: calc(var(--px35));
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--green-accent-dark);
  transition: transform var(--transition);
}

.section-tile:hover .section-tile__arrow { transform: translate(4px, -50%); }

@media (min-width: 560px) { .sections__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sections__list { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Главная: о заводе
   -------------------------------------------------------------------------- */
.about__wrapper { display: grid; gap: var(--px70); }

.about__text { max-width: 62ch; }

.about__link { margin-top: 0.5em; }

.about__features { display: grid; grid-template-columns: 1fr; gap: var(--gap); }

.about__feature {
  padding: var(--px35);
  background: var(--surface);
  border-radius: var(--radius);
}

.about__feature-title { font-size: 1.05rem; margin-bottom: 0.35em; }

.about__feature-text { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

@media (min-width: 768px) { .about__features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .about__wrapper { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* --------------------------------------------------------------------------
   Главная: CTA
   -------------------------------------------------------------------------- */
.cta__wrapper { display: flex; flex-direction: column; gap: var(--px35); }

.cta__text { max-width: 52ch; color: oklch(0.85 0.01 150); margin-bottom: 0; }

.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; }

.cta__phone {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-accent);
}

.cta__phone:hover { color: var(--white); }

@media (min-width: 768px) {
  .cta__wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   Каталог
   -------------------------------------------------------------------------- */
.catalog__layout { display: grid; gap: var(--px70); }

.catalog__sidebar { min-width: 0; }

/* Дерево каталога */
.sidebar-nav__title {
  margin-bottom: 0.7em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--green-ink);
}

.sidebar-nav__list { display: flex; flex-direction: column; }

.sidebar-nav__item { border-bottom: 1px solid var(--surface-deep); }

.sidebar-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.sidebar-nav__link {
  display: block;
  flex: 1 1 auto;
  padding: 0.55em 0;
  font-size: 0.92rem;
  color: var(--text);
}

.sidebar-nav__link:hover { color: var(--green-accent-dark); }

.sidebar-nav__item.is-active > .sidebar-nav__row > .sidebar-nav__link {
  font-weight: 700;
  color: var(--green-dark);
}

.sidebar-nav__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sidebar-nav__toggle:hover { background: var(--surface); }

.sidebar-nav__toggle-icon {
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.sidebar-nav__item.is-open > .sidebar-nav__row > .sidebar-nav__toggle > .sidebar-nav__toggle-icon {
  transform: rotate(225deg);
}

.sidebar-nav__sub { display: none; padding-left: 0.8em; border-left: 1px solid var(--surface-deep); }
.sidebar-nav__item.is-open > .sidebar-nav__sub { display: block; }

.sidebar-nav__sub .sidebar-nav__link { font-size: 0.88rem; }

/* Сетка товаров */
.catalog__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.catalog__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--px70);
}

.catalog__progress { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.catalog__desc {
  margin-top: var(--px100);
  padding-top: var(--px70);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.catalog__empty { margin-top: var(--px35); }

.facets { display: none; }

@media (min-width: 480px) { .catalog__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .catalog__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .catalog__layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--px70); }
  .catalog__sidebar { position: sticky; top: 120px; align-self: start; max-height: calc(100vh - 140px); overflow-y: auto; }
}

/* --------------------------------------------------------------------------
   Карточка товара в сетке
   -------------------------------------------------------------------------- */
.product-card { display: flex; }

.product-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.product-card__inner:hover {
  border-color: var(--green-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-card__img--empty {
  display: block;
  background:
    linear-gradient(135deg, transparent 46%, var(--surface-deep) 46%, var(--surface-deep) 54%, transparent 54%);
}

.product-card__badge { position: absolute; top: 0.65em; left: 0.65em; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1 1 auto;
  padding: var(--px35);
}

.product-card__title { margin: 0; font-size: 1rem; line-height: 1.35; }

.product-card__title-link { color: var(--green-ink); }
.product-card__title-link:hover { color: var(--green-accent-dark); }

.product-card__subtitle { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.product-card__attrs { display: flex; flex-direction: column; gap: 0.25em; }

.product-card__attr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  font-size: 0.82rem;
}

.product-card__attr-name { color: var(--text-muted); }

.product-card__attr-value { font-weight: 600; color: var(--text); text-align: right; }

.product-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.65em; }

.product-card__price { font-size: 1.05rem; font-weight: 700; color: var(--green-ink); }

.product-card__price-request { font-size: 0.85rem; font-weight: 600; color: var(--green-accent-dark); }

.product-card__actions { display: flex; flex-wrap: wrap; gap: 0.5em; }

.product-card__buy { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Карточка товара (страница)
   -------------------------------------------------------------------------- */
.product__layout { display: grid; gap: var(--px70); }

.product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.product__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.product__img-placeholder {
  display: block;
  width: 60%;
  height: 60%;
  background:
    linear-gradient(135deg, transparent 46%, var(--surface-deep) 46%, var(--surface-deep) 54%, transparent 54%);
}

.product__thumbs { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.8em; }

.product__thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
}

.product__thumb img { width: 100%; height: 100%; object-fit: contain; }

.product__thumb:hover, .product__thumb.is-active { border-color: var(--green-accent); }

.product__summary { display: flex; flex-direction: column; gap: 1em; }

.product__title { margin: 0; }

.product__subtitle { margin: 0; color: var(--text-muted); }

.product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em; }

.product__sku { font-size: 0.85rem; color: var(--text-muted); }

.product__price { font-size: 1.6rem; font-weight: 700; color: var(--green-ink); }

.product__price .product-card__price-request { font-size: 1.05rem; }

.product__cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8em;
  padding: var(--px35);
  background: var(--surface);
  border-radius: var(--radius);
}

.product__qty { display: flex; flex-direction: column; }

.product__qty-label { margin-bottom: 0.3em; }

.product__qty-input { max-width: 110px; }

.product__buy { flex: 1 1 160px; padding-block: 0.85em; }

.product__attrs { display: flex; flex-direction: column; gap: 0; }

.product__attr {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.55em 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.92rem;
}

.product__attr-name { color: var(--text-muted); }

.product__attr-value { font-weight: 600; text-align: right; }

.product__note { font-size: 0.88rem; color: var(--text-muted); }

.product__note a { color: var(--green-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

.product__inform {
  padding: 0.9em 1.2em;
  background: var(--surface);
  border-left: 3px solid var(--green-accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text);
}

/* Вкладки */
.product__tabs { margin-top: var(--px100); }

.product__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  border-bottom: 1px solid var(--border);
}

.product__tab {
  padding: 0.8em 1.2em;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.product__tab:hover { color: var(--green-ink); }

.product__tab.is-active { color: var(--green-ink); border-bottom-color: var(--green-accent); }

.product__panel { padding-top: var(--px35); }

.has-js .product__panel { display: none; }
.has-js .product__panel.is-active { display: block; }

.product__table-scroll { overflow-x: auto; }

.dim-table__cell--sub {
  font-weight: 700;
  color: var(--green-ink);
  background: var(--surface-deep);
}

.product__docs { display: flex; flex-direction: column; gap: 0.6em; }

.product__docs-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.9em 1.2em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--green-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.product__docs-link:hover { border-color: var(--green-accent); box-shadow: var(--shadow-soft); color: var(--green-ink); }

.product__docs-name { font-weight: 600; }

.product__docs-note { font-size: 0.82rem; color: var(--text-muted); }

@media (min-width: 768px) {
  .product__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 992px) {
  .product__layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Страницы, архив, 404, поиск
   -------------------------------------------------------------------------- */
.page__content, .archive__list, .search-results__list { max-width: 860px; }

.archive__list, .search-results__list { display: flex; flex-direction: column; gap: var(--gap); }

.archive__card, .search-results__item {
  padding: var(--px35);
  background: var(--surface);
  border-radius: var(--radius);
}

.archive__card-title { margin-bottom: 0.4em; font-size: 1.15rem; }

.archive__card-text, .search-results__text { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.search-results__link { font-weight: 700; font-size: 1.05rem; }

.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 1;
  color: var(--surface-deep);
  margin-bottom: 0.1em;
}

.container--narrow { max-width: 640px; }

.error-404__actions { display: flex; flex-wrap: wrap; gap: 0.75em; }

.error-404__search { margin-top: var(--px35); }

/* --------------------------------------------------------------------------
   Пагинация: разделитель
   -------------------------------------------------------------------------- */
.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--text-muted);
}

.pagination__item { display: inline-flex; }