.dkas{
  --dkas-accent:#0070e0;
  --dkas-text:#1d1d1f;
  --dkas-muted:#6e6e73;
  --dkas-border:#d2d2d7;
  --dkas-bg:#fff;
  --dkas-radius:14px;
  --dkas-shadow:0 18px 60px rgba(0,0,0,.14);
  position:relative;
  width:100%;
  max-width:920px;
  margin-inline:auto;
  color:var(--dkas-text);
  font-family:inherit;
  z-index:999;
}
.dkas__field{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border:1px solid var(--dkas-border);
  border-radius:var(--dkas-radius);
  background:var(--dkas-bg);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.dkas__field:focus-within{
  border-color:var(--dkas-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dkas-accent) 15%,transparent);
}
.dkas__icon{
  width:21px;
  height:21px;
  flex:0 0 auto;
  color:var(--dkas-muted);
}
.dkas__input{
  width:100%;
  min-width:0;
  height:50px;
  padding:0;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--dkas-text)!important;
  font:inherit;
  font-size:16px;
}
.dkas__input::-webkit-search-cancel-button{display:none}
.dkas__clear{
  display:none;
  border:0;
  padding:2px 4px;
  background:transparent;
  color:var(--dkas-muted);
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.dkas__clear.is-visible{display:block}
.dkas__loader{
  display:none;
  width:17px;
  height:17px;
  border:2px solid var(--dkas-border);
  border-top-color:var(--dkas-accent);
  border-radius:50%;
  animation:dkas-spin .7s linear infinite;
}
.dkas__loader.is-active{display:block}
@keyframes dkas-spin{to{transform:rotate(360deg)}}
.dkas__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  overflow:hidden;
  border:1px solid var(--dkas-border);
  border-radius:var(--dkas-radius);
  background:var(--dkas-bg);
  box-shadow:var(--dkas-shadow);
}
.dkas__results{
  max-height:min(68vh,600px);
  overflow:auto;
}
.dkas__item{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--dkas-border) 65%,transparent);
  color:var(--dkas-text)!important;
  text-decoration:none!important;
  transition:background .15s ease;
}
.dkas__item:hover,.dkas__item:focus{
  background:#f5f5f7;
}
.dkas__thumb{
  width:64px!important;
  height:64px!important;
  object-fit:contain;
  border-radius:10px;
  background:#f5f5f7;
}
.dkas__meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.dkas__title{
  overflow:hidden;
  color:var(--dkas-text);
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dkas__cats,.dkas__sku{
  margin-top:3px;
  overflow:hidden;
  color:var(--dkas-muted);
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dkas__price{
  padding-left:10px;
  color:var(--dkas-text);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.dkas__price del{opacity:.55;margin-right:5px}
.dkas__price ins{text-decoration:none}
.dkas__empty{
  padding:24px 18px;
  color:var(--dkas-muted);
  text-align:center;
}
.dkas__all{
  display:block;
  padding:14px 18px;
  color:var(--dkas-accent)!important;
  font-size:14px;
  font-weight:600;
  text-align:center;
  text-decoration:none!important;
}
.dkas__all:hover{background:#f5f5f7}
@media(max-width:767px){
  .dkas__field{min-height:48px;padding-inline:14px}
  .dkas__input{height:46px;font-size:16px}
  .dkas__panel{
    left:-6px;
    right:-6px;
    border-radius:12px;
  }
  .dkas__item{
    grid-template-columns:52px minmax(0,1fr);
    gap:11px;
    padding:10px 12px;
  }
  .dkas__thumb{width:52px!important;height:52px!important}
  .dkas__price{
    grid-column:2;
    padding-left:0;
    margin-top:-4px;
    font-size:13px;
  }
}