/* Header háttér fekete, szöveg fehér */
.header {
  background-color: #000 !important;
  color: #fff !important;
  letter-spacing: 3px;
  font-weight: 200;
}
.header-middle {
  background-color: #000 !important;
  color: #fff !important;
  letter-spacing: 3px;
  font-weight: 200;
}

/* Ha linkek, menüelemek vannak a headerben */
.header a {
  color: #fff !important;
  letter-spacing: 3px;
  font-weight: 200;
}

/* Hover állapot - például világosszürke */
.header a:hover {
  color: #ccc !important;
  letter-spacing: 3px;
  font-weight: 200;
}

/* Ha a logó vagy ikonok miatt külön színt kell */
.header .icon, 
.header .menu > li > a {
  color: #fff !important;
  letter-spacing: 3px;
  font-weight: 200;
}

/* Ha a menüben van dropdown háttér is */
.header .dropdown-menu {
  background-color: #000 !important;
  color: #fff !important;
  letter-spacing: 3px;
  font-weight: 200;
}

table-collapse {
    /*border: 1px solid #ccc;*/
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }
  
  .table-collapse th,
  .table-collapse td {
    padding: .625em;
  }
  
  .table-collapse th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
  }
  
  @media screen and (max-width: 1024px) {
    
    .table-collapse thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
    .table-collapse tr {
      /*border-bottom: 3px solid #ddd;*/
      display: block;
      margin-bottom: .625em;
    }
    
    .table-collapse td {
      /*border-bottom: 1px solid #ddd;*/
      display: block;
      font-size: .8em;
      text-align: right;
    }
    
    .table-collapse td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    .table-collapse td:last-child {
      border-bottom: 0;
    }
  }


  


.shop-color-filter{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fill, minmax(4.2rem, 1fr));
  padding:0 5px
}
.shop-color-filter__item{
  display:flex;
  flex-direction:column;
  position:relative;
  text-align:center;
  font-size:0.75rem;
  margin: 5px;
}
.shop-color-filter__item--disabled .shop-color-filter__visual{
  opacity:.5
}
.shop-color-filter__item--disabled .shop-color-filter__label{
  color:rgb(var(--colour-neutral-5, 146, 146, 146));
  border-color:inherit
}
.shop-color-filter__item--disabled .shop-color-filter__input{
  cursor:default
}
.shop-color-filter__input{
  position:absolute;
  top:0;
  left:0;
  padding:0;
  margin:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  order:2
}
.shop-color-filter__visual{
  box-sizing:content-box;
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  pointer-events:none;
  background-size:cover;
  order:0;
  align-self:center;
  forced-color-adjust:none
}
.shop-color-filter__visual:after{
  box-sizing:content-box;
  -webkit-transition:border-color .2s ease-in-out;
  transition:border-color .2s ease-in-out;
  content:"";
  position:absolute;
  top:-3px;
  left:-3px;
  right:-3px;
  width:3rem;
  height:3rem;
  border-radius:50%;
  border:1px solid rgb(var(--colour-elevation-2, 255, 255, 255));
  display:inline-block;
  margin:auto
}
.shop-color-filter__input:checked+.shop-color-filter__visual:after{
  border-color:white;
  border-width:2px;
  background-position:center;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M16.56 7.5L18 8.96l-7.436 7.54L6 11.873l1.44-1.46 3.124 3.165L16.559 7.5z%27 fill=%27black%27/%3E%3C/svg%3E");
  top:-4px;
  left:-4px;
  right:-4px
}

.shop-color-filter__visual[data-id="fehér"]{
  box-sizing:border-box;
  background-color:white;
  border:1px solid grey;
}
.shop-color-filter__visual[data-id="terepmintás"]{
  box-sizing:border-box;
  background-position:center;
  background-repeat:no-repeat;
  background-image:url(/view/assets/images/camo.jpg) !important;
  border:1px solid grey;
}
.shop-color-filter__input:checked+.shop-color-filter__visual[data-id="fehér"]:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M16.56 7.5L18 8.96l-7.436 7.54L6 11.873l1.44-1.46 3.124 3.165L16.559 7.5z%27 fill=%27black%27/%3E%3C/svg%3E")
}

.shop-color-filter__input:checked+.shop-color-filter__visual:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M16.56 7.5L18 8.96l-7.436 7.54L6 11.873l1.44-1.46 3.124 3.165L16.559 7.5z%27 fill=%27white%27/%3E%3C/svg%3E")
}

.shop-color-filter__label{
  display:block;
  /*margin-top:10px;*/
  order:1
}
.shop-color-filter__label::first-letter{
  text-transform:uppercase
}
.shop-color-filter__label>span{
  display:block;
  margin:0;
  padding:0
}
.shop-color-filter__label>span:first-child{
  margin-bottom:.75rem
}

.error {
  color:red;
}

.placeholder::placeholder {
  color: lightgrey;
}

.placeholder::-ms-input-placeholder { /* Edge 12 -18 */
  color: lightgrey;
}