/* Escapa del ancho limitado por el tema de WordPress de forma robusta */
.techrex-search-outer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    background: var(--trsx-bg, transparent);
}

.techrex-guided-catalog { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:0 0 18px; padding:14px; border:1px solid var(--tr-border,#dcdcde); border-radius:9px; background:var(--tr-surface,#fff); }
.techrex-guided-catalog strong { margin-right:5px; }
.techrex-guided-catalog select { min-width:150px; min-height:36px; border:1px solid #c3c4c7; border-radius:5px; background:#fff; padding:4px 8px; }
@media(max-width:600px){.techrex-guided-catalog{display:grid;grid-template-columns:1fr}.techrex-guided-catalog select{width:100%}}

/* La página de ofertas reutiliza las tarjetas del buscador, pero no el
   contenedor anterior. Mantiene el mismo ajuste de fondo. */
.trx-offers-page {
    background: var(--trsx-bg, transparent);
}

/* Evita saltos de scroll y asegura que el ancho total se comporte de manera estable */
html {
    scrollbar-gutter: stable;
    overflow-x: clip;
}

.techrex-search-wrap {
    display: flex;
    gap: 32px;
    width: 100%;
    max-width: 1400px; /* Opcional: limita el estiramiento excesivo en pantallas gigantes */
    margin: 0 auto;    /* Centra perfectamente el contenido dentro del bloque de 100vw */
    padding: 24px 32px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

.techrex-search-wrap * {
    box-sizing: border-box;
}

/* SIDEBAR - Más a la izquierda */
.techrex-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.techrex-search-bar-wrap {
    margin-bottom: 16px;
}

.techrex-search-bar {
    display: flex;
    gap: 8px;
}

.techrex-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--trsx-border, #e0e0e0);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.techrex-search-input:focus { border-color: var(--trsx-accent, #2271b1); }

.techrex-search-btn {
    padding: 10px 16px;
    background: var(--trsx-accent, #2271b1);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-family: inherit;
    transition: background 0.2s;
}

.techrex-search-btn:hover { background: var(--trsx-accent-dark, #135e96); }

.techrex-filter-box {
    background: var(--trsx-card, #fff);
    border: 1px solid var(--trsx-border, #e0e0e0);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.techrex-filter-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--trsx-muted, #646970);
    margin-bottom: 12px;
}

.techrex-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.techrex-filter-list li label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--trsx-text, #1d2327);
}

.techrex-filter-list li label:hover { color: var(--trsx-accent, #2271b1); }

.techrex-price-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

.techrex-price-range input {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--trsx-border, #c3c4c7);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}

.techrex-currency-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.techrex-currency-btn {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--trsx-border, #e0e0e0);
    border-radius: 6px;
    background: var(--trsx-card, #fff);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--trsx-muted, #646970);
    transition: all 0.2s;
}

.techrex-currency-btn.active {
    background: var(--trsx-accent, #2271b1);
    color: #fff;
    border-color: var(--trsx-accent, #2271b1);
}

/* El color “Principal (hover)” también corresponde a los selectores de
   moneda, no solo a los botones de búsqueda, filtros y carrito. */
.techrex-currency-btn:hover:not(:disabled),
.techrex-currency-btn.active:hover:not(:disabled) {
    background: var(--trsx-accent-dark, #135e96);
    border-color: var(--trsx-accent-dark, #135e96);
    color: #fff;
}

.techrex-filter-apply {
    width: 100%;
    padding: 10px;
    background: var(--trsx-accent, #2271b1);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    margin-top: 8px;
    transition: background 0.2s;
}

.techrex-filter-apply:hover { background: var(--trsx-accent-dark, #135e96); }

.techrex-filter-clear {
    width: 100%;
    padding: 8px;
    background: transparent;
    color: var(--trsx-muted, #646970);
    border: 1px solid var(--trsx-border, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    margin-top: 6px;
    transition: all 0.2s;
}

.techrex-filter-clear:hover { color: #d63638; border-color: #d63638; }

/* MAIN */
.techrex-main { 
    flex: 1; 
    min-width: 0; 
}

.techrex-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.techrex-results-count {
    font-size: 14px;
    color: var(--trsx-muted, #646970);
    font-weight: 500;
}

.techrex-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.techrex-orderby {
    padding: 6px 10px;
    border: 1px solid var(--trsx-border, #c3c4c7);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #2c3338;
}

.techrex-details-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--trsx-accent, #2271b1);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.techrex-details-toggle input { cursor: pointer; }

/* GRID - Forzar múltiples columnas y filas correctamente */
.techrex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

/* CARD */
.techrex-card {
    background: var(--trsx-card, #fff);
    border: 1px solid var(--trsx-border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.techrex-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.techrex-card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #f6f7f7;
    padding: 16px;
}

.techrex-card-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f8fafc, #edf2f7);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
    padding: 12px;
}

.techrex-card-link:focus-visible,
.techrex-btn-cart:focus-visible,
.techrex-card-tools button:focus-visible,
.techrex-page-btn:focus-visible {
    outline: 3px solid var(--trsx-accent, #2271b1);
    outline-offset: 3px;
    position: relative;
    z-index: 2;
}

.techrex-card-img-placeholder .dashicons { width: 40px; height: 40px; font-size: 40px; line-height: 40px; color: var(--trsx-accent, #2271b1); opacity: .65; }
.techrex-card-img-placeholder small { font-size: 12px; font-weight: 600; }

.techrex-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.techrex-card-category {
    font-size: 11px;
    color: #8c8f94;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.techrex-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--trsx-text, #1d2327);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
}

.techrex-card-brand {
    font-size: 12px;
    color: var(--trsx-muted, #646970);
    min-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.techrex-card-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.techrex-attr-chip {
    background: #f0f6fc;
    color: var(--trsx-accent, #2271b1);
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 500;
}

.techrex-card-attrs-detail {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.techrex-card-attrs-detail.visible { display: flex; }

.techrex-attr-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    line-height: 1.3;
}

.techrex-attr-detail-row span:first-child { color: var(--trsx-muted, #646970); }
.techrex-attr-detail-row span:last-child { color: var(--trsx-text, #1d2327); font-weight: 500; }

.techrex-card-price {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.techrex-price-offer-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.techrex-price-main, 
.techrex-price-offer {
    font-size: 18px;
    font-weight: 700;
    color: var(--trsx-text, #1d2327);
}

.techrex-price-offer {
    color: #d63638;
}

.techrex-price-secondary, 
.techrex-price-original {
    font-size: 12px;
    color: var(--trsx-muted, #646970);
}

.techrex-price-original {
    text-decoration: line-through;
}

.techrex-offer-badge {
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: center;
}

.techrex-stock-label {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

.techrex-stock-label.in  { color: #1a7a2e; }
.techrex-stock-label.low { color: #f0a500; }
.techrex-stock-label.out { color: #d63638; }

.techrex-card-footer {
    padding: 0 16px 16px 16px;
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.techrex-btn-cart {
    width: 100%;
    padding: 10px;
    background: var(--trsx-accent, #2271b1);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.2s;
}

.techrex-btn-cart:hover { background: var(--trsx-accent-dark, #135e96); }

.techrex-btn-cart:disabled {
    background: var(--trsx-border, #c3c4c7);
    color: #787c82;
    cursor: not-allowed;
}

/* PAGINACIÓN */
.techrex-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.techrex-page-btn {
    padding: 8px 14px;
    border: 1px solid var(--trsx-border, #e0e0e0);
    border-radius: 6px;
    background: var(--trsx-card, #fff);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: var(--trsx-text, #1d2327);
    font-weight: 500;
    transition: all 0.2s;
}

.techrex-page-btn:hover:not([disabled]) { border-color: var(--trsx-accent, #2271b1); color: var(--trsx-accent, #2271b1); }
.techrex-page-btn.active { background: var(--trsx-accent, #2271b1); color: #fff; border-color: var(--trsx-accent, #2271b1); }
.techrex-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.techrex-page-ellipsis { padding: 8px 3px; color: var(--trsx-muted, #646970); }
.techrex-page-jump { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.techrex-page-jump label { white-space: nowrap; font-size: 13px; color: var(--trsx-muted, #646970); }
.techrex-page-jump input { width: 58px; padding: 7px 5px; border: 1px solid var(--trsx-border, #e0e0e0); border-radius: 6px; text-align: center; font: inherit; }

/* LOADING */
.techrex-loading {
    display: none;
    text-align: center;
    padding: 80px 20px;
    color: var(--trsx-muted, #646970);
}

.techrex-loading.visible { display: block; }

.techrex-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0f0f0;
    border-top-color: var(--trsx-accent, #2271b1);
    border-radius: 50%;
    animation: techrex-spin 0.75s linear infinite;
    margin: 0 auto 16px;
}

@keyframes techrex-spin { to { transform: rotate(360deg); } }

/* EMPTY */
.techrex-empty-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--trsx-muted, #646970);
    grid-column: 1 / -1;
}

.techrex-empty-results h3 { font-size: 18px; margin-bottom: 8px; color: var(--trsx-text, #1d2327); font-weight: 600; }

@media (max-width: 1200px) {
    .techrex-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 768px) {
    .techrex-search-wrap { flex-direction: column; gap: 20px; padding: 16px 12px; }
    .techrex-sidebar { width: 100%; }
    .techrex-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .techrex-card-body { padding: 12px; gap: 4px; }
    .techrex-card-footer { padding: 0 12px 12px 12px; }
    .techrex-toolbar { flex-direction: column; align-items: flex-start; }
    .techrex-toolbar-right { width: 100%; justify-content: space-between; }
}

@media (max-width: 360px) {
    .techrex-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO MÓVIL — Buscador y listado de productos
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Input de búsqueda a 16px (anti-zoom iOS) */
    .techrex-search-input,
    .techrex-search-bar input[type="search"] { font-size: 16px; }

    /* Panel de filtros usable con el pulgar */
    .techrex-filters-panel { max-height: none; }

    /* Tarjetas de resultado sin desbordes */
    .techrex-card-name { word-break: break-word; }
    .techrex-btn-cart { min-height: 44px; }
    .techrex-search-btn,
    .techrex-page-btn { min-height: 44px; }
    .techrex-page-jump { width: 100%; justify-content: center; margin: 4px 0 0; }
}