/* ============================================================
   Neto Business · Marketplace Pro
   ------------------------------------------------------------
   Estilo "marketplace ecommerce" claro y denso, inspirado en
   patrones Amazon / Mercado Libre, con identidad propia:
     · Top utility bar:   teal-navy profundo  #0E2A3B
     · Sub nav categorías: teal medio          #14425C
     · Body:               gris muy claro      #F4F6F8
     · Cards:              blanco              #FFFFFF
     · CTA principal:      verde Pantone Growth #2DA44E
     · Acento descuento:   naranja vibrante    #F26B1F
     · Texto base:         tinta azul          #0F1B26

   Aplica sobre las vistas marketplace/index.php y producto.php
   (cargar DESPUÉS de neto-landing-light.css).
   ============================================================ */

:root {
  --mp-ink:           #0F1B26;
  --mp-ink-soft:      #2A3B4A;
  --mp-mute:          #5C6B78;
  --mp-line:          #E1E6EA;
  --mp-line-soft:     #EEF1F4;
  --mp-bg:            #F4F6F8;
  --mp-paper:         #FFFFFF;

  --mp-top:           #0E2A3B;
  --mp-top-2:         #14425C;
  --mp-top-hover:     #1A5275;
  --mp-top-line:      rgba(255, 255, 255, 0.10);

  --mp-green:         #2DA44E;
  --mp-green-dk:      #1F7E3C;
  --mp-green-soft:    #E8F5EC;
  --mp-green-tint:    rgba(45, 164, 78, 0.10);

  --mp-amber:         #F2A93B;
  --mp-orange:        #F26B1F;
  --mp-orange-dk:     #D7560C;
  --mp-orange-soft:   #FEEFE3;
  --mp-rose:          #E04545;

  --mp-shadow-sm:     0 1px 2px rgba(15, 27, 38, 0.05);
  --mp-shadow-md:     0 6px 18px rgba(15, 27, 38, 0.08);
  --mp-shadow-lg:     0 18px 40px rgba(15, 27, 38, 0.12);
  --mp-shadow-cta:    0 6px 14px -4px rgba(45, 164, 78, 0.45);
  --mp-shadow-cta-h:  0 12px 24px -6px rgba(45, 164, 78, 0.60);

  --mp-radius:        10px;
  --mp-radius-lg:     14px;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background: var(--mp-bg) !important;
  color: var(--mp-ink) !important;
}
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Quitar fondos legacy y dot-field (estilo limpio de e-commerce) */
.bg-orbs, .bg-grid, .cursor-glow,
.nl-dotfield, .ntl-dotfield {
  display: none !important;
}

::selection { background: rgba(45, 164, 78, 0.18); color: var(--mp-ink); }
*:focus-visible { outline: 2px solid var(--mp-green); outline-offset: 2px; border-radius: 6px; }

/* Tipografía base */
h1, h2, h3, h4 { color: var(--mp-ink); letter-spacing: -.012em; }
p, li, span, small, label { color: var(--mp-ink-soft); }
a { color: var(--mp-top-2); }
a:hover { color: var(--mp-orange); }
::placeholder { color: var(--mp-mute) !important; opacity: 1; }

/* ── HEADER (dos pisos: utility bar + main bar) ─────────── */

/* Utility bar superior — teal-navy, fina */
header.site-header,
.site-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0;
  z-index: 50;
}
.site-header > .container { max-width: 100% !important; padding: 0 !important; }

/* Header verde sólido full width */
header.site-header,
.site-header {
  background: linear-gradient(180deg, #2DA44E 0%, #1F7E3C 100%) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 24px -10px rgba(31, 126, 60, 0.45) !important;
}
.site-header > .container { max-width: 1340px !important; padding: 0 24px !important; }

.site-header .header-row,
.site-header .container > .header-row {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 14px 0 !important;
  height: auto !important;
  min-height: 64px;
  gap: 20px !important;
  margin: 0 !important;
  position: relative;
}
@media (max-width: 760px) {
  .site-header .header-row { padding: 12px 0 !important; min-height: 56px; flex-wrap: wrap; }
}

/* Brand sobre fondo verde */
.site-header .brand {
  gap: 10px !important;
  flex-shrink: 0;
  align-items: center;
  background: transparent !important;
  padding: 0 !important;
}
.site-header .brand img {
  height: 48px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22)) !important;
  transition: transform .25s ease;
  background: transparent !important;
}
.site-header .brand:hover img { transform: scale(1.04); }
.brand-pill { display: none !important; }
.site-header .brand .brand-text,
.site-header .brand small { display: none !important; }

/* ── Search bar protagonista (blanca pill grande) ──────────── */
.search,
.marketplace-search,
.hero-search,
form.search {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
  padding: 0 6px 0 18px !important;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .15s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 18px -6px rgba(0, 0, 0, 0.20) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.search:focus-within,
.marketplace-search:focus-within {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 3px rgba(255, 255, 255, 0.40),
    0 10px 22px -6px rgba(0, 0, 0, 0.30) !important;
}
.search .search-icon {
  color: var(--mp-mute) !important;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
}
.search input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 14.5px;
  color: var(--mp-ink) !important;
  outline: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}
.search input::placeholder { color: var(--mp-mute) !important; }
.search input:focus { box-shadow: none !important; }
/* Botón "→" submit redondo verde */
.search .search-submit, .search button {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: var(--mp-green) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  box-shadow: 0 4px 10px -2px rgba(31, 126, 60, 0.45) !important;
  font-size: 16px !important;
}
.search .search-submit:hover, .search button:hover {
  filter: brightness(1.07);
  transform: scale(1.06);
  color: #FFFFFF !important;
}
.search .search-submit i, .search button i { color: #FFFFFF !important; }

/* Acciones header (Ingresar / Crear Tienda) */
.site-header .header-actions {
  gap: 14px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.site-header .header-link {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  padding: 8px 6px;
  transition: opacity .2s ease;
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-header .header-link small { display: none !important; } /* hide the old subtitle */
.site-header .header-link:hover { opacity: 0.85; color: #FFFFFF !important; }

.site-header .header-cta {
  background: #FFFFFF !important;
  color: var(--mp-green-dk) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.18) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.site-header .header-cta i { color: var(--mp-green-dk) !important; }
.site-header .header-cta:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--mp-green-dk) !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.25) !important;
}

/* ── Subnav de categorías (chips estilo screenshot) ──────── */
.subnav {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--mp-line) !important;
  padding: 12px 0 !important;
  position: relative;
  z-index: 1;
}
.subnav .container { max-width: 1340px; padding: 0 24px; }
.subnav-row {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.subnav-row::-webkit-scrollbar { display: none; }
.subnav-row a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--mp-ink) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s;
  box-shadow: 0 1px 2px rgba(15, 27, 38, 0.04);
  white-space: nowrap;
}
.subnav-row a i { color: var(--mp-mute); font-size: 13px; transition: color .2s; }
.subnav-row a:hover {
  border-color: var(--mp-green) !important;
  color: var(--mp-green-dk) !important;
  background: var(--mp-green-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(45, 164, 78, 0.20);
}
.subnav-row a:hover i { color: var(--mp-green-dk); }
.subnav-row a.active {
  background: linear-gradient(180deg, #2DA44E, #1F7E3C) !important;
  color: #FFFFFF !important;
  border-color: var(--mp-green-dk) !important;
  box-shadow: 0 4px 12px -2px rgba(31, 126, 60, 0.45) !important;
}
.subnav-row a.active i { color: #FFFFFF !important; }

/* CTA "Vender en Neto Business" alineado al final */
.subnav-row .subnav-cta {
  margin-left: auto !important;
  background: var(--mp-green-soft) !important;
  border-color: rgba(45, 164, 78, 0.40) !important;
  color: var(--mp-green-dk) !important;
}
.subnav-row .subnav-cta i { color: var(--mp-green-dk) !important; }
.subnav-row .subnav-cta:hover {
  background: var(--mp-green) !important;
  border-color: var(--mp-green-dk) !important;
  color: #FFFFFF !important;
}
.subnav-row .subnav-cta:hover i { color: #FFFFFF !important; }

@media (max-width: 760px) {
  .site-header .header-actions { gap: 8px !important; }
  .site-header .header-link { font-size: 13px; padding: 6px 4px; }
  .site-header .header-cta { padding: 8px 12px !important; font-size: 13px !important; }
  .search { height: 42px !important; max-width: none !important; }
  .subnav .container { padding: 0 12px; }
}

/* ── Botones ──────────────────────────────────────────────── */
.btn, button.btn {
  border-radius: var(--mp-radius) !important;
  font-weight: 700;
  letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s, filter .15s;
}
.btn:hover { transform: translateY(-1px); }

/* Primary — verde Pantone Growth */
.btn-primary, .btn-success, .btn-cta, .side-cta a, .nb-button--primary {
  background: linear-gradient(180deg, var(--mp-green) 0%, var(--mp-green-dk) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mp-green-dk) !important;
  box-shadow: var(--mp-shadow-cta) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-cta:hover,
.side-cta a:hover, .nb-button--primary:hover {
  filter: brightness(1.04);
  box-shadow: var(--mp-shadow-cta-h) !important;
  color: #FFFFFF !important;
}
.btn-primary i, .btn-success i, .btn-cta i { color: #FFFFFF !important; }

/* Naranja — comprar / ofertas */
.btn-buy, .btn-orange, .btn-deal {
  background: linear-gradient(180deg, var(--mp-orange) 0%, var(--mp-orange-dk) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mp-orange-dk) !important;
  box-shadow: 0 6px 14px -4px rgba(242, 107, 31, .45) !important;
}
.btn-buy:hover, .btn-orange:hover, .btn-deal:hover { filter: brightness(1.05); color: #FFFFFF !important; }

/* Ghost — borde gris, hover verde */
.btn-ghost, .btn-outline, .nb-button--ghost {
  background: var(--mp-paper) !important;
  color: var(--mp-ink) !important;
  border: 1px solid var(--mp-line) !important;
  box-shadow: var(--mp-shadow-sm) !important;
  backdrop-filter: none !important;
}
.btn-ghost:hover, .btn-outline:hover, .nb-button--ghost:hover {
  border-color: var(--mp-green) !important;
  color: var(--mp-green-dk) !important;
  background: var(--mp-green-soft) !important;
}

/* Dark — tinta azul */
.btn-dark {
  background: var(--mp-top) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mp-top) !important;
  box-shadow: var(--mp-shadow-sm) !important;
}
.btn-dark:hover { background: var(--mp-top-2) !important; border-color: var(--mp-top-2) !important; color: #FFFFFF !important; }

/* WhatsApp */
.btn-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: 1px solid #1FAD52 !important;
  box-shadow: 0 6px 14px -4px rgba(37, 211, 102, .45) !important;
}
.btn-wa:hover { filter: brightness(1.05); color: #FFFFFF !important; }
.btn-wa i { color: #FFFFFF !important; }

/* ── Cards (productos, tiendas, paneles) ──────────────────── */
.card, .product-card, .seller-card, .spotlight-card, .nb-card,
.module, .panel, .stat-card {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
  box-shadow: var(--mp-shadow-sm) !important;
  color: var(--mp-ink) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.card:hover, .product-card:hover, .seller-card:hover,
.spotlight-card:hover, .nb-card:hover {
  transform: translateY(-3px);
  border-color: var(--mp-green) !important;
  box-shadow: var(--mp-shadow-md), 0 0 0 1px rgba(45, 164, 78, 0.18) !important;
}
.card *, .product-card *, .seller-card *, .nb-card * { border-color: var(--mp-line); }

/* Imagen del producto */
.product-card .product-image,
.product-card img:not(.icon):not(.flag) {
  background: var(--mp-line-soft);
  transition: transform .35s ease;
}
.product-card:hover img:not(.icon):not(.flag) { transform: scale(1.04); }

/* Precio destacado */
.product-card .product-price,
.price-row .amount,
.product-price-tag,
.precio, .price-main {
  color: var(--mp-ink) !important;
  font-weight: 800;
}
.price-currency, .price-cents { color: var(--mp-mute) !important; font-weight: 600; }
.product-price-bs, .price-bs, .price-secondary {
  color: var(--mp-mute) !important;
  font-weight: 500;
  font-size: 13px;
}

/* Badge de descuento naranja vibrante (estilo ML) */
.discount-badge, .badge-discount, .flag-discount {
  background: var(--mp-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(242, 107, 31, .35);
}
.shipping-free, .envio-gratis, .free-ship {
  color: var(--mp-green-dk) !important;
  font-weight: 700;
}

/* Badges genéricos */
.badge, .chip, .tag, .pill, .nb-pill, .stat-badge {
  background: var(--mp-green-soft) !important;
  color: var(--mp-green-dk) !important;
  border: 1px solid rgba(45, 164, 78, 0.30) !important;
  font-weight: 700;
  box-shadow: none !important;
}
.badge-success {
  background: var(--mp-green) !important;
  color: #FFFFFF !important;
  border-color: var(--mp-green-dk) !important;
}
.badge-warning, .flag-warning {
  background: var(--mp-amber) !important;
  color: var(--mp-ink) !important;
  border-color: #D9931E !important;
}
.badge-danger, .flag-danger {
  background: var(--mp-rose) !important;
  color: #FFFFFF !important;
  border-color: #B83434 !important;
}

/* Stars rating */
.stars, .rating { color: var(--mp-amber); font-weight: 700; }
.rating-count, .reviews-count { color: var(--mp-mute); font-weight: 500; }

/* ── Inputs ───────────────────────────────────────────────── */
input, select, textarea, .form-control {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  color: var(--mp-ink) !important;
  border-radius: var(--mp-radius) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none !important;
  border-color: var(--mp-green) !important;
  box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.18) !important;
  background: var(--mp-paper) !important;
}

/* ── Filtros laterales / sidebar ──────────────────────────── */
.filters, .sidebar-filters, aside.filters {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
}
.filters h3, .filters h4, .filter-title {
  color: var(--mp-ink) !important;
  border-bottom: 1px solid var(--mp-line);
  padding-bottom: 10px;
}
.filter-option a { color: var(--mp-ink-soft) !important; }
.filter-option a:hover { color: var(--mp-green-dk) !important; }
.filter-count { color: var(--mp-mute) !important; }

/* ── Paginación ───────────────────────────────────────────── */
.page-link, .pagination a, .pagination span {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  color: var(--mp-ink) !important;
  border-radius: 8px !important;
}
.page-link:hover { border-color: var(--mp-green) !important; color: var(--mp-green-dk) !important; background: var(--mp-green-soft) !important; }
.page-link.active, .pagination .active span, .pagination .active a {
  background: var(--mp-green) !important;
  border-color: var(--mp-green-dk) !important;
  color: #FFFFFF !important;
}

/* ── Tablas ───────────────────────────────────────────────── */
table { background: var(--mp-paper); border-radius: var(--mp-radius); overflow: hidden; }
th { background: var(--mp-line-soft) !important; color: var(--mp-ink) !important; border-color: var(--mp-line) !important; }
td { border-color: var(--mp-line) !important; color: var(--mp-ink-soft); }
tr:hover td { background: var(--mp-green-soft); }

/* ── Hero del marketplace (si existe) ─────────────────────── */
.hero, .marketplace-hero, .nb-hero {
  background: linear-gradient(120deg, #FFFFFF 0%, var(--mp-green-soft) 100%) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
}
.hero h1, .marketplace-hero h1 { color: var(--mp-ink) !important; }
.hero .gradient-text, [class*="gradient-text"] {
  background: linear-gradient(120deg, var(--mp-green-dk) 0%, var(--mp-orange-dk) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── Footer (multi-columna estilo Amazon) ─────────────────── */
.site-footer, footer.site-footer {
  background: var(--mp-top) !important;
  border-top: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 40px 0 24px !important;
}
.site-footer .container { color: inherit; }
.site-footer h4, .site-footer .footer-title {
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.site-footer a, .site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500;
  transition: color .18s ease;
}
.site-footer a:hover { color: var(--mp-amber) !important; }
.footer-brand { color: #FFFFFF !important; }
.footer-brand img {
  height: 40px !important;
  filter: brightness(0) invert(1);
}
.footer-copy {
  color: rgba(255, 255, 255, 0.55) !important;
  border-top: 1px solid rgba(255,255,255, 0.10);
  padding-top: 16px;
  margin-top: 24px;
}

/* ── Notificaciones / alerts ──────────────────────────────── */
.alert, .notice, .toast {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  border-left-width: 4px !important;
  color: var(--mp-ink) !important;
  border-radius: var(--mp-radius) !important;
  box-shadow: var(--mp-shadow-sm) !important;
}
.alert-success { border-left-color: var(--mp-green) !important; background: var(--mp-green-soft) !important; }
.alert-danger  { border-left-color: var(--mp-rose) !important; background: #FCEAEA !important; }
.alert-warning { border-left-color: var(--mp-amber) !important; background: #FEF6E4 !important; }
.alert-info    { border-left-color: var(--mp-top-2) !important; background: #E5F0F6 !important; }

/* ── Override del grid de productos legacy (más verde, menos gris) ─ */

/* Página: fondo blanco con halo verde muy sutil arriba */
body {
  background:
    radial-gradient(80vw 40vh at 50% -10%, rgba(45, 164, 78, 0.07), transparent 70%),
    var(--mp-bg) !important;
  background-attachment: fixed !important;
}

/* Card del producto: blanca pura, sin glass, borde verde tenue */
.card, .product-card {
  background: var(--mp-paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--mp-line) !important;
  box-shadow: var(--mp-shadow-sm) !important;
}
.card:hover, .product-card:hover {
  border-color: var(--mp-green) !important;
  box-shadow:
    0 1px 0 rgba(45,164,78,0.10) inset,
    0 14px 28px -8px rgba(45, 164, 78, 0.22),
    0 6px 14px rgba(15, 27, 38, 0.08) !important;
  transform: translateY(-3px) !important;
}

/* Zona de imagen: gradiente verde muy suave en vez de gris */
.media {
  background: linear-gradient(160deg, #F3FBF5 0%, #E8F5EC 100%) !important;
  border-bottom: 1px solid var(--mp-line-soft) !important;
}
.media .placeholder {
  color: rgba(45, 164, 78, 0.35) !important;
}

/* Card body separado con línea verde sutil */
.card-body {
  background: var(--mp-paper) !important;
  border-top: 1px solid var(--mp-line-soft) !important;
}

/* Store logo: blanco con borde verde */
.store-logo {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-green) !important;
  color: var(--mp-green-dk) !important;
}

/* Cat tag: pill verde suave */
.cat-tag {
  background: var(--mp-paper) !important;
  border: 1px solid rgba(45, 164, 78, 0.30) !important;
  color: var(--mp-green-dk) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 27, 38, 0.05);
}

/* Flags (badges sobre la imagen) */
.flag-new      { background: var(--mp-green-soft) !important; border: 1px solid rgba(45, 164, 78, 0.35) !important; color: var(--mp-green-dk) !important; }
.flag-feat     { background: var(--mp-green) !important; border: 1px solid var(--mp-green-dk) !important; color: #FFFFFF !important; }
.flag-feat i   { color: #FFFFFF !important; }
.flag-low      { background: #FEEBE6 !important; border: 1px solid rgba(242, 107, 31, 0.35) !important; color: var(--mp-orange-dk) !important; }
.flag-out      { background: var(--mp-line-soft) !important; border: 1px solid var(--mp-line) !important; color: var(--mp-mute) !important; }

/* Favorito: blanco con corazón verde */
.fav {
  background: var(--mp-paper) !important;
  border: 1px solid var(--mp-line) !important;
  color: var(--mp-mute) !important;
}
.fav:hover { color: var(--mp-green-dk) !important; border-color: var(--mp-green) !important; background: var(--mp-green-soft) !important; }

/* Precio: tinta oscura, símbolo verde */
.price-main { color: var(--mp-ink) !important; }
.price-main .currency { color: var(--mp-green-dk) !important; font-weight: 800; }
.price-main .amount   { color: var(--mp-ink) !important; font-weight: 800; }
.price-main.agotado { color: var(--mp-mute) !important; text-decoration: line-through; }

/* Líneas de stock con verde / naranja consistentes */
.stock-line.ok   { color: var(--mp-green-dk) !important; }
.stock-line.warn { color: var(--mp-orange-dk) !important; }
.stock-line.out  { color: var(--mp-rose) !important; }

/* Store name link */
.store-name { color: var(--mp-ink-soft) !important; font-weight: 600; }
.location-mini { color: var(--mp-mute) !important; }

/* Nombre del producto */
.prod-name {
  color: var(--mp-ink) !important;
  font-weight: 700;
}
.prod-name:hover { color: var(--mp-green-dk) !important; }

/* Deliver-to del header: pill verde tenue */
.deliver-to {
  background: var(--mp-green-soft) !important;
  border: 1px solid rgba(45, 164, 78, 0.30) !important;
  color: var(--mp-green-dk) !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.deliver-to small { color: var(--mp-green-dk) !important; opacity: .75; }
.deliver-to b     { color: var(--mp-ink) !important; }
.deliver-to i     { color: var(--mp-green-dk) !important; }
.deliver-to:hover { background: rgba(45, 164, 78, 0.18) !important; border-color: var(--mp-green) !important; }

/* Banner / header de resultados */
.results-head, .toolbar, .sort-bar {
  background: transparent !important;
  border-bottom: 1px solid var(--mp-line) !important;
  padding-bottom: 14px;
}

/* ────────────────────────────────────────────────────────────
   HERO verde sólido + imagen banner (estilo screenshot 2026)
   ──────────────────────────────────────────────────────────── */
.hero { padding: 24px 0 0 !important; }
.hero .container { max-width: 1340px !important; padding: 0 24px !important; }

.hero-card {
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(80% 100% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(120deg, #1E8237 0%, #2DA44E 55%, #34C759 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;
  padding: 56px 56px !important;
  color: #FFFFFF !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr) !important;
  gap: 32px !important;
  align-items: center !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 20px 50px -20px rgba(31, 126, 60, 0.55),
    0 8px 24px -10px rgba(15, 27, 38, 0.10) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: none !important;
}

/* Patrón de líneas suaves diagonal para textura premium */
.hero-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 22px);
  pointer-events: none !important;
  opacity: 0.6;
  border-radius: inherit;
  z-index: 0;
  width: auto !important;
  height: auto !important;
}
.hero-card::after { display: none !important; }
.hero-card > * { position: relative; z-index: 2; }

.hero-content { color: #FFFFFF; max-width: 560px; }

/* Eyebrow blanco con línea decorativa */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 0 !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.hero-eyebrow::before {
  content: "" !important;
  display: inline-block;
  width: 28px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Título grande blanco con énfasis del mark también blanco */
.hero-card h1 {
  color: #FFFFFF !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}
.hero-card h1 mark {
  background: transparent !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
  filter: none !important;
  padding: 0 !important;
  font-weight: 900 !important;
}

.hero-card p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 520px;
  margin-bottom: 24px !important;
}

/* CTA principal blanco con texto verde */
.hero-cta-area {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  justify-self: auto !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
.hero-card .hero-cta {
  background: #FFFFFF !important;
  color: var(--mp-green-dk) !important;
  border: none !important;
  padding: 13px 28px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.10) !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.hero-card .hero-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
  color: var(--mp-green-dk) !important;
}
.hero-card .hero-cta::before { display: none !important; }

.hero-card .hero-cta-ghost {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  padding: 12px 24px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .15s ease, border-color .2s;
}
.hero-card .hero-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-2px);
  color: #FFFFFF !important;
}

/* Hero stats: pills glass blancos */
.hero-stats {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-stat {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px !important;
  backdrop-filter: blur(8px);
  box-shadow: none !important;
  transition: background .2s ease, transform .15s;
}
.hero-stat:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}
.hero-stat i { color: #FFFFFF !important; font-size: 14px !important; opacity: 0.95; }
.hero-stat b { color: #FFFFFF !important; font-weight: 800; }

/* Visual banner SVG a la derecha — sin fondo, mezclado en el verde */
.hero-visual {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-visual img {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.25));
  background: transparent;
  margin: 0 auto;
  animation: mp-float 6s ease-in-out infinite alternate;
}
@keyframes mp-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@media (max-width: 880px) {
  .hero-card { grid-template-columns: 1fr !important; padding: 40px 28px !important; text-align: center; }
  .hero-card h1 { font-size: clamp(26px, 6vw, 36px) !important; }
  .hero-content { max-width: none; margin: 0 auto; }
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-cta-area, .hero-stats { justify-content: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-visual img { max-width: 320px !important; }
}

/* ── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card, .product-card, .seller-card, .btn, .product-card img { transition: none !important; }
  .hero-visual img { animation: none !important; }
}

.site-header > .container,
.subnav .container,
.hero .container {
  max-width: 1240px !important;
}

.site-header .header-row,
.site-header .container > .header-row {
  display: grid !important;
  grid-template-columns: 96px minmax(320px, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 62px !important;
}

.site-header .brand img {
  height: 42px !important;
  max-width: 96px !important;
}

form.search {
  max-width: 720px !important;
  justify-self: center !important;
  width: 100% !important;
  height: 44px !important;
}

.site-header .header-actions {
  justify-self: end !important;
}

.subnav {
  padding: 10px 0 !important;
}

.subnav-row {
  gap: 8px !important;
}

.subnav-row a {
  padding: 7px 14px !important;
  font-size: 13px !important;
}

.hero {
  padding: 20px 0 0 !important;
}

.hero-card {
  min-height: 330px !important;
  padding: 42px 46px 34px !important;
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.hero-content {
  align-self: center !important;
  max-width: 535px !important;
}

.hero-card h1 {
  font-size: clamp(32px, 3.35vw, 42px) !important;
  max-width: 520px !important;
  margin-bottom: 14px !important;
}

.hero-card p {
  max-width: 500px !important;
  margin-bottom: 22px !important;
}

.hero-eyebrow {
  margin-bottom: 16px !important;
}

.hero-card .hero-cta-ghost,
.hero-stats {
  display: none !important;
}

.hero-cta-area {
  margin-bottom: 0 !important;
}

.hero-card .hero-cta {
  min-width: 156px !important;
  justify-content: center !important;
}

.hero-visual {
  align-self: end !important;
  justify-content: flex-end !important;
}

.hero-visual img {
  max-width: 500px !important;
  width: min(100%, 500px) !important;
  margin: 0 0 -20px auto !important;
}

main.container {
  margin-top: 18px !important;
}

.shell {
  gap: 18px !important;
  align-items: start !important;
}

.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.card {
  border-radius: 12px !important;
}

.media {
  aspect-ratio: 1.08 / 1 !important;
  padding: 10px !important;
}

.media img {
  object-fit: contain !important;
}

.media .placeholder {
  font-size: 42px !important;
}

.flag {
  top: 8px !important;
  left: 8px !important;
  padding: 3px 8px !important;
  font-size: 9.5px !important;
}

.cat-tag {
  bottom: 7px !important;
  left: 8px !important;
  padding: 3px 7px !important;
  font-size: 9.5px !important;
  max-width: calc(100% - 52px) !important;
}

.fav {
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
}

.card-body {
  padding: 10px 12px 12px !important;
  gap: 5px !important;
}

.store-row {
  font-size: 10.5px !important;
  gap: 5px !important;
}

.store-logo {
  width: 16px !important;
  height: 16px !important;
}

.location-mini {
  font-size: 10.5px !important;
  margin-left: auto !important;
}

.prod-name {
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  min-height: 34px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-block {
  margin-top: 2px !important;
}

.price-main {
  line-height: 1.1 !important;
}

.price-main .currency {
  font-size: 15px !important;
}

.price-main .amount {
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

.stock-line {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

.card-actions,
.prod-actions {
  gap: 8px !important;
  margin-top: 8px !important;
}

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .site-header .header-row,
  .site-header .container > .header-row {
    grid-template-columns: 92px 1fr !important;
  }

  .site-header .header-actions {
    grid-column: 1 / -1;
    justify-self: center !important;
  }

  .hero-card {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 34px 24px 0 !important;
  }

  .hero-content {
    text-align: center !important;
    margin: 0 auto !important;
  }

  .hero-eyebrow,
  .hero-cta-area {
    justify-content: center !important;
  }

  .hero-visual {
    justify-content: center !important;
  }

  .hero-visual img {
    max-width: 340px !important;
    margin: 0 auto -12px !important;
  }
}