/* ============================================================
   store.css — extensión de landing.css para marketplace.php y product.php
   Mismo lenguaje visual del template portado (Roboto, acento #AB733C,
   tarjetas planas blancas, radios 8-12px). No modifica landing.css.
   ============================================================ */

/* ── Header tabs (Productos/Proveedores): mismo lenguaje visual que .section-search
   de landing.php (activo = color carton + negrita + subrayado), a escala compacta ── */
.header-tabs { display: flex; align-items: center; gap: 18px; margin-left: 4px; }
.header-tabs--item {
    position: relative; font-size: 13px; font-weight: 600; color: #6b6b6b;
    text-decoration: none; padding-bottom: 2px; cursor: pointer;
}
.header-tabs--item:hover { color: #323544; }
.header-tabs--item.is-active {
    color: #AB733C; font-weight: 700;
}
.header-tabs--item.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #AB733C;
}

/* ── CATEGORY MEGA-MENU (hover, estructura tipo Alibaba: sidebar + grid circular + overlay) ── */
.cat-menu { position: relative; }
.cat-menu--trigger { text-decoration: none; position: relative; z-index: 72; }

/* Overlay: oscurece el resto de la página como en la referencia */
.cat-menu--overlay {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(20, 22, 26, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    pointer-events: none;
}
.cat-menu.is-open .cat-menu--overlay { opacity: 1; visibility: visible; pointer-events: auto; }

/* Panel: mega menú de ancho completo, sidebar + grid, como la captura de referencia */
.cat-menu--panel {
    position: absolute; top: calc(100% + 14px); left: 0; z-index: 70;
    width: min(1100px, 92vw); max-height: 640px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(29,37,48,.22), 0 2px 10px rgba(29,37,48,.08);
    display: flex; overflow: hidden;

    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), visibility .25s;
    pointer-events: none;
}
/* Puente invisible entre el botón y el panel para que el hover no se corte al bajar el mouse */
.cat-menu::before {
    content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; z-index: 71;
}
.cat-menu:hover .cat-menu--panel,
.cat-menu.is-open .cat-menu--panel {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
}
.cat-menu--trigger[aria-expanded="true"] { background: rgba(0,0,0,.05); }

/* Sidebar izquierdo: lista vertical, primer ítem activo con fondo gris + borde izquierdo (igual que la referencia) */
.cat-menu--sidebar {
    width: 260px; flex-shrink: 0; background: #fff;
    border-right: 1px solid #ececec; padding: 10px 0;
    overflow-y: auto; max-height: 640px;
}
.cat-menu--sidebar-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px; font-size: 13.5px; color: #323544; text-decoration: none;
    border-left: 3px solid transparent; cursor: pointer;
}
.cat-menu--sidebar-item .material-symbols-outlined { font-size: 19px; color: #6b6b6b; flex-shrink: 0; }
.cat-menu--sidebar-item:hover { background: #f7f7f7; }
.cat-menu--sidebar-item.is-active {
    background: #f2f2f2; border-left-color: #1D2530; font-weight: 700;
}
.cat-menu--sidebar-item.is-active .material-symbols-outlined { color: #1D2530; }

/* Grid derecho: círculos + etiqueta, como la referencia */
.cat-menu--main { flex: 1; padding: 24px 28px; overflow-y: auto; max-height: 640px; }
.cat-menu--group { margin-bottom: 28px; scroll-margin-top: 12px; }
.cat-menu--group:last-of-type { margin-bottom: 8px; }
.cat-menu--group-title { font-size: 15px; font-weight: 700; color: #1D2530; margin: 0 0 18px; }
.cat-menu--grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 12px;
}
.cat-menu--tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; text-align: center;
}
.cat-menu--tile-circle {
    width: 68px; height: 68px; border-radius: 50%; background: #f2f2f2;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.cat-menu--tile:hover .cat-menu--tile-circle { background: #fdf3ea; transform: translateY(-2px); }
.cat-menu--tile-circle .material-symbols-outlined { font-size: 28px; color: #AB733C; }
.cat-menu--tile-label {
    font-size: 12px; color: #323544; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-menu--viewall {
    display: inline-block; margin-top: 22px; font-size: 12px; font-weight: 700;
    color: #AB733C; text-decoration: none;
}
.cat-menu--empty { padding: 30px; font-size: 13px; color: #999; text-align: center; }

@media (max-width: 900px) {
    .cat-menu--panel { width: 94vw; flex-direction: column; max-height: 80vh; }
    .cat-menu--sidebar { width: 100%; border-right: none; border-bottom: 1px solid #ececec; max-height: 160px; }
    .cat-menu--main { max-height: 60vh; }
    .cat-menu--grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .cat-menu--grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── En páginas sin #search-bar propio (marketplace/producto), el buscador
   compacto del header queda siempre visible en vez de aparecer solo al hacer scroll.
   landing.css lo oculta por completo (display:none) por debajo de 992px, así que
   además de forzar la visibilidad hay que restaurar el display y reacomodar el layout
   para que no se amontone con el logo y las acciones. ── */
body.no-hero-search .main-header--search {
    display: flex !important;
    opacity: 1 !important; visibility: visible !important;
    transform: translateY(0) !important; pointer-events: auto !important;
}
@media (max-width: 992px) {
    /* Debajo de 992px no hay espacio junto al logo: el buscador pasa a su propia
       fila completa debajo de logo + acciones, en vez de intentar compartir la fila. */
    body.no-hero-search #main-header .container > .flex.center-alignment.space-between:first-child {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    body.no-hero-search .main-header--search {
        order: 3;
        flex-basis: 100%;
        min-width: 0;
        padding: 0;
    }
    body.no-hero-search .main-header--search-box {
        min-width: 0;
    }
}

/* ============================================================
   MARKETPLACE PRODUCT GRID — tarjetas estilo Alibaba search results:
   imagen cuadrada, precio grande, min. order, fila de proveedor,
   dos botones (outline + sólido). Reemplaza product-random-list para marketplace.php
   ============================================================ */
/* ============================================================
   MARKETPLACE LAYOUT — sidebar de filtros + columna principal + raíl
   "You may like". Estructura inspirada en listados B2B de referencia
   (categorías/checkboxes a la izquierda, grid denso al centro, ideas
   a la derecha), con la paleta propia de InventoryKill.
   ============================================================ */
.mk-layout {
    max-width: 1500px; margin: 16px auto 40px; padding: 0 24px;
    display: flex; align-items: flex-start; gap: 22px;
}
.mk-sidebar {
    width: 232px; flex-shrink: 0; background: #fff; border: 1px solid #ececec; border-radius: 12px;
    padding: 16px; position: sticky; top: 84px;
}
.mk-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mk-side-head .material-symbols-outlined { font-size: 18px; color: #AB733C; }
.mk-side-head h3 { font-size: 14px; font-weight: 800; color: #1D2530; margin: 0; flex: 1; }
.mk-side-clear { font-size: 11px; color: #d33; text-decoration: none; font-weight: 600; }
.mk-side-clear:hover { text-decoration: underline; }
.mk-side-section { padding: 12px 0; border-top: 1px solid #f0f0f0; }
.mk-side-section:first-of-type { border-top: none; }
.mk-side-section h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #767676; margin: 0 0 8px; }
.mk-side-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #323544; padding: 5px 0; cursor: pointer; }
.mk-side-check input { accent-color: #AB733C; width: 15px; height: 15px; flex-shrink: 0; }
.mk-side-cats { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.mk-side-cats li a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 4px; border-radius: 6px; font-size: 12.5px; color: #323544; text-decoration: none; line-height: 1.3;
}
.mk-side-cats li a:hover { background: #f7f4ef; color: #AB733C; }
.mk-side-cats li.is-active a { color: #AB733C; font-weight: 700; background: #fdf3ea; }
.mk-side-cats-n { color: #999; font-size: 11px; flex-shrink: 0; }
.mk-side-minorder { display: flex; align-items: center; gap: 6px; }
.mk-side-minorder span { font-size: 12px; color: #767676; flex-shrink: 0; }
.mk-side-minorder input {
    width: 0; flex: 1; min-width: 0; border: 1px solid #e5e5e5; border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
}
.mk-side-minorder button {
    flex-shrink: 0; border: none; background: #1D2530; color: #fff; font-size: 11.5px; font-weight: 700;
    border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
.mk-side-minorder button:hover { background: #323544; }
.mk-side-section select {
    width: 100%; border: 1px solid #e5e5e5; border-radius: 6px; padding: 7px 8px; font-size: 12.5px;
    font-family: inherit; color: #323544; background: #fff;
}

.mk-main { flex: 1; min-width: 0; }
.mk-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-results-title { font-size: 19px; font-weight: 800; color: #1D2530; margin: 0; }
.mk-results-title span { font-size: 12.5px; font-weight: 600; color: #999; margin-left: 8px; }
.mk-results-sort { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 7px 12px; }
.mk-results-sort .material-symbols-outlined { font-size: 15px; color: #AB733C; }
.mk-results-sort select { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; color: #323544; cursor: pointer; }

.mk-rail { width: 210px; flex-shrink: 0; }
.mk-rail h3 { font-size: 12.5px; font-weight: 800; color: #1D2530; margin: 0 0 10px; }
.mk-rail-item { display: flex; gap: 8px; align-items: center; text-decoration: none; padding: 6px 0; border-bottom: 1px solid #f2f2f2; }
.mk-rail-item:last-child { border-bottom: none; }
.mk-rail-img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 6px; background-size: cover; background-position: center; background-color: #f2f2f2; }
.mk-rail-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-rail-name { font-size: 11.5px; color: #323544; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-rail-price { font-size: 12px; font-weight: 700; color: #1D2530; }

.mk-card-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: #1c7c3f; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
}

@media (max-width: 1200px) { .mk-rail { display: none; } }
@media (max-width: 992px) {
    .mk-layout { flex-direction: column; }
    .mk-sidebar { width: 100%; position: static; }
    .mk-side-cats { max-height: none; }
}

.mk-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px;
}
@media (max-width: 1200px) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

/* Los 2 botones ("Añadir al carrito"/"Chatea ahora") no caben lado a lado con texto nowrap
   en una tarjeta de columna angosta — se apilan y permiten salto de línea como red de seguridad. */
@media (max-width: 480px) {
    .mk-card-actions { flex-direction: column; gap: 6px; }
    .mk-btn { white-space: normal; font-size: 11px; line-height: 1.3; padding: 8px 6px; height: auto; min-height: 34px; }
}

.mk-card { background: #fff; border-radius: 8px; display: flex; flex-direction: column; min-width: 0; }
.mk-card-img-wrap {
    position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
    background: #f2f2f2; display: block;
}
.mk-card-img-wrap img, .mk-card-img-wrap .mk-card-img-inner {
    width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center;
    transition: transform .25s ease, opacity .35s ease; opacity: 0;
}
.mk-card-img-wrap img.is-loaded, .mk-card-img-wrap .mk-card-img-inner.is-loaded { opacity: 1; }
.mk-card:hover .mk-card-img-wrap .mk-card-img-inner,
.mk-card:hover .mk-card-img-wrap img { transform: scale(1.04); }
.mk-card-imgbtn {
    position: absolute; bottom: 8px; left: 8px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.mk-card-imgbtn .material-symbols-outlined { font-size: 15px; color: #323544; }
.mk-card-body { padding: 14px 2px 0; display: flex; flex-direction: column; flex: 1; }
.mk-card-title {
    font-size: 13px; line-height: 1.4; color: #1D2530; text-decoration: none;
    margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 36px;
}
.mk-card-price { font-size: 17px; font-weight: 700; color: #1D2530; margin-bottom: 4px; letter-spacing: -.01em; }
.mk-card-moq { font-size: 12px; color: #767676; margin-bottom: 10px; }
.mk-card-supplier {
    font-size: 12px; color: #55698a; margin-bottom: 5px; text-decoration: underline; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; display: block;
}
.mk-card-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #555; margin-bottom: 14px; flex-wrap: wrap; }
.mk-card-meta .verified-tick { color: #1877f2; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.mk-card-meta .flag { flex-shrink: 0; }
.mk-card-meta .sep { color: #ccc; }
.mk-card-actions { display: flex; gap: 8px; margin-top: auto; margin-bottom: 10px; }
.mk-btn {
    flex: 1; min-width: 0; min-height: 38px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
    cursor: pointer; white-space: normal; line-height: 1.2; padding: 5px 10px;   /* i18n: las etiquetas largas (fr/de) envuelven en vez de desbordar */
}
.mk-btn-outline { border: 1px solid #323544; color: #323544; background: transparent; }
.mk-btn-outline:hover { background: #323544; color: #fff; }
.mk-btn-solid { border: 1px solid #323544; color: #323544; background: transparent; }
.mk-btn-solid:hover { background: #323544; color: #fff; }
.mk-card-stock { font-size: 11.5px; color: #767676; padding-bottom: 2px; }
.mk-card-stock::before { content: '• '; }
.mk-card-stock.in { color: #555; }

/* ── Skeleton loaders genéricos (shimmer, sin logos/letras) — reutilizados en marketplace,
   chat, mensajes y cualquier contenido cargado dinámicamente ── */
.skeleton {
    position: relative; overflow: hidden; background: #ececeb; border-radius: 6px;
}
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: skeletonShine 1.4s ease-in-out infinite;
}
@keyframes skeletonShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-fade-out { animation: skeletonFadeOut .3s ease forwards; }
@keyframes skeletonFadeOut { to { opacity: 0; } }

.mk-card-skel { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.mk-card-img-wrap { position: relative; }

/* Filas de skeleton para listas de conversaciones/mensajes (avatar + 2 líneas) */
.sk-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.sk-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-line { height: 9px; border-radius: 4px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.w80 { width: 80%; }

/* Burbujas de skeleton para el hilo de mensajes */
.sk-bubble { height: 34px; border-radius: 10px; margin-bottom: 10px; }
.sk-bubble.left { width: 62%; margin-right: auto; }
.sk-bubble.right { width: 50%; margin-left: auto; }

/* ── Botón flotante de "Mensajes" (fijo abajo-derecha, solo con sesión + historial real) ── */
.float-msgs-widget { position: fixed; bottom: 24px; right: 24px; z-index: 190; }
.float-msgs-btn {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 999px;
    padding: 10px 16px 10px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: #1D2530;
}
.float-msgs-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.float-msgs-btn-icon { position: relative; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.float-msgs-btn-icon .material-symbols-outlined { font-size: 22px; color: #323544; }
.float-msgs-dot { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #1c7c3f; border: 2px solid #fff; }
.float-msgs-badge { background: #AB733C; color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.float-msgs-chevron { font-size: 18px !important; color: #999; }
.float-msgs-panel {
    position: absolute; bottom: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 48px); max-height: 380px;
    background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    overflow: hidden; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.float-msgs-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.float-msgs-panel-header { padding: 14px 16px; font-size: 14px; font-weight: 700; color: #1D2530; border-bottom: 1px solid #ececec; }
.float-msgs-panel-body { overflow-y: auto; max-height: 320px; }
@media (max-width: 480px) { .float-msgs-panel { width: calc(100vw - 48px); } }

/* ── "Select by" chips (toggles rápidos, encima del grid) ── */
.mk-selectby { max-width: 1500px; margin: 14px auto 0; padding: 0 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-selectby-label { font-size: 12px; color: #767676; font-weight: 600; }
.mk-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 999px; border: 1px solid #e0e0e0;
    font-size: 12px; color: #323544; text-decoration: none; background: #fff;
    cursor: pointer;
}
.mk-chip:hover { border-color: #AB733C; color: #AB733C; }
.mk-chip.is-active { background: #fdf3ea; border-color: #AB733C; color: #AB733C; font-weight: 700; }

/* ── AD SPACE (decorativo, igual que search-result.html) ── */
.ad-space { width: 100%; padding: 20px 0 0; }
.ad-content {
    width: 100%; min-height: 90px;
    border: 1px solid #ab733c23; border-radius: 8px;
    padding: 12px; display: grid; grid-template-columns: 1fr 420px; gap: 12px;
}
.ad-content--business-info, .ad-content--business-related { background: #f2f2f2; border-radius: 6px; }
@media (max-width: 768px) { .ad-content { grid-template-columns: 1fr; } }

/* ── BREADCRUMBS ── */
.store-breadcrumbs {
    max-width: 1500px; margin: 0 auto; padding: 16px 24px 0;
    font-size: 13px; color: #6b6b6b;
}
.store-breadcrumbs a { color: #6b6b6b; text-decoration: none; }
.store-breadcrumbs a:hover { color: #AB733C; }
.store-breadcrumbs span.sep { margin: 0 6px; }
.store-breadcrumbs span.current { color: #1D2530; font-weight: 500; }

/* ── FILTERS BAR ── */
.store-filters-bar {
    max-width: 1500px; margin: 16px auto 0; padding: 0 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.sf-group {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
    padding: 9px 14px; font-size: 13px; color: #323544;
}
.sf-group select {
    border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13px; color: #323544; cursor: pointer;
}
.sf-group input[type="checkbox"] { accent-color: #AB733C; }
.sf-count { margin-left: auto; font-weight: 700; color: #AB733C; font-size: 13px; }
.sf-clear { color: #d33; text-decoration: none; font-size: 13px; font-weight: 600; }
.sf-clear:hover { text-decoration: underline; }

/* ── PRODUCT GRID (search-result.html item overrides for real data + link wrap) ── */
.product-random-list--item.as-link { text-decoration: none; color: inherit; display: grid; }
.item-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #eef7ee; color: #1c7c3f; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; width: fit-content;
}
.item-supplier-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: #6b6b6b; margin-top: 6px;
}
.item-supplier-row .stock-ok { color: #1c7c3f; font-weight: 700; }

/* ── EMPTY STATE ── */
.store-empty { max-width: 1500px; margin: 0 auto; padding: 70px 24px; text-align: center; color: #777; }
.store-empty i { font-size: 44px; margin-bottom: 14px; display: block; color: #d6c3a8; }
.store-empty a { color: #AB733C; font-weight: 700; text-decoration: none; }

/* ── PAGINATION ── */
.store-pagination {
    max-width: 1500px; margin: 8px auto 40px; padding: 0 24px;
    display: flex; justify-content: center; gap: 8px;
}
.sp-btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid #e5e5e5; background: #fff;
    color: #323544; font-size: 13px; font-weight: 600; text-decoration: none;
}
.sp-btn:hover { border-color: #AB733C; color: #AB733C; }
.sp-btn.active { background: #AB733C; border-color: #AB733C; color: #fff; }

/* ── SUPPLIERS VIEW ── */
.supplier-grid {
    max-width: 1500px; margin: 20px auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 992px) { .supplier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .supplier-grid { grid-template-columns: 1fr; } }
.supplier-card {
    background: #fff; border-radius: 12px; padding: 20px; text-align: center;
    text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.supplier-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.supplier-avatar {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg,#f5e6d0,#ffdcbd);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #AB733C; font-size: 22px;
}
.supplier-card .s-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.supplier-card .s-meta { font-size: 12px; color: #777; }
.supplier-card .s-verified { color: #1c7c3f; font-size: 11px; font-weight: 700; margin-top: 6px; display: block; }

/* ============================================================
   PRODUCT DETAIL PAGE (product.php) — estructura tipo Alibaba:
   [miniaturas | imagen grande + proveedor + stats] [info + atributos] [envío/CTA fijo]
   Solo datos reales de tu BD — sin ratings/reviews/tiers de precio inventados.
   ============================================================ */
.pd-wrap {
    max-width: 1500px; margin: 20px auto 50px; padding: 0 24px;
    display: grid; grid-template-columns: 590px 1fr 340px; gap: 28px;
    align-items: start;
}
/* Ubicación explícita: la descripción/bloques (sección 6) ocupa una segunda fila que
   se alinea exactamente con el ancho combinado de pd-left + pd-info, sin invadir la
   columna de pd-order-box — que se mantiene fijo (sticky) abarcando ambas filas. */
.pd-wrap > .pd-left      { grid-column: 1; grid-row: 1; }
.pd-wrap > .pd-info      { grid-column: 2; grid-row: 1; }
.pd-wrap > .pd-order-box { grid-column: 3; grid-row: 1 / span 2; }
.pd-wrap > .pd-description-section { grid-column: 1 / span 2; grid-row: 2; }
@media (max-width: 1200px) {
    .pd-wrap { grid-template-columns: 1fr; }
    .pd-wrap > .pd-left, .pd-wrap > .pd-info, .pd-wrap > .pd-order-box, .pd-wrap > .pd-description-section { grid-column: 1; grid-row: auto; }
    .pd-order-box { position: static; }
}
@media (max-width: 768px)  { .pd-wrap { padding: 0 16px; } }

/* ── Columna izquierda: galería (miniaturas verticales + imagen grande) + proveedor + stats ── */
.pd-left { display: flex; flex-direction: column; gap: 16px; }
.pd-gallery { display: flex; gap: 12px; }
.pd-thumbs {
    display: flex; flex-direction: column; gap: 8px; width: 64px; flex-shrink: 0;
    max-height: 500px; overflow-y: auto;
}
.pd-thumb {
    position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
    border: 1px solid #e5e5e5; cursor: pointer; background: #f2f2f2;
}
.pd-thumb.active { border-color: #1D2530; border-width: 2px; }
.pd-thumb img, .pd-thumb video { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb-video-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); color: #fff; }
.pd-main-img {
    flex: 1; position: relative; aspect-ratio: 1/1; border-radius: 4px; overflow: hidden;
    background: #f2f2f2; display: flex; align-items: center; justify-content: center;
}
.pd-main-img img, .pd-main-img video { width: 100%; height: 100%; object-fit: cover; }

/* Móvil: la imagen principal va primero, las miniaturas debajo en fila horizontal */
@media (max-width: 768px) {
    .pd-gallery { flex-direction: column; }
    .pd-main-img { order: 1; }
    .pd-thumbs { order: 2; flex-direction: row; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
    .pd-thumb { width: 56px; height: 56px; }
}
.pd-gallery-btn {
    position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #fff;
    border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); color: #323544;
}
.pd-gallery-btn.wishlist { top: 10px; right: 10px; }
.pd-gallery-btn.wishlist.is-active { color: #e85347; }
.pd-gallery-btn.zoom { top: 52px; right: 10px; }
.pd-gallery-btn.nav-next { top: 50%; right: 10px; transform: translateY(-50%); }

/* Supplier mini-card */
.pd-supplier-mini { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid #ececec; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.pd-supplier-mini > div:not(.pd-supplier-mini-logo) { min-width: 0; flex: 1; }
.pd-supplier-mini-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; background: linear-gradient(135deg,#D2B48C,#ffdcbd); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #8a5a28; font-size: 16px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(171,115,60,.25); }
.pd-supplier-mini-name { font-size: 15.5px; font-weight: 800; color: #1D2530; text-decoration: none; display: block; overflow-wrap: anywhere; }
.pd-supplier-mini-name:hover { color: #AB733C; }
.pd-supplier-mini-sub { font-size: 12px; color: #767676; margin-top: 3px; font-weight: 600; }

/* Fila de 4 stats reales del proveedor (sustituye rating/response-time/dispatch-rate inventados) */
.pd-supplier-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px 16px; margin-top: 8px; background: #fff; border: 1px solid #ececec; border-radius: 12px; }
.pd-supplier-stats .stat { text-align: center; padding: 0 4px; position: relative; }
.pd-supplier-stats .stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; background: #ececec; }
.pd-supplier-stats .stat-value { font-size: 17px; font-weight: 800; color: #1D2530; }
.pd-supplier-stats .stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #999; margin-top: 3px; }

/* Fila de confianza real (rating / tiempo de respuesta / tasa de respuesta) — layout de la referencia */
.pd-supplier-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 14px 4px; margin-top: 8px; background: #fff; border: 1px solid #ececec; border-radius: 12px; }
.pd-trust-stat { text-align: left; padding: 0 12px; }
.pd-trust-stat-value { font-size: 16px; font-weight: 800; color: #1D2530; }
.pd-trust-stat-empty { font-size: 13px; font-weight: 600; color: #b0b0b0; }
.pd-trust-stat-count { font-size: 12px; font-weight: 600; color: #767676; text-decoration: none; }
.pd-trust-stat-count:hover { text-decoration: underline; }
.pd-trust-stat-label { font-size: 11px; color: #999; margin-top: 3px; }

/* Calificar al proveedor (solo si el comprador ya conversó con él) */
.pd-rate-supplier { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin-top: 8px; background: #fdf3ea; border: 1px solid #f0dcc0; border-radius: 12px; flex-wrap: wrap; }
.pd-rate-supplier-label { font-size: 12.5px; font-weight: 700; color: #7a5a30; }
.pd-rate-stars { display: flex; gap: 2px; }
.pd-rate-star { font-size: 22px !important; color: #d9c7ac; cursor: pointer; transition: transform .1s; }
.pd-rate-star:hover { transform: scale(1.15); }
.pd-rate-star.is-filled { color: #AB733C; }

/* ── Columna central: info + precio + atributos ── */
.pd-info h1 { font-size: 21px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; color: #1D2530; }
.pd-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pd-badge.cat { background: #f5e6d0; color: #a0703a; }
.pd-badge.verified { background: #eef7ee; color: #1c7c3f; }

.pd-price-block { border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; padding: 18px 0; margin-bottom: 18px; }
.pd-price-block .pd-price { font-size: 32px; font-weight: 700; color: #1D2530; }
.pd-price-block .pd-price-unit { font-size: 13px; color: #767676; margin-left: 6px; }
.pd-price-block .pd-moq-note { font-size: 12.5px; color: #767676; margin-top: 6px; }

.pd-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pd-qty-label { font-size: 13px; color: #767676; }
.pd-qty-stepper { display: flex; align-items: center; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
.pd-qty-stepper button { width: 34px; height: 36px; border: none; background: #f7f2ea; cursor: pointer; font-size: 16px; }
.pd-qty-stepper input { width: 56px; text-align: center; border: none; outline: none; height: 36px; font-family: inherit; }

/* Resumen de precio calculado en vivo (order box) */
.pd-total-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12.5px; color: #767676; }
.pd-total-row-final { border-top: 1px solid #ececec; margin-top: 2px; padding-top: 12px; margin-bottom: 16px; }
.pd-total-label { font-weight: 600; }
.pd-total-row-final .pd-total-label { font-size: 14px; color: #1D2530; font-weight: 700; }
.pd-total-unit-price { font-weight: 700; color: #323544; }
.pd-total-value { font-size: 19px; font-weight: 800; color: #AB733C; }
#pdUnitPriceNote { font-size: 10.5px; font-weight: 600; color: #1c7c3f; }

.pd-section-title { font-size: 15px; font-weight: 700; color: #1D2530; margin: 0 0 12px; }
.pd-attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #fafafa; border-radius: 8px; padding: 4px 0; margin-bottom: 22px; }
.pd-attr { padding: 12px 18px; min-width: 0; }
.pd-attr-label { font-size: 12px; color: #767676; margin-bottom: 3px; }
.pd-attr-value { font-size: 13px; font-weight: 600; color: #1D2530; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pd-attrs { grid-template-columns: repeat(2, 1fr); } }

.pd-actions { display: flex; gap: 10px; }
.pd-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer; border: none; }
.pd-btn-primary { background: #AB733C; color: #fff; }
.pd-btn-primary:hover { opacity: .92; }
.pd-btn-secondary { background: transparent; border: 1px solid #323544; color: #323544; }
.pd-btn-secondary:hover { background: #323544; color: #fff; }

/* ── Columna derecha: envío + protección + CTA, fija (sin repetir precio) ── */
.pd-order-box { position: sticky; top: 122px; background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 22px; }
.pd-order-box h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.pd-order-box .pd-ship-note { font-size: 12.5px; color: #767676; line-height: 1.6; margin-bottom: 16px; }
.pd-protect-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #ececec; font-size: 13px; font-weight: 600; color: #1D2530; text-decoration: none; }
.pd-trust-item { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid #ececec; }
.pd-trust-item .material-symbols-outlined { font-size: 18px; color: #1c7c3f; flex-shrink: 0; margin-top: 1px; }
.pd-trust-item-title { font-size: 12.5px; font-weight: 700; color: #1D2530; }
.pd-trust-item-desc { font-size: 11.5px; color: #999; margin-top: 3px; line-height: 1.5; }
.pd-secure-icons { display: flex; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.pd-secure-icons span { font-size: 9.5px; background: #f2f2f2; color: #555; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.pd-order-box .pd-btn { width: 100%; margin-top: 14px; height: 48px; }
.pd-order-box .pd-btn-secondary { margin-top: 10px; }
.pd-order-disclaimer { font-size: 10.5px; color: #999; margin-top: 14px; line-height: 1.6; }

/* Related products: "Other recommendations for your business" */
/* ── Precios por rango de cantidad ── */
.pd-tiers-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 4px; }
.pd-tier { display: flex; flex-direction: column; }
.pd-tier-price { font-size: 22px; font-weight: 700; color: #1D2530; }
.pd-tier-range { font-size: 11px; color: #767676; }

/* ── Key Features (debajo del precio) ── */
.pd-features { margin: 4px 0 18px; }
.pd-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pd-features-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: #323544; flex: 0 1 auto; white-space: nowrap; }
.pd-features-list .material-symbols-outlined { font-size: 17px; color: #1c7c3f; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 640px) { .pd-features-list li { white-space: normal; } }

/* ── Variantes (color / tamaño) ── */
.pd-variants-box { margin: 4px 0 18px; }
.pd-variant-group { margin-bottom: 16px; }
.pd-variant-group:last-child { margin-bottom: 0; }
.pd-variant-label { font-size: 12.5px; color: #767676; display: block; margin-bottom: 8px; }
.pd-variant-label strong { color: #1D2530; }
.pd-variant-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px #e0e0e0 inset; }
.pd-swatch.is-selected { border-color: #AB733C; box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #AB733C; }
.pd-variant-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-chip { padding: 7px 16px; border-radius: 8px; border: 1px solid #e0e0e0; background: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #323544; }
.pd-chip.is-selected { border-color: #AB733C; background: #fdf3ea; color: #AB733C; }

/* ── Bloques de descripción enriquecida ── */
.pd-description-section { margin: 10px 0 40px; padding: 0; }
.pd-description-header {
    font-size: 19px; font-weight: 800; color: #1D2530; margin: 0 0 16px;
    padding-bottom: 12px; border-bottom: 2px solid #f0f0f0;
}
.pd-description-container {
    background: #fff; border: 1px solid #ececec; border-radius: 14px;
    padding: 24px 28px; display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 640px) { .pd-description-container { padding: 18px; } }
.pd-block-text { line-height: 1.7; color: #323544; }
.pd-text-sm { font-size: 13px; } .pd-text-base { font-size: 15px; } .pd-text-lg { font-size: 18px; }
.pd-text-xl { font-size: 22px; } .pd-text-2xl { font-size: 28px; }
.pd-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.pd-font-mono { font-family: 'Courier New', monospace; }
.pd-weight-bold { font-weight: 700; }
.pd-block-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-block-table th, .pd-block-table td { border: 1px solid #ececec; padding: 10px 14px; text-align: left; }
.pd-block-table th { background: #f7f7f7; font-weight: 700; color: #1D2530; }
.pd-block-carousel { position: relative; overflow: hidden; border-radius: 12px; background: #f2f2f2; }
.pd-carousel-viewport { overflow: hidden; }
.pd-carousel-track { display: flex; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.pd-carousel-slide { flex: 0 0 100%; aspect-ratio: 16/9; }
.pd-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pd-carousel-arrow.prev { left: 12px; } .pd-carousel-arrow.next { right: 12px; }
.pd-carousel-arrow:hover { background: #fff; }
.pd-carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.pd-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; transition: background .2s, width .2s; }
.pd-carousel-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.pd-block-video { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.pd-block-video iframe, .pd-block-video video { width: 100%; height: 100%; border: none; }
.pd-block-button { text-align: center; }
.pd-block-btn { display: inline-flex; background: #AB733C; color: #fff; padding: 13px 32px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
.pd-block-btn:hover { opacity: .9; }

.pd-related { max-width: 1500px; margin: 30px auto 50px; padding: 0 24px; }
.pd-related h2 { font-size: 19px; font-weight: 700; margin: 0 0 18px; }
.pd-related-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 992px) { .pd-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .pd-related-grid { grid-template-columns: repeat(2, 1fr); } }
.pd-related-card { background: #fff; border-radius: 8px; padding: 10px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pd-related-img { width: 100%; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: #f2f2f2; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.pd-related-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-related-name { font-size: 12px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-related-price { font-size: 14px; font-weight: 700; color: #1D2530; }
.pd-related-sup { font-size: 11px; color: #777; margin-top: 2px; }

/* ── Modal "Send Inquiry" (product.php): widget fijo abajo-derecha, conecta al comprador con el proveedor ── */
.inquiry-modal-overlay {
    position: fixed; bottom: 0; right: 24px; z-index: 400;
    display: none; align-items: flex-end; justify-content: flex-end;
    width: auto; height: auto; background: transparent; pointer-events: none;
}
.inquiry-modal-overlay.active { display: flex; }
.inquiry-modal {
    background: #fff; border-radius: 12px 12px 0 0; width: 380px; max-width: calc(100vw - 24px);
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0,0,0,.22); padding: 20px;
    pointer-events: auto;
    animation: inquirySlideUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes inquirySlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 480px) { .inquiry-modal-overlay { right: 0; } .inquiry-modal { width: 100vw; border-radius: 12px 12px 0 0; } }
.inquiry-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.inquiry-modal-header h3 { font-size: 19px; font-weight: 700; margin: 0; color: #1D2530; }
.inquiry-modal-close { background: none; border: none; cursor: pointer; color: #767676; padding: 4px; }
.inquiry-modal-to { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #ececec; }
.inquiry-modal-to .material-symbols-outlined { color: #AB733C; }
.inquiry-modal-to strong { display: block; font-size: 13.5px; color: #1D2530; }
.inquiry-modal-to-sub { font-size: 11px; color: #999; }
.inquiry-modal-product { display: flex; align-items: center; gap: 12px; background: #fafafa; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.inquiry-modal-product-img { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f2f2f2; }
.inquiry-modal-product-img img { width: 100%; height: 100%; object-fit: cover; }
.inquiry-modal-product-info { flex: 1; min-width: 0; }
.inquiry-modal-product-name { font-size: 12.5px; font-weight: 600; color: #1D2530; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inquiry-modal-product-sku { font-size: 11px; color: #999; margin-top: 3px; }
.inquiry-modal-qty { flex-shrink: 0; }
.inquiry-modal-qty label { display: block; font-size: 10.5px; color: #999; margin-bottom: 3px; }
.inquiry-modal-qty-row { display: flex; align-items: center; gap: 6px; }
.inquiry-modal-qty-row input { width: 60px; height: 32px; border: 1px solid #e5e5e5; border-radius: 6px; text-align: center; font-family: inherit; }
.inquiry-modal-qty-row span { font-size: 11.5px; color: #767676; }
.inquiry-modal-row2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.inquiry-field { margin-bottom: 14px; }
.inquiry-field label { display: block; font-size: 12px; font-weight: 600; color: #323544; margin-bottom: 5px; }
.inquiry-field input, .inquiry-field textarea {
    width: 100%; border: 1px solid #e5e5e5; border-radius: 8px; padding: 9px 12px;
    font-family: inherit; font-size: 13px; color: #1D2530; resize: vertical;
}
.inquiry-field input:focus, .inquiry-field textarea:focus { outline: none; border-color: #AB733C; }
.inquiry-error { color: #c0392b; font-size: 12.5px; margin-bottom: 10px; min-height: 1em; }
.inquiry-success { display: none; text-align: center; padding: 20px 0 4px; }
.inquiry-success.active { display: block; }
.inquiry-success .material-symbols-outlined { font-size: 44px; color: #1c7c3f; margin-bottom: 10px; }
.inquiry-success p { font-size: 13.5px; color: #555; line-height: 1.6; margin-bottom: 18px; }

/* ── Chat now: ventana de chat fija abajo-derecha, estilo Alibaba (imagen de referencia:
   panel principal + lista "Mensajes" SIEMPRE visible al lado, sin necesidad de alternar) ── */
.chat-panel {
    position: fixed; bottom: 0; right: 24px; z-index: 400;
    width: 1000px; max-width: calc(100vw - 24px); height: 700px; max-height: 88vh;
    background: #fff; border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.22);
    display: none; overflow: hidden;
    animation: inquirySlideUp .25s cubic-bezier(.4,0,.2,1);
}
.chat-panel.active { display: flex; }
.chat-panel.is-expanded { width: 1000px; height: 88vh; }
.chat-panel-body-split { flex: 1; min-height: 0; display: flex; min-width: 0; }

/* Columna principal (izquierda): header + mensajes + producto + input */
.chat-conv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid #ececec; }
.chat-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #ececec; flex-shrink: 0;
}
.chat-panel-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.chat-panel-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#D2B48C,#ffdcbd);
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: #a0703a; font-size: 13px; flex-shrink: 0;
}
.chat-panel-name { font-size: 14px; font-weight: 700; color: #1D2530; }
.chat-panel-status { font-size: 11.5px; color: #767676; display: flex; align-items: center; gap: 4px; }
.chat-panel-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #1c7c3f; display: inline-block; }
.chat-panel-header-actions { display: flex; align-items: center; gap: 4px; }
.chat-icon-btn { background: none; border: none; cursor: pointer; color: #767676; padding: 5px; border-radius: 6px; display: flex; }
.chat-icon-btn:hover { background: #f2f2f2; color: #323544; }
.chat-icon-btn .material-symbols-outlined { font-size: 19px; }

.chat-panel-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 78%; font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; }
.chat-msg-system { align-self: center; max-width: 95%; background: #fdf3ea; color: #a0703a; text-align: center; font-size: 11.5px; }
.chat-msg-me { align-self: flex-end; background: #AB733C; color: #fff; border-bottom-right-radius: 2px; }
.chat-msg-them { align-self: flex-start; background: #f2f2f2; color: #1D2530; border-bottom-left-radius: 2px; }

.chat-product-card { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid #ececec; background: #fafafa; flex-shrink: 0; }
.chat-payment-reveal { background: #eef7ee; border-top: 1px solid #cde8cd; padding: 10px 18px; flex-shrink: 0; max-height: 160px; overflow-y: auto; }
.chat-payment-reveal-title { font-size: 11.5px; font-weight: 700; color: #1c7c3f; margin-bottom: 6px; }
.chat-payment-reveal-method { font-size: 11.5px; color: #2d4a2d; margin-bottom: 8px; line-height: 1.6; }
.chat-payment-reveal-method strong { display: block; color: #1D2530; }
.chat-payment-reveal-notes { color: #6b8a6b; font-style: italic; }
.chat-product-card-img { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f2f2f2; }
.chat-product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.chat-product-card-info { flex: 1; min-width: 0; }
.chat-product-card-label { font-size: 9.5px; color: #999; text-transform: uppercase; letter-spacing: .03em; }
.chat-product-card-name { font-size: 11.5px; font-weight: 600; color: #1D2530; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-product-card-price { font-size: 11px; color: #767676; }

.chat-panel-toolbar { display: flex; gap: 16px; padding: 10px 18px 0; flex-shrink: 0; }
.chat-toolbar-icon { font-size: 20px; color: #999; cursor: pointer; }
.chat-toolbar-icon:hover { color: #AB733C; }
.chat-panel-input-row { display: flex; gap: 10px; align-items: flex-end; padding: 8px 18px 16px; flex-shrink: 0; }
.chat-panel-input-row textarea {
    flex: 1; border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px 14px;
    font-family: inherit; font-size: 13px; resize: none; max-height: 90px; background: #fafafa;
}
.chat-panel-input-row textarea:focus { outline: none; border-color: #AB733C; }
.chat-send-btn {
    background: #d9d9d9; color: #fff; border: none; border-radius: 999px;
    padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.chat-send-btn.is-ready { background: #AB733C; }
.chat-send-btn:hover.is-ready { opacity: .9; }
.chat-send-btn:disabled { opacity: .7; cursor: default; }

/* Columna derecha: "Mensajes" — SIEMPRE visible junto al chat, igual a la referencia */
.chat-conv-list { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; }
.chat-conv-list-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #ececec; flex-shrink: 0; }
.chat-conv-list-header h4 { font-size: 16px; font-weight: 700; margin: 0; color: #1D2530; }
.chat-conv-list-items { flex: 1; overflow-y: auto; }

@media (max-width: 900px) {
    .chat-panel { right: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; }
    .chat-panel.is-expanded { width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; }
    .chat-conv-list { display: none !important; }
    .chat-panel-messages, .chat-msg { max-width: 100%; box-sizing: border-box; }
    .chat-msg { word-break: break-word; }
}

/* ── Buyer auth screens (login/register): pantalla dividida, sin header/footer de tienda ── */
.buyer-auth-wrap { min-height: 100vh; display: flex; background: #fff; }
.buyer-auth-visual {
    flex: 1.1; position: relative; background-size: cover; background-position: center;
    display: none;
}
@media (min-width: 900px) { .buyer-auth-visual { display: block; } }
.buyer-auth-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%); }
.buyer-auth-visual-badge {
    position: absolute; background: rgba(255,255,255,.95); border-radius: 10px; padding: 10px 16px;
    font-size: 13px; font-weight: 700; color: #1D2530; box-shadow: 0 4px 14px rgba(0,0,0,.15);
    border-left: 3px solid #AB733C;
}
.buyer-auth-form-col { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px; max-width: 480px; margin: 0 auto; }
.buyer-auth-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; text-decoration: none; }
.buyer-auth-logo svg { height: 26px; }
.buyer-auth-title { font-size: 26px; font-weight: 700; color: #1D2530; margin-bottom: 24px; }
.buyer-auth-field { margin-bottom: 16px; }
.buyer-auth-field label { display: block; font-size: 13px; font-weight: 600; color: #323544; margin-bottom: 6px; }
.buyer-auth-field input {
    width: 100%; height: 46px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 14px;
    font-family: inherit; font-size: 14px; color: #1D2530;
}
.buyer-auth-field input:focus { outline: none; border-color: #AB733C; }
.buyer-auth-submit {
    width: 100%; height: 48px; background: #AB733C; color: #fff; border: none; border-radius: 999px;
    font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px;
}
.buyer-auth-submit:hover { opacity: .92; }
.buyer-auth-switch { text-align: center; margin-top: 22px; font-size: 13px; color: #767676; }
.buyer-auth-switch a { color: #AB733C; font-weight: 700; text-decoration: none; }
.buyer-auth-error { background: #fdeceb; border: 1px solid #f3c9c4; color: #c0392b; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.buyer-auth-back { font-size: 12.5px; color: #999; text-decoration: none; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 4px; }
.buyer-auth-back:hover { color: #AB733C; }
.buyer-auth-oauth-btn {
    width: 100%; height: 46px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 14px; font-weight: 600; color: #1D2530; cursor: pointer; margin-bottom: 10px;
}
.buyer-auth-oauth-btn:hover { background: #fafafa; border-color: #AB733C; }
.buyer-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #999; font-size: 12px; }
.buyer-auth-divider::before, .buyer-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.buyer-auth-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1D2530; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px;
    opacity: 0; pointer-events: none; transition: all .25s; z-index: 999;
}
.buyer-auth-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Dropdown "Iniciar sesión" (header público, solo visible sin sesión) ── */
.signin-dropdown { position: relative; }
.signin-dropdown--panel {
    position: absolute; top: calc(100% + 14px); right: 0; z-index: 80;
    width: 300px; background: #fff; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.16); padding: 18px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.signin-dropdown::before { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 14px; }
.signin-dropdown:hover .signin-dropdown--panel { opacity: 1; visibility: visible; transform: translateY(0); }
.signin-dropdown--title { font-size: 14.5px; font-weight: 700; color: #1D2530; margin-bottom: 12px; }
.signin-dropdown--or { font-size: 11.5px; color: #999; text-align: center; margin: 14px 0 10px; }
.signin-dropdown--oauth { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.signin-dropdown--oauth button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ececec; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.signin-dropdown--oauth button:hover { border-color: #AB733C; }
.signin-dropdown--terms { font-size: 10.5px; color: #999; line-height: 1.5; text-align: center; margin-bottom: 14px; }
.signin-dropdown--terms a { color: #AB733C; text-decoration: underline; }
.signin-dropdown--list { border-top: 1px solid #ececec; padding-top: 10px; display: flex; flex-direction: column; }
.signin-dropdown--list a { padding: 8px 4px; font-size: 13px; color: #323544; text-decoration: none; border-radius: 6px; }
.signin-dropdown--list a:hover { background: #f7f7f7; color: #AB733C; }

/* ── Buyer account settings (buyer_account.php): estructura fiel a la referencia,
   ancho de contenido = .container (mismo max-width:1500px del resto del sitio) ── */
.acct-wrap { margin: 28px auto 60px; }
.acct-head { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #ececec; flex-wrap: wrap; }
.acct-head-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fde3d3; color: #AB733C; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.acct-head-info { flex: 1; min-width: 220px; }
@media (max-width: 400px) { .acct-head-info { min-width: 0; width: 100%; } }
.acct-head-info h1 { font-size: 22px; font-weight: 700; color: #1D2530; margin: 0 0 8px; }
.acct-head-row { font-size: 13px; color: #555; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.acct-head-label { color: #999; }
.acct-edit-ic { font-size: 15px !important; color: #999; cursor: pointer; }
.acct-edit-ic:hover { color: #AB733C; }
.acct-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.acct-btn-dark { background: #1D2530; color: #fff; border: none; border-radius: 999px; padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; }
.acct-btn-dark:hover { opacity: .9; }
.acct-head-sub { font-size: 12.5px; color: #999; margin: 0; }

/* Grilla de datos de cuenta: cada dato en su propia tarjeta con botón de copiar */
.acct-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 640px) { .acct-info-grid { grid-template-columns: 1fr; } }
.acct-info-item { background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 14px 16px; min-width: 0; }
.acct-info-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #999; margin-bottom: 6px; }
.acct-info-value-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-info-value { font-size: 14px; font-weight: 600; color: #1D2530; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-copy-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: none; background: #fff; color: #999; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, background .15s; }
.acct-copy-btn:hover { color: #AB733C; background: #fdf3ea; }
.acct-copy-btn.is-copied { color: #1c7c3f; background: #eaf7ea; }
.acct-copy-btn .material-symbols-outlined { font-size: 16px; }
.acct-link { font-size: 13px; color: #555; text-decoration: none; }
.acct-link:hover { color: #AB733C; }
.acct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; }

/* Páginas separadas de cuenta (buyer/account/profile/, buyer/account/security/) */
.acct-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #767676; text-decoration: none; margin-bottom: 18px; }
.acct-back-link:hover { color: #AB733C; }
.acct-back-link .material-symbols-outlined { font-size: 18px; }
.acct-section-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: #1D2530; margin: 0 0 6px; }
.acct-section-title .material-symbols-outlined { font-size: 24px; color: #AB733C; }
.acct-section-sub { font-size: 13px; color: #767676; margin: 0 0 22px; max-width: 560px; }
.acct-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.acct-related-item { display: flex; align-items: flex-start; gap: 12px; background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 14px 16px; }
.acct-related-item .material-symbols-outlined { font-size: 20px; color: #AB733C; flex-shrink: 0; margin-top: 1px; }
.acct-related-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #999; margin-bottom: 3px; }
.acct-related-value { display: block; font-size: 13.5px; font-weight: 600; color: #1D2530; }
.acct-card h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1D2530; padding: 16px 18px; border-bottom: 1px solid #ececec; margin: 0; }
.acct-card h3 .material-symbols-outlined { font-size: 18px; color: #767676; }
.acct-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; font-size: 13.5px; color: #323544; cursor: pointer; border-bottom: 1px solid #f2f2f2; }
.acct-row:last-child { border-bottom: none; }
.acct-row:hover { background: #fafafa; }
.acct-row.is-disabled { color: #999; }
.acct-row .material-symbols-outlined { font-size: 18px; color: #ccc; }
.acct-inline-form { display: none; background: #fafafa; border-radius: 12px; padding: 20px; margin-top: 16px; max-width: 460px; }
.acct-inline-form.is-open { display: block; }

/* ── Buyer icon rail (compartido: buyer_panel/buyer_messages/buyer_account) ── */
.buyer-page-wrap { max-width: 1500px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-start; gap: 20px; }

/* ── Rail único que se ensancha al pasar el cursor (no es un menú aparte): mismo
   elemento, overflow oculto que va revelando las etiquetas junto a los íconos a
   medida que crece. Fondo gris (igual al body), solo con borde separador —
   nunca blanco — y sombra suave únicamente mientras está expandido/superpuesto. ── */
body.buyer-page { background: #f5f6f7; }
.buyer-top-header { background: #fff; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #ececec; }
.buyer-rail-wrap {
    position: sticky; top: 58px; flex-shrink: 0;
    width: 60px; height: calc(100vh - 58px);
    /* sticky también actúa como contexto de posicionamiento: el rail hijo crece
       con position:absolute y se superpone al contenido sin empujar el layout */
}
.buyer-rail {
    position: absolute; top: 0; left: 0;
    width: 60px; height: 100%; overflow: hidden;
    background: #f5f6f7; border-right: 1px solid #e2e4e6;
    display: flex; flex-direction: column; gap: 3px; padding: 16px 10px;
    box-sizing: border-box;
    transition: width .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
}
.buyer-rail-wrap:hover .buyer-rail {
    width: 230px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
}
.buyer-rail-ic {
    height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; gap: 12px; padding: 0 9px;
    color: #767676; cursor: pointer; text-decoration: none; overflow: hidden;
}
.buyer-rail-ic .material-symbols-outlined { flex-shrink: 0; }
.buyer-rail-ic-label {
    font-size: 13.5px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px;
    opacity: 0; transition: opacity .12s ease;
}
.buyer-rail-wrap:hover .buyer-rail-ic-label { opacity: 1; transition: opacity .2s ease .08s; }
.buyer-rail-ic:hover { background: rgba(0,0,0,.05); color: #323544; }
.buyer-rail-ic.is-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: #AB733C; }
.buyer-rail-ic.is-disabled { opacity: .55; }
.buyer-rail-spacer { flex: 1; }
.buyer-rail-heading {
    font-size: 10.5px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .04em;
    padding: 10px 9px 4px; margin: 0; white-space: nowrap; overflow: hidden; flex-shrink: 0;
    opacity: 0; transition: opacity .12s ease;
}
.buyer-rail-wrap:hover .buyer-rail-heading { opacity: 1; transition: opacity .2s ease .08s; }
.buyer-rail-flyout-badge { background: #e85347; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: auto; }

/* ── Sidebar ancho y permanente (solo en Dashboard/buyer_panel.php): fijo, con la
   altura restante del viewport, y borde de separación a la derecha — no blanco. ── */
.buyer-side-wide {
    width: 260px; flex-shrink: 0; padding: 20px 16px;
    position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto;
    background: #f5f6f7; border-right: 1px solid #e2e4e6; box-sizing: border-box;
}
.buyer-side-wide-heading { font-size: 10.5px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .04em; padding: 18px 8px 6px; margin: 0; }
.buyer-side-wide-nav { display: flex; flex-direction: column; gap: 2px; }
.buyer-side-wide-nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: #323544; text-decoration: none; cursor: pointer;
}
.buyer-side-wide-nav a:hover { background: #f7f7f7; }
.buyer-side-wide-nav a.is-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: #1D2530; font-weight: 700; }
.buyer-side-wide-nav a .material-symbols-outlined { font-size: 19px; color: #767676; flex-shrink: 0; }
.buyer-side-wide-nav a.is-active .material-symbols-outlined { color: #1D2530; }
.buyer-side-wide-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid #ececec; }
.buyer-side-wide-bottom a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #767676; text-decoration: none; }
.buyer-side-wide-bottom a:hover { color: #AB733C; }
.buyer-side-wide-bottom .material-symbols-outlined { font-size: 19px; }
@media (max-width: 900px) { .buyer-side-wide { display: none; } }

@media (max-width: 640px) {
    .buyer-page-wrap { padding: 0 12px; gap: 8px; }
    .buyer-rail { width: 48px; }
    .buyer-rail-ic { width: 34px; height: 34px; }
    .buyer-rail-flyout { display: none; }
}
.buyer-panel-content { padding-top: 24px; padding-bottom: 60px; }

/* ── Header minimalista exclusivo del panel de comprador (distinto al de landing/marketplace) ── */
.buyer-top-header-inner { max-width: 1500px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; }
.buyer-top-header-left { display: flex; align-items: center; gap: 14px; }
.buyer-top-logo { display: flex; align-items: center; }
.buyer-top-sep { color: #ddd; font-size: 16px; }
.buyer-top-title { font-size: 14px; font-weight: 600; color: #323544; text-decoration: none; }
.buyer-top-header-right { display: flex; align-items: center; gap: 18px; }
.header-lang-mini { position: relative; display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #323544; cursor: pointer; }
.header-lang-mini-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 170px;
    background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; display: none;
}
.header-lang-mini:hover .header-lang-mini-menu { display: block; }
.header-lang-mini-menu a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: #323544; text-decoration: none; }
.header-lang-mini-menu a:hover { background: #f7f7f7; }
.header-lang-mini-menu a.is-active { color: #AB733C; font-weight: 700; }
.buyer-top-sell-link { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #323544; text-decoration: none; }
.buyer-top-sell-link:hover { color: #AB733C; }
@media (max-width: 640px) {
    .buyer-top-sell-link span:last-child { display: none; } .buyer-top-title { display: none; } .buyer-top-sep { display: none; }
    /* El label del idioma ("English (US)", "Deutsch"...) desborda el header en móvil junto a los
       otros 3 iconos — se oculta y queda solo el icono, igual que ya se hacía con "Start selling". */
    .header-lang-mini > span:not(.material-symbols-outlined) { display: none; }
    .buyer-top-header-right { gap: 10px; }
}
.bp-top-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 20px; margin-bottom: 20px; max-width: 1500px; }
.bp-top-user { display: flex; align-items: center; gap: 14px; }
.bp-badge { background: #eef7ee; color: #1c7c3f; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.bp-stats-row { display: flex; gap: 16px; margin-bottom: 20px; }
.bp-stat { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 18px 24px; flex: 1; min-width: 0; max-width: 220px; text-align: center; }
.bp-stat-label { word-wrap: break-word; }
@media (max-width: 480px) {
    .bp-stats-row { gap: 8px; }
    .bp-stat { padding: 12px 8px; max-width: none; }
    .bp-stat-num { font-size: 20px !important; }
    .bp-stat-label { font-size: 10px !important; }
}
.bp-top-card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.bp-stat-num { display: block; font-size: 28px; font-weight: 700; color: #1D2530; }
.bp-stat-label { font-size: 12px; color: #767676; }
.bp-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px; max-width: 1500px; }
.bp-empty { text-align: center; padding: 30px 0; color: #999; }
.bp-empty .material-symbols-outlined { font-size: 40px; color: #d6c3a8; margin-bottom: 10px; display: block; }
.bp-empty p { margin-bottom: 16px; font-size: 13px; }

/* Pills de filtro de "Orders" */
.bp-order-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.bp-order-pills span {
    padding: 7px 14px; border-radius: 999px; border: 1px solid #e0e0e0; font-size: 12px;
    color: #555; cursor: pointer; white-space: nowrap;
}
.bp-order-pills span:hover { border-color: #AB733C; color: #AB733C; }
.bp-order-pills span.is-active { background: #1D2530; border-color: #1D2530; color: #fff; font-weight: 700; }

/* Promo card ancha (bajo Orders) */
.bp-promo-card {
    margin-top: 16px; background: linear-gradient(135deg,#fdf0e4,#fce3cd); border-radius: 12px;
    padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.bp-promo-title { font-size: 15px; font-weight: 700; color: #1D2530; margin: 0 0 6px; }
.bp-promo-desc { font-size: 12.5px; color: #6b5a48; margin: 0 0 14px; max-width: 380px; line-height: 1.5; }
.bp-promo-btn { display: inline-flex; background: #1D2530; color: #fff; border-radius: 999px; padding: 9px 20px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.bp-promo-btn:hover { opacity: .9; }
.bp-promo-icon { font-size: 64px; color: #AB733C; opacity: .5; flex-shrink: 0; }
@media (max-width: 640px) { .bp-promo-icon { display: none; } }

/* Columna derecha: tarjetas pequeñas */
.bp-side-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.bp-side-card h4 { font-size: 14px; font-weight: 700; color: #1D2530; margin: 0 0 12px; }
.bp-side-empty { text-align: center; padding: 20px 0 6px; color: #999; }
.bp-side-empty .material-symbols-outlined { font-size: 32px; color: #e8d9c4; margin-bottom: 8px; display: block; }
.bp-side-empty p { font-size: 12.5px; margin-bottom: 8px; }
.bp-side-empty a { font-size: 12px; color: #AB733C; font-weight: 700; text-decoration: none; }
.bp-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.bp-history-item { text-decoration: none; display: block; min-width: 0; }
.bp-history-img { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: #f2f2f2; margin-bottom: 6px; }
.bp-history-img img { width: 100%; height: 100%; object-fit: cover; }
.bp-history-price { font-size: 12px; font-weight: 700; color: #1D2530; }
.bp-history-moq { font-size: 10.5px; color: #999; }
.bp-promo-mini { display: flex; align-items: center; justify-content: space-between; background: #fdf0e4; border-radius: 10px; padding: 14px; text-decoration: none; }
.bp-promo-mini strong { display: block; font-size: 12.5px; color: #1D2530; margin-bottom: 3px; }
.bp-promo-mini span:not(.material-symbols-outlined) { font-size: 11px; color: #AB733C; font-weight: 700; }
.bp-promo-mini .material-symbols-outlined { font-size: 26px; color: #AB733C; }

/* Grid principal del dashboard (antes era un style="" inline que no podía responsivizarse) */
.bp-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; padding: 20px 0 60px; }
@media (max-width: 900px) { .bp-main { grid-template-columns: 1fr; padding: 16px 0 40px; } }

/* Chips de búsquedas recientes */
.bp-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-search-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px;
    background: #f7f7f7; color: #323544; font-size: 12px; font-weight: 600; text-decoration: none;
}
.bp-search-chip:hover { background: #fdf3ea; color: #AB733C; }
.bp-search-chip .material-symbols-outlined { font-size: 15px; color: #999; }
.header-unread-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #e85347; border: 1.5px solid #fff; }

/* ── Buyer panel (cuenta / mensajes): layout compartido sidebar + main ── */
.buyer-panel-wrap { width:100%; max-width: 1500px; margin: 24px auto 60px; padding: 0 24px; display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
@media (max-width: 768px) { .buyer-panel-wrap { grid-template-columns: 1fr; padding: 0 16px; } }
.buyer-panel-sidebar { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 20px; position: sticky; top: 20px; }
.buyer-panel-user { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid #ececec; }
.buyer-panel-user-name { font-size: 13.5px; font-weight: 700; color: #1D2530; }
.buyer-panel-user-email { font-size: 11px; color: #999; }
.buyer-panel-nav { display: flex; flex-direction: column; gap: 2px; }
.buyer-panel-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #323544; font-size: 13px; font-weight: 600; position: relative; }
.buyer-panel-nav a:hover { background: #f7f7f7; }
.buyer-panel-nav a.is-active { background: #fdf3ea; color: #AB733C; }
.buyer-panel-nav a .material-symbols-outlined { font-size: 19px; }
.buyer-panel-nav-count { margin-left: auto; background: #e5e5e5; color: #555; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.buyer-panel-main { min-width: 0; }
.buyer-panel-title { font-size: 22px; font-weight: 700; color: #1D2530; margin-bottom: 18px; }
.buyer-panel-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 22px; margin-bottom: 18px; }
.buyer-panel-card h3 { font-size: 15px; font-weight: 700; color: #1D2530; margin: 0 0 16px; }
.buyer-panel-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.buyer-panel-alert.success { background: #eef7ee; color: #1c7c3f; }
.buyer-panel-alert.error { background: #fdeceb; color: #c0392b; }
.buyer-panel-meta { font-size: 11.5px; color: #999; text-align: center; }

/* ── Buyer messages inbox (buyer_messages.php): lista + hilo, estilo "Mi Alibaba" ── */
.msgs-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; height: calc(100vh - 58px - 40px); min-height: 420px; margin: 20px 0; }
.msgs-back-btn { display: none; }
/* Declaración base de .msgs-thread — DEBE ir antes del @media de abajo: si estuviera después,
   ganaría en móvil por orden de aparición (misma especificidad) y el panel de hilo quedaría
   siempre visible aunque no haya conversación seleccionada, apilado debajo de la lista. */
.msgs-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
@media (max-width: 992px) {
    .msgs-wrap {
        grid-template-columns: 1fr;
        height: calc(100vh - 58px - 60px); height: calc(100dvh - 58px - 60px);
        border-radius: 0; margin: 0;
    }
    .msgs-list, .msgs-sidebar { max-height: none; }
    /* Patrón maestro-detalle: en móvil solo se ve UN panel a la vez, no ambos apilados */
    .msgs-list { display: block; }
    .msgs-thread { display: none; }
    .msgs-wrap.show-thread .msgs-list { display: none; }
    .msgs-wrap.show-thread .msgs-thread { display: flex; }
    .msgs-back-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: #323544; margin-right: 4px; flex-shrink: 0; }
    .msgs-thread-header { display: flex; align-items: center; }
}
.msgs-sidebar { border-right: 1px solid #ececec; padding: 18px; }
.msgs-sidebar h2 { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.msgs-list { border-right: 1px solid #ececec; overflow-y: auto; min-height: 0; }
.msgs-list-item { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.msgs-list-item:hover { background: #fafafa; }
.msgs-list-item.is-active { background: #fdf3ea; }
.msgs-list-item-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#D2B48C,#ffdcbd); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #a0703a; font-size: 12px; flex-shrink: 0; }
.msgs-list-item-body { flex: 1; min-width: 0; }
.msgs-list-item-name { font-size: 13px; font-weight: 700; color: #1D2530; display: flex; justify-content: space-between; }
.msgs-list-item-preview { font-size: 11.5px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msgs-list-item-badge { background: #AB733C; color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.msgs-thread-header { padding: 16px 20px; border-bottom: 1px solid #ececec; font-weight: 700; color: #1D2530; flex-shrink: 0; }
.msgs-thread-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msgs-thread-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #aaa; font-size: 13px; flex-direction: column; gap: 8px; }
.msgs-thread-input-wrap { border-top: 1px solid #ececec; flex-shrink: 0; }
.msgs-thread-input { display: flex; gap: 8px; padding: 10px 18px 16px; align-items: flex-end; }
.msgs-thread-input textarea {
    flex: 1; border: 1px solid #e5e5e5; border-radius: 10px; padding: 12px 14px;
    font-family: inherit; font-size: 13.5px; resize: none; line-height: 1.5;
    min-height: 84px; max-height: 220px; overflow-y: auto;
}
.msgs-thread-input textarea:focus { outline: none; border-color: #AB733C; }
.msgs-thread-input .chat-send-btn { align-self: flex-end; }

/* Barra de herramientas: emoji / imagen / archivo */
.msgs-toolbar { display: flex; align-items: center; gap: 4px; padding: 10px 14px 0; }
.msgs-tool-btn { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: #767676; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msgs-tool-btn:hover { background: #f2f2f2; color: #323544; }
.msgs-tool-btn .material-symbols-outlined { font-size: 20px; }

/* Selector de emojis */
.msgs-emoji-wrap { position: relative; }
.msgs-emoji-panel {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
    width: 260px; max-height: 220px; overflow-y: auto;
    background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
    padding: 10px; display: none; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.msgs-emoji-panel.is-open { display: grid; }
.msgs-emoji-panel button { border: none; background: none; font-size: 18px; padding: 5px; border-radius: 6px; cursor: pointer; line-height: 1; }
.msgs-emoji-panel button:hover { background: #f2f2f2; }

/* Preview de adjuntos antes de enviar */
.msgs-attach-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px; }
.msgs-attach-preview:empty { display: none; }
.msgs-attach-chip {
    position: relative; display: flex; align-items: center; gap: 6px;
    background: #f7f2ea; border-radius: 8px; padding: 6px 10px 6px 6px; font-size: 11.5px; color: #323544;
    max-width: 180px; margin-top: 10px;
}
.msgs-attach-chip img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.msgs-attach-chip .msgs-attach-icon { width: 28px; height: 28px; border-radius: 6px; background: #e5d7c2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #8a7660; }
.msgs-attach-chip .msgs-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgs-attach-chip .msgs-attach-remove { background: none; border: none; color: #999; cursor: pointer; padding: 0; display: flex; }
.msgs-attach-chip.is-uploading { opacity: .6; }
.msgs-attach-chip .msgs-attach-spinner { width: 12px; height: 12px; border: 2px solid #ccc; border-top-color: #AB733C; border-radius: 50%; animation: msgsSpin .6s linear infinite; }
@keyframes msgsSpin { to { transform: rotate(360deg); } }

/* Adjuntos ya enviados, dentro de una burbuja de mensaje */
.chat-msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-msg-attachments img { width: 90px; height: 90px; border-radius: 8px; object-fit: cover; cursor: pointer; }
.chat-msg-attach-file { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.06); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; text-decoration: none; color: inherit; }
.chat-msg-me .chat-msg-attach-file { background: rgba(255,255,255,.2); color: #fff; }

.pd-not-found { max-width: 700px; margin: 70px auto; padding: 0 24px; text-align: center; color: #777; }
.pd-not-found i, .pd-not-found .material-symbols-outlined { font-size: 60px; color: #d6c3a8; margin-bottom: 18px; display: block; }
.pd-not-found h1 { font-size: 22px; color: #1D2530; margin-bottom: 8px; }

/* ============================================================
   EXPERIENCIA TIPO APP MÓVIL (lado público/comprador)
   ============================================================ */

/* ── Sensación general de app nativa: sin resaltado táctil azul, sin rebote de
   scroll, feedback de "presión" al tocar botones/tarjetas, scroll suave ── */
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
@media (max-width: 900px) {
    .btn, .pd-btn, .mk-btn, .chat-send-btn, .mobile-app-nav-item, .mk-card,
    .msgs-list-item, button, a.pd-related-card, a.msgs-list-item {
        transition: transform .12s ease, opacity .12s ease;
    }
    .btn:active, .pd-btn:active, .mk-btn:active, .chat-send-btn:active,
    .mobile-app-nav-item:active, .mk-card:active, button:active {
        transform: scale(.96); opacity: .85;
    }
}
/* Transición de entrada suave del contenido de la página (una sola vez, al cargar) */
@media (max-width: 900px) {
    body.buyer-page main, body.buyer-page .buyer-page-wrap,
    #main-header + *, .pd-wrap, .mk-grid, .msgs-wrap {
        animation: ikPageFadeIn .28s ease both;
    }
}
@keyframes ikPageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Bottom tab bar (equivalente móvil al header/sidebar de escritorio) ── */
.mobile-app-nav { display: none; }
@media (max-width: 900px) {
    .mobile-app-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
        background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
        border-top: 1px solid #ececec;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    }
    .mobile-app-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        text-decoration: none; color: #999; padding: 4px 0; border-radius: 10px;
        min-width: 0; overflow: hidden;
    }
    .mobile-app-nav-item.is-active { color: #AB733C; }
    .mobile-app-nav-icon { position: relative; display: flex; }
    .mobile-app-nav-icon .material-symbols-outlined { font-size: 23px; }
    .mobile-app-nav-label { font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .mobile-app-nav-badge {
        position: absolute; top: -3px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px;
        background: #e85347; color: #fff; font-size: 9px; font-weight: 800; border-radius: 999px;
        display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
    }
    /* Deja espacio para que el contenido no quede tapado detrás de la barra fija — antes
       solo aplicaba a body.buyer-page, pero la barra también aparece en las páginas
       públicas (store_footer.php la incluye igual que buyer_footer.php), así que el
       contenido de home/marketplace/producto también quedaba tapado al llegar al final
       del scroll. */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body:not(.buyer-page) #site-footer { display: none !important; }
    /* El botón flotante de mensajes sube arriba de la tab bar para no superponerse */
    .float-msgs-widget { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .back-to-top { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
    /* En móvil, el rail lateral del comprador se reemplaza por la tab bar inferior (evita doble navegación) */
    .buyer-rail-wrap { display: none; }
    .buyer-page-wrap { padding: 0 16px; }
    /* Mensajes: sin padding lateral ni gap — el chat debe tocar los bordes reales de la pantalla */
    .buyer-page-wrap--messages { padding: 0 !important; gap: 0 !important; }
}

/* Evita el zoom automático de iOS Safari al enfocar inputs/selects/textareas: cualquier
   campo con font-size menor a 16px dispara el zoom-in involuntario al tocarlo en móvil.
   Cubre todos los formularios del sitio público/comprador (login, registro, chat,
   filtros de búsqueda, wizard de producto, etc.) sin tener que ajustar clase por clase. */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Footer: fuerza una sola columna en móvil con !important — no depender de que los 4
   @media anidados de landing.css (1200/992/768/576px) se resuelvan como se espera,
   ya que el footer se estaba desbordando horizontalmente con columnas parciales cortadas. */
@media (max-width: 768px) {
    .footer--columns { grid-template-columns: 1fr !important; row-gap: 24px !important; gap: 24px !important; }
    .container { max-width: 100%; box-sizing: border-box; }
}

/* ── Trigger de categorías solo-móvil + bottom-sheet con buscador ── */
@media (max-width: 768px) {
    /* Oculta la fila "Todas las categorías / Productos / Proveedores / Acerca de..." — se
       reemplaza por el botón "Categories" del menú inferior + el bottom-sheet con buscador. */
    .main-header--bottom-left, .main-header--bottom-right { display: none !important; }
    .mt-12.flex.center-alignment.space-between { margin-top: 0 !important; }
}

.cat-mobile-sheet { position: fixed; inset: 0; z-index: 400; display: none; }
.cat-mobile-sheet.is-open { display: block; }
.cat-mobile-sheet--overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cat-mobile-sheet--panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh;
    background: #fff; border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cat-mobile-sheet.is-open .cat-mobile-sheet--panel { transform: translateY(0); }
.cat-mobile-sheet--handle { width: 40px; height: 4px; background: #e0e0e0; border-radius: 999px; margin: 10px auto 4px; flex-shrink: 0; }
.cat-mobile-sheet--header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; flex-shrink: 0; }
.cat-mobile-sheet--header h3 { font-size: 16px; font-weight: 700; margin: 0; color: #1D2530; }
.cat-mobile-sheet--header button { background: none; border: none; color: #767676; padding: 4px; }
.cat-mobile-sheet--search {
    display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 10px 14px;
    background: #f2f2f2; border-radius: 12px; flex-shrink: 0;
}
.cat-mobile-sheet--search .material-symbols-outlined { font-size: 19px; color: #999; }
.cat-mobile-sheet--search input { flex: 1; border: none; background: none; font-size: 15px; outline: none; }
.cat-mobile-sheet--list { overflow-y: auto; padding: 0 16px 20px; }
.cat-mobile-item { border-bottom: 1px solid #f2f2f2; padding: 10px 0; }
.cat-mobile-item--main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #1D2530; font-size: 14.5px; font-weight: 700; padding: 4px 0; }
.cat-mobile-item--main .material-symbols-outlined { font-size: 20px; color: #AB733C; }
.cat-mobile-item--subs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px 32px; }
.cat-mobile-item--subs a { font-size: 12.5px; color: #555; text-decoration: none; background: #f7f7f7; padding: 6px 12px; border-radius: 999px; }
.cat-mobile-empty { text-align: center; color: #999; font-size: 13px; padding: 30px 0; }

/* ── Input de archivo personalizado (reemplaza el <input type="file"> nativo) ── */
.ik-file-drop {
    position: relative; display: flex; align-items: center; gap: 12px;
    border: 1.5px dashed #d9c7ac; border-radius: 12px; padding: 14px 16px;
    background: #fdf9f3; cursor: pointer; transition: border-color .15s, background .15s;
}
.ik-file-drop:hover, .ik-file-drop.is-drag { border-color: #AB733C; background: #fbf1e3; }
.ik-file-drop.has-file { border-style: solid; border-color: #9fcf9f; background: #f2f9f2; }
.ik-file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ik-file-drop-icon { width: 36px; height: 36px; border-radius: 10px; background: #f0e0c8; display: flex; align-items: center; justify-content: center; color: #AB733C; flex-shrink: 0; }
.ik-file-drop.has-file .ik-file-drop-icon { background: #d9efd9; color: #1c7c3f; }
.ik-file-drop-text { flex: 1; min-width: 0; }
.ik-file-drop-title { font-size: 13px; font-weight: 700; color: #323544; }
.ik-file-drop-sub { font-size: 11px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-file-drop-remove { position: relative; z-index: 2; background: none; border: none; color: #c0392b; padding: 4px; display: none; }
.ik-file-drop.has-file .ik-file-drop-remove { display: flex; }

/* ── Modal "Solicitar cotización" (Send inquiry): fijo abajo a la derecha, igual patrón que el chat ── */
.quote-modal-overlay { position: fixed; inset: 0; z-index: 500; display: none; pointer-events: none; }
.quote-modal-overlay.active { display: block; }
.quote-modal-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.quote-modal-overlay.active::before { opacity: 1; pointer-events: auto; }
.quote-modal {
    position: fixed; bottom: 0; right: 24px; z-index: 501; pointer-events: auto;
    background: #fff; border-radius: 14px 14px 0 0; width: 460px; max-width: calc(100vw - 24px);
    max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.25);
    animation: inquirySlideUp .25s cubic-bezier(.4,0,.2,1);
}
.quote-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #ececec; flex-shrink: 0; }
.quote-modal-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: #1D2530; }
.quote-modal-close { background: none; border: none; color: #999; padding: 4px; cursor: pointer; }
.quote-modal-close:hover { color: #1D2530; }
.quote-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.quote-modal-to { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f2f2f2; flex-wrap: wrap; }
.quote-modal-to-label { font-size: 12.5px; color: #999; font-weight: 600; }
.quote-modal-to-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#D2B48C,#ffdcbd); color: #8a5a28; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.quote-modal-to-name { font-size: 13px; font-weight: 700; color: #1D2530; }
.quote-modal-verified { font-size: 16px !important; color: #1c7c3f; }
.quote-modal-product-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.quote-modal-product-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid #ececec; }
.quote-modal-product-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #323544; line-height: 1.4; overflow-wrap: anywhere; }
.quote-modal-qty-wrap { flex-shrink: 0; text-align: right; }
.quote-modal-qty-wrap label { display: block; font-size: 10.5px; color: #999; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.quote-modal-qty-inline { display: flex; align-items: center; gap: 6px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 6px 10px; }
.quote-modal-qty-inline input { width: 48px; border: none; outline: none; font-size: 13px; font-weight: 700; text-align: center; }
.quote-modal-unit-label { font-size: 11.5px; color: #767676; font-weight: 600; }
.quote-modal-textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 14px; font-size: 13.5px; font-family: inherit; resize: vertical; min-height: 100px; margin-bottom: 16px; }
.quote-modal-textarea:focus { outline: none; border-color: #AB733C; }
.quote-modal-suggestions { margin-bottom: 16px; }
.quote-modal-suggestions-title { font-size: 12.5px; font-weight: 700; color: #AB733C; margin: 0 0 10px; }
.quote-suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.quote-suggestion-chips button { background: #f7f7f7; border: 1px solid #ececec; border-radius: 999px; padding: 8px 14px; font-size: 12px; color: #323544; cursor: pointer; }
.quote-suggestion-chips button:hover { background: #fdf3ea; border-color: #f0dcc0; color: #AB733C; }
.quote-modal-upload label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #323544; cursor: pointer; }
.quote-modal-upload label:hover { color: #AB733C; }
.quote-attach-preview { margin-top: 10px; }
.quote-modal-footer { padding: 16px 24px; border-top: 1px solid #ececec; flex-shrink: 0; }
.quote-modal-submit { width: 100%; height: 48px; border: none; border-radius: 10px; background: #f2934a; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.quote-modal-submit:hover { background: #e9822f; }
.quote-modal-submit:disabled { opacity: .6; cursor: default; }
@media (max-width: 900px) {
    .quote-modal { right: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; }
}

/* ── Reseñas de producto + "Conoce a tu proveedor" (debajo de la descripción) ── */
/* pd-bottom-wrap reutiliza el MISMO grid de .pd-wrap (590px + 1fr + 340px) para que reseñas
   y "Conoce a tu proveedor" queden alineados exactamente con el ancho real de pd-left+pd-info,
   igual que la descripción — no un max-width/centrado independiente que no coincide. */
.pd-bottom-wrap { margin-top: 0; margin-bottom: 0; }
.pd-bottom-wrap .pd-reviews-section,
.pd-bottom-wrap .pd-supplier-section { grid-column: 1 / span 2; margin: 0 0 40px; padding: 0; }
@media (max-width: 1200px) {
    .pd-bottom-wrap .pd-reviews-section,
    .pd-bottom-wrap .pd-supplier-section { grid-column: 1; }
}
.pd-reviews-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-reviews-summary-score { font-size: 32px; font-weight: 800; color: #1D2530; }
.pd-reviews-summary-stars { color: #AB733C; font-size: 16px; }
.pd-reviews-summary-count { font-size: 12.5px; color: #767676; }
.pd-reviews-empty { font-size: 13px; color: #999; padding: 12px 0; }
.pd-review-cta { background: #fdf3ea; border: 1px solid #f0dcc0; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: 13px; color: #7a5a30; font-weight: 600; cursor: pointer; }
.pd-review-form { background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.pd-review-form-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.pd-review-form-stars .material-symbols-outlined { font-size: 26px; color: #d9c7ac; cursor: pointer; }
.pd-review-form-stars .material-symbols-outlined.is-filled { color: #AB733C; }
.pd-review-form textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px; font-family: inherit; font-size: 13.5px; resize: vertical; min-height: 80px; margin-bottom: 12px; }
.pd-review-form button { background: #1D2530; color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: 13px; cursor: pointer; }
.pd-review-item { padding: 16px 0; border-bottom: 1px solid #f2f2f2; }
.pd-review-item:last-child { border-bottom: none; }
.pd-review-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pd-review-item-name { font-weight: 700; font-size: 13.5px; color: #1D2530; overflow-wrap: anywhere; }
.pd-review-item-stars { color: #AB733C; font-size: 13px; }
.pd-review-item-date { font-size: 11.5px; color: #999; margin-left: auto; }
.pd-review-item-comment { font-size: 13.5px; color: #323544; line-height: 1.6; }

.pd-supplier-card { background: #fafafa; border-radius: 14px; overflow: hidden; }
.pd-supplier-card-top { display: flex; align-items: center; gap: 14px; padding: 18px; }
.pd-supplier-card-top > div:not(.pd-supplier-card-logo) { min-width: 0; flex: 1; }
.pd-supplier-card-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; background: #fff; border: 1px solid #ececec; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #AB733C; font-size: 15px; flex-shrink: 0; }
.pd-supplier-card-name { font-size: 15px; font-weight: 800; color: #1D2530; text-decoration: underline; overflow-wrap: anywhere; }
.pd-supplier-card-meta { font-size: 12px; color: #555; margin-top: 2px; }
.pd-supplier-card-location { font-size: 11.5px; color: #767676; margin-top: 3px; }
.pd-supplier-card-about { background: #fff; margin: 0 18px 18px; border-radius: 12px; padding: 18px; }
.pd-supplier-card-about-title { font-weight: 800; font-size: 14px; color: #1D2530; margin: 0 0 16px; }
.pd-supplier-card-stats { display: flex; gap: 48px; flex-wrap: wrap; }
@media (max-width: 480px) { .pd-supplier-card-stats { gap: 24px; } }
.pd-supplier-card-stat-label { display: block; font-size: 12.5px; color: #555; margin-bottom: 4px; }
.pd-supplier-card-stat-value { display: block; font-size: 17px; font-weight: 800; color: #1D2530; }
.pd-supplier-card-actions { display: flex; gap: 12px; padding: 0 18px 18px; }
.pd-supplier-card-btn { flex: 1; text-align: center; padding: 13px; border-radius: 999px; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.pd-supplier-card-btn.primary { background: #c0521f; color: #fff; }
.pd-supplier-card-btn.primary:hover { background: #a8461a; }
.pd-supplier-card-btn.secondary { background: #fff; color: #1D2530; border: 1px solid #d0d0d0; }
@media (max-width: 640px) { .pd-supplier-card-actions { flex-direction: column; } }

/* ── Marketplace: subcategorías de la categoría seleccionada ── */
.mk-catgrid-head { margin: 8px 0 16px; padding: 0 24px; }
.mk-catgrid-head h1 { font-family: Manrope, sans-serif; font-size: 26px; font-weight: 800; color: #2a1e0e; letter-spacing: -.01em; }
.mk-catgrid-head p { font-size: 13px; color: #8a7660; margin-top: 2px; font-weight: 600; }
.mk-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 40px; padding: 0 24px; }
.mk-cattile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px; background: #fff; border: 1px solid #ecdfc8; border-radius: 12px; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.mk-cattile:hover { transform: translateY(-2px); border-color: #CD9765; box-shadow: 0 8px 22px rgba(124,87,48,.13); }
.mk-cattile-ic { width: 42px; height: 42px; border-radius: 12px; background: #f6ecda; color: #AB733C; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mk-cattile-name { font-size: 14.5px; font-weight: 700; color: #2a1e0e; line-height: 1.3; }
.mk-cattile-n { font-size: 12px; font-weight: 600; color: #8a7660; }
.mk-cattile.is-empty { opacity: .6; }
@media (max-width: 640px) { .mk-catgrid-head { padding: 0 14px; } .mk-catgrid { padding: 0 14px; grid-template-columns: repeat(2, 1fr); gap: 10px; } .mk-cattile { padding: 14px 12px; } .mk-catgrid-head h1 { font-size: 21px; } }
.mk-catgrid-head, .mk-catgrid { max-width: 1500px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* i18n: idiomas con textos más largos (fr/de/ja/hi/zh) — la barra superior debe seguir cabiendo */
html:not([lang="en"]):not([lang="es"]) .header-action.gap-32 { gap: 16px; }
html:not([lang="en"]):not([lang="es"]) .header-action .btn { white-space: nowrap; }