/*
 * Tema: Mercado
 * Inspiración: MercadoLibre/Falabella — amarillo + azul MercadoLibre + bordes redondeados
 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* Marca — amarillo ML + azul */
  --color-primary:           #3483FA;
  --color-primary-hover:     #2968C8;
  --color-secondary:         #2968C8;
  --color-secondary-hover:   #1E50A2;
  --color-accent:            #FFE600;
  --color-accent-hover:      #F5D800;

  /* Fondos */
  --color-bg:                #EDEDED;
  --color-surface:           #FFFFFF;
  --color-surface-muted:     #F5F5F5;
  --color-bg-header:         #FFE600;
  --color-bg-footer:         #1A1A1A;

  /* Textos */
  --color-text:              #333333;
  --color-text-muted:        #999999;
  --color-link:              #3483FA;
  --color-link-hover:        #2968C8;

  /* Precios */
  --color-price:             #333333;
  --color-price-sale:        #00A650;
  --color-price-original:    #999999;

  /* Botones */
  --color-btn-primary-bg:    #3483FA;
  --color-btn-primary-text:  #FFFFFF;
  --color-btn-secondary-bg:  #FFFFFF;
  --color-btn-secondary-text:#3483FA;

  /* UI */
  --color-border:            #E6E6E6;
  --color-danger:            #F23D4F;
  --color-badge-bg:          #3483FA;
  --color-badge-text:        #FFFFFF;

  /* Tipografía */
  --font-main:               'Nunito', 'Helvetica Neue', Arial, sans-serif;

  /* Forma — muy redondeado, amigable */
  --radius-sm:               6px;
  --radius-base:             10px;
  --radius-lg:               16px;

  /* Sombras */
  --shadow-card:             0 1px 4px rgba(0,0,0,.1);
  --shadow-header:           0 2px 4px rgba(0,0,0,.12);
}

/* ── Mercado: overrides estructurales ───────────────────────────────
   Scoped a data-color-scheme para ganar especificidad sobre bundle CSS
   ─────────────────────────────────────────────────────────────────── */

/* Fondo gris claro página */
[data-color-scheme="mercado"] body { background: var(--color-bg); }

/* Header: amarillo MercadoLibre */
[data-color-scheme="mercado"] .hm-header {
  background: var(--color-bg-header);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
[data-color-scheme="mercado"] .hm-mid { background: var(--color-bg-header); }
[data-color-scheme="mercado"] .hm-top {
  background: #fff9c4;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
[data-color-scheme="mercado"] .hm-header--scrolled {
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Íconos y texto del header sobre amarillo — oscuros */
[data-color-scheme="mercado"] .hm-mid__logo img { filter: brightness(0); }
[data-color-scheme="mercado"] .hm-icon-btn      { color: #333333; }
[data-color-scheme="mercado"] .hm-icon-btn:hover { color: var(--color-primary); }
[data-color-scheme="mercado"] .hm-mid__toggler  { color: #333333; border-color: rgba(0,0,0,.2); }
[data-color-scheme="mercado"] .hm-contact__label { color: #555555; }
[data-color-scheme="mercado"] .hm-contact__phone { color: #333333; }
[data-color-scheme="mercado"] .hm-top__announce  { color: #555555; }
[data-color-scheme="mercado"] .hm-top__nav-link  { color: #444444; }
[data-color-scheme="mercado"] .hm-top__nav-link:hover { color: var(--color-primary); }
[data-color-scheme="mercado"] .hm-top__nav-link--cta {
  color: var(--color-primary);
  border-color: rgba(52,131,250,.4);
}

/* Card: blanco limpio sobre fondo gris */
[data-color-scheme="mercado"] .pc-card {
  background: #fff;
  border-color: #e6e6e6;
}

/* Card hover: sombra azul */
[data-color-scheme="mercado"] .pc-card:hover,
[data-color-scheme="mercado"] .pc-card--mc:hover {
  box-shadow: 0 6px 24px rgba(52,131,250,.18), 0 2px 6px rgba(0,0,0,.07);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

/* Precio sale: verde ML */
[data-color-scheme="mercado"] .pc-price,
[data-color-scheme="mercado"] .pc-price--mc { color: var(--color-price-sale); font-weight: 800; }
[data-color-scheme="mercado"] .pc-price-old  { color: #999; text-decoration: line-through; }

/* Badge % OFF: azul redondeado */
[data-color-scheme="mercado"] .pc-badge--discount,
[data-color-scheme="mercado"] .pc-badge--mc-off {
  background: var(--color-price-sale);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  box-shadow: none;
}

/* Cuotas: texto verde debajo del precio */
[data-color-scheme="mercado"] .pc-mc-installment {
  font-size: 12px;
  color: var(--color-price-sale);
  font-weight: 500;
  margin-top: -2px;
}

/* Botón carrito: azul ML redondeado */
[data-color-scheme="mercado"] .pc-btn-cart,
[data-color-scheme="mercado"] .pc-btn-cart--mc {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: 14px;
}
[data-color-scheme="mercado"] .pc-btn-cart:hover:not(:disabled),
[data-color-scheme="mercado"] .pc-btn-cart--mc:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(52,131,250,.3);
  transform: none;
}

/* Compare / login: outline azul */
[data-color-scheme="mercado"] .pc-btn-login { border-color: var(--color-primary); color: var(--color-primary); }
[data-color-scheme="mercado"] .pc-btn-login:hover { background: var(--color-primary); color: #fff; }
[data-color-scheme="mercado"] .pc-compare { border-color: rgba(52,131,250,.3); color: var(--color-text-muted); }
[data-color-scheme="mercado"] .pc-compare:hover,
[data-color-scheme="mercado"] .pc-compare--active { color: var(--color-primary); border-color: var(--color-primary); }

/* Wishlist: azul activo */
[data-color-scheme="mercado"] .pc-wish:hover,
[data-color-scheme="mercado"] .pc-wish--active { color: var(--color-primary); }

/* Quick view: fondo azul suave */
[data-color-scheme="mercado"] .pc-quick-view { background: rgba(52,131,250,.88); }
[data-color-scheme="mercado"] .pc-quick-view:hover { background: rgba(41,104,200,.95); }

/* ── Mercado: layouts estructurales ─────────────────────────────────── */

/* Sidebar oculto — hero full-width, estilo ML */
[data-color-scheme="mercado"] .cm-sidebar { display: none; }
[data-color-scheme="mercado"] .cm-wrap { grid-template-columns: 1fr; }

/* Category chips: siempre visibles (no solo móvil) */
[data-color-scheme="mercado"] .cm-cat-scroll {
  display: flex !important;
  margin-top: 12px;
}
[data-color-scheme="mercado"] .cm-cat-chip {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: var(--radius-base);
}
[data-color-scheme="mercado"] .cm-cat-chip:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Hero: bordes redondeados, sin overlay de texto muy pesado */
[data-color-scheme="mercado"] .hs-wrap { border-radius: var(--radius-base); }
[data-color-scheme="mercado"] .hs-h2   { font-weight: 800; }
[data-color-scheme="mercado"] .hs-btn  {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-base);
  font-weight: 700;
}
[data-color-scheme="mercado"] .hs-btn:hover { background: var(--color-primary-hover); box-shadow: 0 4px 12px rgba(52,131,250,.4); }
[data-color-scheme="mercado"] .hs-dot--on   { background: var(--color-primary); }

/* Section title: azul ML */
[data-color-scheme="mercado"] .ttp-header { border-bottom-color: var(--color-primary); }
[data-color-scheme="mercado"] .ttp-title  { color: var(--color-text); }
[data-color-scheme="mercado"] .ttp-see-all { color: var(--color-primary); border-color: var(--color-primary); }
[data-color-scheme="mercado"] .ttp-see-all:hover { background: var(--color-primary); color: #fff; }

/* Op-section: bg ML */
[data-color-scheme="mercado"] .op-section { background: var(--color-primary); border-radius: var(--radius-base); }
[data-color-scheme="mercado"] .op-title, [data-color-scheme="mercado"] .op-eyebrow { color: #fff; }
[data-color-scheme="mercado"] .op-subtitle { color: rgba(255,255,255,.75); }

/* ── Mercado: Countdown inline ───────────────────────────────────────*/
.ocd-mc-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ocd-mc-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
}
.ocd-mc-time {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.2);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .04em;
}

/* ── Mercado: InfoBoxes verticales (estilo MercadoLibre) ─────────────
   Estructura: icono grande arriba centrado → título → descripción
   ─────────────────────────────────────────────────────────────────── */
[data-color-scheme="mercado"] .ib-strip {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
[data-color-scheme="mercado"] .ib-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 16px;
  border-right: 1px solid var(--color-border);
}
[data-color-scheme="mercado"] .ib-card:hover { background: rgba(52,131,250,.04); }
[data-color-scheme="mercado"] .ib-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 22px;
  background: rgba(52,131,250,.1);
  color: var(--color-primary);
}
[data-color-scheme="mercado"] .ib-text { text-align: center; }
[data-color-scheme="mercado"] .ib-title { color: var(--color-text); font-size: 14px; }
[data-color-scheme="mercado"] .ib-desc  { color: var(--color-text-muted); white-space: normal; }

/* ── Mercado: buscador prominente (estilo ML) ─────────────────────── */
/* Logo más pequeño para dar espacio al buscador */
[data-color-scheme="mercado"] .hm-mid .container { grid-template-columns: 100px 1fr auto; gap: 10px; }
[data-color-scheme="mercado"] .hm-mid__logo img  { max-height: 34px; width: auto; }

/* Buscador: más alto, pill shape, borde visible sobre amarillo */
[data-color-scheme="mercado"] .hm-search {
  height: 48px;
  border-radius: 24px;
  border: 2px solid rgba(0,0,0,.18);
  background: #fff;
  box-shadow: none;
}
[data-color-scheme="mercado"] .hm-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(52,131,250,.18);
}
[data-color-scheme="mercado"] .hm-search__input {
  font-size: 15px;
  background: transparent;
  color: #333;
  height: 100%;
}
[data-color-scheme="mercado"] .hm-search__input::placeholder { color: #888; }
[data-color-scheme="mercado"] .hm-search__btn {
  background: var(--color-primary);
  border-radius: 0 22px 22px 0;
  height: 100%;
  padding: 0 20px;
  font-size: 16px;
}
[data-color-scheme="mercado"] .hm-search__btn:hover { background: var(--color-primary-hover); }
[data-color-scheme="mercado"] .hm-search__select-wrap {
  background: #f0f0f0;
  border-right: 1px solid #ddd;
  border-radius: 22px 0 0 22px;
}
[data-color-scheme="mercado"] .hm-search__icon { color: #888; }

/* Footer: oscuro con acento amarillo */
[data-color-scheme="mercado"] .ft-root {
  background: #1a1a1a;
  border-top: 3px solid var(--color-accent);
}
[data-color-scheme="mercado"] .ft-bottom { background: #111; }

/* ── Mercado: CategoryShowcase con tabs (cs-mc-*) ───────────────────── */
.cs-mc-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  margin-bottom: 20px;
}

/* Tab bar */
.cs-mc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-mc-tabs::-webkit-scrollbar { display: none; }

.cs-mc-tab {
  padding: 12px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.cs-mc-tab:hover   { color: var(--color-primary); }
.cs-mc-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Panel layout: left banner + right products */
.cs-mc-panel {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 360px;
}

/* Left: banner with overlay */
.cs-mc-left {
  position: relative;
  background: var(--color-primary) center/cover no-repeat;
  overflow: hidden;
}
.cs-mc-left__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(41,104,200,.82) 0%, rgba(26,26,26,.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  gap: 10px;
}
.cs-mc-left__title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}
.cs-mc-left__sub {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin: 0;
}

/* Subcategory chips */
.cs-mc-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cs-mc-sub {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  text-decoration: none;
  transition: background .15s;
}
.cs-mc-sub:hover { background: rgba(255,255,255,.32); color: #fff; }

.cs-mc-left__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: var(--color-primary);
  border-radius: var(--radius-base);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  transition: background .15s, transform .15s;
}
.cs-mc-left__btn:hover { background: #f0f0f0; transform: translateY(-1px); }

/* Right: products grid */
.cs-mc-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  align-content: start;
}
.cs-mc-products .pc-card,
.cs-mc-products .pc-card--mc {
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.cs-mc-products .pc-card:hover,
.cs-mc-products .pc-card--mc:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
  transform: none;
  z-index: 1;
  position: relative;
}

/* "Ver más" card */
.cs-mc-more-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: #fff;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid var(--color-border);
  grid-column: 1 / -1;
  transition: background .15s;
}
.cs-mc-more-card:hover { background: rgba(52,131,250,.05); }
.cs-mc-more-card .fa-th { font-size: 22px; color: var(--color-primary); }
.cs-mc-more-card__arrow { font-size: 11px; }

/* Responsive */
@media (max-width: 900px) {
  .cs-mc-panel { grid-template-columns: 1fr; }
  .cs-mc-left  { min-height: 200px; }
  .cs-mc-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-mc-tab { padding: 10px 14px; font-size: 13px; }
}

/* ── Mercado: cg-layout full-width when used without sidebar ── */
[data-color-scheme="mercado"] .cg-layout--full {
  grid-template-columns: 1fr;
}


/* ═══════════════════════════════════════════════════════════════════
   HeaderMercado — info bar + fila principal + categorías 3 niveles
   ═══════════════════════════════════════════════════════════════════ */

/* Info bar (hm-top) — override para mercado */
[data-color-scheme="mercado"] .hm-top { background: #fff9c4; border-bottom: 1px solid #f0e000; }
[data-color-scheme="mercado"] .hm-top__nav-link { color: #555; font-size: 12px; }
[data-color-scheme="mercado"] .hm-top__nav-link:hover { color: #3483fa; }
[data-color-scheme="mercado"] .hm-top__nav-link--cta {
  color: #3483fa; font-weight: 700; background: none; padding: 0;
}
[data-color-scheme="mercado"] .hm-top__social-link { color: #777; }
[data-color-scheme="mercado"] .hm-top__social-link:hover { color: #3483fa; }
[data-color-scheme="mercado"] .hm-top__tc { color: #555; font-size: 12px; font-weight: 600; }
[data-color-scheme="mercado"] .hm-top__announce .fa-truck { color: #00a650; }

/* Fila principal */
[data-color-scheme="mercado"] .hmm-main { background: var(--color-bg-header); padding: 10px 0; }
[data-color-scheme="mercado"] .hmm-main__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
[data-color-scheme="mercado"] .hmm-logo img {
  height: 40px; width: auto; display: block; object-fit: contain;
}
[data-color-scheme="mercado"] .hmm-search { position: relative; width: 100%; }
[data-color-scheme="mercado"] .hmm-search .hm-search {
  background: #fff; border: 2px solid #fff;
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.12); width: 100%;
}
[data-color-scheme="mercado"] .hmm-search .hm-search:focus-within {
  border-color: #3483fa; box-shadow: 0 0 0 3px rgba(52,131,250,.15);
}
[data-color-scheme="mercado"] .hmm-search .hm-search__input { background: transparent; color: #333; font-size: 15px; }
[data-color-scheme="mercado"] .hmm-search .hm-search__btn {
  background: #ffe600; color: #333; border-left: 1px solid #e6cf00;
  border-radius: 0; font-size: 16px; min-width: 46px;
}
[data-color-scheme="mercado"] .hmm-search .hm-search__btn:hover { background: #f5d800; }
[data-color-scheme="mercado"] .hmm-search .hm-search__select-wrap select {
  background: #fffde7; border-right: 1px solid #e6cf00; color: #333; font-size: 13px;
}
[data-color-scheme="mercado"] .hmm-actions {
  display: flex; align-items: center; gap: 4px;
}
[data-color-scheme="mercado"] .hmm-icon-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; min-width: 40px; height: 40px; padding: 0 8px;
  border: none; background: rgba(0,0,0,.06); cursor: pointer;
  color: #333; font-size: 17px; border-radius: 4px;
  transition: background .15s; text-decoration: none; white-space: nowrap;
}
[data-color-scheme="mercado"] .hmm-icon-btn:hover { background: rgba(0,0,0,.12); }
[data-color-scheme="mercado"] .hmm-icon-btn--login {
  background: rgba(52,131,250,.1); color: #3483fa; font-weight: 600; font-size: 13px; padding: 0 12px;
}
[data-color-scheme="mercado"] .hmm-icon-btn--login:hover { background: rgba(52,131,250,.18); }
[data-color-scheme="mercado"] .hmm-icon-btn__label { font-size: 13px; font-weight: 600; }
[data-color-scheme="mercado"] .hmm-toggler {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer; font-size: 20px; color: #333;
}

/* Carrito — mc-toggle */
[data-color-scheme="mercado"] .hmm-actions .mc-toggle {
  color: #3483fa; font-size: 20px; padding: 0 8px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(52,131,250,.1); border-radius: 4px;
  height: 40px;
}
[data-color-scheme="mercado"] .hmm-actions .mc-toggle:hover { background: rgba(52,131,250,.18); }
[data-color-scheme="mercado"] .hmm-actions .mc-count {
  background: #3483fa; color: #fff; font-size: 10px;
  border-radius: 10px; padding: 1px 6px; font-weight: 700;
}

/* Fila de categorías */
[data-color-scheme="mercado"] .hmm-cats { background: #fff; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
[data-color-scheme="mercado"] .hmm-cats__row {
  display: flex; align-items: stretch; gap: 0;
}
/* MainMenu dentro de mercado — trigger estilizado */
[data-color-scheme="mercado"] .hmm-cats__menu { flex-shrink: 0; position: relative; border-right: 1px solid rgba(0,0,0,.08); }
[data-color-scheme="mercado"] .hmm-cats__menu .mm-trigger {
  background: #3483fa; color: #fff; border: none; border-radius: 0;
  font-size: 13px; font-weight: 700; padding: 0 18px; height: 42px; gap: 8px;
}
[data-color-scheme="mercado"] .hmm-cats__menu .mm-trigger:hover { background: #2968c8; }
[data-color-scheme="mercado"] .hmm-cats__menu .mm-trigger__bars { font-size: 14px; }
[data-color-scheme="mercado"] .hmm-cats__menu .mm-trigger__arrow { font-size: 12px; }

/* Scrollable tabs L1 */
[data-color-scheme="mercado"] .hmm-cats__track {
  display: flex; align-items: stretch; gap: 0; flex: 1;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -ms-overflow-style: none;
}
[data-color-scheme="mercado"] .hmm-cats__track::-webkit-scrollbar { display: none; }
[data-color-scheme="mercado"] .hmm-cats__link {
  display: flex; align-items: center; gap: 5px;
  padding: 0 16px; height: 42px; font-size: 13px; font-weight: 600;
  color: #333; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
[data-color-scheme="mercado"] .hmm-cats__link:hover { color: #3483fa; border-bottom-color: #3483fa; }
[data-color-scheme="mercado"] .hmm-cats__link--offers { color: #00a650; font-weight: 700; }
[data-color-scheme="mercado"] .hmm-cats__link--offers:hover { color: #00a650; border-bottom-color: #00a650; }

/* Dark mode */
[data-theme="dark"][data-color-scheme="mercado"] .hmm-main { background: #1a1a2e; }
[data-theme="dark"][data-color-scheme="mercado"] .hmm-cats { background: #12121f; border-color: rgba(255,255,255,.08); }
[data-theme="dark"][data-color-scheme="mercado"] .hmm-cats__link { color: #ccc; }
[data-theme="dark"][data-color-scheme="mercado"] .hmm-cats__link:hover { color: #3483fa; }
[data-theme="dark"][data-color-scheme="mercado"] .hmm-icon-btn { color: #eee; background: rgba(255,255,255,.08); }
[data-theme="dark"][data-color-scheme="mercado"] .hmm-toggler { color: #eee; }
[data-theme="dark"][data-color-scheme="mercado"] .hm-top { background: #0d0d1f; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"][data-color-scheme="mercado"] .hm-top__nav-link { color: #888; }

/* Responsive */
@media (max-width: 991px) {
  [data-color-scheme="mercado"] .hmm-main__inner { grid-template-columns: auto auto 1fr auto; gap: 10px; }
}
@media (max-width: 575px) {
  [data-color-scheme="mercado"] .hmm-main { padding: 8px 0; }
  [data-color-scheme="mercado"] .hmm-logo img { height: 30px; }
  [data-color-scheme="mercado"] .hmm-cats__link { padding: 0 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MegaMenuMercado (mmc-*)
   Barra L1 horizontal + panel desplegable con columnas L2+L3
   ═══════════════════════════════════════════════════════════════════ */

/* ── Contenedor raíz — posición relativa para el panel absoluto ── */
[data-color-scheme="mercado"] .mmc-nav {
  position: relative;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  z-index: 200;
}

/* ── Barra L1 ── */
[data-color-scheme="mercado"] .mmc-bar {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 16px;
}
[data-color-scheme="mercado"] .mmc-bar::-webkit-scrollbar { display: none; }

[data-color-scheme="mercado"] .mmc-bar__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
[data-color-scheme="mercado"] .mmc-bar__link:hover,
[data-color-scheme="mercado"] .mmc-bar__link--active {
  color: #3483fa;
  border-bottom-color: #3483fa;
}
[data-color-scheme="mercado"] .mmc-bar__link--offers {
  color: #00a650;
  font-weight: 700;
}
[data-color-scheme="mercado"] .mmc-bar__link--offers:hover {
  color: #00a650;
  border-bottom-color: #00a650;
}

/* ── Panel mega ── */
[data-color-scheme="mercado"] .mmc-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid #3483fa;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 300;
  animation: mmcFadeIn .15s ease;
}

@keyframes mmcFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-color-scheme="mercado"] .mmc-panel__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 20px 0 24px;
}

/* ── Columna L2 ── */
[data-color-scheme="mercado"] .mmc-col {
  flex: 0 0 auto;
  width: 20%;
  padding: 0 20px 16px;
  border-right: 1px solid #f0f0f0;
}
[data-color-scheme="mercado"] .mmc-col:last-child { border-right: none; }

[data-color-scheme="mercado"] .mmc-col__title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  text-decoration: none;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
  transition: color .15s;
}
[data-color-scheme="mercado"] .mmc-col__title:hover { color: #3483fa; }

/* ── Lista L3 ── */
[data-color-scheme="mercado"] .mmc-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-color-scheme="mercado"] .mmc-col__link {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  text-decoration: none;
  padding: 4px 0;
  transition: color .12s;
}
[data-color-scheme="mercado"] .mmc-col__link:hover { color: #3483fa; }

/* ── Skeleton carga ── */
[data-color-scheme="mercado"] .mmc-col--skeleton { display: flex; flex-direction: column; gap: 8px; }
[data-color-scheme="mercado"] .mmc-sk {
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: mmcShimmer 1.2s infinite;
}
[data-color-scheme="mercado"] .mmc-sk--title { height: 13px; width: 70%; margin-bottom: 10px; }
[data-color-scheme="mercado"] .mmc-sk--link  { height: 11px; width: 85%; }
@keyframes mmcShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Dark mode ── */
[data-theme="dark"][data-color-scheme="mercado"] .mmc-nav {
  background: #12121f;
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"][data-color-scheme="mercado"] .mmc-bar__link { color: #ccc; }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-bar__link:hover,
[data-theme="dark"][data-color-scheme="mercado"] .mmc-bar__link--active { color: #3483fa; }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-panel {
  background: #1a1a2e;
  border-top-color: #3483fa;
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"][data-color-scheme="mercado"] .mmc-col { border-right-color: rgba(255,255,255,.06); }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-col__title { color: #eee; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-col__title:hover { color: #3483fa; }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-col__link { color: #aaa; }
[data-theme="dark"][data-color-scheme="mercado"] .mmc-col__link:hover { color: #3483fa; }

/* ── Responsive: ocultar en mobile (usa sidebar existente) ── */
@media (max-width: 991px) {
  [data-color-scheme="mercado"] .mmc-nav { display: none; }
}
@media (max-width: 575px) {
  [data-color-scheme="mercado"] .mmc-bar__link { padding: 0 12px; font-size: 12px; }
}

/* ── cm-cats-wrap / header ── */
[data-color-scheme="mercado"] .cm-cats-wrap {
  padding: 32px 0 8px;
}
[data-color-scheme="mercado"] .cm-cats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #3483fa;
}
[data-color-scheme="mercado"] .cm-cats-title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
  letter-spacing: -.2px;
}
[data-color-scheme="mercado"] .cm-cats-see-all {
  font-size: 13px;
  font-weight: 600;
  color: #3483fa;
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid #3483fa;
  border-radius: 20px;
  transition: background .15s, color .15s;
}
[data-color-scheme="mercado"] .cm-cats-see-all:hover {
  background: #3483fa;
  color: #fff;
}
[data-theme="dark"][data-color-scheme="mercado"] .cm-cats-title { color: #eee; }
[data-theme="dark"][data-color-scheme="mercado"] .cm-cats-header { border-bottom-color: #3483fa; }

/* ── cm-cat-scroll / cm-cat-chip — mercado: diseño circular igual a TopBrands ── */
[data-color-scheme="mercado"] .cm-cat-scroll {
  background: transparent;
  padding: 16px 0 8px;
  gap: 0;
  align-items: flex-start;
}

[data-color-scheme="mercado"] .cm-cat-chip {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 120px;
  font-size: 13px;
  font-weight: 600;
  color: #1d3461;
  text-align: center;
  white-space: normal;
  transition: color .2s, transform .2s;
}
[data-color-scheme="mercado"] .cm-cat-chip:hover,
[data-color-scheme="mercado"] .cm-cat-chip:active {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #3483fa;
  transform: translateY(-5px);
}

[data-color-scheme="mercado"] .cm-cat-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #dbeafe;
  outline: 2px dashed #3483fa;
  outline-offset: 7px;
  margin: 8px;
  font-size: 28px;
  color: #3483fa;
  opacity: 1;
  flex-shrink: 0;
  transition: background .2s, outline-color .2s;
}
[data-color-scheme="mercado"] .cm-cat-chip:hover .cm-cat-chip__icon,
[data-color-scheme="mercado"] .cm-cat-chip:active .cm-cat-chip__icon {
  background: #bfdbfe;
  outline-color: #2563eb;
  opacity: 1;
}

/* Dark mode */
[data-theme="dark"][data-color-scheme="mercado"] .cm-cat-chip { color: #93c5fd; }
[data-theme="dark"][data-color-scheme="mercado"] .cm-cat-chip:hover,
[data-theme="dark"][data-color-scheme="mercado"] .cm-cat-chip:active { color: #60a5fa; }
[data-theme="dark"][data-color-scheme="mercado"] .cm-cat-chip__icon {
  background: #1e3a5f;
  outline-color: #3483fa;
}
[data-theme="dark"][data-color-scheme="mercado"] .cm-cat-chip:hover .cm-cat-chip__icon {
  background: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════
   TopBrands — mercado: diseño circular con borde punteado
   ═══════════════════════════════════════════════════════════════════ */

[data-color-scheme="mercado"] .tb-section {
  padding: 40px 0 32px;
}

[data-color-scheme="mercado"] .tb-header {
  border-bottom: none;
  margin-bottom: 32px;
}

[data-color-scheme="mercado"] .tb-title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  letter-spacing: -.2px;
}

[data-color-scheme="mercado"] .tb-see-all {
  border-color: #3483fa;
  color: #3483fa;
  border-radius: 20px;
}
[data-color-scheme="mercado"] .tb-see-all:hover {
  background: #3483fa;
  color: #fff;
}

/* Card: sin borde rectangular, solo el círculo */
[data-color-scheme="mercado"] .tb-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 8px;
  gap: 14px;
  box-shadow: none;
}
[data-color-scheme="mercado"] .tb-card:hover {
  border: none;
  box-shadow: none;
  transform: translateY(-5px);
}

/* Círculo exterior punteado + interior azul claro */
[data-color-scheme="mercado"] .tb-card__img-wrap {
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #dbeafe;
  outline: 2px dashed #3483fa;
  outline-offset: 7px;
  padding: 20px;
  margin: 8px;
  transition: background .2s, outline-color .2s;
}
[data-color-scheme="mercado"] .tb-card:hover .tb-card__img-wrap {
  background: #bfdbfe;
  outline-color: #2563eb;
}

[data-color-scheme="mercado"] .tb-card__img {
  filter: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-color-scheme="mercado"] .tb-card:hover .tb-card__img {
  filter: none;
  transform: scale(1.08);
}

/* Nombre: centrado, azul oscuro */
[data-color-scheme="mercado"] .tb-card__name {
  font-size: 13px;
  font-weight: 600;
  color: #1d3461;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
[data-color-scheme="mercado"] .tb-card:hover .tb-card__name {
  color: #3483fa;
}

/* Skeleton adaptado al círculo */
[data-color-scheme="mercado"] .tb-card--skeleton {
  border: none;
  background: transparent;
}
[data-color-scheme="mercado"] .tb-card--skeleton .tb-skeleton__img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 8px auto;
}

/* Dark mode */
[data-theme="dark"][data-color-scheme="mercado"] .tb-card__img-wrap {
  background: #1e3a5f;
  outline-color: #3483fa;
}
[data-theme="dark"][data-color-scheme="mercado"] .tb-card:hover .tb-card__img-wrap {
  background: #1d4ed8;
}
[data-theme="dark"][data-color-scheme="mercado"] .tb-card__name { color: #93c5fd; }
[data-theme="dark"][data-color-scheme="mercado"] .tb-card:hover .tb-card__name { color: #60a5fa; }

/* Responsive */
@media (max-width: 768px) {
  [data-color-scheme="mercado"] .tb-card__img-wrap {
    width: 80px;
    height: 80px;
    padding: 16px;
    outline-offset: 5px;
    margin: 6px;
  }
}
