/* Buscador instantáneo Droguemar (Typesense) — overlay a pantalla completa
 * Estética alineada con el tema de la web (Shoptimizer child):
 * Inter/Roboto, input píldora gris #eee, precios verdes, botones píldora. */
.dts-scope, .dts-overlay, .dts-scope-results {
  --dts-rojo: #C8102E;        /* acento de marca (resaltados, badges) */
  --dts-tinta: #111111;
  --dts-gris: #6b7280;
  --dts-gris-input: #eeeeee;  /* fondo del buscador del tema */
  --dts-linea: #e5e5e5;
  --dts-verde: #00a808;       /* verde de precios del tema */
  --dts-amarillo: #FFC400;
  --dts-blanco: #ffffff;
  font-family: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dts-tinta);
}

/* ---------- Caja de búsqueda en la página (disparador / fallback) ---------- */
.dts-scope { position: relative; max-width: 600px; margin: 0 auto; }
.dts-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dts-gris-input);
  border: 2px solid transparent;
  border-radius: 30px;
  padding: 0 22px;
  height: 54px;
  margin: 0;
  transition: border-color .15s, background .15s;
}
.dts-search-box:focus-within { border-color: var(--dts-tinta); background: var(--dts-blanco); }
.dts-lupa { color: var(--dts-gris); display: flex; align-items: center; }
.dts-search-box input[type="search"] {
  font-size: 17px;
  font-family: "Roboto", "Inter", sans-serif;
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--dts-tinta);
  caret-color: var(--dts-rojo);
  min-width: 0;
}
.dts-search-box input[type="search"]::-webkit-search-decoration,
.dts-search-box input[type="search"]::-webkit-search-cancel-button { display: none; }
.dts-esc {
  font-size: 11px;
  color: var(--dts-gris);
  border: 1px solid var(--dts-linea);
  background: var(--dts-blanco);
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Caja de cabecera propia (sustituta del shortcode [fibosearch]) */
.dts-header-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #eeeeee;
  border: 2px solid transparent;
  border-radius: 30px;
  height: 54px;
  padding: 0 20px;
  margin: 0;
  cursor: text;
  transition: border-color .15s, background .15s;
}
.dts-header-box:focus-within { border-color: #111; background: #fff; }
.dts-header-box .dts-lupa { color: #6b7280; display: flex; }
.dts-header-box input[type="search"] {
  flex: 1;
  font-size: 17px;
  font-family: "Roboto", "Inter", sans-serif;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #111;
  min-width: 0;
}
.dts-header-box input[type="search"]::-webkit-search-decoration,
.dts-header-box input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---------- Overlay a pantalla completa ---------- */
.dts-ov-open, .dts-ov-open body { overflow: hidden !important; }
.dts-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--dts-blanco);
  display: flex;
  flex-direction: column;
}
.dts-overlay[hidden] { display: none; }

.dts-ov-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--dts-linea);
  background: var(--dts-blanco);
  flex-shrink: 0;
}
.dts-ov-searchwrap {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dts-gris-input);
  border: 2px solid transparent;
  border-radius: 30px;
  height: 54px;
  padding: 0 24px;
}
.dts-ov-searchwrap:focus-within { border-color: var(--dts-tinta); background: var(--dts-blanco); }
.dts-ov-lupa { color: var(--dts-gris); display: flex; }
#dts-ov-input {
  flex: 1;
  font-size: 17px;
  font-family: "Roboto", "Inter", sans-serif;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--dts-tinta);
  caret-color: var(--dts-rojo);
  min-width: 0;
}
#dts-ov-input::-webkit-search-decoration,
#dts-ov-input::-webkit-search-cancel-button { display: none; }
.dts-ov-reset {
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--dts-tinta);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  display: flex;
  align-items: center;
}
.dts-ov-reset span {
  display: inline-flex;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--dts-tinta);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: 6px;
  text-decoration: none;
}
.dts-ov-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--dts-tinta);
  cursor: pointer;
  padding: 10px;
  font-family: inherit;
}
.dts-ov-close:hover { color: var(--dts-rojo); }

.dts-ov-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px clamp(16px, 4vw, 48px) 40px;
  background: var(--dts-blanco);
}
.dts-ov-count {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}
.dts-ov-count:empty { margin: 0; }

/* Estado vacío: tendencias / búsquedas recientes / productos vistos */
.dts-ov-extra[hidden] { display: none; }
.dts-ov-block { margin-bottom: 26px; }
.dts-ov-block h4, .dts-ov-block-sep {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--dts-tinta);
  margin: 0 0 14px;
}
.dts-ov-block-sep { margin: 6px 0 16px; }
.dts-ov-trending, .dts-ov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dts-ov-trend {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dts-tinta);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.dts-ov-trend:hover { border-color: var(--dts-tinta); background: #f7f7f7; color: var(--dts-tinta); }
.dts-ov-recent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dts-tinta);
  background: var(--dts-blanco);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.dts-ov-recent:hover { border-color: var(--dts-tinta); background: #f7f7f7; }
.dts-ov-recent svg { color: var(--dts-gris); flex-shrink: 0; }
.dts-ov-seen { margin-top: 4px; }
.dts-ov-count .dts-ov-ms { font-size: 12px; color: var(--dts-gris); font-weight: 400; }
.dts-ov-typo {
  font-size: 13px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  color: #6b5b1e;
  background: #FFF7E0;
  border-radius: 6px;
  padding: 5px 12px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}
.dts-ov-typo b { color: var(--dts-tinta); }

/* Filtros */
.dts-ov-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dts-ov-filter { position: relative; }
.dts-ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d1d5db;
  border-radius: 100px;
  background: var(--dts-blanco);
  font-size: 13px;
  font-weight: 600;
  color: var(--dts-tinta);
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
}
.dts-ov-chip:hover { border-color: var(--dts-tinta); }
.dts-ov-filter.dts-activo .dts-ov-chip { border-color: var(--dts-tinta); background: #f7f7f7; }
.dts-ov-chipcount {
  background: var(--dts-rojo);
  color: #fff;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.dts-ov-chev { font-size: 9px; color: var(--dts-gris); }
.dts-ov-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  min-width: 270px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--dts-blanco);
  border: 1px solid var(--dts-linea);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 8px;
}
.dts-ov-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  margin: 0;
}
.dts-ov-check:hover { background: #f5f5f5; }
.dts-ov-check input {
  accent-color: var(--dts-tinta);
  width: 16px; height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.dts-ov-checklabel { flex: 1; }
.dts-ov-checkcount { color: var(--dts-gris); font-size: 12px; }
.dts-ov-checkempty { padding: 10px; color: var(--dts-gris); font-size: 13px; }
.dts-ov-clear {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--dts-rojo);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* Rejilla de productos: 4 columnas x 8 filas */
.dts-ov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 18px;
}
@media (max-width: 1100px) { .dts-ov-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .dts-ov-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } }
.dts-ov-prod {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.dts-ov-img {
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.dts-ov-img img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .2s;
}
.dts-ov-prod:hover .dts-ov-img img { transform: scale(1.04); }
.dts-noimg { font-size: 54px; }
.dts-ov-info { display: flex; flex-direction: column; gap: 4px; }
.dts-ov-priceline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dts-ov-price { font-size: 15px; font-weight: 700; color: var(--dts-verde); }
.dts-ov-from { font-size: 11px; font-weight: 600; color: var(--dts-gris); }
.dts-ov-price.dts-sale { color: var(--dts-verde); }
.dts-ov-oldprice { font-size: 12.5px; color: var(--dts-gris); text-decoration: line-through; }
.dts-ov-badge {
  background: var(--dts-rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.dts-ov-name { font-size: 13px; line-height: 1.45; color: var(--dts-tinta); }
.dts-ov-name mark { background: none; color: var(--dts-rojo); font-weight: 700; padding: 0; }
.dts-ov-prod:hover .dts-ov-name { text-decoration: underline; }
.dts-ov-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.dts-ov-brand {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dts-gris);
}
.dts-stock-in { color: var(--dts-verde); font-weight: 600; }
.dts-stock-out { color: var(--dts-gris); font-weight: 600; }
.dts-stock-back { color: #a3720a; font-weight: 600; }
.dts-ov-empty {
  padding: 60px 10px;
  color: var(--dts-gris);
  font-size: 15px;
  text-align: center;
}

/* Paginación */
.dts-ov-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.dts-ov-page {
  border: 1px solid #d1d5db;
  border-radius: 100px;
  background: var(--dts-blanco);
  color: var(--dts-tinta);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  min-width: 40px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
}
.dts-ov-page:hover:not(:disabled) { border-color: var(--dts-tinta); }
.dts-ov-page.dts-actual {
  background: var(--dts-tinta);
  border-color: var(--dts-tinta);
  color: #fff;
}
.dts-ov-page:disabled { opacity: .4; cursor: default; }
.dts-ov-dots { color: var(--dts-gris); padding: 0 2px; }

/* Con la toma de control de cabecera activa, silenciamos la UI propia de
   FiboSearch (sugerencias/preloader); su caja queda solo como disparador. */
.dts-header-takeover .dgwt-wcas-suggestions-wrapp,
.dts-header-takeover .dgwt-wcas-preloader,
.dts-header-takeover .dgwt-wcas-details-wrapp { display: none !important; }

/* ---------- Páginas de categoría servidas por Typesense ---------- */
/* Con el takeover activo se ocultan el loop nativo, su ordenación/paginación
   y toda la UI de FiboFilters; quedan H1, descripción y slider de subcategorías. */
.dts-cat-takeover ul.products:not(.category-slider),
.dts-cat-takeover .woocommerce-result-count,
.dts-cat-takeover .woocommerce-ordering,
.dts-cat-takeover .woocommerce-pagination,
.dts-cat-takeover [class^="fibofilters"],
.dts-cat-takeover [class*=" fibofilters"],
.dts-cat-takeover aside:has(.fibofilters-skel) { display: none !important; }

.dts-scope-category { padding-top: 0; }
.dts-rp-count-line { font-size: 14px; color: var(--dts-gris); }
.dts-rp-count-line b { color: var(--dts-tinta); font-size: 16px; }

/* ---------- Página de resultados /busqueda/ ---------- */
.dts-scope-results { max-width: 1400px; margin: 0 auto; padding: 8px 0 40px; }
.dts-rp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dts-rp-title {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.dts-rp-count { font-size: 13px; color: var(--dts-gris); font-weight: 400; }
.dts-rp-sort { font-size: 13px; color: var(--dts-gris); display: flex; align-items: center; gap: 8px; }
.dts-rp-sort select {
  border: 1px solid #d1d5db;
  border-radius: 100px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--dts-tinta);
  background: var(--dts-blanco);
  cursor: pointer;
}
.dts-rp-typo { margin-bottom: 12px; min-height: 4px; }
.dts-rp-typo .dts-ov-typo { margin-left: 0; }

.dts-rp-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: start;
}
.dts-rp-side { position: sticky; top: 16px; }
.dts-rp-facet {
  border-bottom: 1px solid var(--dts-linea);
  padding: 14px 0 16px;
}
.dts-rp-facet:first-child { padding-top: 0; }
.dts-rp-facet h3 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}
.dts-rp-facet .dts-ov-check { padding: 6px 8px; margin: 0 -8px; }
.dts-rp-brandsearch {
  width: 100%;
  border: 1px solid #d1d5db !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  margin-bottom: 6px !important;
  background: var(--dts-blanco) !important;
  box-shadow: none !important;
}
.dts-rp-more {
  border: none;
  background: none;
  color: var(--dts-tinta);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0 0;
  font-family: inherit;
}
.dts-rp-price { display: flex; align-items: center; gap: 6px; }
.dts-rp-price input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: var(--dts-blanco) !important;
  box-shadow: none !important;
}
.dts-rp-price span { color: var(--dts-gris); }
.dts-rp-papply {
  border: 1px solid var(--dts-tinta);
  border-radius: 100px;
  background: var(--dts-tinta);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
}
.dts-rp-side .dts-ov-clear { margin-top: 14px; }

/* Botón de filtros (solo móvil) */
.dts-rp-filtersbtn {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 100px;
  background: var(--dts-blanco);
  font-size: 13px;
  font-weight: 600;
  color: var(--dts-tinta);
  padding: 10px 18px;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: inherit;
}
@media (max-width: 900px) {
  .dts-rp-layout { grid-template-columns: 1fr; gap: 16px; }
  .dts-rp-filtersbtn { display: inline-flex; }
  .dts-rp-side { display: none; position: static; }
  .dts-rp-side.dts-abierto {
    display: block;
    border: 1px solid var(--dts-linea);
    border-radius: 12px;
    padding: 14px 16px;
  }
}