/* Shared catalog headings and service-category tiles. */
body:has(main .service-grid) .hero.hero-inner h1,
body:has(main .cat-grid) .hero.hero-inner h1,
body:has(main #mse2_mfilter) .hero.hero-inner h1 {
  max-width: 1050px;
  font-family: Inter, sans-serif;
  font-size: clamp(34px, 3.35vw, 45px) !important;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* Preserve the product tiles; give white labels a quiet, legible backdrop. */
.cat-grid .cat-item::after {
  background: linear-gradient(to top, rgba(28, 42, 51, .80) 0%, rgba(28, 42, 51, .62) 38%, rgba(28, 42, 51, .20) 78%, transparent 100%);
  height: 43%;
}
.cat-grid .cat-item:hover::after { height: 46%; }
.cat-grid .cat-item > span { text-shadow: 0 1px 3px rgba(12, 22, 28, .55); }

/* The overview page has its own feature-card rules. */
body:not(:has(.services-overview)) .service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 26px;
  margin-bottom: 44px;
}
body:not(:has(.services-overview)) .service-grid .service-unit.img-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: #263846;
  background: #fff;
  border: 1px solid #d9dee1;
  box-shadow: none;
}
body:not(:has(.services-overview)) .service-grid .service-unit::before,
body:not(:has(.services-overview)) .service-grid .service-unit::after,
body:not(:has(.services-overview)) .service-grid .service-unit > a::before,
body:not(:has(.services-overview)) .service-grid .service-unit > a::after { display: none; }
body:not(:has(.services-overview)) .service-grid .service-unit > a {
  display: block;
  min-width: 0;
  color: #263846;
  text-decoration: none;
}
body:not(:has(.services-overview)) .service-grid .service-unit > a > picture { display: block; }
body:not(:has(.services-overview)) .service-grid .service-unit > a > picture > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f3f4f4;
  filter: none;
}
body:not(:has(.services-overview)) .service-grid .service-unit > a > h4 {
  position: static;
  display: block;
  min-height: 78px;
  margin: 0;
  padding: 17px 20px;
  color: #263846;
  font-family: Oswald, sans-serif;
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
body:not(:has(.services-overview)) .service-grid .service-unit > a > h4::after { display: none; }
body:not(:has(.services-overview)) .service-grid .service-unit > a:hover h4 { color: #b85c08; }
body:not(:has(.services-overview)) .service-grid .service-unit > a:focus-visible,
body:not(:has(.services-overview)) .service-grid .service-unit li a:focus-visible {
  outline: 2px solid #e67817;
  outline-offset: 3px;
}

/* On the home page, retain the fence links inside a purposeful feature tile. */
body:not(:has(.services-overview)) .service-grid .service-unit.img-box:has(> ul) {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > a { display: contents; }
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > a > h4 {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  border-bottom: 1px solid #d9dee1;
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > a > picture {
  grid-column: 1;
  grid-row: 2;
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > ul {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-content: center;
  gap: 4px;
  margin: 0;
  padding: 18px 24px;
  list-style: none;
  background: #f3f4f4;
  border-left: 1px solid #d9dee1;
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > ul::before {
  content: 'Виды заборов';
  font: 700 15px/1.3 Inter, sans-serif;
  color: #263846;
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) li {
  display: block;
  margin: 0;
}
body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) li a {
  display: block;
  padding: 5px 0;
  color: #a65005;
  font: 400 14px/1.35 Inter, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  body:not(:has(.services-overview)) .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 620px) {
  body:not(:has(.services-overview)) .service-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body:not(:has(.services-overview)) .service-grid .service-unit.img-box:has(> ul) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > a { display: block; }
  body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > a > h4 { border-bottom: 0; }
  body:not(:has(.services-overview)) .service-grid .service-unit:has(> ul) > ul { border-left: 0; border-top: 1px solid #d9dee1; }
}