/* ==========================================================================
   Точечные правила рыжего раздела «Изделия».
   Сами переменные палитры живут в dir.css (:root[data-dir="tech"]),
   здесь только места, где цвет был зашит в правило напрямую.
   ========================================================================== */


:root[data-dir="tech"] {
  --orange:      #e27839;
  --orange-deep: #a8501f;
}

/* ---------------------------------------------- обложка и типографика */
:root[data-dir="tech"] .wordmark span { color: var(--orange); }
:root[data-dir="tech"] .claims li::before { color: var(--orange); }

/* --- сетка на обложке рыжая, а не серо-белая ---
   pattern-tile.png сам по себе почти белый (#e4e9ed), поэтому берём его
   маской, а цвет заливаем акцентом направления. */
:root[data-dir="tech"] .dir-hero[data-grid]::after {
  background-image: none;
  background-color: var(--grid-accent, var(--orange));
  -webkit-mask-image: url('../img/pattern-tile.png');
          mask-image: url('../img/pattern-tile.png');
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  opacity: 0.5;
}

:root[data-dir="tech"] .plates-hero::before {
  background-image:
    linear-gradient(rgba(168,72,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,72,10,0.05) 1px, transparent 1px);
}

/* ---------------------------------------------- серии и таблицы */
:root[data-dir="tech"] .mark i.sb { background: #b08968; }
:root[data-dir="tech"] .mark i.mb { background: var(--orange); }
:root[data-dir="tech"] .mark i.wb { background: var(--orange-deep); }

:root[data-dir="tech"] table.spec tbody tr:hover td { background: #fdf1ea; }

:root[data-dir="tech"] .formula {
  border-left-color: var(--orange);
  background: #fdf1ea;
}

/* ---------------------------------------------- поля ввода */
:root[data-dir="tech"] .head-search input:focus,
:root[data-dir="tech"] .order-form input:focus,
:root[data-dir="tech"] .order-form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(226,120,57,0.12);
}

/* ---------------------------------------------- блок заявки */
:root[data-dir="tech"] .cta {
  background: linear-gradient(140deg, #5a2a05, var(--orange-deep) 50%, var(--orange));
}

/* ---------------------------------------------- прочее */
:root[data-dir="tech"] ::selection { background: var(--orange); color: #fff; }
:root[data-dir="tech"] .card-tag { background: rgba(60,32,8,0.82); }
:root[data-dir="tech"] .pack:hover { border-color: var(--orange); }

/* ==========================================================================
   Тонировка фотографий: холодная в синей палитре, тёплая в рыжей
   ========================================================================== */
.plates-mosaic figure { position: relative; }

.plates-mosaic figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(10,95,240,0.30), rgba(10,63,168,0.16) 60%, transparent);
  mix-blend-mode: soft-light;
  transition: background 0.6s ease;
}

.plates-mosaic figure {
  box-shadow: 0 16px 36px rgba(10,63,168,0.16);
  transition: box-shadow 0.6s ease;
}

.plates-mosaic img {
  filter: contrast(1.04) saturate(0.9) hue-rotate(-6deg);
  transition: transform 0.8s var(--ease-out), filter 0.6s ease;
}

:root[data-dir="tech"] .plates-mosaic figure::after {
  background: linear-gradient(150deg, rgba(226,118,11,0.34), rgba(168,72,10,0.18) 60%, transparent);
}

:root[data-dir="tech"] .plates-mosaic figure {
  box-shadow: 0 16px 36px rgba(168,72,10,0.20);
}

:root[data-dir="tech"] .plates-mosaic img {
  filter: contrast(1.05) saturate(1.05) sepia(0.12) hue-rotate(-8deg);
}

/* ==========================================================================
   Логотипы страницы: рыжий в шапке, белый без подложки в подвале
   ========================================================================== */
.footer .logo-mark { filter: none; }