/* =============================================================================
   Abordazh — home category grid (8 tiles)
   ========================================================================== */
/* Width + column layout come from the theme-core Bootstrap (.container / .row /
   .col-* / .ratio) so the grid is correctly sized on first paint — no FOUC jump.
   This file only carries the cosmetic skin. */
.abz-cats {
  padding-block: clamp(32px, 5vw, 64px);
}
.abz-cats__title {
  margin: 0 0 clamp(16px, 3vw, 28px);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  color: #051e05;
  text-wrap: balance;
}

.abz-cat {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: #0e1a12;
}
.abz-cat__media { display: block; border-radius: inherit; }
.abz-cat__img {
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.abz-cat__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(3, 14, 3, .80) 0%,
    rgba(3, 14, 3, .34) 30%,
    rgba(3, 14, 3, 0) 58%);
}
.abz-cat__name {
  position: absolute;
  left: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  bottom: clamp(10px, 1.2vw, 16px);
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.abz-cat:hover .abz-cat__img,
.abz-cat:focus-visible .abz-cat__img { transform: scale(1.05); }
.abz-cat:focus-visible { outline: 2px solid #051e05; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .abz-cat__img { transition: none; }
}

/* =============================================================================
   Home "Рекомендовані товари" (ps_featuredproducts) — 6 per row
   Scoped to the featured block so category/listing grids are untouched.
   ========================================================================== */
@media (min-width: 1100px) {
  .ps-featuredproducts .products { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .ps-featuredproducts .products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767.98px) {
  .ps-featuredproducts .products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* product card titles: balanced wrapping */
.product-miniature__title { text-wrap: balance; text-wrap-style: balance; }