/*
 * IONTMAX Theme — Classic catalog / sidebar & filters
 * Blank-only compatibility layer.
 * Source: captured Shoptet Classic runtime checkpoint 2026-08-01.
 *
 * Step 5A contains only structural Classic rules required by the
 * category sidebar and filtering UI when native Shoptet CSS is disabled.
 * IONTMAX category design, subcategory chips, listing cards and pagination
 * remain owned by their dedicated all-mode modules.
 */

/* ===== Category sidebar shell ===== */

@media (max-width:767px){
  .sidebar.sidebar-left .sidebar-inner{display:none}
  .sidebar.sidebar-left .sidebar-inner.visible{display:block}
}

@media (min-width:768px){
  .sidebar-indented .content{display:flex;flex-wrap:wrap}
  .sidebar-indented .content .category-top{width:100%}
  .sidebar-indented .content .sidebar{margin-left:-20px;margin-right:20px}
  .sidebar-indented .category-content-wrapper{width:calc(100% - 295px)}
}

@media (min-width:992px){
  .sidebar-indented .category-content-wrapper{width:calc(100% - 295px)}
}

.sidebar .categories{margin-left:-20px;margin-right:-20px}
.box.box-sm.box-filters{padding:19px 0}

/* ===== Filter visibility / relocation ===== */

@media (max-width:767px){
  .filters{display:none;margin-bottom:19px}
  .filters.visible{display:block}
}

@media (min-width:768px){
  #content .filters,
  #footer .filters{display:none;margin-bottom:19px}

  #content .filters.visible,
  #footer .filters.visible{display:block}

  #content .sidebar .filters{display:block;margin-bottom:0}
}

#content .sidebar .btn.unveil-button{display:none}

#content .filters-wrapper>div:first-of-type,
#footer .filters-wrapper>div:first-of-type{
  margin-bottom:19px;
  text-align:center
}

.content .filter-section-button{display:none}
.content .sidebar .filter-section-button{display:block}

/* ===== Filter sections ===== */

.filter-sections{
  background-color:var(--colors-surface-secondary);
  padding-left:10px;
  padding-right:10px
}

.filter-section{
  border-bottom-color:transparent;
  border-bottom-style:none;
  border-bottom-width:0;
  padding-bottom:10px;
  padding-top:10px;
  text-align:left
}

.filter-section+.filter-section{
  border-top-color:var(--colors-foregrounds-borders-secondary);
  border-top-style:solid;
  border-top-width:1px
}

#category-filter-hover .filter-section:first-child{
  border-top-color:var(--colors-foregrounds-borders-secondary);
  border-top-style:solid;
  border-top-width:1px
}

#footer .filter-section{padding-left:13px;padding-right:13px}
.filter-section h4{margin-top:0}
.filter-section h4 .show-tooltip{margin-left:5px}
.filter-section label.active{font-weight:700}

:where(body.ums_page_element_headings--on) .sidebar :where(.filter-section) .h4,
:where(body.ums_page_element_headings--on) .sidebar :where(.filter-section) h4{
  font-size:14px;
  font-weight:600;
  text-transform:uppercase
}

.filter-section.filter-section-button,
.filter-section:last-child{border-top-style:none}

.filter-section.filter-section-button{
  padding-top:0;
  text-align:center
}

#clear-filters,
.filter-section-button{text-transform:uppercase}

#clear-filters{
  clear:both;
  margin-bottom:0;
  text-align:center
}

#clear-filters .close-after{
  padding-bottom:10px;
  padding-top:5px
}

#clear-filters a{color:var(--colors-state-danger,#d63500)}
.filter-total-count{color:var(--colors-foregrounds-content-secondary)}

/* ===== Filter option columns ===== */

#content .filter-section fieldset div.advanced-filters-wrapper,
#footer .filter-section fieldset div.advanced-filters-wrapper{
  margin-bottom:-5px;
  width:100%
}

#content .filter-section fieldset div.advanced-filters-wrapper>div,
#footer .filter-section fieldset div.advanced-filters-wrapper>div{
  float:none;
  padding:0 5px 5px 0;
  width:auto
}

@media (min-width:480px){
  #content .filter-section:after,
  #content .filter-section:before,
  #footer .filter-section:after,
  #footer .filter-section:before{
    content:" ";
    display:table
  }

  #content .filter-section:after,
  #footer .filter-section:after{clear:both}

  #content .filter-section fieldset div,
  #footer .filter-section fieldset div{
    float:left;
    text-align:left;
    width:50%
  }

  #content .filter-section fieldset div:nth-child(odd),
  #footer .filter-section fieldset div:nth-child(odd){clear:left}

  #content .filter-section fieldset div label,
  #footer .filter-section fieldset div label{
    padding-bottom:5px;
    padding-top:5px
  }

  #content .filter-section.filter-section-parametric fieldset div:nth-child(odd),
  #footer .filter-section.filter-section-parametric fieldset div:nth-child(odd){clear:none}

  #content .filter-section.filter-section-parametric fieldset div:nth-child(2n),
  #footer .filter-section.filter-section-parametric fieldset div:nth-child(2n){clear:left}
}

@media (min-width:1200px){
  #content .filter-section:after,
  #content .filter-section:before,
  #footer .filter-section:after,
  #footer .filter-section:before{
    content:" ";
    display:table
  }

  #content .filter-section:after,
  #footer .filter-section:after{clear:both}

  #content .filter-section fieldset div,
  #footer .filter-section fieldset div{
    text-align:left;
    width:25%
  }

  #content .filter-section fieldset div:nth-child(odd),
  #footer .filter-section fieldset div:nth-child(odd){clear:none}

  #content .filter-section fieldset div:nth-child(4n+1),
  #footer .filter-section fieldset div:nth-child(4n+1){clear:both}

  #content .filter-section fieldset div label,
  #footer .filter-section fieldset div label{
    padding-bottom:0;
    padding-top:0
  }

  #content .filter-section.filter-section-parametric fieldset div:nth-child(2n),
  #content .filter-section.filter-section-parametric fieldset div:nth-child(4n+1),
  #footer .filter-section.filter-section-parametric fieldset div:nth-child(2n),
  #footer .filter-section.filter-section-parametric fieldset div:nth-child(4n+1){clear:none}

  #content .filter-section.filter-section-parametric fieldset div:nth-child(4n+2),
  #footer .filter-section.filter-section-parametric fieldset div:nth-child(4n+2){clear:both}
}

#content .sidebar .filter-section fieldset div{width:100%}

/* ===== Advanced visual parameters ===== */

.advanced-filters-wrapper{
  display:flex;
  flex-wrap:wrap
}

.advanced-filters-wrapper>div{
  flex:0 0 auto;
  padding-bottom:20px;
  width:25%
}

.advanced-filters-wrapper>div .advanced-parameter{margin:0}

.advanced-parameter{
  display:inline-block;
  height:40px;
  margin:0 12px 12px 0;
  padding:0;
  vertical-align:middle;
  width:40px
}

.advanced-parameter-inner{
  align-items:center;
  border:1px solid #fcfcfc;
  border-radius:50%;
  box-shadow:0 0 1px rgba(0,0,0,.5);
  display:flex;
  height:40px;
  position:relative;
  width:40px
}

.advanced-parameter-inner img{
  border-radius:50%;
  max-height:100%;
  min-width:1px;
  width:100%
}

.advanced-parameter-inner:before{
  content:"";
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%
}

.advanced-parameter-inner.yes-before:before,
.disabled .advanced-parameter-inner:before{
  background-position:50%;
  background-repeat:no-repeat
}

.advanced-parameter-inner.yes-before:before{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODk3MS42IiBoZWlnaHQ9IjE0MzM2LjMiIHZpZXdCb3g9IjAgMCAxNy43ODYgMTMuNDQiPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iZ3JheSIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0ibTE1IC40LTggOC00LTQtMi40IDJMNi43IDEzIDE3LjQgMi43eiIvPjwvc3ZnPg==);
  background-size:28px
}

.disabled .advanced-parameter-inner,
.unavailable-option-wrapper .advanced-parameter-inner{
  cursor:not-allowed;
  opacity:.25
}

.disabled .advanced-parameter-inner:before{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS45OTciIGhlaWdodD0iMjAuMDcyIiB2aWV3Qm94PSIwIDAgMC4wMTkgMC4wMTkiPjxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iZ3JheSIgc3Ryb2tlLXdpZHRoPSIuMDAxIiBkPSJNLjAxNSAwIC4wMDkuMDA3LjAwNC4wMDEgMCAuMDA0bC4wMDUuMDA1LS4wMDUuMDA2LjAwMy4wMDMuMDA1LS4wMDUuMDA2LjAwNS4wMDMtLjAwM0wuMDEyLjAwOS4wMTguMDA0eiIgY29sb3I9IiMwMDAiIG92ZXJmbG93PSJ2aXNpYmxlIiBzdHlsZT0iaXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsIi8+PC9zdmc+);
  background-size:20px
}

.advanced-parameter-inner.yes-before{
  border-color:var(--colors-state-success);
  color:var(--colors-state-success)
}

.variant-not-chosen .variant-list:not(.variant-selected) .advanced-parameter-inner{
  border:1px solid var(--colors-state-danger,#d63500);
  box-shadow:0 0 3px var(--colors-state-danger,#d63500)
}

.filter-count{
  background-color:var(--colors-surface-white);
  border-radius:8px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  line-height:1;
  margin-left:1ex;
  padding:1px .75em
}

/* ===== Price slider / jQuery UI structural minimum ===== */

.ui-slider{
  position:relative;
  text-align:left
}

.ui-slider .ui-slider-handle{
  cursor:default;
  height:1.2em;
  position:absolute;
  touch-action:none;
  width:1.2em;
  z-index:2
}

.ui-slider .ui-slider-range{
  background-position:0 0;
  border:0;
  display:block;
  font-size:.7em;
  position:absolute;
  z-index:1
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}

.ui-slider-horizontal{height:6px}

.ui-slider-horizontal .ui-slider-handle,
.ui-slider-horizontal .ui-slider-range{z-index:2}

.ui-slider-horizontal .ui-slider-handle{
  border-radius:50%;
  cursor:pointer;
  height:20px;
  margin-left:-10px;
  top:-7px;
  width:20px
}

.ui-slider-horizontal .ui-slider-handle:after{
  background:#fff;
  border-radius:50%;
  content:"";
  height:10px;
  left:5px;
  min-height:10px;
  min-width:10px;
  position:absolute;
  top:5px;
  width:10px
}

.ui-slider-horizontal .ui-slider-range{
  height:100%;
  top:0
}

.ui-slider-horizontal .ui-slider-range-min{left:0}
.ui-slider-horizontal .ui-slider-range-max{right:0}

.slider-wrapper{
  margin:0 auto;
  max-width:650px;
  padding:10px 0 19px
}

.slider-header{padding-bottom:10px}
.slider-header:after,.slider-header:before{content:" ";display:table}
.slider-header:after{clear:both}

.slider-content{
  height:6px;
  margin-bottom:20px;
  padding:0 10px;
  position:relative
}

.slider-content,
.ui-slider{
  background-color:var(--colors-foregrounds-borders-secondary);
  border-color:inherit
}

.slider-content,
.ui-slider-range{
  border-style:none;
  border-width:0
}

.ui-slider-handle{color:var(--colors-surface-white)}

.ui-slider .ui-slider-range,
.ui-slider-handle,
.ui-slider-handle:hover{
  background-color:var(--color-primary)
}

.ui-slider .ui-slider-range{border-color:inherit}
.ui-slider-horizontal .ui-slider-handle:after{border-top-color:var(--color-primary)}


/* ===== Product listing structural fallback before IONTMAX enhancement ===== */

/*
 * These rules intentionally preserve only the structural Classic behaviour
 * needed before product-cards-runtime adds the IONTMAX card classes.
 * Visual ownership remains in Product cards styles.
 */

.products-block{
  align-items:stretch;
  display:flex;
  flex-wrap:wrap
}

.products-block>div{
  border-top-style:solid;
  border-top-width:1px;
  flex:0 0 auto;
  width:100%
}

.products-block>div:first-child{
  border-top-style:none
}

.products-block .p{
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative
}

.products-block .p a.image{
  display:block;
  position:relative
}

.products-block .p a.image:after{
  clear:both;
  content:"";
  display:block
}

.products-block .p .flags-default{
  left:0;
  position:absolute;
  top:0
}

.products-block .p .image{
  display:block
}

.products-block .image,
.products-block .name{
  margin-bottom:10px;
  text-align:center
}

.products-block .p-bottom>div{
  align-items:flex-end;
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.products-block .p-bottom>div:not(:has(:where(.price-additional))) .price-measure{
  margin-top:0
}

.products-block .p-bottom .p-tools,
.products-block .p-bottom .prices{
  flex-basis:calc(50% - 5px)
}

.products-block .p-bottom .prices{
  flex-grow:1;
  flex-shrink:0;
  text-align:left
}

.products-block .p-bottom .price-additional,
.products-block .p-bottom .price-measure{
  font-size:13px
}

.products-block .p-bottom .p-tools{
  flex-grow:0;
  flex-shrink:1;
  text-align:right
}

.products-block .p-bottom .p-desc{
  flex:0 0 100%;
  margin:19px 0 0;
  max-height:76px;
  overflow:hidden
}

.products-block .ratings-wrapper{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  min-height:48px;
  padding-bottom:10px
}

.products-block .ratings-wrapper .availability{
  flex:1 1 60%;
  text-align:right
}

.products-block .ratings-wrapper .stars-wrapper{
  flex:1 1 40%
}

.products-block .p-code{
  background-color:var(--colors-surface-white,#fff);
  position:absolute;
  right:0;
  top:0
}

@media (min-width:480px){
  .products-block>div{
    border-right-style:solid;
    border-right-width:1px;
    flex:0 0 auto;
    width:50%
  }

  .products-block>div:first-child,
  .products-block>div:nth-child(2){
    border-top-style:none
  }

  .products-block>div:nth-child(2n){
    border-right-style:none
  }
}

@media (min-width:768px){
  .products-block>div{
    padding:20px
  }

  .products-block .name{
    text-align:left
  }
}

@media (min-width:992px){
  .products-block.products-alternative>div,
  .products-block.products-related>div{
    border-top-style:none;
    flex:0 0 auto;
    width:25%
  }

  .products-block.products-alternative>div:nth-child(2n),
  .products-block.products-related>div:nth-child(2n){
    border-right-style:solid
  }

  .products-block.products-alternative>div:nth-child(3),
  .products-block.products-alternative>div:nth-child(4),
  .products-block.products-related>div:nth-child(3),
  .products-block.products-related>div:nth-child(4){
    border-top-style:none
  }

  .products-block.products-alternative>div:nth-child(3n),
  .products-block.products-related>div:nth-child(3n){
    border-right-style:solid
  }

  .products-block.products-alternative>div:last-child,
  .products-block.products-alternative>div:nth-child(3n):last-child,
  .products-block.products-alternative>div:nth-child(4n),
  .products-block.products-related>div:last-child,
  .products-block.products-related>div:nth-child(3n):last-child,
  .products-block.products-related>div:nth-child(4n){
    border-right-style:none
  }
}

@media (min-width:1200px){
  .products-block>div{
    flex:0 0 auto;
    width:33.333333%
  }

  .products-block>div:nth-child(3){
    border-top-style:none
  }

  .products-block>div:nth-child(2n){
    border-right-style:solid
  }

  .products-block>div:last-child,
  .products-block>div:nth-child(3n){
    border-right-style:none
  }

  .products-block.products-alternative>div,
  .products-block.products-related>div{
    border-top-style:none;
    flex:0 0 auto;
    width:25%
  }
}

@media (min-width:1440px){
  .columns-4 .products-block>div{
    flex:0 0 auto;
    width:25%
  }

  .columns-4 .products-block>div:nth-child(2n){
    border-right-style:solid
  }

  .columns-4 .products-block>div:nth-child(3),
  .columns-4 .products-block>div:nth-child(4){
    border-top-style:none
  }

  .columns-4 .products-block>div:nth-child(3n){
    border-right-style:solid
  }

  .columns-4 .products-block>div:nth-child(3n):last-child,
  .columns-4 .products-block>div:nth-child(4n){
    border-right-style:none
  }
}

@media (min-width:321px) and (max-width:767px){
  .columns-mobile-2 .products-block>div{
    width:50%
  }

  .columns-mobile-2 .products-block>div:nth-child(2){
    border-top-style:none
  }

  .columns-mobile-2 .products-block>div .p .p-code{
    display:none
  }

  .columns-mobile-2 .products-block>div .p .name{
    display:-webkit-box;
    overflow:hidden;
    text-align:left;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2
  }

  .columns-mobile-2 .products-block>div .p a.image{
    margin-bottom:19px
  }

  .columns-mobile-2 .products-block>div .ratings-wrapper{
    justify-content:flex-start;
    min-height:auto
  }

  .columns-mobile-2 .products-block>div .ratings-wrapper .stars-placeholder{
    margin-bottom:5px;
    width:100%
  }

  .columns-mobile-2 .products-block>div .ratings-wrapper .stars-wrapper{
    flex:0;
    margin-bottom:5px
  }

  .columns-mobile-2 .products-block>div .ratings-wrapper .availability{
    flex:1 1 100%;
    margin-bottom:5px;
    text-align:initial
  }

  .columns-mobile-2 .products-block>div .prices{
    flex:1 1 100%;
    margin-bottom:5px
  }

  .columns-mobile-2 .products-block>div .p-bottom>div{
    justify-content:flex-start
  }

  .columns-mobile-2 .products-block>div .p-bottom .p-tools{
    text-align:left
  }

  .columns-mobile-2 .products-block>div .p-bottom .p-desc{
    max-height:76px
  }
}

@media (max-width:1200px) and (min-width:480px){
  .products-block.products-additional .p-bottom .p-tools{
    flex-basis:100%;
    margin-top:5px;
    text-align:left
  }
}

/* Structural flag positioning only; visual flag design stays in IONTMAX cards. */

.flags-extra{
  bottom:0;
  display:flex;
  position:absolute;
  right:0
}

.flag{
  clear:left;
  display:inline-block;
  float:left;
  max-width:9em
}