/*fixní výška grid-template-rows: 80px 80px auto;*/ 

html {height: 100%; font-size: 16px;}
  @media only screen and (max-width: 600px) {
    html {
      font-size: 14px;
    }
  }
body {margin: 0; padding: 0; width: 100%; min-height: 100vh; overflow-x: hidden; background: var(--lightGrey);}
body.index {background: var(--lightGrey);}

:root {
  --white: #fff;
  --lightGrey: #fafafa;
  --brightGrey: #eee;
  --grey: #a2aaad;
  --mediumGrey: #666;
  --darkGrey: #444;
  --pomegranate: #c0392b;
  --vermilion: #e34234;
  --aquamarine: #62c5af;
  --red: #da291c; /*E53935*/ 
  --orange400: #FFA726;s

  --synove: #da291c;
  --drevovyroba: #c7cd3f;
  --strojirny: #00428d;
  --polytrade: #b0003e;

  --navHeight: 70px;

}

@font-face {font-family: podzimek; src: url("../storage/fonts/podzimek/pdz.otf");}


a {color: var(--red); text-decoration: none;}
a:hover {color: var(--red); text-decoration: underline;}

a.black {color: #000; text-decoration: none;}
a.black:hover {color: #000; text-decoration: underline;}

a.grey {color: #666; text-decoration: none;}
a.grey:hover {color: #666; text-decoration: underline;}

h3 {color: var(--red);}


span.lastNoDisplay:last-of-type {
  display: none;
} 


.actionButton {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #c0392b;
  border-radius: 50%;
  z-index: 3;
}

  .actionButton img {
    height: 30px;
    margin: 14px 15px;
    display: block;
  }


article {
  padding-bottom: 5rem;
}

article.index {
  background: #fafafa;
  padding: 1em;
}



.cb {
  max-width: 1440px;
  margin: 0 auto;
}


  @media only screen and (max-width: 1600px) {
    .cb {
      max-width: 85%;
    }
  }
  
  @media only screen and (max-width: 600px) {
    article {
      max-width: 90%;
    }

    .cb {
      max-width: 90%;
    }
  }



  .card {
    padding: 2rem;
    background: var(--white);
    box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37);
    /*box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;*/
    border-radius: 0.5rem;
  }


  .card.submenu {
    margin-top: auto;
    padding: 1.5rem;
  }

.pod.nav {

}

  .nav__companies {
    height: 10px;
    width: 100%;
    transition: all 1s;
    text-align: center;
  }
    .nav.floating .nav__companies {
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
    }

    @media only screen and (max-width: 1024px) {
      .nav__companies {
        width: 100vw;
      }
    }

    .nav__companies:hover {
      height: 30px;
    }

     .nav__companies:hover ~ .pod.nav__container {

     }



    .nav__companies p {
      margin: 0;
      padding: 6px;
      font: 500 0.8em Figtree;
      color: #fff;
      display: none;
    }

    .nav__companies:hover p {
      display: inline-block;
    }


    .nav.pod .nav__container {
      background: var(--synove);
    }

      .nav__container__item {
        height: var(--navHeight);
      } 

         .nav.floating .nav__container__item {
          height: var(--navHeightFloating);
        }      

        .nav__container__item--left {float: left; width: 150px;}
          .nav__container__item--left img {height: 22px; margin: 24px;}
          .nav.floating .nav__container__item--left img {height: 24px; margin: 30px;}
        .nav__container__item--right {float: right; width: 150px; cursor: pointer;}
          .nav__container__item--right .iconContainer {float: right; width: 86px; height: 100%; display: flex; align-items: center;}
          .nav.floating .nav__container__item--right .iconContainer {height: var(--navHeightFloating);}
            .nav__container__item--right .iconContainer .icon {margin-left: 38px; width: 1.5em; height: 1.5em;}
            .nav.floating .nav__container__item--right .iconContainer .icon {margin-left: 32px; width: 1.5em; height: 1.5em;}
        .nav__container__item--center {margin: 0 150px;}

          .nav__container__item--center ul {
            padding: 27px 0 0 0;
            text-align: center;
          }

            .nav.floating .nav__container__item--center ul {
              padding: 33px 0 0 0; /* 24px s ikonkou */
              text-align: center;
            }         

            .nav__container__item--center ul a {
              text-decoration: none;
              cursor: pointer;
            }

            .nav__container__item--center ul li {
              padding: 0 1em 23px 1em;
              display: inline;
            }

              .nav.floating .nav__container__item--center ul li {
                padding: 0 1em 31px 1em;
                display: inline;
              }

              /*.nav__container__item--center ul li:hover {
                border-bottom: 2px solid;
                color: var(--synove);
              }*/

              .nav.einsify .nav__container__item--center ul li {
                padding: 0.8rem 1.4rem;
                display: inline;
                margin: 0;
                font: 500 1rem Figtree;
                color: var(--white);
                transition: background 0.3s ease;
              }

                .nav.einsify .nav__container__item--center ul li.active, .nav.einsify .nav__container__item--center ul li:hover {
                  background: rgba(0,0,0,0.2);
                  border-radius: 0.3rem;
                  border-bottom: 0; 
                }

              .nav.pod .nav__container__item--center ul li {
                padding: 0.8rem 1.4rem;
                display: inline;
                margin: 0;
                font: 500 1rem Figtree;
                color: var(--white);
                transition: background 0.3s ease;
              }

                .nav.pod .nav__container__item--center ul li.active, .nav.pod .nav__container__item--center ul li:hover {
                  background: rgba(0,0,0,0.2);
                  border-radius: 0.3rem;
                  border-bottom: 0; 
                }


              .nav.podNew .nav__container__item--center ul li {
                padding: 0.8rem 1.4rem;
                display: inline;

                margin: 0;
                font: 500 1rem Figtree;
                color: var(--mediumGrey);
                transition: background 0.3s ease;
              }

                .nav.podNew .nav__container__item--center ul li.active, .nav.podNew .nav__container__item--center ul li:hover {
                  background: rgba(0,0,0,0.1);
                  border-radius: 0.3rem;
                  border-bottom: 0; 
                }

      .nav__submenu-user {
        position: absolute;
        top: calc(var(--navHeightFloating) + 3rem);
        right: var(--navFloatingMargin);
        z-index: 999;

        width: 25em;
        box-sizing: border-box;
      }

        .nav__submenu-user__section {
          padding: 1.5rem;
          margin-bottom: 1rem;
          background: var(--white);
          border-radius: 0.8rem;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);;
        }

          .nav__submenu-user ul {
            padding: 0;
            list-style-type: none;
          }

          .nav__submenu-user ul a {
            text-decoration: none;
          }

          .nav__submenu-user ul li {
            margin: 0.8em 0 0 0;
            padding: 0 0 0.2em 0;
            border-bottom: 1px solid var(--brightGrey)
          }


          .nav__submenu-user__tabs {
            padding: 0;
          }

          /* MENU */

          .tabs-menu {
            display: flex;

            background: linear-gradient(0deg, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 100%);

            border-bottom: 1.5px solid var(--brightGrey);
            border-top-left-radius: 0.8rem;
            border-top-right-radius: 0.8rem;
          }

          .tabs-menu__item {
            display: flex;
            align-items: center;
            justify-content: center;

            padding: 1rem;

            text-decoration: none;

            border-right: 1.5px solid var(--brightGrey);
            cursor: pointer;
          }

          .tabs-menu__item:first-child {
            border-top-left-radius: 0.8rem;
          }

          .tabs-menu__item img {
            height: 1.2rem;
          }

          .tabs-menu__item:hover {
            background: var(--lightGrey);
          }

          .tabs-menu__item.is-active {
            background: var(--lightGrey);
          }

          /* PLUS TAB */

          .tabs-menu__add {
            margin-left: auto;

            border-left: 1.5px solid var(--brightGrey);
            border-right: none;

            border-top-right-radius: 0.8rem;
          }

          .tabs-menu__add:hover {
            background: var(--lightGrey);
          }

          /* CONTENT */

          .tabs-content {
            padding: 1rem 1.5rem 1.5rem 1.5rem;
          }

          .tab-content {
            display: none;
          }

          .tab-content.is-active {
            display: block;
          }



          .box-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            flex: 0 0 calc(50% - 0.5rem);
            height: 3rem;
            padding: 0 1rem;
            box-sizing: border-box;

            font: 400 0.85em/1.6rem Figtree; 
            color: var(--darkGrey);
            text-decoration: none;

            background: var(--lightGrey);
            border-radius: 0.5rem;
          }

          .box-link img {
            height: 1.2rem;
            padding-right: 0.5rem;
          }

          .box-link:hover {
            color: var(--darkGrey);
            text-decoration: none;

            background: var(--brightGrey);
          }








.intra.breadcrumbs {
  margin-top: calc(var(--navHeightFloating) + 1rem);
}


.pod.breadcrumbs {

}

  .pod.breadcrumbs--left {

  }

  .pod.breadcrumbs--right {
    float: right;
  }

    .pod.beradcrumbs--right ul {
      
    }

    .pod.breadcrumbs--right ul a {
      text-decoration: none;
    }

    .pod.breadcrumbs--right ul li {
      margin-left: 1.2em; 
      display: inline;
    }



/*********************************** Modul Homepage ***********************************/
.modulHomepageIndex__header {
  padding-top: calc(var(--navHeightFloating) + var(--navFloatingDoubleMargin)); 
  padding-bottom: var(--navHeightFloating);
   width: 100%; 
   height:75vh;   
   background: var(--einsify); 
   box-shadow:7px 7px 14px #d0d0d0,-7px -7px 14px #f0f0f0;
   box-sizing: border-box; 
}

  .modulHomepageIndex__header__wrapper {
    height: 100%; 
    display: flex; 
    align-items: center;
  }

    .modulHomepageIndex__header__wrapper__left {
      height: 100%;
      flex: 7;
      display: flex;  
      align-items: center;
    }

      .modulHomepageIndex__header__wrapper__left div img {
        width: 5rem;
      }

      .modulHomepageIndex__header__wrapper__left__title {
        margin-top: 1.5rem; padding: 0; font: 600 2.5em Figtree; color: var(--white);
      }

      .modulHomepageIndex__header__wrapper__left__subtitle {
        margin-top: 3rem; padding: 0; font: 400 1.1em/0.85em Figtree; color: var(--white);
      }

    .modulHomepageIndex__header__wrapper__right {
      padding: 2.5rem;
      min-width: 0;
      flex: 3; 
      display: flex; 
      align-items: center; 
      background: var(--white);      
      box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.06);
      border-radius: 0.5rem;
      animation: cardFade 0.6s ease;
      box-sizing: border-box;
    }

      /* fade-in karta */
      @keyframes cardFade {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .modulHomepageIndex__header__wrapper__right div {
        width: 100%;
      }

        .modulHomepageIndex__header__wrapper__right div h3 {
          color: var(--einsify);
        }

        /* layout formuláře */
        .modulHomepageIndex__header__wrapper__right__login-row {
          display: flex;
          flex-direction: column; /* ← přidat */
          gap: 1rem;              /* trochu větší mezera v sloupci */
          align-items: stretch;   /* aby inputy měly plnou šířku */
        }

        /* inputy */
        .modulHomepageIndex__header__wrapper__right__login-input {
          flex: 1;
          padding: 10px 12px;
          border-radius: 8px;
          border: 1px solid #d7dbe3;
          background: #f9fafc;
          transition: all .25s ease;
          outline: none;
          font: 400 0.85em Figtree;
        }

        /* placeholder */
        .modulHomepageIndex__header__wrapper__right__login-input::placeholder {
          color: #9aa3b2;
        }

        /* focus efekt */
        .modulHomepageIndex__header__wrapper__right__login-input:focus {
          background: #fff;
          border-color: #5b6cff;
          box-shadow:
            0 0 0 3px rgba(91,108,255,0.15);
          transform: translateY(-1px);
        }

        /* tlačítko */
        .modulHomepageIndex__header__wrapper__right__login-btn {
          margin-top: 1rem;
          padding: 10px 18px;
          width: 50%;
          border: none;
          border-radius: 8px;
          background: linear-gradient(135deg,#5b6cff,#6f7dff);
          color: white;
          font-weight: 600;
          cursor: pointer;
          transition: all .25s ease;
          font: 400 0.85em Figtree;
        }

        /* hover */
        .modulHomepageIndex__header__wrapper__right__login-btn:hover {
          transform: translateY(-2px);
          box-shadow:
            0 6px 16px rgba(91,108,255,0.35);
        }

        /* kliknutí */
        .modulHomepageIndex__header__wrapper__right__login-btn:active {
          transform: translateY(0);
          box-shadow:
            0 2px 6px rgba(0,0,0,0.2);
          background: var(--einsify);
        }

        /* jemný glow efekt při hover celé karty */
        .modulHomepageIndex__header__wrapper__right__login-card:hover {
          box-shadow:
            0 18px 45px rgba(0,0,0,0.12),
            0 6px 18px rgba(0,0,0,0.08);
        }


        @media (max-width: 960px){
          .modulHomepageIndex__header {
            height: auto;
          }

            .modulHomepageIndex__header__wrapper {
              display: block;
            }

              .modulHomepageIndex__header__wrapper__left {
                height: auto;
                flex: unset;
                display: block;
              }

              .modulHomepageIndex__header__wrapper__right {
                margin-top: 5rem;
                flex: unset;
                display: block;
              }
        }


/* POD homepage */

.pod_article__linkList {
    margin: 0 auto;
    width: 80%; 
  }

    .pod_linksList_item {
      width: 100%;
      background: var(--white);
      display: flex;
      align-items: center;
      box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37);
    }

      .pod_linksList_item__icon {
        margin: 16px; 
        height: 36px; 
        width: 36px; 
        float: left; 
        background: var(--brightGrey); border-radius: 50%;
      }

      .pod_linksList_item__label {
        margin-left: 8px;
        font: 400 0.85em Figtree;
      }

    .pod_linksList__edit {
      margin: 40px 0;
      width: 10px; 
      height: 70px;
      grid-row: 1; 
      grid-column: 9;   
      display: flex; 
      align-items: center;
    }

    @media only screen and (max-width: 1600px) {
      .pod_article__linkList {
        width: 100%;
        column-gap: 1rem;
      }

      .pod_linksList_item {
        height: 60px;
      }

        .pod_linksList_item__icon {
          height: 42px; 
          width: 42px; 
        }

        .pod_linksList_item__label {
          margin-left: 0;
          font: 400 0.8em Figtree;
        }

      .pod_linksList__edit {
        margin: 24px 0;
        width: 10px; 
        height: 60px;
      }
    }


      @media only screen and (max-width: 1024px) {
        .pod_article__linkList {
          grid-template-columns: repeat(3, 1fr);
            row-gap: 1rem;
          }

          .pod_linksList_item {
            height: 40px;
          }

          .pod_linksList_item__icon {
            margin: 9px;
            height: 22px; 
            width: 22px; 
          }

          .pod_linksList_item__label {
            font: 400 0.75em Figtree;
          }
      }

.index__articles__itemLink:hover {
  text-decoration: none;
}

  .index__articles__item__img {
    width: 100%; height: 200px;
  }

      @media only screen and (max-width: 600px) {
        .index__articles__item__img {
          height: 120px;
        }
      }

.pod_home_asite {
  margin-right: 8px;
  grid-column: 2/span 2;
  height: 350px;
}

.pod_home_guide {
  margin: 0 8px;
  grid-column: 4/span 2;
  height: 350px;
}

.pod_home_3 {
  margin: 0 8px;
  grid-column: 6/span 2;
  height: 350px;
}

.pod_home_4 {
  margin-left: 8px;
  grid-column: 8/span 2;
  height: 350px;
}




.index {

}

  .index__block {
    padding: 2rem;
    background: var(--white);
    box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37)
  }

  @media only screen and (max-width: 1024px) {
    .index__block--links {
      grid-column: 1/span 2;
    }
  }


.index .indexBlockShop {
  width: 100%;
  background: #fff;
}

  .index__blockShop__category {
    grid-column: 1/span 3;
  }

    .index__blockShop__category a {
      width: 100%;
      display: block; 
    }

    .index__blockShop__category__item {
      padding: 0 1rem; height: 3rem; background: var(--lightGrey); display: flex; align-items: center;
    }

      .index__blockShop__category__item h4 {
        padding: 0;
      }

  
.index__projects__item__bg {width: 100%; height: 100%;}
.index__projects a:hover .index__projects__item__bg {transform: scale(1.2); transition: all .5s;}



/* Modul Projekty */
.pod_projectsIndex {

}

  .pod_projectsIndex h2 {
    text-align: center;
    color: var(--red)
  }  


  .pod_projectsIndex p.subtitle {
    margin: 10px auto 60px auto; font: 400 1em Figtree; text-align: center; 
  }  


    @media only screen and (max-width: 1024px) {
      .pod_projectsIndex h2 {
        margin: 2rem auto 0.5rem auto;
        padding-bottom: 0;
        font: 400 1.2rem/28px Figtree;
        max-width: 80%;
      } 

      .pod_projectsIndex p.subtitle {
        margin: 1.5rem auto 3rem auto; font: 400 0.85em Figtree; max-width: 80%;
      }  
    }


/* Modul Obchod */
.shopIndex {
}

  .shopIndex p.subtitle {
    margin: 10px auto 60px auto; font: 400 1em Figtree; text-align: center; 
  }  


    @media only screen and (max-width: 1024px) {
      .shopIndex h2 {
        margin: 2rem auto 0.5rem auto;
        padding-bottom: 0;
        font: 400 1.2rem/28px Figtree;
        max-width: 80%;
      } 

      .shopIndex p.subtitle {
        margin: 1.5rem auto 3rem auto; font: 400 0.85em Figtree; max-width: 80%;
      }  
    }

  
  .shopIndex__cover {
    margin-bottom: 4rem;
    padding: 1rem 4rem 0 4rem;
    height: 25rem;
    background: var(--white);
    box-sizing: border-box;
  }

    .shopIndex__cover__content {
      max-width: 60%; 
      float: left;
    }

      .shopIndex__cover__content h2 {padding: 3rem 0 1rem 0; max-width: 65%;}
      .shopIndex__cover__content p {margin: 0; padding-top: 1rem; font: 400 1rem/30px Figtree;}
        p.shopIndex__cover__content__bottomLine {padding-top: 9rem;}

      .shopIndex__cover img {float:right; height: 100%;}

    @media only screen and (min-width: 1280px) and (max-width: 1580px) {
      .shopIndex__cover {
        margin-bottom: 4rem;
        padding: 1rem 4rem 0 4rem;
        height: 23rem;
        background: var(--white);
        box-sizing: border-box;
      }

        .shopIndex__cover__content {
          max-width: 40%; 
          float: left;
        }

          .shopIndex__cover__content h2 {font-size: 1.2rem;}
          .shopIndex__cover__content p {margin: 0; padding-top: 1rem; font: 400 1rem/30px Figtree;}
            p.shopIndex__cover__content__bottomLine {padding-top: 3rem;}
    }


    @media only screen and (min-width: 480px) and (max-width: 1280px) {
      .shopIndex__cover {
        margin-bottom: 2rem;
        padding: 1rem 2rem 0 2rem;
        height: auto;
        background: var(--white);
        box-sizing: border-box;
      }

        .shopIndex__cover__content {
          max-width: 100%; 
          float: unset;
        }

          .shopIndex__cover__content h2 {margin: 1rem 0 0 0; padding: 0; font-size: 1.2rem;}
          .shopIndex__cover__content p {margin: 0; padding-top: 1rem; font: 400 1rem/30px Figtree;}
            p.shopIndex__cover__content__bottomLine {padding-top: 1rem;}
        
        .shopIndex__cover img {float:unset; height: auto; max-width: 100%; padding-top: 1rem;}

    }


    @media only screen and (max-width: 480px) {
      .shopIndex__cover {
        margin-bottom: 2rem;
        padding: 1rem 2rem 0 2rem;
        height: auto;
        background: var(--white);
        box-sizing: border-box;
      }

        .shopIndex__cover__content {
          max-width: 100%; 
          float: unset;
        }

          .shopIndex__cover__content h2 {margin: 1rem 0 0 0; padding: 0; font-size: 1.2rem;}
          .shopIndex__cover__content p {margin: 0; padding-top: 1rem; font: 400 1rem/30px Figtree;}
            p.shopIndex__cover__content__bottomLine {padding-top: 1rem;}
        
        .shopIndex__cover img {float:unset; height: auto; max-width: 100%; padding-top: 1rem;}

    }



.pod.shopCat {
  padding-bottom: 7rem;
}
  .shopCat__cover {
    margin-bottom: 4rem;
    padding: 1rem 4rem 0 4rem;
    background: var(--white);
    box-sizing: border-box;
  }

      .shopCat__cover h2 {padding: 3rem 0 1rem 0; max-width: 65%;}
      .shopCat__cover p {margin: 0; padding: 1rem 0 3rem 0; font: 400 1rem/30px Figtree;}
        p.shopIndex__cover__bottomLine {padding-top: 9rem;}

  
    .pod.shopCat h2 {
      /*padding: 40px 0 20px 200px;*/
    }

    .pod.shopCat p.desc {
      padding: 0 0 60px 200px;
      line-height: 28px;
    }

    .pod.shopCat_left {
      width: 200px;
      float: left;
    }

    .pod.shopCat__grid {
      margin-left: 200px;

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 1.5rem;
      row-gap: 1.5rem;
      grid-auto-rows: max-content;
    } 

      @media only screen and (min-width: 1400px) and (max-width: 1600px) {
        .pod.shopCat__grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media only screen and (min-width: 1024px) and (max-width: 1400px) {
        .pod.shopCat__grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media only screen and (max-width: 1024px) {
        .pod.shopCat h2 {
          padding: 20px 0 20px 0;
        }

        .pod.shopCat p.desc {
          padding: 0 0 60px 0;
        }

        .pod.shopCat_left {
          float: none;
        }

        .pod.shopCat__grid {
          margin-left: 0;
          grid-template-columns: repeat(1, 1fr);
        }
      }

      .pod.shopCat__grid__item {
        background: var(--white);
        position: relative;
        border-radius: 5px;
        box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37);
      }
        .pod.shopCat__grid__item a {
          width: 100%;
          height: 100%;
          display: block;
        }

        .pod.shopCat__grid__item__img {
          margin: 1.5rem 1.5rem 0 1.5rem;
          border-radius: 5px;
          height: 20rem;
        }

        .pod.shopCat__grid__item__desc {
          padding: 1.5rem;
        }

          .pod.shopCat__grid__item__desc h3 {
            display: block;
            height: 45px;
          }

        .pod.shopCat__grid__item__desc--top {
          padding-bottom: 5rem;
        }

          .pod.shopCat__grid__item__desc--bottom {
            padding-top: 0;
            width: 100%;
            position: absolute;
            bottom: 0;
            box-sizing: border-box;
          }


          .pod.shopCat__grid__item__color {
            margin: 1.2rem 0.6rem 0 0;
            width: 1.2rem;
            height: 1.2rem;
            background: #6b272f;
            border: 1px solid #888;
            box-sizing: border-box;
            /* border-radius: 50%; */
            float: left;
          }
            .pod.shopCat__grid__item__color div {
              width: 100%; height: 100%; border: 2px solid #fff; box-sizing: border-box; /*border-radius: 50%;*/
            }

          .pod.shopCat__grid__item__price {
            margin: 0.9rem 0 0 0; float: right;
          }
            .pod.shopCat__grid__item__price p {
              font: 400 1.5em Figtree; text-align: right;
            }


.pod.shopIndexNew {
  padding-bottom: 7rem;
}
  
    .pod.shopIndexNew h2 {
      padding: 40px 0 20px 200px;
    }

    .pod.shopIndexNew p.desc {
      padding: 0 0 60px 200px;
      line-height: 28px;
    }

    .pod.shopIndexNew_left {
      width: 200px;
      float: left;
    }

    .pod.shopIndexNew__grid {
      margin-top: 4rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 1.5rem;
      row-gap: 1.5rem;
      grid-auto-rows: max-content;
    } 

      @media only screen and (min-width: 1400px) and (max-width: 1600px) {
        .pod.shopIndexNew__grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media only screen and (min-width: 1024px) and (max-width: 1400px) {
        .pod.shopIndexNew__grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media only screen and (max-width: 1024px) {
        .pod.shopIndexNew h2 {
          padding: 20px 0 20px 0;
        }

        .pod.shopIndexNew p.desc {
          padding: 0 0 60px 0;
        }

        .pod.shopIndexNew_left {
          float: none;
        }

        .pod.shopIndexNew__grid {
          margin: 1rem 0 0 0;
          grid-template-columns: repeat(1, 1fr);
        }
      }

      .pod.shopIndexNew__grid__item {
        /*border-radius: 5px;*/
        background: #fff;
        position: relative;
        box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37);
      }
        .pod.shopIndexNew__grid__item a {
          width: 100%;
          height: 100%;
          display: block;
        }

        .pod.shopIndexNew__grid__item__img {
          width: 100%;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          height: 350px;
        }

        .pod.shopIndexNew__grid__item__desc {
          padding: 1.5rem;
        }

          .pod.shopIndexNew__grid__item__desc h3 {
            display: block;
            height: 45px;
          }

        .pod.shopIndexNew__grid__item__desc--top {
          padding-bottom: 9rem;
        }

          .pod.shopIndexNew__grid__item__desc--bottom {
            padding-top: 0;
            width: 100%;
            position: absolute;
            bottom: 0;
            box-sizing: border-box;
          }


          .pod.shopIndexNew__grid__item__color {
            margin: 1.5rem 1.5rem 0 0; width: 2rem; height: 2rem; background: #6b272f; border: 1px solid #888; box-sizing: border-box; border-radius: 50%; float: left;
          }

            .pod.shopIndexNew__grid__item__color div {
              width: 100%; height: 100%; border: 2px solid #fff; box-sizing: border-box; border-radius: 50%;
            }

          .pod.shopIndexNew__grid__item__price {
            margin: 1.6rem 0 0 0; float: right;
          }
            .pod.shopIndexNew__grid__item__price p {
              font: 400 1.5em Figtree; text-align: right;
            }

.intra__shop__container {
  margin: 0 auto;  
  width: 100%;  
  box-sizing: border-box;
  border-radius: 0.25rem;  
}

  .intra__shop__container__card {
    padding: 4rem;
    margin-bottom: 2rem;
    background: var(--white);
    box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); 
    border-radius: 0.25rem;
  }



.pod.shopItem {

}

  .pod.shopItem h2 {
    padding: 1.5rem 0 2rem 0;
    font: 600 2em Figtree; 
    letter-spacing: 2px; 
  }

  .pod.shopItem h4.inline {
    font-size: 1.2rem;
  }

  .pod.shopItem__container {
    margin: 0 auto;
    padding: 4rem;
    width: 100%;
    background: var(--white);
    box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); 
    box-sizing: border-box;
    border-radius: 5px;
  }
    @media only screen and (max-width: 1024px) {
      .pod.shopItem__container {
        padding: 2rem;
      }
    }


    .pod.shopItem__container__desc {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(0, auto);
      gap: 4rem;
    }

      .pod.shopItem__container__desc__left {
        grid-column: span 2;
        display: flex;
        align-items: center;
      }

      .pod.shopItem__container__desc__right {
        grid-column: span 2;
        display: flex;
        align-items: center;
      }
        .pod.shopItem__container__desc__right h4 {
          padding: 0 0 0.5rem 0;
        }

          .pod.shopItem__container__desc__right h4.pt1 {
            padding: 1rem 0 1rem 0;
          }

          .pod.shopItem__container__desc__right h4 span {
            font-weight: 600;
          }

        .pod.shopItem__container__desc__right__desc {
          padding: 0.5rem 0 1.5rem 0;
          /*max-width: 450px;*/
          font: 400 0.85em/28px Figtree;           
          color: #555;
        }

        .pod.shopItem__container__desc__right__color--container {
          margin: 0 0.5rem 0.5rem 0; 
          /*padding: 4px;*/ 
          width: 2.4rem; 
          height: 2.4rem; 
          /*border: 1px solid #888; */
          box-sizing: border-box; 
          float: left;
        }
          .pod.shopItem__container__desc__right__color {
            padding: 0.7rem;
            width: 100%; height: 100%; 
            box-sizing: border-box; 
            border-radius: 0.25rem;
          }     

            .pod.shopItem__container__desc__right__color.disabled {
              opacity: 70%;
            }

          .pod.shopItem__container__desc__right__color.unchecked img {
            opacity: 0;
            transition: all 0.5s; 
          }

            .shopItem__container__desc__right__color.unchecked:hover img {
              opacity: 100%;
            }

          .pod.shopItem__container__desc__right__color.checked {
            transition: all 0.5s;           
          }

            .shopItem__container__desc__right__color.checked img {
              opacity: 100%;
            }

          .pod.shopItem__container__desc__right__color.disabled img {
            opacity: 100%;
          }
        
        .pod.shopItem__container__desc__right__size {
          margin: 0; margin-right: 6px; padding: 10px 15px; display: inline-block; border: 1px solid #888; font: 400 1em Figtree; float: left;
        }

        .pod.shopItem__container__desc__right__previousOrders {
          margin-top: 1rem;
          padding: 1rem;
          background: var(--lightGrey);
          border-radius: 0.5rem;
        }


        .pod.shopItem__container__desc__right__previousOrders p span {
          margin: 0 0.2rem 0 0.5rem;
          padding: 0.3rem 0.5rem;
          border: 1px solid var(--darkGrey);
        }

       @media only screen and (max-width: 1024px) {
        .pod.shopItem__container__desc__left {
          grid-column: span 4;
        }

        .pod.shopItem__container__desc__right {
          grid-column: span 4;
        }
      }

.pod.shop__tag {
  margin: 0 0.3rem 0 0;
  padding: 0.5rem 0.7rem;
  font: 500 1em Figtree;
  color: #fff; 
  display: inline-block;
  border-radius: 0.25rem; 
}


.pod.shopCart__itemLine {
  font: 400 1.2em Figtree;
  padding: 0 1rem 1.5rem 1rem;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--brightGrey)
}

  .pod.shopCart__itemLine:first-of-type {
    margin-top: 1rem;
  }

  .pod.shopCart__itemLine__img {
    float: left;
    width: 200px;
  }

    .pod.shopCart__itemLine__img img {
      height: 8rem; padding: 0.5rem;
    }

  .pod.shopCart__itemLine__name {
    padding-top: 1rem;
    float: left;
  }

  .pod.shopCart__itemLine__price {
    padding-top: 1rem;
    float: right;
  }

  .pod.shopCart__itemLine__delete {
    padding: 1rem  2rem ;
    float: right;
  }

  .pod.shopItem__container__itemLine__color--container, .pod.shop__container__itemLine__color--container {
    margin: 0 0.5rem 0.5rem 0; padding: 4px; width: 40px; height: 40px; border: 1px solid #888; box-sizing: border-box; float: left;
    float:left; margin: 1rem 1rem 0 0;
  }

  .pod.shopItem__container__itemLine__color, .pod.shop__container__itemLine__color {
    width: 100%; height: 100%; box-sizing: border-box;
  }

  .pod.shopCart__itemLine__size {
    margin: 1rem 0 0 0;
    margin-right: 6px;
    padding: 0.5rem;
    display: inline-block;
    border: 1px solid #888;
    font: 400 0.7em Figtree;
    float: left;
  }

  @media only screen and (max-width: 1024px) {  
    .pod.shopCart__itemLine {
      width: 100%; border-bottom: 1px solid #BDBDBD;
      font: 400 1.2em Figtree;
    }

      .pod.shopCart__itemLine__img {
        float: left;
        width: auto;
        max-width: 50%;
      }
        .pod.shopCart__itemLine__img img {
          height: 4rem; padding: 0.5rem;
        }

      .pod.shopCart__itemLine__name {
        padding-top: 0.5rem;
        float: right;
        max-width: 50%;
      }

        .pod.shopCart__itemLine__name p {
          font: 400 0.75em/1.6rem Figtree;
        }

      .pod.shopCart__itemLine__price {
        margin-top: 1rem;
      }

      .pod.shopCart__itemLine__delete {
        margin-top: 1rem;
      }

      .pod.shopItem__container__itemLine__color--container {
        margin: 0 0.5rem 0.5rem 0; padding: 4px; width: 20px; height: 20px; border: 1px solid #888; box-sizing: border-box; float: left;
        float:left; margin: 1rem 1rem 0 0;
      }

      .pod.shopItem__container__itemLine__color {
        width: 100%; height: 100%; box-sizing: border-box;
      }

      .pod.shopCart__itemLine__size {
        margin: 1rem 0 0 0;
        margin-right: 6px;
        padding: 0.5rem;
        display: inline-block;
        border: 1px solid #888;
        font: 400 0.7em Figtree;
        float: left;
      }
  }

/* Modul Fotobanka */
.photoBank__container {
  width: 100%;
  background: #fff;
  margin: 0 auto 120px auto; padding: 4em; box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); box-sizing: border-box;
}

  .photoBank__container__header {
    width: 100%; /*padding: 20px 0 40px 0;*/
  }
    .photoBank__container__header p {
      padding-top: 1rem;
    }

    .photoBank__container__header__event {
      padding: 1em; border: 1px solid var(--brightGrey); width: 200px;
    }

      .photoBank__container__header__event p {
        padding: 0;
      }

  .photoBank__container__content {
    width: 100%;
  }

    .photoBank__container__content img {
      margin: 0 0.5rem 0.5rem 0; float: left; height: 10rem;
    }

  @media only screen and (max-width: 1024px) {  
    .photoBank__container {
      padding: 2rem;
    }

    .photoBank__container__content img {
      max-width: 47%;
      height: auto;
    }
  }

   .photoBank__container a:hover {
    color: var(--darkGrey);
   }

/* Modul Aktuality */
.pod.articles__container {
  width: 100%;
  background: #fff;
  margin: 0 auto 120px auto; padding: 4em; box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); box-sizing: border-box;
}

  .pod.articles__container__header {
    width: 100%; /*padding: 20px 0 40px 0;*/
  }

  .pod.articles__container__content {
    width: 100%;
  }

    .pod.articles__container__content img {
      margin: 0 0.5rem 0.5rem 0; float: left; height: 10rem;
    }

  @media only screen and (max-width: 1024px) {  
    .pod.articles__container {
      padding: 1rem 2rem;
    }

    .pod.articles__container__content img {
      max-width: 47%;
      height: auto;
    }
  }

.modulNewsItemContainer {
  margin-top: 1rem;
}



/* Modul Události */
.pod.calendar__container {
  width: 100%;
  background: #fff;
  margin: 0 auto 120px auto; box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); box-sizing: border-box;
}

  .pod.calendar__container__header {
    width: 100%;
    padding: 4em; 
  }

  .pod.calendark__container__content {
    width: 100%;
  }

    .pod.calendar__container__content img {
      margin: 0 0.5rem 0.5rem 0; float: left; height: 10rem;
    }

  @media only screen and (max-width: 1024px) {  
    .pod.calendar__container {
      padding: 1rem 2rem;
    }

    .pod.calendar__container__content img {
      max-width: 47%;
      height: auto;
    }
  }



/* Modul Nastavení */
.pod.settings__container {
  width: 100%;
  background: #fff;
  margin: 0 auto 120px auto; box-shadow: 0 8px 32px 0 rgba( 235, 235, 235, 0.37); box-sizing: border-box;
}

  .pod.settings__container__header {
    width: 100%;
    padding: 4em; 
  }
    .pod.settings__container__header h2 {
      padding: 0;
    }

  .pod.csettings__container__content {
    width: 100%;
  }

    .pod.settings__container__content img {
      margin: 0 0.5rem 0.5rem 0; float: left; height: 10rem;
    }

  @media only screen and (max-width: 1024px) {  
    .pod.settings__container {
      padding: 1rem 2rem;
    }

    .pod.settings__container__content img {
      max-width: 47%;
      height: auto;
    }
  }

  .settings__container__content__gridContainer{
    padding: 4em;
  }


/*************************** modul login ***************************/

.login {
  display: flex;
  align-items: center;
  min-height: 100%;
}

  .login__window {
    display: flex;
    width: 800px;
    height: 440px;
    margin: 0 auto;
    border-radius: 0.5rem;

    background: #fff;
    box-shadow: 0 8px 32px 0 rgba(235, 235, 235, 0.37);
  }

    .login__side {
      width: 50%;
      height: 100%;
    }

      .login__side--left {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;

        background: var(--login-side-bg) center center / cover no-repeat;
      }

        .login__overlay {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          border-top-left-radius: 0.5rem;
          border-bottom-left-radius: 0.5rem;
          background: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(4px);
        }

      .login__side--right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 10px;
        box-sizing: border-box;
      }

        .login__title {
          margin: 0;
          padding: 3rem 0 0 0;
          font: 600 2em Figtree;
          text-align: center;
        }

        .login__form {
          padding-top: 3rem;
        }

        /*
          .login__input {
            display: block;
            width: 60%;
            margin: 0 auto 1rem auto;
            padding: 10px 12px;
            border: 1px solid #d7dbe3;
            border-radius: 8px;
            outline: none;
            font: 400 0.85em Figtree;
            background: #f9fafc;
            transition: all 0.25s ease;
          }

            .login__input::placeholder {
              color: #9aa3b2;
            }

            .login__input:focus {
              border-color: #5b6cff;
              background: #fff;
              box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
              transform: translateY(-1px);
            }

          .login__button {
            display: block;
            margin: 3rem auto 0 auto;
            padding: 14px 24px 12px 24px;
            border: none;
            border-radius: 0.25rem;
            box-sizing: content-box;
            font: 400 0.85em Figtree;
            text-transform: uppercase;
            color: #fff;
            background: var(--einsify);
            cursor: pointer;
            transition: background 0.25s ease;
          }

          .login__button:hover {
            background: #c62828;
          }
      */

      .login__input {
        display: block;
        width: 60%;
        margin: 0 auto 1rem auto;
        padding: 10px 12px;
        border: 1px solid #d6e1e5;
        border-radius: 4px;
        outline: none;
        font: 400 1rem Figtree;
        background: #ffff;
        transition: all 0.25s ease;
      }

        .login__input::placeholder {
          color: #b2c6cd;
        }

        .login__input:hover {
          border-color: #93a4aa;
        }

        .login__input:focus {
          border-color: var(--einsify);
          background: #fff;
        }

      .login__button {
        display: block;
        margin: 2rem auto 0 auto;
        padding: 14px 24px 12px 24px;
        border: none;
        border-radius: 0.25rem;
        box-sizing: content-box;
        font: 400 0.85em Figtree;
        text-transform: uppercase;
        color: #fff;
        background: var(--einsify);
        cursor: pointer;
        transition: background 0.25s ease;
      }

      .login__button:hover {
        background: #c62828;
      }

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

  .login__window {
    width: 85%;
  }

  .login__side--left {
    display: none;
  }

  .login__side {
    width: 100%;
  }

  .login__input {
    margin: 0 auto 15px auto;
    padding: 10px;
    width: 300px;
    border: none;
    border-bottom: 1.5px solid #333;
    border-radius: 0;
    box-sizing: border-box;

    font-size: 1em;
    font-weight: 300;
    color: #333;

    background: #fff;
  }

  .login__button {
    margin: 30px auto 0 auto;
  }
}

/*************************** modul login end ***************************/



/* Modul Admin */
.adminShop__datagrid--container {
  display: grid; 
  grid-template-columns: repeat(10, 1fr); 
  gap: 1px; background: #9e9e9e; 
  border: solid 1px #9e9e9e;
}

  .adminShop__datagrid__header {
    background: #eee;
  }

  .adminShop__datagrid__item {
    background: #fff;
  }

    .adminShop__datagrid__header p, .adminShop__datagrid__item p {
      margin: 0;
      padding: 0.5rem;
    }

    .col-1 {
      grid-column: 1;
    }

    .col-2 {
      grid-column: 2;
    }

    .col-3 {
      grid-column: 3;
    }

    .col-4 {
      grid-column: 4;
    }

    .col-5 {
      grid-column: 5;
    }

    .col-6 {
      grid-column: 6;
    }

    .col-7 {
      grid-column: 7;
    }

    .col-8 {
      grid-column: 8;
    }

    .col-9 {
      grid-column: 9;
    }

    .col-10 {
      grid-column: 10;
    }

    .cspan-3 {
      grid-column: span 3;
    }

    .cspan-4 {
      grid-column: span 4;
    }

    .cspan-5 {
      grid-column: span 5;
    }


















.radio-custom ~ label {
  margin: 0 0.5rem 0.5rem 0;
  padding: 10px 15px;
  display: inline-block;
  border: 1px solid #888;
  font: 400 1em Figtree;
  float: left;
  color: #000;
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 0.25rem;
}


.radio-custom:checked ~ label {
  border: 1px solid var(--synove);
  color: var(--synove);
}

.radio-custom:hover ~ label {
  border: 1px solid var(--synove);
  color: var(--synove);
}






.pie {
  --p:20;
  --b:22px;
  --c:#da291c;
  --w:100px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}




/* tabs */

.tabs {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 1em 0 2em;
  font-weight: 300;
}

/* Nav */
.tabs nav {
  padding-left: 4rem;
}

.tabs nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-block;
}

.tabs nav ul li {
  padding: 0;
  border: 1px solid #becbd2;
  border-bottom: none;
  margin: 0 0.25em;
  display: block;
  float: left;
  position: relative;
}

.tabs nav li.tab-current {
  border: 1px solid var(--darkGrey);
  box-shadow: inset 0 2px var(--darkGrey);
  border-bottom: none;
  z-index: 100;
}

.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
  content: '';
  position: absolute;
  height: 1px;
  right: 100%;
  bottom: 0;
  width: 1000px;
  background: var(--darkGrey);
}

.tabs nav li.tab-current:after {
  right: auto;
  left: 100%;
  width: 4000px;
}

.tabs nav a {
  color: #becbd2;
  display: block;
  font-size: 1rem;
  line-height: 2.5;
  padding: 0 1.25em;
  white-space: nowrap;
}

.tabs nav a:hover {
  color: #768e9d;
}

.tabs nav li.tab-current a {
  color: var(--darkGrey);
}

/* Icons */
.tabs nav a:before {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  font-weight: normal;
  font-variant: normal;
  font-family: 'icomoon';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  margin: -0.25em 0.4em 0 0;
}

.icon-food:before {
  content: "\e600";
}

.icon-lab:before {
  content: "\e601";
}

.icon-cup:before {
  content: "\e602";
}

.icon-truck:before {
  content: "\e603";
}

.icon-shop:before {
  content: "\e604";
}

/* Content */
.content section {
  display: none;
}

/*.content section:before,
.content section:after {
  content: '';
  display: table;
}
*/
.content section:after {
  clear: both;
}

/* Fallback example */
.no-js .content section {
  display: block;
  padding-bottom: 2em;
  border-bottom: 1px solid var(--darkGrey);
}

.content section.content-current {
  display: block;
}

.content section.content-current.gC {
  display: grid;
}


.mediabox {
  float: left;
  width: 33%;
  padding: 0 25px;
}

.mediabox img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.mediabox h3 {
  margin: 0.75em 0 0.5em;
}

.mediabox p {
  padding: 0 0 1em 0;
  margin: 0;
  line-height: 1.3;
}

/* Example media queries */

@media screen and (max-width: 52.375em) {
  .tabs nav a span {
    display: none;
  }

  .tabs nav a:before {
    margin-right: 0;
  }

  .mediabox {
    float: none;
    width: auto;
    padding: 0 0 35px 0;
    font-size: 90%;
  }

  .mediabox img {
    float: left;
    margin: 0 25px 10px 0;
    max-width: 40%;
  }

  .mediabox h3 {
    margin-top: 0;
  }

  .mediabox p {
    margin-left: 40%;
    margin-left: calc(40% + 25px);
  }

  .mediabox:before,
  .mediabox:after {
    content: '';
    display: table;
  }

  .mediabox:after {
    clear: both;
  }
}

@media screen and (max-width: 32em) {
  .tabs nav ul,
  .tabs nav ul li a {
    width: 100%;
    padding: 0;
  }

  .tabs nav ul li {
    width: 20%;
    width: calc(20% + 1px);
    margin: 0 0 0 -1px;
  }

  .tabs nav ul li:last-child {
    border-right: none;
  }

  .mediabox {
    text-align: center;
  }

  .mediabox img {
    float: none;
    margin: 0 auto;
    max-width: 100%;
  }

  .mediabox h3 {
    margin: 1.25em 0 1em;
  }

  .mediabox p {
    margin: 0;
  }
}







/*Množství položek do košíku */
.quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0 2rem 0 0;
  font-family: Figtree;
  float: left;
}

.quantity input {
  width: 70px;
  border: 1px solid #888;
  border-left: none;
  border-right: none;
  text-align: center;
  font: 400 1em Figtree;
  outline: none;
  padding: 10px 0; /* padding jen vertikální */
  box-sizing: border-box;
}

.quantity input:focus {
  border-color: var(--synove);
}

.qty-btn {
  background: #fff;
  border: 1px solid #888;
  padding: 0 14px;
  cursor: pointer;
  font: 400 1em Figtree;
  transition: all 0.3s ease;
  color: #000;
}

.qty-btn:hover {
  border-color: var(--synove);
  color: var(--synove);
}

.minus {
  border-radius: 0.25rem 0 0 0.25rem;
}

.plus {
  border-radius: 0 0.25rem 0.25rem 0;
}

/* Chrome, Safari, Edge */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.quantity input[type=number] {
  -moz-appearance: textfield;
}


/*Graf zbývajících kreditů*/
.credit-bar {
  position: relative;
  width: 100%;
  height: 26px;
  font-family: Figtree, sans-serif;
}

/* vrstvy */
.bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  border-radius: 13px;
  box-sizing: border-box;
}

/* maximum */
.bar-max {
  width: 100%;
  background: var(--lightGrey);
  z-index: 1;
  color: var(--grey);
}

/* před objednávkou */
.bar-before {
  width: 0;
  transition: width 1s ease;
  background: var(--brightGrey);
  z-index: 2;
  color: var(--grey);
}

/* po objednávce */
.bar-after {
  width: 0;
  transition: width 1s ease;
  background: var(--synove);
  z-index: 3;
  color: #fff;
}


/* text uvnitř */
.value {
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
}

/* spodní osa */
.labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
  margin-top: 6px;
  color: #666;
}


/* reset drobností */
input, button {
  font-family: inherit;
}













.hero-time span {
    font-size: 0.3em;
    opacity: 0.9;
}

.loginWrapper {
  flex: 1; display: flex; align-items: center; justify-content: center;
}



.debugBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 40vh;

  display: block;

  box-sizing: border-box;
  font-family: monospace;
  font-size: 12px;

  background: #111;
  color: #e6e6e6;
  border-top: 2px solid #444;

  z-index: 9999;
}

.debugBottom__header {
  padding: 6px 10px;

  font-weight: bold;

  background: #222;
  color: #9fd3ff;

  cursor: pointer;
}

.debugBottom__content {
  overflow: auto;
  padding: 10px;
}

.debugBottom__content pre {
  margin: 0;
  white-space: pre-wrap;
  max-height: 25vh;
  overflow-y: auto;
}

.debugBottom__hidden {
  display: none;
}

.debugBottom__input {
  width: 100%;
  margin-bottom: 8px;

  box-sizing: border-box;
  padding: 6px 8px;

  font-family: monospace;
  font-size: 12px;

  color: #9fd3ff;
  background: #000;

  border: 1px solid #444;
  border-radius: 2px;

  outline: none;
}

  .debugBottom__input::placeholder {
    color: #888;
  }

  .debugBottom__input:focus {
    border-color: #9fd3ff;
  }