.qp-shv2{ padding: 4px 14px 8px; }

/* ── CHIPS "Pedir a tiendas / Mandados" — versión delgada, arriba de todo ── */
.qp-modo-section--slim{ padding: 6px 14px 0; }
.qp-modo-chips--slim{ display:flex; gap:6px; }
.qp-modo-chip--slim{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 8px; border-radius:9px; font-size:11.5px; font-weight:700;
  text-decoration:none; color:#666; background:#f4f4f4; border:1px solid transparent;
  transition:.15s ease;
}
.qp-modo-chip--slim i{ font-size:10.5px; }
.qp-modo-chip--slim.active{
  background:rgba(255,123,0,.12); color:#ff7b00; border-color:rgba(255,123,0,.25);
}

/* ── GREETING BANNER ── */
.qp-greeting{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
  border-radius:18px; padding:16px 18px 20px; margin-bottom:16px;
  min-height:170px; display:flex; align-items:center;
  row-gap: 20px;
}
.qp-greeting-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
.qp-greeting-content{ position:relative; width:100%; }

.qp-greeting-badge{
  display:inline-block; background:#ff7b00; color:#fff; font-size:10.5px; font-weight:800;
  padding:3px 10px; border-radius:999px; margin-bottom:6px;
}
.qp-greeting-title{ font-size:21px; font-weight:900; line-height:1.15; margin:0; }
.qp-greeting-sub{ font-size:13.5px; font-weight:700; margin:2px 0 10px; }
.qp-greeting-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top: 20px;}
.qp-greeting-chip{
  background:#fff; border:2px solid transparent; border-radius:999px; padding:6px 12px;
  font-size:11.5px; font-weight:600; color:#555; box-shadow:0 2px 6px rgba(0,0,0,.1);
  cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
  transition:.15s ease;
}
.qp-greeting-chip--active{
  border-color:#ff7b00; background:rgba(255,123,0,.12); color:#c25500;
}
.qp-greeting-chip i{
  font-size:11.5px; color:#555; /* monocromo — mismo gris para todos los iconos */
}
/* Contraste según claridad de la imagen de fondo */
.qp-greeting--dark .qp-greeting-title,
.qp-greeting--dark .qp-greeting-sub{ color:#1a1a1a; }
.qp-greeting--light .qp-greeting-title,
.qp-greeting--light .qp-greeting-sub{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.35); }

/* ── HERO CAROUSEL ── */
.qp-hero-carousel{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:6px; margin-bottom:22px;
}
.qp-hero-card{
  position:relative; flex:0 0 88%; max-width:420px; scroll-snap-align:start;
  border-radius:20px; overflow:hidden; min-height:170px; background:#222;
  display:flex; align-items:flex-end; color:#fff; cursor:pointer;
}
.qp-hero-card-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.55);
}
.qp-hero-card-content{ position:relative; padding:14px 16px; width:100%; }
.qp-hero-card-title{ font-size:16.5px; font-weight:900; line-height:1.2; margin:0 0 3px; }
.qp-hero-card-sub{ font-size:12px; opacity:.9; margin:0 0 10px; max-width:80%; }
.qp-hero-card-cta{
  display:inline-block; background:#ff7b00; color:#fff; font-weight:700; font-size:12.5px;
  padding:7px 16px; border-radius:999px; border:none;
}
.qp-hero-card-pag{
  position:absolute; bottom:14px; right:16px; background:rgba(0,0,0,.5);
  color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;
}

/* ── SECCIÓN: CARRUSEL HORIZONTAL (Los más pedidos) ── */
.qp-sec-title-row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 2px; }
.qp-sec-title{ font-size:21px; font-weight:900; margin:0; display:flex; align-items:center; gap:6px; margin-bottom: 20px;}
.qp-sec-sub{ font-size:13px; color:#888; margin:0 0 12px; }

/* "Los más pedidos": subtítulo primero (más fácil de leer/decidir, texto
   chico), título después como refuerzo (grande, con la flama). */
.qp-sec-title-row--reverse{ flex-direction:column; align-items:flex-start; margin-bottom:2px; }
.qp-sec-title-row--reverse .qp-sec-sub{ font-size:13px; color:#888; font-weight:600; margin:0 0 2px; }
.qp-sec-title-row--reverse .qp-sec-title{ font-size:21px; font-weight:900; margin-bottom: 20px;}
.qp-sec-flame{ color:#ff4500; margin-right:2px; }

.qp-h-carousel{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; margin-bottom:26px; }
.qp-h-card{
  flex:0 0 165px; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.07); cursor:pointer;
}
.qp-h-card-img{ width:100%; height:100px; object-fit:cover; display:block; }
.qp-h-card-body{ padding:10px 12px 12px; }
.qp-h-card-name{ font-size:14px; font-weight:700; color:#1a1a1a; margin:0 0 2px; line-height:1.25; }
.qp-h-card-row{ display:flex; align-items:center; justify-content:space-between; }
.qp-h-card-price{ font-size:15px; font-weight:900; color:#ff7b00; }
.qp-h-card-add{
  background:#ff7b00; color:#fff; border:none; width:30px; height:30px; border-radius:50%;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
}

/* ── SECCIÓN: MASONRY ESTILO PINTEREST (Para esta mañana / Descubre más) ── */
.qp-masonry{ column-count:2; column-gap:12px; margin-bottom:28px; }
@media(min-width:520px){ .qp-masonry{ column-count:3; } }
.qp-m-card{
  break-inside:avoid; margin-bottom:12px; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.07); cursor:pointer;
}
.qp-m-card-img{ width:100%; display:block; object-fit:cover; }
.qp-m-card-body{ padding:10px 12px 12px; }
.qp-m-card-name{ font-size:13.5px; font-weight:700; color:#1a1a1a; margin:0 0 2px; line-height:1.25; }
.qp-m-card-row{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.qp-m-card-price{ font-size:14px; font-weight:900; color:#ff7b00; }
.qp-m-card-add{
  background:#ff7b00; color:#fff; border:none; width:28px; height:28px; border-radius:50%;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}

/* ── Nombre de negocio bajo el nombre del producto (todas las cards) ── */
.qp-card-tienda{
  font-size:10.5px; color:#999; font-weight:600; margin:0 0 6px;
  display:flex; align-items:center; gap:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qp-card-tienda i{ font-size:9px; color:#bbb; flex-shrink:0; }

/* ── "Tus pedidos recientes" — banner especial ── */
.qp-sec-link{ font-size:13px; font-weight:700; color:#ff7b00; text-decoration:none; }

.qp-lo-carousel{
  display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; padding:2px 2px 8px;
  margin-bottom:26px; margin-right:-14px; /* deja asomar la siguiente card fuera del padding del contenedor padre */
}
.qp-lo-card{
  flex:0 0 86%; max-width:370px; scroll-snap-align:start;
  display:flex; gap:10px; align-items:flex-start; background:#fff8f0;
  border:1px solid #ffe0b3; border-radius:14px; padding:12px;
}
.qp-lo-thumbs{ display:flex; flex-shrink:0; }
.qp-lo-thumb{
  width:52px; height:52px; border-radius:12px; object-fit:cover; border:2px solid #fff;
  margin-left:-14px;
}
.qp-lo-thumb:first-child{ margin-left:0; }
.qp-lo-body{ flex:1; min-width:0; overflow:hidden; }
.qp-lo-badge{
  display:inline-block; background:#ffe0b3; color:#c25500; font-size:9.5px; font-weight:800;
  padding:2px 7px; border-radius:999px; margin-bottom:3px;
}
.qp-lo-title{ font-size:12.5px; font-weight:800; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qp-lo-items{
  font-size:10.5px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; margin-top:2px;
}
.qp-lo-price-row{ display:flex; align-items:center; gap:5px; margin-top:4px; }
.qp-lo-price{ font-size:12px; font-weight:800; color:#ff7b00; }
.qp-lo-count{ font-size:10px; color:#999; font-weight:600; }

.qp-lo-actions{ display:flex; flex-direction:column; align-items:stretch; gap:5px; flex-shrink:0; width:100px; margin-top:12px; }
.qp-lo-repeat{
  background:#ff7b00; color:#fff; border:none; border-radius:8px; padding:8px 6px;
  font-size:11.5px; font-weight:700; white-space:nowrap; text-align:center;
}
.qp-lo-detail{
  background:none; border:1px solid #ddd; border-radius:8px; padding:6px 6px;
  font-size:10.5px; font-weight:600; color:#666; text-align:center; white-space:nowrap;
}

/* ── MODAL DE DETALLE — mismo estilo bottom-sheet del resto de la app ── */
.qp-lo-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10024;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.qp-lo-modal-backdrop.open{ opacity:1; pointer-events:all; }

.qp-lo-modal{
  position:fixed; left:0; right:0; bottom:0; z-index:10025;
  background:#fff; border-radius:20px 20px 0 0; padding:10px 18px 22px;
  max-height:80vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .25s ease;
}
.qp-lo-modal.open{ transform:translateY(0); }

.qp-lo-modal-handle{ width:40px; height:4px; background:#ddd; border-radius:2px; margin:0 auto 14px; cursor:pointer; }

.qp-lo-modal-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.qp-lo-modal-title{ font-size:17px; font-weight:900; color:#1a1a1a; }
.qp-lo-modal-folio{ font-size:12px; color:#999; margin-top:2px; }
.qp-lo-modal-close{ background:#f4f4f4; border:none; width:30px; height:30px; border-radius:50%; color:#666; }

.qp-lo-modal-items{ display:flex; flex-direction:column; gap:18px; margin-bottom:14px; }

.qp-lo-modal-group-header{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.qp-lo-modal-group-logo{ width:24px; height:24px; border-radius:6px; object-fit:cover; }
.qp-lo-modal-group-icon{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#0a84ff; font-size:14px; }
.qp-lo-modal-group-name{ font-size:13.5px; font-weight:800; color:#1a1a1a; }
.qp-lo-modal-group-badge{
  font-size:9.5px; font-weight:800; color:#0a84ff; background:rgba(10,132,255,.1);
  padding:2px 8px; border-radius:999px; margin-left:auto;
}
.qp-lo-modal-group-items{ display:flex; flex-direction:column; gap:10px; padding-left:32px; }
.qp-lo-modal-item{ display:flex; align-items:center; gap:10px; }
.qp-lo-modal-item img{ width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.qp-lo-modal-item-info{ flex:1; min-width:0; }
.qp-lo-modal-item-name{ font-size:13px; font-weight:700; color:#1a1a1a; }
.qp-lo-modal-item-qty{ font-size:11.5px; color:#999; margin-top:1px; }
.qp-lo-modal-item-total{ font-size:13px; font-weight:800; color:#ff7b00; flex-shrink:0; }

.qp-precio-variado{ color:#f97316; font-weight:700; }

.qp-lo-modal-item-variante{ font-size:11px; color:#0a84ff; margin-top:1px; }
.qp-lo-modal-item-variante i{ font-size:9px; margin-right:2px; }
.qp-lo-modal-item-comment{ font-size:11px; color:#888; font-style:italic; margin-top:2px; }

.qp-lo-modal-variado-note{
  background:#fff7ed; border:1px solid #fdba74; color:#c2410c;
  border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.4;
  margin-bottom:14px;
}

.qp-lo-modal-total{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid #eee; padding-top:12px; margin-bottom:16px;
  font-size:15px; font-weight:800; color:#1a1a1a;
}

.qp-lo-modal-repeat{
  width:100%; background:#ff7b00; color:#fff; border:none; border-radius:10px;
  padding:13px; font-size:14px; font-weight:800;
}
.qp-lo-modal-caption{ text-align:center; font-size:11.5px; color:#999; margin-top:8px; }

/* ── Modal de confirmación "¿Reemplazar carrito?" ── */
.qp-lo-modal--confirm{ text-align:center; padding-bottom:26px; max-height:none; }

.qp-replace-icon{
  width:56px; height:56px; border-radius:50%; background:rgba(255,123,0,.12);
  color:#ff7b00; font-size:24px; display:flex; align-items:center; justify-content:center;
  margin:4px auto 14px;
}
.qp-replace-title{ font-size:17px; font-weight:900; color:#1a1a1a; margin-bottom:8px; }
.qp-replace-text{ font-size:13px; color:#777; line-height:1.5; margin-bottom:20px; padding:0 8px; }

.qp-replace-confirm{
  width:100%; background:#ff7b00; color:#fff; border:none; border-radius:10px;
  padding:13px; font-size:14px; font-weight:800; margin-bottom:8px;
}
.qp-replace-cancel{
  width:100%; background:none; border:none; color:#999; font-size:13px; font-weight:600;
  padding:8px;
}


.qp-natural-search-block{ margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.qp-natural-search-title{ font-size: 14px; font-weight: 800; color: #ff7b00; margin-bottom: 10px; }

.qp-natural-search-title {
    justify-content: left;
    margin-left: 20px;
    margin-top: 20px;
}