/**
 * inloff — Dropdown de búsqueda predictiva (2 columnas). Marca: navy #1B2540 +
 * cream + heart #C5A184. Scrollbar custom, skeletons, resaltado, full-screen móvil.
 */
:root {
  --iac-navy: var(--inloff-navy, #1B2540);
  --iac-heart: var(--inloff-heart, #C5A184);
  --iac-heart-d: #A9895F;
  --iac-cream: #FAF6EE;
  --iac-cream2: #F3EAD9;
  --iac-line: #ECE7DC;
  --iac-muted: #6E7385;
  --iac-subtle: #9AA0AE;
}

.inloff-ac-backdrop { position: fixed; inset: 0; background: rgba(20,26,44,.34); z-index: 99998; }
body.inloff-ac-lock { overflow: hidden; }

.inloff-ac {
  position: fixed;          /* anclado a body; JS fija top/left/width en desktop */
  z-index: 99999;           /* por encima del off-canvas de Flatsome (1042) en móvil */
  background: #fff;
  border: 1px solid var(--iac-line);
  border-radius: 16px;
  box-shadow: 0 22px 60px -22px rgba(27,37,64,.32), 0 2px 10px rgba(27,37,64,.06);
  overflow: hidden;
  animation: iac-in .17s cubic-bezier(.22,1,.36,1);
}
@keyframes iac-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .inloff-ac { animation: none; } }

/* Scrollbar custom (nada del navegador por defecto) */
.inloff-ac__main, .inloff-ac__aside, .inloff-ac__pad { scrollbar-width: thin; scrollbar-color: var(--iac-heart) transparent; }
.inloff-ac__main::-webkit-scrollbar, .inloff-ac__aside::-webkit-scrollbar, .inloff-ac__pad::-webkit-scrollbar { width: 8px; }
.inloff-ac__main::-webkit-scrollbar-thumb, .inloff-ac__aside::-webkit-scrollbar-thumb, .inloff-ac__pad::-webkit-scrollbar-thumb { background: var(--iac-cream2); border-radius: 99px; border: 2px solid #fff; }
.inloff-ac__main:hover::-webkit-scrollbar-thumb, .inloff-ac__aside:hover::-webkit-scrollbar-thumb { background: var(--iac-heart); }
.inloff-ac__main::-webkit-scrollbar-track, .inloff-ac__aside::-webkit-scrollbar-track { background: transparent; }

/* Rejilla 2 columnas */
.inloff-ac__grid { display: grid; grid-template-columns: 1.85fr 1fr; }
.inloff-ac__main { padding: 8px; max-height: min(66vh, 520px); overflow-y: auto; }
.inloff-ac__aside { padding: 10px 4px 12px; border-left: 1px solid var(--iac-line); background: #FCFAF5; max-height: min(66vh, 520px); overflow-y: auto; }

/* Secciones / labels */
.inloff-ac__sec { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.inloff-ac__lbl { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--iac-heart-d); font-weight: 700; }
.inloff-ac__clear { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px; color: var(--iac-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Chips */
.inloff-ac__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 14px 12px; }
.inloff-ac__chip { border: 1px solid var(--iac-cream2); background: var(--iac-cream); color: var(--iac-navy); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.inloff-ac__chip:hover { background: var(--iac-navy); border-color: var(--iac-navy); color: #fff; }

/* Items de producto */
.inloff-ac__list { display: flex; flex-direction: column; }
.inloff-ac__item { display: flex; align-items: center; gap: 13px; padding: 9px 11px; border-radius: 11px; text-decoration: none; position: relative; color: inherit; }
.inloff-ac__item:hover, .inloff-ac__item.is-active { background: var(--iac-cream); }
.inloff-ac__thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--iac-cream); border: 1px solid var(--iac-line); }
.inloff-ac__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inloff-ac__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.inloff-ac__title { font-size: 13.5px; font-weight: 600; color: var(--iac-navy); line-height: 1.28; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inloff-ac__title mark { background: rgba(197,161,132,.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.inloff-ac__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.inloff-ac__price { font-size: 12.5px; color: var(--iac-muted); }
.inloff-ac__price del { color: #B7B9C2; margin-right: 5px; }
.inloff-ac__price ins { color: var(--iac-navy); font-weight: 600; text-decoration: none; }
.inloff-ac__price .amount, .inloff-ac__price bdi { font-weight: 600; color: var(--iac-navy); }
.inloff-ac__tag { flex: 0 0 auto; background: var(--iac-heart); color: #40301c; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }

/* CTA ver todos */
.inloff-ac__all { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px; padding: 11px 14px; border-radius: 11px; background: var(--iac-cream); color: var(--iac-navy); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.inloff-ac__all:hover { background: var(--iac-navy); color: #fff; }
.inloff-ac__all svg { transition: transform .15s; }
.inloff-ac__all:hover svg { transform: translateX(3px); }

/* Categorías (aside) */
.inloff-ac__cats { display: flex; flex-direction: column; padding: 0 8px 6px; }
.inloff-ac__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; text-decoration: none; color: var(--iac-navy); font-size: 13px; font-weight: 500; }
.inloff-ac__cat:hover { background: #fff; }
.inloff-ac__cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inloff-ac__cat-n { flex: 0 0 auto; font-size: 11px; color: var(--iac-subtle); background: #fff; border: 1px solid var(--iac-line); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }

/* Estado vacío / sin resultados */
.inloff-ac__pad { padding: 4px 4px 10px; max-height: min(66vh, 520px); overflow-y: auto; }
.inloff-ac__none-t { margin: 14px 16px 4px; font-size: 14px; color: var(--iac-navy); }
.inloff-ac__none-s { margin: 0 16px 12px; font-size: 12.5px; color: var(--iac-muted); }

/* Skeletons */
.inloff-ac__sk { display: flex; align-items: center; gap: 13px; padding: 11px; }
.inloff-ac__sk-thumb, .inloff-ac__sk-lines span { background: linear-gradient(90deg, #F1ECE2 25%, #F8F4EC 37%, #F1ECE2 63%); background-size: 400% 100%; animation: iac-sh 1.3s ease infinite; border-radius: 8px; }
.inloff-ac__sk-thumb { flex: 0 0 auto; width: 52px; height: 52px; }
.inloff-ac__sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.inloff-ac__sk-lines span { height: 11px; }
.inloff-ac__sk-lines span:first-child { width: 78%; } .inloff-ac__sk-lines span:last-child { width: 40%; }
@keyframes iac-sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .inloff-ac__sk-thumb, .inloff-ac__sk-lines span { animation: none; } }

/* ---------- MÓVIL: full-screen ---------- */
@media screen and (max-width: 849px) {
  .inloff-ac {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: var(--iac-top, 108px) !important;
    width: 100% !important; max-width: 100% !important;
    transform: none !important;
    border-radius: 18px 18px 0 0;
    border: 0; border-top: 1px solid var(--iac-line);
    box-shadow: 0 -8px 40px -12px rgba(27,37,64,.3);
    animation: iac-in-m .2s cubic-bezier(.22,1,.36,1);
  }
  @keyframes iac-in-m { from { opacity: .6; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .inloff-ac__grid { grid-template-columns: 1fr; }
  .inloff-ac__main { max-height: none; }
  .inloff-ac__aside { border-left: 0; border-top: 1px solid var(--iac-line); background: #FCFAF5; max-height: none; }
  .inloff-ac__title { -webkit-line-clamp: 3; }
}