/* Buscador Spotlight - Distroil */
:root{
  --dp-sl-ink:#14181C; --dp-sl-mute:#6E7884; --dp-sl-line:#E4E8EC;
  --dp-sl-amber:#FFB400; --dp-sl-soft:#F4F6F8;
}
html.dp-sl-lock{overflow:hidden}

.dp-sl{position:fixed;inset:0;z-index:999999;display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px;font-family:'Open Sans',Arial,sans-serif}
.dp-sl[hidden]{display:none!important}
.dp-sl-fondo{position:absolute;inset:0;background:rgba(12,15,18,.55);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);animation:dpslFade .18s ease}
.dp-sl-caja{position:relative;width:100%;max-width:720px;background:#fff;border-radius:18px;
  box-shadow:0 30px 80px rgba(10,14,18,.35),0 2px 6px rgba(10,14,18,.12);overflow:hidden;
  display:flex;flex-direction:column;max-height:76vh;animation:dpslPop .2s cubic-bezier(.2,.8,.3,1)}
@keyframes dpslFade{from{opacity:0}to{opacity:1}}
@keyframes dpslPop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

/* barra de busqueda */
.dp-sl-barra{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--dp-sl-line)}
.dp-sl-lupa{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--dp-sl-ink);stroke-width:2;stroke-linecap:round}
.dp-sl-barra input{flex:1;border:0!important;outline:0!important;background:transparent!important;padding:0!important;
  font:400 20px/1.3 'Rubik','Open Sans',Arial,sans-serif;color:var(--dp-sl-ink)!important;box-shadow:none!important;
  -webkit-appearance:none;appearance:none}
.dp-sl-barra input::placeholder{color:#A7B0B9}
.dp-sl-barra input::-webkit-search-cancel-button{display:none}
.dp-sl-esc{border:1px solid var(--dp-sl-line);background:#fff;border-radius:7px;padding:5px 9px;cursor:pointer;
  font:700 10px/1 'Open Sans',Arial,sans-serif;letter-spacing:.1em;color:var(--dp-sl-mute);transition:.2s}
.dp-sl-esc:hover{border-color:var(--dp-sl-ink);color:var(--dp-sl-ink)}

/* cuerpo */
.dp-sl-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px;flex:1}
.dp-sl-tit{margin:14px 20px 8px!important;font:700 10.5px/1 'Open Sans',Arial,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#9AA4AE}
.dp-sl-lista{list-style:none!important;margin:0!important;padding:0 8px!important}
.dp-sl-lista li{margin:0!important;padding:0!important;list-style:none!important}

.dp-sl-item{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:12px;text-decoration:none!important;
  color:var(--dp-sl-ink)!important;transition:background .12s}
.dp-sl-item.on,.dp-sl-item:hover{background:var(--dp-sl-soft)}
.dp-sl-item.on{box-shadow:inset 3px 0 0 var(--dp-sl-amber)}
.dp-sl-img{flex:0 0 52px;width:52px;height:52px;border-radius:9px;background:#fff;border:1px solid var(--dp-sl-line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.dp-sl-img img{max-width:86%;max-height:86%;width:auto;height:auto;mix-blend-mode:multiply}
.dp-sl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dp-sl-nom{font:600 14.5px/1.25 'Open Sans',Arial,sans-serif;color:var(--dp-sl-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-sl-meta{font:400 12px/1.2 'Open Sans',Arial,sans-serif;color:var(--dp-sl-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-sl-sku{flex:0 0 auto;font:600 11px/1 'Open Sans',Arial,sans-serif;letter-spacing:.04em;color:#9AA4AE;
  background:var(--dp-sl-soft);border-radius:999px;padding:6px 10px;white-space:nowrap}
.dp-sl-item.on .dp-sl-sku{background:#fff}
.dp-sl-cuerpo mark{background:rgba(255,180,0,.32);color:inherit;border-radius:3px;padding:0 1px}

/* sugerencias */
.dp-sl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}
.dp-sl-chip{border:1px solid var(--dp-sl-line);background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;
  font:600 13px/1 'Open Sans',Arial,sans-serif;color:#39424A;transition:.2s}
.dp-sl-chip:hover{border-color:var(--dp-sl-ink);color:var(--dp-sl-ink);box-shadow:0 4px 14px rgba(20,24,28,.07)}
.dp-sl-ayuda{margin:18px 20px 6px!important;font:400 12.5px/1.5 'Open Sans',Arial,sans-serif;color:var(--dp-sl-mute)}
.dp-sl-ayuda em{font-style:normal;font-weight:600;color:var(--dp-sl-ink)}

.dp-sl-vacio{padding:38px 20px;text-align:center;font:400 15px/1.5 'Open Sans',Arial,sans-serif;color:var(--dp-sl-mute)}
.dp-sl-vacio b{color:var(--dp-sl-ink)}
.dp-sl-vacio small{display:block;margin-top:6px;font-size:12.5px}
.dp-sl-spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--dp-sl-line);border-top-color:var(--dp-sl-amber);animation:dpslGira .7s linear infinite}
@keyframes dpslGira{to{transform:rotate(360deg)}}

/* pie */
.dp-sl-pie{display:flex;align-items:center;gap:18px;padding:11px 20px;border-top:1px solid var(--dp-sl-line);
  background:#FCFDFE;font:400 11.5px/1 'Open Sans',Arial,sans-serif;color:#9AA4AE}
.dp-sl-pie b{font:700 10.5px/1 'Open Sans',Arial,sans-serif;color:#39424A;background:#fff;border:1px solid var(--dp-sl-line);
  border-radius:5px;padding:4px 6px;margin-right:5px}
.dp-sl-marca{margin-left:auto;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C3CAD1}

@media (max-width:700px){
  .dp-sl{padding:0}
  .dp-sl-caja{max-width:none;height:100%;max-height:none;border-radius:0}
  .dp-sl-barra{padding:14px 16px;gap:11px}
  .dp-sl-barra input{font-size:17px}
  .dp-sl-nom{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dp-sl-sku{display:none}
  .dp-sl-pie span:not(.dp-sl-marca){display:none}
  .dp-sl-marca{margin:0 auto}
}