/* ==========================================================================
   Marketplace Custom — Buscador AJAX (marca Rexor)
   ========================================================================== */

/* Un solo recuadro = el propio input, con el ícono dentro. Sin contenedor pill. */
.mktc-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: 0;
    background: transparent;
    font-family: 'Inter', system-ui, sans-serif;
}
.mktc-search__icon {
    position: absolute !important; left: 14px !important; top: 22px !important; transform: translateY(-50%) !important;
    display: flex; align-items: center; color: var(--rx-muted);
    pointer-events: none; z-index: 1;
}
.mktc-search__icon svg { width: 18px; height: 18px; display: block; }
.mktc-search__input {
    flex: 1 1 auto; width: 100%; box-sizing: border-box !important;
    height: 44px; line-height: 1.2;
    /* margin:0 anula el margin-bottom 20px que BeTheme añade a los inputs y que
       empujaba el panel desplegable muy por debajo del buscador. */
    margin: 0 !important;
    border: 1.5px solid var(--rx-line); outline: none; background: #fff;
    padding: 0 16px 0 42px !important; font-size: 15px; color: var(--rx-dark);
    border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease;
}
.mktc-search__input:focus {
    border-color: var(--rx-gold); box-shadow: 0 0 0 3px rgba(201,169,97,.15);
}

.mktc-search__panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: auto; z-index: 9999;
    /* Más ancho que el input (que en el header es estrecho) para que el NOMBRE del
       producto quepa en cada fila. */
    min-width: min(340px, calc(100vw - 24px)); width: max-content; max-width: min(440px, calc(100vw - 24px));
    background: #fff; border: 1px solid var(--rx-line); border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,.16);
    max-height: 72vh; overflow: hidden;
    display: flex; flex-direction: column;
}
/* El atributo hidden debe ganar al display:flex (si no, aparece un panel vacío). */
.mktc-search__panel[hidden] { display: none !important; }
/* Cuerpo desplazable con las columnas de grupos */
.mktc-search__panel > .mktc-search__group,
.mktc-search__panel > .mktc-search__empty,
.mktc-search__panel > .mktc-search__loading {
    /* envueltos por JS dentro de un scroller; ver regla siguiente */
}
.mktc-search__scroll {
    overflow: auto; padding: 12px;
    /* Lista de 1 columna: cada grupo (Productos/Tiendas/Páginas) ocupa todo el
       ancho del panel, de modo que el nombre del producto se ve completo. */
    display: flex; flex-direction: column; gap: 4px;
}
.mktc-search__group { min-width: 0; }
.mktc-search__group h4 {
    margin: 6px 8px; font-family: 'Outfit', sans-serif; font-size: 12px;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-gold);
}
.mktc-search__group ul { list-style: none; margin: 0; padding: 0; }
.mktc-search__group a {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: 10px; text-decoration: none; color: #1A1A1A !important;
    transition: background .15s ease;
}
.mktc-search__group a:hover { background: var(--rx-cream); }
.mktc-search__group img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.mktc-search__store img { border-radius: 50%; }
.mktc-search__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.mktc-search__t {
    font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important;
    color: #1A1A1A !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    max-height: 36px !important;
    white-space: normal !important;
}
.mktc-search__p { font-size: 13px; font-weight: 700; color: var(--rx-green); }
.mktc-search__page .mktc-search__t { font-weight: 500; }

.mktc-search__empty { grid-column: 1/-1; text-align: center; color: var(--rx-muted); padding: 18px; }

/* "Ver todos" fijo abajo (footer del panel, fuera del scroll) */
.mktc-search__all {
    flex: 0 0 auto; display: block; text-align: center; padding: 13px;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px;
    color: var(--rx-green); text-decoration: none !important;
    border-top: 1px solid var(--rx-line); background: #fff;
    border-radius: 0 0 18px 18px;
}
/* Sin cambio de color ni subrayado en hover (pedido del usuario). */
.mktc-search__all:hover,
.mktc-search__all:focus {
    color: var(--rx-green); background: #fff; text-decoration: none !important;
}

.mktc-search__loading { grid-column: 1/-1; height: 60px; background:
    linear-gradient(90deg,#f4f0e9 25%,#fbf9f5 50%,#f4f0e9 75%); background-size: 200% 100%;
    border-radius: 10px; animation: mktc-sh 1.2s infinite; }
@keyframes mktc-sh { to { background-position: -200% 0; } }

@media (max-width: 768px) {
    .mktc-search__panel { left: 0; right: auto; }
}

/* ─── Página de resultados combinada [rexor_resultados] ─── */
.mktc-results {
    font-family: 'Inter', system-ui, sans-serif;
    max-width: 1200px; margin: 0 auto; padding: 0 16px;
    color: var(--rx-dark);
}
.mktc-results__heading {
    font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700;
    color: var(--rx-dark); margin: 0 0 24px;
}
.mktc-results__section { margin-bottom: 40px; }
.mktc-results__title {
    font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600;
    color: var(--rx-green); margin: 0 0 16px;
    padding-bottom: 8px; border-bottom: 1px solid var(--rx-line);
}
.mktc-results__empty {
    text-align: center; color: var(--rx-muted); padding: 40px 20px; font-size: 15px;
}
.mktc-results__stores {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
.mktc-results__store {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 16px; background: #fff; border: 1px solid var(--rx-line);
    border-radius: 16px; text-decoration: none !important; color: var(--rx-dark);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mktc-results__store:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.mktc-results__store img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.mktc-results__store-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; text-align: center; }
.mktc-results__store-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 1px; }
.mktc-results__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mktc-results__pages a {
    display: block; padding: 12px 16px; background: #fff; border: 1px solid var(--rx-line);
    border-radius: 10px; text-decoration: none; color: var(--rx-dark); font-weight: 500;
    transition: border-color .2s ease, color .2s ease;
}
.mktc-results__pages a:hover { border-color: var(--rx-green); color: var(--rx-green); }

@media (max-width: 600px) {
    .mktc-results__heading { font-size: 22px; }
    .mktc-results__stores { grid-template-columns: repeat(2, 1fr); }
}