@charset "UTF-8";
/* ===== INDEX V2 — Estilo MercadoLibre ===== */
:root {
  --i2-blue:    #3483FA;
  --i2-blue-dk: #2968c8;
  --i2-green:   #00A650;
  --i2-text:    #333333;
  --i2-text2:   #666666;
  --i2-border:  #EDEDED;
  --i2-bg:      #EBEBEB;
  --i2-white:   #FFFFFF;
  --i2-radius:  6px;
  --i2-shadow:  0 1px 2px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  --i2-font:    'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Banner de pedido confirmado ── */
.po-order-confirmed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #00A650;
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
.po-order-confirmed-banner__icon {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.po-order-confirmed-banner__text {
  flex: 1;
}
.po-order-confirmed-banner__close {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.po-order-confirmed-banner__close:hover {
  color: #fff;
}

body.po-index2-page {
  background: var(--i2-bg);
  font-family: var(--i2-font);
  color: var(--i2-text);
}

/* ── Header: buscador centrado + categorías centradas ── */

/* Barra superior: el fondo rojo sigue siendo full-width */
body.po-index2-page .flexHeader {
  max-width: var(--po-content-w);
  margin: 0 auto;
}

/* El containerHeader llena el flexHeader, posición relativa para el buscador */
body.po-index2-page .containerHeader {
  width: 100%;
  position: relative;
}

/* Buscador centrado horizontalmente dentro del header */
body.po-index2-page .contentSearch {
  width: min(600px, 50%);
}

/* Logo fuera del flujo flex, pegado a la izquierda: así .contentSearch
   queda como único ítem flex y puede centrarse en TODO el ancho de
   .containerHeader en vez de en el espacio que sobra a la derecha del logo.
   Solo en desktop: en mobile el header usa otro layout (hamburguesa). */
@media (min-width: 901px) {
  body.po-index2-page #NavDetail {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
  }

  body.po-index2-page .contentSearch {
    flex: none;
    margin: 0 auto;
  }
}

/* Íconos user + carrito: borde derecho del contenido centrado */
body.po-index2-page .contentNav {
  right: calc((100vw - min(1600px, 95vw)) / 2 + 8px);
}

/* El hero queda en z-index: 1 para que el mega menú (z-index: 200) quede siempre encima */
body.po-index2-page .po-hero-wrap {
  position: relative;
  z-index: 1;
}

/* Mega menú: centrar el .dark al mismo ancho que el contenido.
   El fondo rojo del .flexCat sigue siendo full-width. */
body.po-index2-page .flexCat .dark {
  max-width: var(--po-content-w);
  margin: 0 auto;
  width: 100%;
}

/* El dropdown (sub-menu-block) es position:absolute relativo a ul.main-nav.
   Con el .dark centrado, ya queda alineado al contenido. */

/* ── Sections ── */
body.po-index2-page section {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── Título de sección estilo ML ── */
body.po-index2-page .contentSubTitle h2 {
  font-family: var(--i2-font);
  font-weight: 600;
  font-size: 20px;
  color: var(--i2-text);
  margin: 0;
  border: none;
  padding: 0;
  text-align: left;
}

/* ── Wrapper de productos destacados ── */
.po-i2-products-wrap {
  width: var(--po-content-w);
  margin: 0 auto;
  padding: 24px 0 32px;
}

/* po-mix-grid */
.po-i2-grid {
  margin-top: 8px;
}

/* ── Footer ── */
body.po-index2-page .page-footer,
body.po-new-page .page-footer {
  background: #DDD !important;
  color: #ccc;
  font-family: var(--i2-font);
}

body.po-index2-page .page-footer .greyBlue-text,
body.po-new-page .page-footer .greyBlue-text { color: #333 !important; }
body.po-index2-page .page-footer a,
body.po-new-page .page-footer a { color: #333 !important; }
body.po-index2-page .page-footer a:hover,
body.po-new-page .page-footer a:hover { color: #000 !important; }
footer.page-footer .footer-copyright {
  background-color: #666 !important;
}
/* ── Scroll to top ── */
body.po-index2-page #scrolltop {
  background: var(--i2-blue) !important;
  border-radius: 50%;
}

/* ── Carousel de productos destacados ── */
.po-i2-carousel {
  position: relative;
  padding: 10px
}

.po-i2-carr-track {
  overflow: hidden;
}

.po-i2-carousel .po-mix-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.po-i2-carousel .po-mix-grid > [data-mix-card] {
  flex: 0 0 auto;
  width: var(--po-carr-iw, auto);
  min-width: 0;
  height: auto;
}

.po-i2-carr-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ededed;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow .15s;
  color: #333;
}

.po-i2-carr-btn:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

.po-i2-carr-prev { left: -20px; }
.po-i2-carr-next { right: -20px; }

.po-i2-carr-btn[hidden] { display: none !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  body.po-index2-page .contentNav { right: 38px; }
  body.po-index2-page .contentSubTitle h2 { font-size: 18px; }
}

@media (max-width: 679px) {
  .po-i2-carr-track { overflow: visible; }
  .po-i2-carousel .po-mix-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    transform: none !important;
  }
  .po-i2-carr-btn { display: none !important; }
}

@media (max-width: 450px) {
  body.po-index2-page .contentNav { right: 0px; }
}