/* ===== HP kategorie grid (6 dlaždic) ===== */

/* 3 sloupce desktop, 1 sloupec mobil */
.hp-cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding:20px 0;
}

@media (max-width:768px){
  .hp-cat-grid{ grid-template-columns:1fr; }
}

/* dlaždice */
.hp-cat-item{
  position:relative;
  overflow:hidden;
  border-radius:0; /* hranaté rohy */
  background:#111;
  transition:transform .48s ease, box-shadow .48s ease, filter .48s ease;
  will-change:transform;
}

/* klikací plocha */
.hp-cat-item a{
  display:block;
  position:relative;
  line-height:0;
}

/* poměr stran (aby to vypadalo jako na screenu) */
.hp-cat-media{
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
}

/* obrázek */
.hp-cat-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s ease, filter .48s ease;
  transform:scale(1);
}

/* label (bílý rámeček) */
.hp-cat-label{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.95);
  background:rgba(0,0,0,.25); /* jemný podklad, aby byl text čitelný */
  color:#fff;
  font-size:14px;
  letter-spacing:.2px;
  text-align:center;
  line-height:1;
  white-space:nowrap;
}

/* hover efekt – jemný zoom + decentní stín */
.hp-cat-item:hover,
.hp-cat-item:focus-within{
  transform:scale(1.01);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.hp-cat-item:hover .hp-cat-img,
.hp-cat-item:focus-within .hp-cat-img{
  transform:scale(1.03);
  filter:brightness(1.03) saturate(1.02);
}

/* přístupnost – viditelný focus */
.hp-cat-item a:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:2px;
}

/* omezení animací, pokud je uživatel nechce */
@media (prefers-reduced-motion:reduce){
  .hp-cat-item,
  .hp-cat-img{ transition:none; }
  .hp-cat-item:hover,
  .hp-cat-item:focus-within{ transform:none; }
}

/* ==============================
   BRAND SLIDER – Shoptet (v2)
   ============================== */

.brand-slider{
  position:relative;
  background:transparent;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
  padding:10px 0 0;
}

.brand-slider__head{
  margin:10px 0 14px;
  font-size:clamp(20px,3vw,28px);
  font-weight:700;
  text-align:center;
}

/* Dráha */
.brand-slider__track{
  display:flex;
  gap:16px;
  padding:16px 18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
  box-sizing:border-box;
  align-items:center;
}
.brand-slider__track::-webkit-scrollbar{ display:none; }

/* Dlaždice – větší a čtvercovější */
.brand-slider__tile{
  flex:0 0 auto;
  width:265px;          /* podle screenu ~265 */
  height:178px;         /* čtvercovější než předtím */
  border-radius:0;
  overflow:hidden;
  text-decoration:none;
position:relative;
  display:flex;
  align-items:center;   /* vycentrování loga */
  justify-content:center;

  transition:transform .60s ease, box-shadow .60s ease; /* pomalejší */
  will-change:transform;
}

/* PROHOZENO: 1. šedá, 2. černá */
.brand-slider__tile:nth-child(odd){ background:#F3F3F3; }
.brand-slider__tile:nth-child(even){ background:#1F1F1F; }

/* Logo – absolutně na střed */
.brand-slider__logo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  max-width:78%;
  max-height:62%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}

/* hover – jemné zvětšení + velmi jemný stín */
.brand-slider__tile:hover,
.brand-slider__tile:focus-within{
  transform:scale(1.02);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* Šipky */
.brand-slider__arrow{
  position:absolute;
  top:55%;
  transform:translateY(-50%);
  border:none;
  background:rgba(0,0,0,.28) !important;
  color:#e0e0e0 !important;
  width:44px;
  height:44px;
  cursor:pointer;
  z-index:5;
  padding:0;
  transition:background .25s ease, color .25s ease;
}
.brand-slider__arrow:hover{
  background:rgba(0,0,0,.50) !important;
  color:#fff !important;
}
.brand-slider__arrow svg{ width:100%; height:100%; display:block; }
.brand-slider__prev{ left:6px; }
.brand-slider__next{ right:6px; }

/* spodní link */
.brand-slider__all{
  display:block;
  text-align:center;
  margin:10px 0 0;
  color:#00896E !important;
  font-weight:600;
  text-decoration:none;
  font-size:13px;
}
.brand-slider__all:hover{ text-decoration:underline; }

/* Responsivita */
@media (max-width:1024px){
  .brand-slider__tile{ width:240px; height:165px; }
}
@media (max-width:768px){
  .brand-slider__track{ padding:12px 14px; gap:12px; }
  .brand-slider__tile{ width:78vw; max-width:300px; height:190px; }
  .brand-slider__arrow{ width:40px; height:40px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  .brand-slider__tile{ transition:none; }
  .brand-slider__tile:hover,
  .brand-slider__tile:focus-within{ transform:none; }
}

/* Odstínění defaultních boxů Shoptetu jen pro tuto sekci */
.banners-content.body-banners .brand-slider,
.banners-content.body-banners .brand-slider__track,
.banners-content.body-banners .banner-wrapper{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}