@charset "UTF-8";
/* ============================================================
   TANTO LAMPS \00b7 Buscador
   Capa a pantalla completa (aspecto Terria) con resultados en vivo.
   ============================================================ */

.tanto-busc {
  --ink: #1c1c1c;
  --ink-soft: #6a6a6a;
  --line: #e5e5e5;
  --ease: cubic-bezier(0, .14, .19, 1);
  position: fixed; inset: 0; z-index: 90;
  background: #fff; color: var(--ink);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.tanto-busc[hidden] { display: none; }
.tanto-busc.is-abierto { opacity: 1; visibility: visible; }

/* ---- Cerrar ---- */
.tanto-busc__cerrar {
  position: fixed; top: 15px; right: 13px; z-index: 9;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s, transform .3s var(--ease);
}
.tanto-busc.is-abierto .tanto-busc__cerrar { opacity: 1; visibility: visible; }
.tanto-busc__cerrar:hover { transform: rotate(90deg); }

/* ---- Contenedor ---- */
.tanto-busc__in {
  min-height: 100%;
  padding: clamp(90px, 16vh, 160px) 20px 60px;
  display: flex; flex-direction: column; align-items: center;
}

/* ---- Campo: subrayado que crece, texto que aparece, flecha que entra ---- */

/* El formulario es un elemento flex: sin anchura explícita se encogería a
   su contenido y los porcentajes del campo se calcularían sobre esa
   anchura encogida en lugar de sobre la de la capa. */
.tanto-busc__form { width: 100%; }

/* Campo y resultados comparten eje y anchura: si el bloque de resultados
   fuera más ancho, sus títulos arrancarían fuera del eje del campo. */
.tanto-busc                { --ancho: min(90%, 400px); }
@media (min-width: 768px)  { .tanto-busc { --ancho: min(78%, 620px); } }
@media (min-width: 1200px) { .tanto-busc { --ancho: min(60%, 720px); } }

.tanto-busc__campo {
  position: relative; display: block;
  width: var(--ancho); margin: 0 auto;
}

/* El filete inferior: 0 → 100% al abrir. */
.tanto-busc__campo::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: currentColor;
  transition: width 1s var(--ease), background-color .5s var(--ease);
}
.tanto-busc.is-abierto .tanto-busc__campo::after { width: 100%; }

.tanto-busc__campo input[type="search"] {
  width: 100%; margin: 0; padding: .5em 44px .5em 0;
  border: 0; border-radius: 0; background: transparent;
  font-family: "Bodoni Moda", Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 3.4vw, 33px); line-height: 1.3;
  color: transparent; /* el texto se revela al abrir */
  transition: color 2s; transition-delay: .2s;
}
.tanto-busc.is-abierto .tanto-busc__campo input[type="search"] { color: currentColor; }
/*
 * EL FOCO, QUE AQUÍ SE PERDÍA.
 *
 * Estaba solo `outline: none`, sin nada en su lugar. Quien navega con el
 * tabulador —porque no puede usar el ratón, o por costumbre— llegaba al campo
 * de búsqueda y no veía dónde estaba: escribía a ciegas.
 *
 * Se quita el cerco del navegador, que aquí descuadra el diseño, y se sustituye
 * por una línea bajo el campo, del grosor suficiente para verse. Va en
 * `:focus-visible` y no en `:focus` para que solo aparezca cuando se llega con
 * el teclado, no al hacer clic con el ratón.
 */
.tanto-busc__campo input[type="search"]:focus { outline: none; }
.tanto-busc__campo input[type="search"]:focus-visible {
  outline: none;
  box-shadow: 0 3px 0 0 currentColor;
}
.tanto-busc__campo input::placeholder { color: currentColor; opacity: .38; }
/* La cruz nativa de Chrome/Edge desalinea el campo; usamos la nuestra. */
.tanto-busc__campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* La flecha entra desde la izquierda, con retardo. */
.tanto-busc__ir {
  position: absolute; right: 0; top: 0; height: 100%; width: 44px;
  padding: 0; border: 0; background: transparent; color: currentColor;
  cursor: pointer; display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; visibility: hidden; transform: translate3d(-30px, 0, 0);
  transition: opacity .9s, visibility .9s, transform .6s var(--ease);
  transition-delay: .6s;
}
.tanto-busc.is-abierto .tanto-busc__ir { opacity: 1; visibility: visible; transform: none; }
.tanto-busc__ir:hover { color: var(--tanto-ember, #c0401f); }

/* ---- Resultados ---- */
.tanto-busc__res {
  width: var(--ancho); margin: clamp(38px, 6vh, 64px) auto 0;
  font-family: "Instrument Sans", sans-serif;
  opacity: 0; transition: opacity .4s ease;
}
.tanto-busc__res.is-visible { opacity: 1; }

.tanto-busc__tit {
  font-family: "Instrument Sans", sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.tanto-busc__tit + .tanto-busc__tit { margin-top: 44px; }
.tanto-busc__grupo + .tanto-busc__grupo { margin-top: 44px; }

/* Rejilla de producto */
.tanto-busc__prods {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 26px;
}
@media (max-width: 767px) { .tanto-busc__prods { grid-template-columns: 1fr; gap: 14px; } }

.tanto-busc__prod a {
  display: flex; align-items: center; gap: 16px;
  color: var(--ink); text-decoration: none;
  padding: 8px; border-radius: 2px;
  transition: background .2s ease;
}
.tanto-busc__prod a:hover,
.tanto-busc__prod.is-activo a { background: #faf9f7; }

.tanto-busc__thumb {
  flex: 0 0 64px; width: 64px; height: 84px;
  object-fit: cover; background: #f4f2ef;
}
.tanto-busc__nombre {
  display: block; font-size: .92rem; font-weight: 500; line-height: 1.35;
  margin-bottom: 4px;
}
.tanto-busc__precio { display: block; font-size: .85rem; color: var(--ink-soft); }
.tanto-busc__precio del { opacity: .55; margin-right: 6px; }
.tanto-busc__precio ins { text-decoration: none; }

/* Lista de páginas */
.tanto-busc__pags { list-style: none; margin: 0; padding: 0; }
.tanto-busc__pags li + li { border-top: 1px solid var(--line); }
.tanto-busc__pags a {
  display: block; padding: 13px 8px; color: var(--ink);
  text-decoration: none; font-size: .92rem;
  transition: background .2s ease;
}
.tanto-busc__pags a:hover,
.tanto-busc__pags li.is-activo a { background: #faf9f7; }

/* Pie de resultados */
.tanto-busc__todos {
  display: inline-block; margin-top: 34px;
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid var(--ink);
  transition: opacity .2s ease;
}
.tanto-busc__todos:hover { opacity: .55; }

.tanto-busc__vacio {
  text-align: center; color: var(--ink-soft); font-size: .95rem;
  padding: 24px 0;
}
.tanto-busc__vacio strong { color: var(--ink); font-weight: 500; }

/* Mientras se consulta, se atenúa lo que ya había */
.tanto-busc__res.is-cargando { opacity: .45; }

/* Bloquea el desplazamiento del fondo con el buscador abierto */
body.tanto-busc-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tanto-busc,
  .tanto-busc__cerrar,
  .tanto-busc__campo::after,
  .tanto-busc__campo input[type="search"],
  .tanto-busc__ir,
  .tanto-busc__res { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ============================================================
   Página de resultados (/?s=…)
   ============================================================ */
.tanto-busq {
  --ink: #1c1c1c; --ink-soft: #6a6a6a; --line: #e5e5e5;
  max-width: 1400px; margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 70px) clamp(70px, 9vw, 120px);
  font-family: "Instrument Sans", sans-serif; color: var(--ink);
}
.tanto-busq__cab { text-align: center; margin-bottom: clamp(34px, 5vw, 60px); }
.tanto-busq__titulo {
  font-family: "Bodoni Moda", Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin: 0 0 10px;
}
.tanto-busq__cuenta { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.tanto-busq__seccion + .tanto-busq__seccion { margin-top: clamp(48px, 6vw, 80px); }
.tanto-busq__subtit {
  font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Reutiliza la tarjeta del listado de tienda */
.tanto-busq ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 34px);
}
.tanto-busq ul.products::before,
.tanto-busq ul.products::after { content: none !important; }
@media (max-width: 1100px) { .tanto-busq ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .tanto-busq ul.products { grid-template-columns: repeat(2, 1fr); } }

.tanto-busq__pags { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.tanto-busq__pags li { border-bottom: 1px solid var(--line); }
.tanto-busq__pags a {
  display: block; padding: 18px 0; color: var(--ink); text-decoration: none;
  font-size: 1rem; transition: opacity .2s ease;
}
.tanto-busq__pags a:hover { opacity: .55; }
.tanto-busq__pags p { margin: 0 0 18px; font-size: .9rem; color: var(--ink-soft); }

/* Sin resultados */
.tanto-busq__nada { text-align: center; padding: clamp(30px, 6vw, 60px) 0; }
.tanto-busq__nada p { font-size: 1rem; color: var(--ink-soft); margin: 0 0 26px; }
.tanto-busq__form {
  position: relative; width: min(100%, 420px); margin: 0 auto 34px;
}
.tanto-busq__form input {
  width: 100%; padding: 13px 44px 13px 14px; border: 1px solid var(--line);
  border-radius: 0; background: #fff; color: var(--ink);
  font-family: "Instrument Sans", sans-serif; font-size: .95rem;
}
.tanto-busq__form input:focus { outline: none; border-color: var(--ink); }
.tanto-busq__form button {
  position: absolute; right: 0; top: 0; height: 100%; width: 44px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.tanto-busq__cta {
  display: inline-block; padding: 17px 34px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.tanto-busq__cta:hover { background: #fff; color: var(--ink); }

/* Paginación */
.tanto-busq__paginacion { margin-top: 58px; display: flex; gap: 6px; justify-content: center; }
.tanto-busq__paginacion a,
.tanto-busq__paginacion span {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem;
}
.tanto-busq__paginacion span.current { background: var(--ink); color: #fff; border-color: var(--ink); }