/* Complementos propios de rnx-autofarm.com sobre el tema heredado del catalogo.
   Solo cubre piezas que el CSS de origen no trae (cabecera, hint de zoom,
   barra fija movil) y refuerzos de rejilla. No pisa las clases rnx-* originales. */

body.rnx-product-clean, body.rnx-market-home { background:#f5f7fb; color:#172033; }

/* ---------- Cabecera ---------- */
.rnx-modern-header { background:#0f172a; box-shadow:0 2px 14px rgba(15,23,42,.18); position:sticky; top:0; z-index:1030; }
.rnx-modern-shell { max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:14px;
                    padding:10px 16px; flex-wrap:wrap; }
.rnx-modern-brand { display:flex; align-items:center; text-decoration:none; }
/* En el sitio de origen la marca es un logo en imagen y el texto va oculto;
   aqui la marca es tipografica, asi que se vuelve a mostrar. */
.rnx-modern-brand .rnx-modern-brand-text { display:inline-block; color:#fff; font-size:20px;
    font-weight:800; letter-spacing:.5px; }
.rnx-modern-brand-text b { color:#f0b429; font-weight:950; }
.rnx-modern-brand:hover { text-decoration:none; }
.rnx-modern-actions { display:flex; align-items:center; gap:8px; }
.rnx-nav-pill, .rnx-login-pill, .rnx-add-pill {
    display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 14px;
    font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap;
    background:rgba(255,255,255,.10); color:#e2e8f0; border:1px solid rgba(255,255,255,.10); }
.rnx-nav-pill:hover, .rnx-login-pill:hover, .rnx-add-pill:hover { background:rgba(255,255,255,.18); color:#fff; text-decoration:none; }
.rnx-login-pill { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.rnx-login-pill:hover { background:#0b5ed7; }

.rnx-topbar-search { margin:0; flex:1 1 260px; min-width:0; }
.rnx-topbar-search .form-group { position:relative; margin:0; }
.rnx-topbar-search .form-control {
    width:100%; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.10);
    color:#fff; padding:9px 44px 9px 16px; height:auto; font-size:14px; }
.rnx-topbar-search .form-control::placeholder { color:#94a3b8; }
.rnx-topbar-search .form-control:focus { background:rgba(255,255,255,.16); border-color:#0d6efd; box-shadow:none; color:#fff; }
.rnx-topbar-search button { position:absolute; right:4px; top:50%; transform:translateY(-50%);
    border:0; background:#0d6efd; color:#fff; width:34px; height:34px; border-radius:999px; }
.rnx-mobile-search { padding:0 16px 10px; }
@media (min-width:992px) { .rnx-mobile-search { display:none; } }

.rnx-trust-strip { background:#111c33; border-top:1px solid rgba(255,255,255,.07); }
.rnx-trust-inner { max-width:1320px; margin:0 auto; padding:8px 16px; display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.rnx-trust-item { display:inline-flex; align-items:center; gap:7px; color:#cbd5e1; font-size:12px; font-weight:700; }
.rnx-trust-item i { color:#22c55e; }

/* ---------- Ficha ---------- */
.content { padding:0 16px; }
.rnx-main-col { min-width:0; }
.rnx-zoom-hint { position:absolute; left:14px; bottom:14px; z-index:4; background:rgba(15,23,42,.72); color:#fff;
    border-radius:999px; padding:6px 11px; font-size:12px; font-weight:700; pointer-events:none; }
.rnx-gallery-nav { cursor:pointer; }
.rnx-gallery-nav:hover { background:#fff; }
.rnx-hidden-gallery-links { display:none; }
.rnx-description { font-size:14.5px; line-height:1.65; color:#334155; word-wrap:break-word; }
.rnx-description img { max-width:100%; height:auto; }
.currency-label { font-size:13px; font-weight:700; color:#64748b; margin-left:6px; }

.rnx-mobile-sticky { position:fixed; left:0; right:0; bottom:0; z-index:1040; display:flex; align-items:center;
    gap:12px; padding:10px 14px; background:#fff; border-top:1px solid #e7edf5; box-shadow:0 -6px 20px rgba(15,23,42,.10); }
.rnx-mobile-sticky .btn { flex:1; border-radius:12px; font-weight:900; min-height:44px; }
.rnx-mobile-price { font-size:20px; font-weight:950; color:#0d6efd; white-space:nowrap; }
@media (max-width:991px) { body.rnx-product-clean { padding-bottom:76px; } }

.rnx-related-section { margin-top:26px; }
.rnx-related-head { margin-bottom:6px; }

/* ---------- Rejilla de tarjetas ---------- */
.list-view .grid-item { margin-bottom:20px; display:flex; }
.list-view .card { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:16px; overflow:hidden;
    box-shadow:0 6px 18px rgba(15,23,42,.05); transition:transform .16s ease, box-shadow .16s ease; }
.list-view .card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.12); }
.list-view .item-image { position:relative; display:block; }
.card-img-top-wrapper { position:relative; overflow:hidden; background:#0f172a; }
.card-img-top { width:100%; padding-top:72%; background-size:cover; background-position:center; background-repeat:no-repeat; }
.item-images-count { position:absolute; right:8px; bottom:8px; background:rgba(15,23,42,.78); color:#fff;
    border-radius:999px; padding:3px 9px; font-size:11px; font-weight:800; }
.list-view .card-body { padding:12px 13px 14px; }
.list-view .grid-title { color:#0f172a; text-decoration:none; font-size:14px; font-weight:800; line-height:1.3; }
.list-view .grid-title:hover { color:#0d6efd; text-decoration:none; }
.list-view .display-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.6em; }
.list-view h4 { margin:0 0 8px; font-size:14px; }
.grid-currency h4 { font-size:19px; font-weight:950; color:#0d6efd; margin:0; }
.grid-currency .currency-label { font-size:11px; }

@media (max-width:991px) {
    .rnx-layout { grid-template-columns:1fr !important; }
    .rnx-sidebar { position:static !important; }
    .rnx-main-photo { min-height:280px !important; }
}

/* ---------- Botones de contacto ----------
   El tema de origen forzaba .btn-success a ocupar la fila entera, lo que dejaba
   al resto de botones a media fila y descuadrados. Aqui se reparten por igual y,
   si el numero es impar, el ultimo ocupa el ancho completo. */
.rnx-seller-actions,
.rnx-actions-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:9px; }
.rnx-seller-actions .btn,
.rnx-actions-row .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; border-radius:12px; font-weight:900; text-align:center;
    padding:8px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rnx-seller-actions .btn-success { grid-column:auto; }
.rnx-seller-actions .btn:last-child:nth-child(odd) { grid-column:1 / -1; }
.rnx-actions-row { grid-template-columns:minmax(0,1fr) auto; }
.rnx-actions-row .rnx-more-btn { width:48px; min-width:48px; padding:0; }

/* Avatar: si la foto no carga se muestra la inicial en su lugar */
.rnx-avatar-ini { display:flex; align-items:center; justify-content:center; background:#e2e8f0;
    color:#64748b; font-weight:900; border-radius:999px; }

/* Cabecera del perfil: identidad a la izquierda, acciones a la derecha */
.perf-cab { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px, 320px); gap:22px; align-items:start; }
.perf-acciones { display:grid; gap:9px; }
.perf-acciones .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; border-radius:12px; font-weight:900; }
.perf-social { display:flex; gap:8px; flex-wrap:wrap; }
.perf-social .btn { flex:1 1 auto; min-width:52px; }
@media (max-width:860px) { .perf-cab { grid-template-columns:1fr; } }

/* Contador de mensajes sin leer en la cabecera */
.rnx-badge-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
    padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:900;
    margin-left:5px; line-height:1; }

/* ---------- Boton de busqueda: centrado a prueba de alturas ----------
   market-2026.css lo coloca con top:5px, que solo centra si el contenedor mide
   exactamente lo mismo que el campo (44px). Cualquier diferencia lo descuadra.
   Aqui se centra por porcentaje, que no depende de la altura, y se centra tambien
   el icono dentro del boton. Especificidad mayor para ganar sin depender del orden. */
body .rnx-topbar-search .form-group button {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
body .rnx-topbar-search .form-group button > * { line-height: 1; }