.layout-buy{
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 30px;
  .nav-left { margin-top: 20px; }
  .title-cat { 
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #777;
    border-bottom: 1px solid #ccc;
    display: flex;
    gap: 20px;
    padding-bottom: 3px;
    cursor: pointer;
    justify-content: space-between;
    &.activ svg{ transform: rotate(90deg); }
    svg{
      width: 18px;
      margin-right: 3px;
      fill: #777;
      transition: transform .3s;
    }
  }
  .menu-sell {
    list-style: none;
    display: grid;
    padding-bottom: 10px;
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
    transition: height .4s, padding .3s, margin .3s;
    &.close {
      overflow: hidden;
      margin-top: 0;
      padding-bottom: 0;
      border: none;
      transition: height .4s, padding .3s, margin .3s;
    }
    &>li.activcat {
      box-shadow: 0 0 0 1px var(--color-primary);
      background: var(--color-primary);
      color: #fff;
      padding: 3px 7px;
      border-radius: 2px;
    }
    &>li a {
      display: block;
      padding: 3px 7px;
      transition: color .3s, box-shadow .1s;
      border-radius: 2px;
      &:hover {
        color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
      }
    }
  }
}



.top_kupie {
  display: grid;
  grid-template-columns: 2fr auto 1fr 1fr; 
  gap: 9px;
  background: var(--color-bg-1);
  padding: 20px;
  margin-bottom: 15px;
  .search { 
    background: #028ad4; color: #fff; font-weight: bold; 
    &:hover { background: #2766ad;}
  }
  .reset:hover { background: #fff;}
  label[class=icheck] {
    position: relative;
    cursor: pointer;
    display: grid;
    align-items: center;
    border: 1px solid var(--color-font-primary);
    border-radius: 3px;
    padding: 3px 12px;
    tranistion: color .3s, backgroudn .3s;
    &:hover{ background: #677585; color: #fff; }
    &:has([type="checkbox"]:checked) { background: var(--color-font-primary); color: #fff; }
    @media (max-width: 650px) { grid-column: span 4; justify-items: center; padding: 8px; }
    [type="checkbox"] {position: absolute; opacity: 0; left: 0; }
  }
  .checkmark { position: relative; }
  input[type=submit] {
    border: none;
    padding: 8px 12px;
    text-transform: uppercase;
    border-radius: 3px;
  }
  .itext { display: grid; grid-template-columns: auto 1fr; gap: 11px;  align-items: center;}
  input[type=text] { height: 29px; width: auto;}
}

.buton_dodaj_oferte {
  display: block;
  padding: 20px 0;
  font-size: 1.1em;
  background: #2766ad;
  border: 1px solid #2766ad;
  color: #fff;
  font-weight: bold;
  border-radius: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
  transition: color .3s, background .3s;
  &:hover{ background: #fff; color: #2766ad; }
}

.item-kup{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  @media(max-width: 768px){ grid-template-columns: 1fr; }
  .kupie_tresc{ 
     display: grid; 
     .content_tytul { font-size: 1.1em; padding: 18px 0 7px;}
  }
  .reklama_k { 
     display: grid;
     align-items: start;
     @media(max-width: 768px){ 
       justify-items: start; 
       border-top: 1px solid #b9c0c7;
       padding-top: 4px;
       width: 100%;
     }
     .kupie_title_reklama { text-align: center;}
     .obraz_kupie{
       img{
         width: 160px;
         object-fit: contain;
         border-radius: 4px;
         overflow: hidden;
       }
    }
  }
}

.buton_dodaj_oferte a{ color: #fff;}
.content_text {margin-bottom: 5px;}
@media (max-width: 850px) {
   .layout-buy{ grid-template-columns: 1fr;}
   .top_kupie{ grid-template-columns: repeat(4, 1fr);}
   .top_kupie .itext { grid-column: span 3;}
   .top_kupie .search {grid-column: span 2;}
   .top_kupie .reset {grid-column: span 2;}
}
@media (max-width: 650px) {
   .top_kupie {row-gap: 20px;}
   .top_kupie .itext { grid-column: span 4;}
}