/* ==========================
   TIENDA MERPEL (AISLADA)
   Solo afecta #tienda-merpel
   ========================== */
#tienda-merpel{
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

#tienda-merpel .mp-store{
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 18px 28px;
  color: #fff;
  font-family: inherit;
}

#tienda-merpel .mp-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#tienda-merpel .mp-titleH2{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}

#tienda-merpel .mp-sub{
  margin: 8px 0 0;
  opacity: .9;
}

#tienda-merpel .mp-cartBox{
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}

#tienda-merpel .mp-cartRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}

#tienda-merpel .mp-cartLabel{ font-weight: 800; }
#tienda-merpel .mp-cartCount{
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}

#tienda-merpel .mp-cartTotal{
  font-weight: 800;
  margin-bottom: 10px;
}

#tienda-merpel .mp-checkout{
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  background: rgba(255,255,255,.9);
  color: #111;
}
#tienda-merpel .mp-checkout:disabled{
  opacity: .5;
  cursor: not-allowed;
}

#tienda-merpel .mp-carousel{
  position: relative;
  margin-top: 14px;
}

#tienda-merpel .mp-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 54px 14px; /* deja espacio a flechas */
  scrollbar-width: none;
}
#tienda-merpel .mp-track::-webkit-scrollbar{ display:none; }

#tienda-merpel .mp-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
}
#tienda-merpel .mp-prev{ left: 8px; }
#tienda-merpel .mp-next{ right: 8px; }

#tienda-merpel .mp-card{
  scroll-snap-align: start;
  flex: 0 0 260px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}

#tienda-merpel .mp-media{
  height: 160px;
  background: rgba(0,0,0,.18);
}

#tienda-merpel .mp-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

#tienda-merpel .mp-imgPh{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  opacity:.85;
  font-weight:800;
}

#tienda-merpel .mp-body{
  padding: 12px 12px 14px;
}

#tienda-merpel .mp-name{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 8px;
  min-height: 36px;
}

#tienda-merpel .mp-price{
  font-weight: 900;
  margin-bottom: 10px;
}

#tienda-merpel .mp-variant{
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: #fff;
}

#tienda-merpel .mp-stock{
  font-size: 13px;
  opacity: .9;
  margin-bottom: 10px;
}

#tienda-merpel .mp-add{
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  background: rgba(34,197,94,.95);
  color: #0b1b10;
}

#tienda-merpel .mp-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .85;
}

@media (max-width: 820px){
  #tienda-merpel .mp-store{ margin-top: 24px; }
  #tienda-merpel .mp-card{ flex-basis: 240px; }
  #tienda-merpel .mp-track{ padding: 8px 46px 14px; }
}

/* Variantes no disponibles */
.mp-variant option:disabled {
  color: #777;
  background-color: #1c1c1c;
  font-style: italic;
}

/* Select general */
.mp-variant {
  background-color: #111;
  color: #eaeaea;
  border: 1px solid #333;
}
/* ===== Drawer Carrito (Flexipack style) ===== */
#tienda-merpel .mp-cartActions{ display:grid; gap:8px; }

#tienda-merpel .mp-cartOpen{
  width:100%;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

#tienda-merpel .mp-drawerOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  transition: opacity .16s ease;
}
#tienda-merpel .mp-drawerOverlay.is-open{ opacity: 1; }

#tienda-merpel .mp-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  background: rgba(18,18,18,.96);
  border-left: 1px solid rgba(255,255,255,.12);
  z-index: 9999;
  transform: translateX(102%);
  transition: transform .16s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
#tienda-merpel .mp-drawer.is-open{ transform: translateX(0); }

#tienda-merpel .mp-drawerHead{
  padding: 16px 16px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#tienda-merpel .mp-drawerTitle{ font-weight: 900; font-size: 18px; }
#tienda-merpel .mp-drawerSub{ opacity:.85; margin-top:4px; font-size: 13px; }

#tienda-merpel .mp-drawerClose{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

#tienda-merpel .mp-drawerBody{
  padding: 12px 16px;
  overflow:auto;
}
#tienda-merpel .mp-empty{
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  opacity:.9;
}

#tienda-merpel .mp-line{
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}
#tienda-merpel .mp-lineTitle{ font-weight: 900; }
#tienda-merpel .mp-lineVar{ opacity:.85; font-size: 13px; margin-top: 2px; }
#tienda-merpel .mp-linePrice{ margin-top: 8px; font-weight: 800; }
#tienda-merpel .mp-lineMul, #tienda-merpel .mp-lineEq{ opacity:.8; font-weight:700; }

#tienda-merpel .mp-lineCtrls{
  display:flex; align-items:center; gap:8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
#tienda-merpel .mp-qtyBtn{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-size: 18px;
  cursor:pointer;
}
#tienda-merpel .mp-qtyNum{
  min-width: 36px;
  text-align:center;
  font-weight: 900;
}
#tienda-merpel .mp-rmBtn{
  margin-left: auto;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(239,68,68,.18);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}

#tienda-merpel .mp-drawerFoot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
#tienda-merpel .mp-drawerTotal{
  font-weight: 900;
  margin-bottom: 10px;
}
#tienda-merpel .mp-drawerCheckout{
  width:100%;
  border:0;
  border-radius:999px;
  padding: 12px 12px;
  font-weight: 900;
  cursor:pointer;
  background: rgba(34,197,94,.95);
  color: #0b1b10;
}
#tienda-merpel .mp-drawerCheckout:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ===== Skeleton ===== */
#tienda-merpel .mp-skelCard{ border:1px solid rgba(255,255,255,.10); }
#tienda-merpel .mp-skel{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 240% 100%;
  animation: mp-shimmer 1.15s ease-in-out infinite;
}
#tienda-merpel .mp-skelLine{
  height: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
#tienda-merpel .mp-skelLine.w80{ width: 80%; }
#tienda-merpel .mp-skelLine.w55{ width: 55%; }
#tienda-merpel .mp-skelLine.w70{ width: 70%; }
#tienda-merpel .mp-skelBtn{
  height: 38px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(255,255,255,.10);
}
@keyframes mp-shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}

/* ===== Variantes aislado (importante) ===== */
#tienda-merpel .mp-variant option:disabled{
  color: #8a8a8a;
  background-color: #151515;
  font-style: italic;
}

/* ==========================
   MATCH FLEXIPACK FINAL
   (Contraste + look premium)
   ========================== */

/* Paleta */
#tienda-merpel{
  --mp-bg: rgba(12,12,14,.96);
  --mp-card: rgba(255,255,255,.08);
  --mp-border: rgba(255,255,255,.14);
  --mp-text: rgba(255,255,255,.92);
  --mp-muted: rgba(255,255,255,.72);
  --mp-muted2: rgba(255,255,255,.58);
  --mp-accent: #36d07d;           /* verde pro */
  --mp-accentText: #08140e;       /* texto sobre verde (oscuro pero legible) */
  --mp-danger: rgba(239,68,68,.22);
}

/* Texto global tienda */
#tienda-merpel .mp-store,
#tienda-merpel .mp-store *{
  color: var(--mp-text);
}

/* Cards un poco más “premium” */
#tienda-merpel .mp-card,
#tienda-merpel .mp-cartBox{
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Precio más “importante” */
#tienda-merpel .mp-price{
  font-size: 15px;
  letter-spacing: .2px;
}

/* Botón verde (mejor contraste que tu negro actual) */
#tienda-merpel .mp-add,
#tienda-merpel .mp-drawerCheckout,
#tienda-merpel .mp-checkout{
  background: var(--mp-accent) !important;
  color: var(--mp-accentText) !important;
}

/* Botón “Ver carrito” elegante */
#tienda-merpel .mp-cartOpen{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: var(--mp-text) !important;
}

/* ===== DRAWER: acá estaba tu problema de letra ===== */
#tienda-merpel .mp-drawer{
  background: var(--mp-bg) !important;
}

#tienda-merpel .mp-drawerTitle{ color: #fff !important; }
#tienda-merpel .mp-drawerSub{ color: var(--mp-muted) !important; }

#tienda-merpel .mp-line{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

#tienda-merpel .mp-lineTitle{
  color: #fff !important;
  font-weight: 900 !important;
}

#tienda-merpel .mp-lineVar{
  color: var(--mp-muted) !important;
}

#tienda-merpel .mp-linePrice{
  color: #fff !important;         /* ✅ arregla lo “negro” */
}

#tienda-merpel .mp-lineMul,
#tienda-merpel .mp-lineEq{
  color: var(--mp-muted2) !important;
}

#tienda-merpel .mp-qtyBtn{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

#tienda-merpel .mp-qtyNum{
  color: #fff !important;
}

/* Eliminar (más visible) */
#tienda-merpel .mp-rmBtn{
  background: var(--mp-danger) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #fff !important;
}

/* Total del drawer */
#tienda-merpel .mp-drawerTotal{
  color: #fff !important;
}

/* Overlay */
#tienda-merpel .mp-drawerOverlay{
  background: rgba(0,0,0,.62) !important;
}

/* Select: más “pro” */
#tienda-merpel .mp-variant{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

#tienda-merpel .mp-variant option{
  background: #0f0f12 !important;
  color: #fff !important;
}

#tienda-merpel .mp-variant option:disabled{
  color: rgba(255,255,255,.42) !important;
  background: #0f0f12 !important;
  font-style: italic;
}

/* “Disponible” más legible */
#tienda-merpel .mp-stock{
  color: var(--mp-muted) !important;
  font-weight: 700;
}

/* Título PRODUCTOS estilo Flexipack */
#tienda-merpel .mp-products-title {
  text-transform: uppercase;
}

#tienda-merpel .mp-title-line {
  width: 56px;
  height: 4px;
  background-color: #b07a4a; /* marrón MERPEL */
  margin-top: 8px;
  border-radius: 2px;
}