.blok_produkt .podblocky_produkt{
  display:flex;
  gap:calc(30px * var(--scale));
}

.blok_produkt .podblok_produkt {
  display:flex;
  gap:calc(25px * var(--scale));
  flex-direction: column;
}

.blok_produkt .podblok_produkt .nadpisycont {
  display:flex;
  gap:calc(21px * var(--scale));
  flex-direction: column-reverse;
}

.blok_produkt .podblocky_produkt:empty {
  display:none;
}
.blok_produkt .podblok_produkt:empty {
  display:none;
}
.blok_produkt .textpodblok:empty {
  display:none;
}



/*************************************
clanek
*************************************/

.blok_produkt .podblocky_produkt{
  gap:calc(50px * var(--scale));
  align-items: start;
  justify-content: center;
}

.blok_produkt.leva .podblocky_produkt {
  flex-direction: row-reverse;
}

.blok_produkt .podblok_produkt {
  /* min-width: calc(50% - 50px); */
  width:100%;
}

.blok_produkt.prava .podblok_produkt  {
  text-align: right;
}

.bloky .blok_produkt.leva .nadpis,
.bloky .blok_produkt.leva .podnadpis,
.bloky .blok_produkt.leva .text,
.blok_produkt.leva .podblok_produkt {
  text-align: left;
}

.bloky .blok_produkt.prava .nadpis,
.bloky .blok_produkt.prava .podnadpis,
.bloky .blok_produkt.prava .text,
.blok_produkt.prava .podblok_produkt {
  text-align: right;
}

.blok_produkt .podblok_produkt .text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blok_produkt .podblok_produkt .text ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: 15px;
  line-height: 20px;
}

.blok_produkt .podblok_produkt .text ul li::before  {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url('/zdroje/trojuh_univerzal_ostry3.svg') no-repeat center center;
  background-size: contain;
  margin-right: 7px;
  margin-top: -2px;
  vertical-align: middle;
}

/*************************************
fotky u článku a přepínacích článků
*************************************/
.blok_produkt .files_cont  {
  /* --blok_files_w: 634px; */
  position: relative;
  width: var(--blok_files_w);
  height: var(--blok_files_h);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.blok_produkt .files_cont > svg { /*podkladové svg*/
  position: absolute;
  inset: 0;
  top:11px;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: none;
  stroke: #454545;
  stroke-width: 2.2;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
}


.blok_produkt .files_cont .lister {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 1;
  width:100%;
}

.blok_produkt .files_cont .lister .list {
  position: relative;
  width: 20px;
  height: 22px;
  display: flex;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  cursor:pointer;
  margin-top:43px;
}

.blok_produkt .files_cont .lister .list.left {
  margin-right:18px;
  margin-left:18px;
}

.blok_produkt .files_cont .lister .list.right {
  margin-right:18px;
  margin-left:18px;
}

.blok_produkt .files_cont .lister .file {
  z-index: 1;
  border-radius: var(--border_radius);
}

.blok_produkt .files_cont .lister .file img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  border-radius: var(--border_radius);
  display:inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blok_produkt .files_cont .number {
  display:flex;
  gap:3px;
  margin-top:10px
}

.blok_produkt .files_cont .number span {
  text-align: center;
}


.blok_produkt .files_cont .number span:first-of-type {
  font-weight:300;
  font-size:24px;
}

.blok_produkt .files_cont .number span:last-of-type {
  font-size:13px;
  color: var(seda_str_sv);
}


.blok_produkt .files_cont .files {
  position: relative;       /* aby šlo .file absolutně vystředit */
  width: 500px;
  height: 500px;
  overflow: hidden;         /* schovat zbytek obrázků */
}

.blok_produkt .files_cont .file {
  position:absolute;
  inset:0;
  /* výchozí stav – neviditelný a nekliknutelný */
  opacity:0;
  pointer-events:none;
  transform:scale(.94);
  transition:opacity .45s ease, transform .45s ease;
  /* aby aktivní snímek ležel navrchu při překryvu */
  z-index:0;
}

/* (2) – právě zobrazený obrázek */
.blok_produkt .files_cont .file.active {
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
  z-index:1;
}


/*************************************
společné
*************************************/
.blok_produkt .files_cont .lister .file img {
  border-radius:0px 224px 0px 202px;
}

.blok_produkt.leva .files_cont .lister .file img {
  border-radius:224px 0px 202px 0px;
}

.blok_produkt.prava .files_cont .lister .file img {
  border-radius:0px 224px 0px 202px;
}

/*************************************
responzivita
*************************************/

@media screen and (max-width: 1460px) {

    .blok_produkt .files_cont .files{
      width: 450px;
      height: 450px;
    }

    .blok_produkt .files_cont .lister .file img {
      width: 450px;
      height: 450px;
    }

}


@media screen and (max-width: 1250px) {

  .blok_produkt .files_cont .files,
  .blok_produkt .files_cont .lister .file img  {
    width: 425px;
    height: 425px;
  }




}


@media screen and (max-width: 1050px) {

  .blok_produkt .files_cont .files,
  .blok_produkt .files_cont .lister .file img  {
    width: 400px;
    height: 400px;
  }


  .blok_produkt .files_cont .lister .list.left {
    margin-left:0px;
  }

  .blok_produkt .files_cont .lister .list.right {
    margin-right:0px;
  }

}


@media screen and (max-width: 940px) {

  .blok_produkt .podblocky_produkt,
  .blok_produkt.leva,
  .blok_produkt.prava {
    flex-direction: column;
  }

  .blok_produkt.leva .podblocky_produkt {
    flex-direction: column;
  }


  .bloky .blok_produkt.leva .nadpis,
  .bloky .blok_produkt.leva .podnadpis,
  .bloky .blok_produkt.leva .text,
  .blok_produkt.leva .podblok {
    text-align: center;
  }

  .bloky .blok_produkt.prava .nadpis,
  .bloky .blok_produkt.prava .podnadpis,
  .bloky .blok_produkt.prava .text,
  .blok_produkt.prava .podblok{
    text-align: center;
  }

  .blok_produktpozadi .podblok.ul, .blok_produktpozadi .podblok.l, .blok_produktpozadi .podblok.dl,
  .blok_produktpozadi .podblok.ur, .blok_produktpozadi .podblok.r, .blok_produktpozadi .podblok.dr,
  .blok_produktpozadi .podblok.u, .blok_produktpozadi .podblok.c, .blok_produktpozadi .podblok.d {
    width:100%;
  }

  .blok_produktpozadi .podblok.ul, .blok_produktpozadi .podblok.l, .blok_produktpozadi .podblok.dl,
  .blok_produktpozadi .podblok.ur, .blok_produktpozadi .podblok.r, .blok_produktpozadi .podblok.dr,
  .blok_produktpozadi .podblok.u,
  .blok_produktpozadi .podblok.d {
    padding: 50px var(--main1pad);
    background:
      /* horizontální přechod */
      linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 50%,
        transparent 100%),
      /* vertikální přechod */
      linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%);
    background-blend-mode: multiply; /* průnik obou gradientů */
  }

  .blok_produktpozadi:has(.podblok.ul),
  .blok_produktpozadi:has(.podblok.l),
  .blok_produktpozadi:has(.podblok.dl),
  .blok_produktpozadi:has(.podblok.ur),
  .blok_produktpozadi:has(.podblok.r),
  .blok_produktpozadi:has(.podblok.dr) {
    justify-content: center;
  }

  .blok_produktpozadi .podblok.ul, .blok_produktpozadi .podblok.ur, .blok_produktpozadi .podblok.ur,
  .blok_produktpozadi .podblok.dl, .blok_produktpozadi .podblok.d, .blok_produktpozadi .podblok.dr {
    justify-content:center;
  }

  .blok_produktpozadi .podblok.ul, .blok_produktpozadi .podblok.l, .blok_produktpozadi .podblok.dl,
  .blok_produktpozadi .podblok.ul .nadpis, .blok_produktpozadi .podblok.l .nadpis, .blok_produktpozadi .podblok.dl .nadpis,
  .blok_produktpozadi .podblok.ur, .blok_produktpozadi .podblok.r, .blok_produktpozadi .podblok.dr,
  .blok_produktpozadi .podblok.ur .nadpis, .blok_produktpozadi .podblok.r .nadpis, .blok_produktpozadi .podblok.dr .nadpis
   {
    text-align:center;
  }

  .blok_produkt .files_cont .files{
    width: 450px;
    height:450px;
  }

  .blok_produkt .files_cont .lister .file img {
    width: 450px;
    height: 450px;
  }



}



@media screen and (max-width: 850px) {
  .product_item .button,
  .main1 .button,
  #cookie-banner button,
  .blok .button,
  .homepage_news_item .button,
  .polozkam .button,
  .bloky .menu_kotvy {
  letter-spacing: -0.3px;
  }
}

@media screen and (max-width: 670px) {
  .blok_produkt .files_cont .files,
  .blok_produkt .files_cont .lister .file img  {
    width: 350px;
    height: 350px;
  }

  .blok_produkt.leva .files_cont .lister .file img {
  border-radius: 124px 0px 102px 0px;
  }

  .blok_produkt.prava .files_cont .lister .file img {
    border-radius: 0px 124px 0px 102px;
  }
}




@media screen and (max-width: 550px) {
  .blok .seznam_kontaktu .kontakt .jmeno {
    white-space:normal;
  }
  .blok .seznam_kontaktu .kontakt {
    width: 182px;
  }
  .blok .seznam_kontaktu .kontakt .content, .fotgal_cont .cont .content {
    width: 170px;
    height: 170px;
  }
  .list.left {
    margin-right: 5px;
  }
  .list.right {
    margin-left: 5px;
  }

  .blok_produkt .files_cont .lister .list.left {
    margin-right:10px;
    margin-left:-20px;
  }

  .blok_produkt .files_cont .lister .list.right {
    margin-left:10px;
    margin-right:-20px;
  }

  .blok_produkt .files_cont {
    overflow: visible;
  }

}

@media screen and (max-width: 530px) {
  .blok_produkt .files_cont .files,
  .blok_produkt .files_cont .lister .file img  {
    width: 300px;
    height: 300px;
  }

  .blok_produkt.leva .files_cont .lister .file img {
  border-radius: 104px 0px 82px 0px;
  }

  .blok_produkt.prava .files_cont .lister .file img {
    border-radius: 0px 104px 0px 82px;
  }
}


@media screen and (max-width: 500px) {

  :root{
    --css_base-scale: 0.7;   /* co máš „už před 500 px“ */
    --css_break: 500;        /* šířka, od které se začíná škálovat dolů */
    --css_min-total-scale: 0.3; /* kam nejníž může celkový scale spadnout */
  }

  /* Použij celkový scale z JS, jinak čistě base z CSS */
  .blok_produkt .files_cont{
    /* transform: scale(var(--js_total-scale, var(--css_base-scale))); */

    margin:
      calc(var(--blok_files_h) * ((var(--js_total-scale, var(--css_base-scale)) - 1) / 2))
      calc(var(--blok_files_w) * ((var(--js_total-scale, var(--css_base-scale)) - 1) / 2)); */
  }

  .blok_produkt.ikony .ikona .ikona_font {
    font-size: calc(68px * var(--scale));
  }


  @media screen and (max-width: 395px) {
    .blok_produkt .files_cont .files,
    .blok_produkt .files_cont .lister .file img  {
      width: 250px;
      height: 250px;
    }

    .blok_produkt.leva .files_cont .lister .file img {
    border-radius: 84px 0px 62px 0px;
    }

    .blok_produkt.prava .files_cont .lister .file img {
      border-radius: 0px 84px 0px 62px;
    }
  }


  @media screen and (max-width: 350px) {
    .blok_produkt .files_cont .files,
    .blok_produkt .files_cont .lister .file img  {
      width: 215px;
      height: 215px;
    }

    .blok_produkt.leva .files_cont .lister .file img {
    border-radius: 74px 0px 52px 0px;
    }

    .blok_produkt.prava .files_cont .lister .file img {
      border-radius: 0px 74px 0px 52px;
    }
  }

}