
/*
 * IONTMAX Theme — Classic content / generic content primitives
 * Blank-only compatibility layer.
 * Source: captured Shoptet Classic runtime checkpoint 2026-08-01.
 *
 * Contains generic content structures:
 * - responsive/content tables,
 * - generic tab content switching,
 * - news/article list/detail structure,
 * - empty-content states,
 * - generic social icon row,
 * - generic Classic banner primitives used outside the IONTMAX top carousel.
 *
 * Breadcrumbs remain owned by the dedicated IONTMAX breadcrumbs module.
 * The homepage top carousel remains owned by the IONTMAX Banner carousel module.
 * Categories/sidebar and catalog components remain for their dedicated layers.
 */

.table-th-code{width:21%}
.table-th-date{width:12%}

.tab-content>.tab-pane{display:none}
.tab-content>.tab-pane h2:first-child{margin-top:0}
.tab-content>.active{display:block}

.news-item{margin-bottom:40px;padding-bottom:40px}
.news-item:last-child{border-bottom:none;padding-bottom:0}

@media (min-width:480px){
  .news-item{border-bottom:0;display:flex;margin-bottom:80px;padding-bottom:0}
}

.news-item .image{margin-bottom:20px;text-align:center}

@media (min-width:480px){
  .news-item .image{
    flex:0 1 auto;
    margin-bottom:0;
    margin-right:20px;
    text-align:center;
    text-align:left;
    width:33.33333%
  }
}

@media (min-width:768px){
  .news-item .image{margin-right:40px}
}

@media (min-width:1200px){
  .news-item .image{width:370px}
  .news-item .image img{width:100%}
}

.news-item .image img{max-height:100%;max-width:100%}

@media (min-width:480px){
  .news-item .text{flex-grow:1;flex:1;flex-direction:column}
}

.news-item .text .title{
  display:block;
  font-size:24px;
  font-weight:300;
  line-height:32px;
  margin-bottom:10px;
  text-decoration:none
}

.news-item .text .description{line-height:2.2rem}
.news-item .text .description p:last-child{margin-bottom:0}

.news-item-detail .text{margin-bottom:40px}

.news-item-detail .text:after,
.news-item-detail .text:before{
  content:" ";
  display:table
}

.news-item-detail .text:after{clear:both}

.news-item-detail .text img{max-width:100%}

.news-item-detail .text img[style*="float: left"]{
  margin-bottom:10px;
  margin-right:10px
}

.news-item-detail .text img[style*="float: right"]{
  margin-bottom:10px;
  margin-left:10px
}

.news-item-detail>img{margin-bottom:19px}
.news-item-detail .share{margin-bottom:20px;min-height:25px}
.news-item-detail .next-prev{margin-bottom:20px}

.news-item-widget{
  border-bottom-style:none;
  border-bottom-width:0;
  margin-bottom:10px
}

.news-item-widget time{
  display:block;
  font-size:12px
}

:where(body.ums_page_element_headings--off) .news-item-widget h5{
  margin-bottom:0;
  margin-top:0
}

:where(body.ums_page_element_headings--off) .news-item-widget h5 a{
  display:block
}

.news-item-widget:last-child{border-bottom-style:none}

:where(body.ums_page_element_headings--on) .newsItemWidget__heading{
  font-size:14px;
  margin-block:0
}

:where(body.ums_page_element_headings--on) .newsItemWidget__heading a{
  display:block
}

.news-item time,
.news-item-detail time{
  display:block;
  font-size:14px;
  font-weight:300;
  line-height:1;
  margin-bottom:20px
}


/* ===== Generic responsive tables ===== */

.table-responsive{
  min-height:.01%;
  overflow-x:auto
}

@media screen and (max-width:767px){
  .table-responsive{
    margin-bottom:14px;
    overflow-y:hidden;
    width:100%;
    -ms-overflow-style:-ms-autohiding-scrollbar;
    border:1px solid #ddd
  }

  .table-responsive>.table{
    margin-bottom:0
  }

  .table-responsive>.table>tbody>tr>td,
  .table-responsive>.table>tbody>tr>th,
  .table-responsive>.table>tfoot>tr>td,
  .table-responsive>.table>tfoot>tr>th,
  .table-responsive>.table>thead>tr>td,
  .table-responsive>.table>thead>tr>th{
    white-space:nowrap
  }
}

table.table{
  margin-bottom:19px;
  width:100%
}

table.table tbody>tr>td,
table.table tbody>tr>th,
table.table thead>tr>td,
table.table thead>tr>th{
  padding:.25rem .5rem
}

table.table.border tbody>tr>td,
table.table.border tbody>tr>th,
table.table.border thead>tr>td,
table.table.border thead>tr>th{
  border-style:solid;
  border-width:1px
}

@media (max-width:767px){
  table.table.breakable{
    width:100%
  }

  table.table.breakable>thead{
    display:none
  }

  table.table.breakable>tbody>tr>td,
  table.table.breakable>tbody>tr>th{
    display:block;
    text-align:center
  }

  table.table.breakable>tbody>tr>td{
    font-weight:700;
    margin-bottom:10px
  }

  table.table.breakable>tbody>tr>td.empty{
    display:none
  }
}

.table-fit-content{
  white-space:nowrap;
  width:1px
}


/* ===== Generic social icons ===== */

.social-icons{margin:0}

a.social-icon{
  border-radius:50%;
  border-style:none;
  border-width:0;
  display:inline-block;
  height:46px;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  width:46px
}

a.social-icon:before{
  display:block;
  font-size:24px;
  line-height:46px
}

a.social-icon.facebook:before{content:"\e900"}
a.social-icon.twitter:before{content:"\e901"}
a.social-icon.instagram:before{content:"\e909";font-size:20px}
a.social-icon.youtube:before{content:"\e903"}
a.social-icon.google:before{content:"\e902";font-size:20px}
a.social-icon.pinterest:before{content:"\e904";font-size:20px}
a.social-icon.tiktok:before{content:"\e940"}
a.social-icon.whatsapp:before{content:"\e946"}
a.social-icon.messenger:before{content:"\e947"}

a.social-icon:hover{
  text-decoration:none!important
}


/* ===== Empty content states ===== */

.empty-content-404 h2:after{content:"\e92f"}
.empty-content-category h2:after{content:"\e935"}

.empty-content{
  margin:38px 0;
  text-align:center
}

.empty-content h2:after{
  display:block;
  font-size:84px;
  line-height:84px;
  margin:38px 0
}

.empty-content p{
  font-size:20px;
  margin-bottom:38px
}

.category-perex.empty-content{
  text-align:center
}


/* ===== Blog / article listing ===== */

.blog-wrapper .news-item{
  display:block;
  flex-basis:100%;
  margin-bottom:19px;
  padding:20px 0;
  position:relative;
  width:100%
}

@media (min-width:768px){
  .blog-wrapper .news-item{
    flex-basis:50%;
    margin-bottom:0;
    padding:20px;
    width:50%
  }

  .multiple-columns-body .blog-wrapper .news-item{
    flex-basis:100%;
    width:100%
  }

  .multiple-columns-body.mobile .blog-wrapper .news-item{
    flex-basis:50%;
    width:50%
  }
}

@media (min-width:1200px){
  .blog-wrapper .news-item,
  .multiple-columns-body .blog-wrapper .news-item,
  .multiple-columns-body.mobile .blog-wrapper .news-item{
    flex-basis:50%;
    width:50%
  }
}

.blog-wrapper .news-item .image,
.blog-wrapper .news-item .image img{
  width:100%
}

.blog-wrapper .news-item .title{
  margin-top:19px
}

.blog-wrapper .news-item .description{
  color:var(--colors-foregrounds-content-secondary);
  margin:10px 0 0
}

.blog-wrapper .news-item .read-article{
  display:none
}


/* ===== Classic visual values ===== */

.social-icons{
  text-align:center
}

.news-item-detail a{
  text-decoration:underline;
  text-underline-offset:.14em
}

.news-item-detail a:hover{
  text-decoration:underline;
  text-decoration-thickness:.08em
}

.news-item .text .title:hover{
  text-decoration:underline;
  text-decoration-thickness:.06em;
  text-underline-offset:.14em
}

.news-item-detail a.btn{
  text-decoration:none
}

.news-item time,
.news-item-detail time{
  color:var(--colors-foregrounds-content-tertiary)
}

.news-item-widget{
  border-bottom-color:var(--colors-foregrounds-borders-secondary)
}

.blank-mode .empty-content,
.empty-content{
  font-family:var(--template-headings-font),sans-serif
}

.empty-content h1{
  color:var(--color-primary)
}

.empty-content h2:after{
  color:var(--colors-foregrounds-borders-secondary)
}

.empty-content p{
  color:var(--colors-foregrounds-content-tertiary)
}

a.social-icon{
  background-color:var(--colors-surface-primary);
  border-color:var(--color-tertiary);
  color:var(--color-tertiary)
}

a.social-icon:focus-visible,
a.social-icon:hover{
  background-color:var(--color-tertiary);
  border-color:var(--color-tertiary-hover);
  color:var(--colors-foregrounds-content-inverted)
}

.news-item-widget time{
  color:var(--colors-foregrounds-content-tertiary)
}

@media (max-width:1199px){
  .blog-wrapper .news-item:nth-child(n/**/+3):last-child{
    margin-right:auto
  }
}

@media (min-width:1200px){
  .blog-wrapper .news-item{
    flex-basis:25%;
    width:25%
  }

  .blog-wrapper .news-item:nth-child(n/**/+6):last-child{
    margin-right:auto
  }
}


/* ===== Generic Classic banner primitives ===== */

.banner-content{
  height:100%;
  left:0;
  padding:25px;
  position:absolute;
  top:0;
  width:100%
}

.banner-content .banner-content-in{
  border-style:solid;
  border-width:1px;
  display:table;
  height:100%;
  width:100%
}

.banner-content .banner-content-in>div{
  display:table-cell;
  padding:25px;
  text-align:center;
  vertical-align:bottom
}

@media (min-width:768px){
  .banner-content .banner-content-in>div{
    text-align:left
  }

  .banner-content .banner-content-in>div>div{
    display:table;
    width:100%
  }

  .banner-content .banner-content-in>div>div span,
  .banner-content .banner-content-in>div>div strong{
    display:table-cell;
    vertical-align:middle
  }

  .banner-content .banner-content-in>div>div strong{
    font-size:24px;
    line-height:1.2;
    padding-left:20px;
    text-transform:uppercase
  }

  .banner-content .banner-content-in>div>div .btn{
    white-space:nowrap
  }
}

.banner-category a,
.banner-footer a,
.banner-wrapper a,
.banners-content a,
.footer-banner a{
  display:inline-block;
  position:relative
}

@media (min-width:768px){
  .banner-category a img,
  .banner-footer a img,
  .banner-wrapper a img,
  .banners-content a img,
  .footer-banner a img{
    transform:translateZ(0);
    transition:all .3s ease-out
  }

  @supports (-moz-appearance:none){
    .banner-category a img,
    .banner-footer a img,
    .banner-wrapper a img,
    .banners-content a img,
    .footer-banner a img{
      transform:none
    }
  }

  .banner-category a:hover img,
  .banner-footer a:hover img,
  .banner-wrapper a:hover img,
  .banners-content a:hover img,
  .footer-banner a:hover img{
    transform:scale(1.02)
  }
}

.banner-wrapper{
  margin-top:20px
}

@media (min-width:768px){
  .banner-wrapper{
    margin-top:0
  }

  .banner-wrapper+.banner-wrapper{
    margin-top:25px
  }
}

.banner-category,
.banner-footer{
  margin-bottom:20px
}

@media (min-width:1440px){
  .banner-category,
  .banner-footer{
    margin-bottom:40px
  }
}

.banner-category.banner-category-inline{
  margin-bottom:10px
}

.banners-footer{
  display:flex
}

.banner-footer{
  flex:1 1 33.33333%;
  text-align:center
}

.banner,
.banner-wrapper{
  position:relative
}

.extended-banner-texts{
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0
}

.extended-banner-link,
.extended-banner-text,
.extended-banner-title{
  background-color:hsla(0,0%,100%,.9);
  border:1px solid hsla(0,0%,100%,.97);
  box-shadow:0 5px 10px rgba(0,0,0,.16);
  padding:5px;
  position:absolute
}

.extended-banner-link:empty,
.extended-banner-text:empty,
.extended-banner-title:empty{
  display:none
}

.extended-banner-text,
.extended-banner-title{
  left:0
}

.extended-banner-title{
  font-size:20px;
  top:0
}

.extended-banner-text{
  bottom:0;
  max-width:80%
}

.extended-banner-link{
  height:29px;
  margin-top:-5px;
  right:0;
  top:50%
}

.banners-empty{
  display:none;
  visibility:hidden
}