/* ==========================================================
   ŽIJ PADEL! – KATEGORIE (dlaždice na homepage)
   Mřížka napojena na jednotný gutter systém ze zp-base.css.
   ========================================================== */
.featured-categories{
  width:100%;
  background-color:#fff;
  padding-top:2rem;
  padding-bottom:2rem;
}
.featured-categories #header{ font-family:var(--font-sans) !important; }

.welcome-wrapper{ margin:0 !important; }

/* Grid rozložení dlaždic */
.categories-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
 
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:991px){
  .categories-grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
}

/* Karta */
.category-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.category-card:hover{ transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,.12); }
.category-card a{ display:block; width:100%; height:100%; position:relative; text-decoration:none; }

/* Obrázek */
.category-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.category-card:hover img{ transform:scale(1.05); }

/* Overlay s názvem kategorie */
.category-overlay{
  position:absolute;
  inset:0;
  background-color:rgba(0,61,121,.7);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:600;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .35s ease;
  letter-spacing:.5px;
  pointer-events:none;
}
.category-card:hover .category-overlay{ opacity:1; }

/* Sekce pod sebou */
.homepage-texts-wrapper,
.welcome-wrapper,
.welcome{
  display:block !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
}
.featured-categories,
.top-products-wrapper{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  margin:0 auto;
  clear:both !important;
}
.welcome > div{ display:block !important; width:100% !important; }