/* =====================================================================
   components.css · botones, header, mega-menú, cards, footer, etc.
   ===================================================================== */

/* ============================ Botones ============================== */
.mc-btn {
  --_bg: var(--mc-ink); --_fg: var(--mc-white); --_bd: var(--mc-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mc-font-display);
  font-weight: 600; font-size: var(--mc-fs-sm); letter-spacing: .02em;
  line-height: 1; text-transform: uppercase;
  padding: .85rem 1.5rem; border-radius: var(--mc-radius-ctl);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--mc-t), background var(--mc-t), color var(--mc-t), box-shadow var(--mc-t);
}
.mc-btn:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow); color: var(--_fg); }
.mc-btn:active { transform: translateY(0); }
.mc-btn:focus-visible { outline: none; box-shadow: var(--mc-ring); }

.mc-btn--primary { --_bg: var(--mc-lime); --_fg: var(--mc-black); --_bd: var(--mc-lime); }
.mc-btn--primary:hover { --_bg: var(--mc-lime-600); --_bd: var(--mc-lime-600); }

.mc-btn--dark { --_bg: var(--mc-ink); --_fg: var(--mc-white); --_bd: var(--mc-ink); }

.mc-btn--outline { --_bg: transparent; --_fg: var(--mc-ink); --_bd: var(--mc-gray-300); }
.mc-btn--outline:hover { --_bg: var(--mc-ink); --_fg: var(--mc-white); --_bd: var(--mc-ink); }

.mc-btn--ghost { --_bg: transparent; --_fg: var(--mc-ink); --_bd: transparent; }
.mc-btn--ghost:hover { --_bg: var(--mc-gray-100); box-shadow: none; }

.mc-btn--sm { padding: .55rem 1rem; font-size: var(--mc-fs-xs); }
.mc-btn--lg { padding: 1.05rem 2rem; font-size: var(--mc-fs-base); }
.mc-btn--block { width: 100%; }
.mc-btn.is-disabled { opacity: .45; pointer-events: none; }
.mc-btn--icon { padding: .7rem; aspect-ratio: 1; border-radius: var(--mc-radius-ctl); }

/* ============================ Badges =============================== */
.mc-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mc-font-display); font-weight: 700;
  font-size: var(--mc-fs-xs); letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: var(--mc-radius-sm); line-height: 1;
}
.mc-badge--off    { background: var(--mc-price); color: #fff; }
.mc-badge--new    { background: var(--mc-lime); color: var(--mc-black); }
.mc-badge--dark   { background: var(--mc-ink); color: #fff; }
.mc-badge--soft   { background: var(--mc-gray-100); color: var(--mc-gray-600); }
.mc-badge--out    { background: var(--mc-gray-200); color: var(--mc-gray-500); }
.mc-badge--oferta { background: var(--mc-price); color: #fff; }

/* Chip de oferta aplicada (carrito, checkout, mini-carrito) */
.mc-offer-chip {
  display: inline-block; vertical-align: middle;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  padding: .18rem .42rem; border-radius: 999px;
  background: var(--mc-lime, #d5f200); color: #0a0a0b; white-space: nowrap;
}

/* ====================== Barra envío gratis ======================== */
.mc-shipbar { display: grid; gap: .4rem; }
.mc-shipbar__label { font-size: var(--mc-fs-sm); color: var(--mc-gray-600); }
.mc-shipbar__label b { color: var(--mc-ink); }
.mc-shipbar__track { height: 8px; background: var(--mc-gray-200); border-radius: 999px; overflow: hidden; }
.mc-shipbar__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--mc-lime-600), var(--mc-lime));
  transition: width .6s var(--mc-ease);
}
.mc-shipbar--win .mc-shipbar__label b { color: var(--mc-success); }

/* ===================== Tarjeta de producto ======================== */
.mc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--mc-white); border: 1px solid var(--mc-gray-200);
  border-radius: var(--mc-radius); overflow: hidden;
  transition: border-color var(--mc-t), box-shadow var(--mc-t), transform var(--mc-t);
}
.mc-card:hover { border-color: var(--mc-gray-300); box-shadow: var(--mc-shadow-lg); transform: translateY(-3px); }

.mc-card__media {
  /* Blanco, no gris: sobre el fondo gris de la tienda la tarjeta es una hoja
     limpia y la foto del producto no queda dentro de un recuadro apagado. */
  position: relative; aspect-ratio: 1 / 1; background: var(--mc-surface);
  display: grid; place-items: center; overflow: hidden;
}
.mc-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; opacity: 0; transition: transform .4s var(--mc-ease), opacity .45s var(--mc-ease); }
.mc-card.is-loaded .mc-card__media img { opacity: 1; }
.mc-card:hover .mc-card__media img { transform: scale(1.05); }
/* Skeleton mientras carga la imagen de la tarjeta (se quita con .is-loaded vía app.js) */
.mc-card:not(.is-loaded) .mc-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--mc-gray-100) 20%, var(--mc-gray-200) 40%, var(--mc-gray-100) 60%);
  background-size: 200% 100%; animation: mc-shimmer 1.2s ease-in-out infinite;
}
@keyframes mc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.mc-card__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mc-card__fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.9); color: var(--mc-gray-500);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: translateY(-4px); transition: var(--mc-t);
}
.mc-card:hover .mc-card__fav { opacity: 1; transform: translateY(0); }
.mc-card__fav:hover { color: var(--mc-price); background: #fff; }

.mc-card__add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  opacity: 0; transform: translateY(8px); transition: var(--mc-t);
}
.mc-card:hover .mc-card__add { opacity: 1; transform: translateY(0); }

/* Atajo del carrito: esquina superior derecha, como el corazón de favoritos.
   Agrega de una si no hay nada que elegir; si hay variantes, abre la vista
   rápida. Siempre visible en táctil (ver la regla de hover más abajo). */
.mc-card__cart {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: 999px; border: 0;
  background: var(--mc-lime); color: var(--mc-black);
  display: grid; place-items: center; cursor: pointer; font-size: 1rem;
  box-shadow: var(--mc-shadow-sm);
  opacity: 0; transform: translateY(-4px); transition: var(--mc-t);
}
.mc-card:hover .mc-card__cart { opacity: 1; transform: translateY(0); }
.mc-card__cart:hover { background: var(--mc-lime-600); }

.mc-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mc-card__cat { font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--mc-gray-400); }
.mc-card__title { font-family: var(--mc-font-body); font-weight: 600; font-size: var(--mc-fs-base); color: var(--mc-ink); margin: 0; line-height: 1.3; }
.mc-card__title a:hover { color: var(--mc-gray-600); }
.mc-card__spec { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }

.mc-card__prices { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mc-price-now { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-lg); color: var(--mc-price); }
.mc-price-old { font-size: var(--mc-fs-sm); color: var(--mc-gray-400); text-decoration: line-through; }

/* ============ Grilla de productos (auto-responsive) ============== */
.mc-grid-products {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (max-width: 640px) { .mc-grid-products { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }

/* Las acciones aparecen al pararse encima del producto, en cualquier tamaño de
   pantalla (en táctil, el primer toque sobre la tarjeta las revela). También
   con el teclado, al enfocar cualquiera de ellas. */
.mc-card:focus-within .mc-card__add,
.mc-card:focus-within .mc-card__fav,
.mc-card:focus-within .mc-card__cart { opacity: 1; transform: none; }

/* ============================ Rating ============================== */
.mc-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--mc-lime-700); font-size: var(--mc-fs-sm); }
.mc-rating .bi { color: #f5b301; }
.mc-rating__count { color: var(--mc-gray-400); font-size: var(--mc-fs-xs); margin-left: 4px; }

/* =========================== Formularios ========================== */
.mc-field { display: grid; gap: 6px; }
.mc-label { font-size: var(--mc-fs-sm); font-weight: 600; color: var(--mc-gray-700); }
.mc-input, .mc-select, .mc-textarea {
  width: 100%; min-width: 0; padding: .7rem .9rem; font-size: var(--mc-fs-base);
  background: var(--mc-white); color: var(--mc-ink);
  border: 1.5px solid var(--mc-gray-200); border-radius: var(--mc-radius-ctl);
  transition: border-color var(--mc-t), box-shadow var(--mc-t);
}
.mc-input::placeholder, .mc-textarea::placeholder { color: var(--mc-gray-400); }
.mc-input:focus, .mc-select:focus, .mc-textarea:focus { outline: none; border-color: var(--mc-ink); box-shadow: var(--mc-ring); }
.mc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2376767f' d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; }

/* ========================== Breadcrumb ============================ */
.mc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--mc-fs-sm); color: var(--mc-gray-500); }
.mc-breadcrumb a:hover { color: var(--mc-ink); }
.mc-breadcrumb .sep { color: var(--mc-gray-300); }
.mc-breadcrumb [aria-current] { color: var(--mc-ink); font-weight: 600; }

/* ========================== Paginación =========================== */
.mc-pagination { display: inline-flex; gap: 6px; }
.mc-pagination a, .mc-pagination span {
  min-width: 40px; height: 40px; padding-inline: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--mc-gray-200); border-radius: var(--mc-radius-sm);
  font-weight: 600; font-size: var(--mc-fs-sm);
}
.mc-pagination a:hover { border-color: var(--mc-ink); }
.mc-pagination .is-active { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }

/* =====================================================================
   TOPBAR + HEADER + MEGA MENÚ
   ===================================================================== */
/* Cinta superior sin franja sólida: el fondo es un sombreado que arranca oscuro
   arriba y se disuelve hacia abajo. Así el texto se lee sobre lo que haya
   detrás (el banner de la home o el fondo de la tienda) sin cerrar la imagen. */
.mc-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: transparent;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-size: var(--mc-fs-xs); height: var(--mc-topbar-h);
  display: flex; align-items: center;
  transition: transform .3s var(--mc-ease), opacity .3s var(--mc-ease);
}
/* El sombreado es más alto que la barra (baja un poco por detrás del header)
   para que el desvanecido tenga recorrido; la barra conserva sus 36px. */
.mc-topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--mc-topbar-h) + 20px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,.38) 0%, rgba(10,10,11,.16) 60%, transparent 100%);
}
.mc-topbar .mc-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.mc-topbar a { color: inherit; display: inline-flex; align-items: center; gap: .4rem; }
.mc-topbar a:hover { color: var(--mc-lime); }

/* Al bajar, la cinta se retira y la isla del header ocupa su sitio: así el
   texto de la cinta nunca queda sobre contenido que no controlamos. */
body.is-scrolled .mc-topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.mc-topbar__promo b { color: var(--mc-lime); }
/* Cinta de mensajes (desde el admin): desplazamiento continuo, sin saltos.
   La pista lleva la lista duplicada y la animación recorre la mitad exacta. */
.mc-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mc-marquee__track { display: flex; width: max-content; animation: mc-marquee 26s linear infinite; }
.mc-marquee:hover .mc-marquee__track { animation-play-state: paused; }   /* para poder leerlo */
.mc-marquee__set { display: flex; align-items: center; }
.mc-marquee__msg { white-space: nowrap; }
.mc-marquee__sep { opacity: .45; padding-inline: 1.6rem; }
@keyframes mc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: se queda el primer mensaje, centrado */
  .mc-marquee { mask-image: none; -webkit-mask-image: none; text-align: center; }
  .mc-marquee__track { animation: none; width: 100%; justify-content: center; }
  .mc-marquee__set:nth-child(2), .mc-marquee__msg ~ .mc-marquee__msg, .mc-marquee__sep { display: none; }
}
.mc-topbar__links { display: flex; gap: 1.2rem; }
/* "Ser minorista" vive aquí, junto a Ayuda: en la barra del header no cabía
   con todos los ítems del menú. Chip en lima con borde para que se note sobre
   el topbar oscuro; en móvil el topbar se oculta y lo cubre el drawer. */
.mc-topbar .mc-topbar__mino {
  background: var(--mc-lime); color: var(--mc-black); font-weight: 700;
  padding: .26rem .65rem; border-radius: var(--mc-radius-ctl);
  border: 1px solid rgba(10,10,11,.3); text-shadow: none; line-height: 1;
}
.mc-topbar .mc-topbar__mino:hover { background: var(--mc-lime-600); color: var(--mc-black); }
@media (max-width: 768px) { .mc-topbar__links { display: none; } }
@media (max-width: 576px) {
  /* En móvil manda la promo: el enlace de WhatsApp se retira (ya está el botón
     flotante) y la cinta se queda con toda la barra. */
  /* .mc-topbar a le pone display:inline-flex, así que hace falta el mismo peso */
  .mc-topbar .mc-topbar__wa { display: none; }
  .mc-topbar .mc-container { justify-content: center; }
}

/* Header flotante: no es una franja de borde a borde, sino una isla blanca
   con aire alrededor por la que se ve el fondo de la tienda. El sticky va en
   el contenedor exterior; la isla es la que lleva el fondo y el radio. */
.mc-header {
  position: fixed; top: var(--mc-topbar-h); left: 0; right: 0; z-index: 1000;
  padding: .7rem 0; transition: top .3s var(--mc-ease);
}
body.is-scrolled .mc-header { top: 0; }   /* la cinta se fue: sube a ras */
body.is-scrolled .mc-header__bar { box-shadow: var(--mc-shadow); }
.mc-header__bar {
  height: var(--mc-header-h); display: flex; align-items: center; gap: 1rem;
  background: var(--mc-surface); border: 1px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-lg); padding-inline: 1.2rem;
  box-shadow: 0 6px 24px -14px rgba(16,16,20,.35);
}
@media (max-width: 576px) { .mc-header { padding: .5rem 0; } .mc-header__bar { padding-inline: .8rem; gap: .6rem; } }
.mc-header__logo { color: var(--mc-ink); flex-shrink: 0; }
.mc-header__logo svg { height: 26px; width: auto; }

.mc-nav { display: flex; align-items: stretch; gap: .25rem; height: 100%; flex: 1; }
.mc-nav__item { position: static; display: flex; align-items: center; }
.mc-nav__link {
  /* nowrap: la isla tiene menos ancho útil que la barra a sangre de antes, y
     un rótulo partido en dos líneas descuadra toda la fila */
  height: 100%; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding-inline: .7rem; font-family: var(--mc-font-display);
  font-weight: 600; font-size: var(--mc-fs-sm); letter-spacing: .02em; text-transform: uppercase;
  color: var(--mc-ink); position: relative;
}
.mc-nav__link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 18px; height: 3px;
  background: var(--mc-lime); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--mc-t);
}
.mc-nav__item:hover .mc-nav__link::after, .mc-nav__link.is-active::after { transform: scaleX(1); }

.mc-header__actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.mc-iconbtn {
  position: relative; width: 42px; height: 42px; border: 0; background: transparent;
  border-radius: var(--mc-radius-pill); color: var(--mc-ink); font-size: 1.2rem;
  display: grid; place-items: center; cursor: pointer; transition: background var(--mc-t);
}
.mc-iconbtn:hover { background: var(--mc-gray-100); }
.mc-iconbtn__count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--mc-lime); color: var(--mc-black); border-radius: 999px;
  font-family: var(--mc-font-display); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

/* Mega menú */
/* El panel cuelga de la isla del header, así que se alinea con ella: mismo
   ancho que el contenedor y esquinas redondeadas, no una franja a sangre. */
.mc-mega {
  position: absolute; top: calc(100% - .5rem); left: 50%;
  /* mismo ancho que la isla: el contenedor menos su aire lateral */
  width: min(calc(var(--mc-container) - var(--mc-gutter) * 2), calc(100vw - var(--mc-gutter) * 2));
  padding-inline: 1.2rem;
  background: var(--mc-white); border: 1px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: opacity var(--mc-t), transform var(--mc-t), visibility var(--mc-t);
  z-index: 999;
}
/* El panel ya trae el ancho y el aire del contenedor: el interior no repite padding */
.mc-mega > .mc-container { padding-inline: 0; max-width: none; }
.mc-nav__item:hover .mc-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mc-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1.4rem 1.8rem; padding-block: 1.8rem; }
.mc-mega__col { min-width: 0; }
.mc-mega__col h4 { font-size: var(--mc-fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-gray-400); margin-bottom: .7rem; position: sticky; top: 0; background: #fff; padding-bottom: .3rem; }
.mc-mega__coltitle { color: var(--mc-ink); }
.mc-mega__coltitle:hover { color: var(--mc-lime-700); }
.mc-mega__col ul { list-style: none; margin: 0; padding: 0 6px 0 0; display: grid; gap: .3rem; max-height: 46vh; overflow-y: auto; }
.mc-mega__col ul::-webkit-scrollbar { width: 6px; }
.mc-mega__col a { font-size: var(--mc-fs-sm); color: var(--mc-gray-600); line-height: 1.25; display: block; }
.mc-mega__col a:hover { color: var(--mc-ink); }
.mc-mega__promo {
  background: var(--mc-black); color: #fff; border-radius: var(--mc-radius);
  padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  background-image: radial-gradient(120% 120% at 100% 0%, rgba(213,242,0,.25), transparent 55%);
}
.mc-mega__promo h5 { color: #fff; font-size: var(--mc-fs-lg); }
.mc-mega__promo .mc-eyebrow { color: var(--mc-lime); }

/* Mega menú · panel grid (Modelos / Personalizar) */
.mc-mega__panel { padding-block: 1.6rem; }
.mc-mega__title { font-size: var(--mc-fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--mc-gray-400); margin-bottom: 1rem; }
.mc-mega__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; max-height: 60vh; overflow-y: auto; }
.mc-megacard { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-sm); padding: .5rem; transition: var(--mc-t); }
.mc-megacard:hover { border-color: var(--mc-ink); box-shadow: var(--mc-shadow); transform: translateY(-2px); }
.mc-megacard__media { aspect-ratio: 1/1; background: var(--mc-gray-50); border-radius: var(--mc-radius-sm); display: grid; place-items: center; overflow: hidden; }
.mc-megacard__media img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }
.mc-megacard__name { font-size: var(--mc-fs-xs); font-weight: 600; color: var(--mc-ink); line-height: 1.25; }

/* Mega menú · colaboraciones */
.mc-mega__collabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mc-collab-mini { position: relative; isolation: isolate; border-radius: var(--mc-radius); overflow: hidden; aspect-ratio: 16/8; display: flex; align-items: flex-end; padding: 1rem; color: #fff; transition: var(--mc-t); }
.mc-collab-mini::before { content:""; position:absolute; inset:0; z-index:-2; background: var(--_bg, #111); }
.mc-collab-mini::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)); }
.mc-collab-mini:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-lg); color: #fff; }
.mc-collab-mini__name { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-lg); }
.mc-collab-mini .mc-badge { position: absolute; top: .8rem; left: .8rem; }
/* Con portada: la foto reemplaza al color (--_bg y veladura quedan de fallback) */
.mc-collab-mini__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mc-collab-mini--img::before, .mc-collab-mini--img::after { content: none; }
.mc-collab-mini--img .mc-collab-mini__name { text-shadow: 0 1px 8px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5); }

/* Mega menú · Fundas (marcas → modelos, 2 paneles) */
.mc-mega-cases { display: grid; grid-template-columns: 200px 1fr 240px; gap: 0; padding-block: 0; }
.mc-mega-cases__brands { border-right: 1px solid var(--mc-gray-200); padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: .15rem; max-height: 62vh; overflow-y: auto; }
.mc-mega-cases__brand { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-radius: var(--mc-radius-sm); font-family: var(--mc-font-display); font-weight: 600; font-size: var(--mc-fs-sm); color: var(--mc-gray-700); }
.mc-mega-cases__brand .bi { opacity: 0; transition: opacity var(--mc-t); }
.mc-mega-cases__brand:hover, .mc-mega-cases__brand.is-active { background: var(--mc-ink); color: #fff; }
.mc-mega-cases__brand.is-active .bi { opacity: 1; }
.mc-mega-cases__models { padding: 1.4rem 1.6rem; position: relative; min-height: 320px; }
.mc-mega-cases__panel { display: none; }
.mc-mega-cases__panel.is-active { display: block; }
.mc-mega-cases__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.mc-mega-cases__all { font-size: var(--mc-fs-sm); color: var(--mc-lime-700); font-weight: 600; }
.mc-mega-cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .4rem 1rem; max-height: 50vh; overflow-y: auto; padding-right: 6px; }
.mc-mega-cases__grid a { font-size: var(--mc-fs-sm); color: var(--mc-gray-600); padding: .25rem 0; line-height: 1.2; }
.mc-mega-cases__grid a:hover { color: var(--mc-ink); }
.mc-mega-cases__promo { margin: 1.2rem 1.2rem 1.2rem 0; }
.mc-mega-cases--nopromo { grid-template-columns: 230px 1fr; }
@media (max-width: 900px) { .mc-mega-cases { grid-template-columns: 1fr; } .mc-mega-cases__promo { display: none; } }

/* Mega menú · carrusel horizontal de tarjetas (drag-to-scroll) */
/* Mega menú · Accesorios (grupos → subcategorías, 2 paneles) */
.mc-megaacc { display: grid; grid-template-columns: 280px 1fr; gap: 0; padding-block: 0; }
.mc-megaacc__rail { border-right: 1px solid var(--mc-gray-200); padding: 1.4rem 1rem; max-height: 64vh; overflow-y: auto; }
.mc-megaacc__rail .mc-mega__title { margin-bottom: .7rem; padding-left: .45rem; }
.mc-megaacc__groups { display: flex; flex-direction: column; gap: .1rem; }
.mc-megaacc__group { display: flex; align-items: center; gap: .7rem; padding: .4rem .55rem; border-radius: var(--mc-radius); color: var(--mc-gray-700); transition: background var(--mc-t), color var(--mc-t); }
.mc-megaacc__group .bi { margin-left: auto; opacity: 0; font-size: .9em; transform: translateX(-4px); transition: opacity var(--mc-t), transform var(--mc-t); }
.mc-megaacc__group:hover, .mc-megaacc__group.is-active { background: var(--mc-gray-100); color: var(--mc-ink); }
.mc-megaacc__group:hover .bi, .mc-megaacc__group.is-active .bi { opacity: 1; transform: translateX(0); }
.mc-megaacc__thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--mc-radius-sm); overflow: hidden; background: var(--mc-gray-100); display: grid; place-items: center; }
.mc-megaacc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mc-megaacc__gname { font-family: var(--mc-font-display); font-weight: 600; font-size: var(--mc-fs-sm); line-height: 1.2; }

.mc-megaacc__panels { position: relative; padding: 1.5rem 2rem; min-height: 260px; }
.mc-megaacc__panel { display: none; }
.mc-megaacc__panel.is-active { display: block; animation: mc-fade-up .25s var(--mc-ease); }
.mc-megaacc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--mc-gray-100); }
.mc-megaacc__head h4 { font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-lg); color: var(--mc-ink); }
.mc-megaacc__all { font-size: var(--mc-fs-sm); font-weight: 600; color: var(--mc-lime-700); white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.mc-megaacc__all:hover { color: var(--mc-ink); }
.mc-megaacc__chips { display: flex; flex-wrap: wrap; gap: .6rem; align-content: flex-start; }
.mc-megaacc__chip { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .4rem; border: 1px solid var(--mc-gray-200); border-radius: 999px; font-size: var(--mc-fs-sm); font-weight: 500; color: var(--mc-gray-700); background: #fff; transition: border-color var(--mc-t), color var(--mc-t), background var(--mc-t), transform var(--mc-t); }
.mc-megaacc__chip:hover { border-color: var(--mc-ink); color: var(--mc-ink); background: var(--mc-gray-50); transform: translateY(-1px); }
.mc-megaacc__chipimg { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--mc-gray-100); display: grid; place-items: center; }
.mc-megaacc__chipimg img { width: 100%; height: 100%; object-fit: cover; }

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

@media (max-width: 900px) {
  .mc-megaacc { grid-template-columns: 1fr; }
  .mc-megaacc__rail { border-right: none; border-bottom: 1px solid var(--mc-gray-200); max-height: 40vh; }
  .mc-megaacc__panels { min-height: 0; }
}

/* Mega menú · Accesorios (grilla de categorías) */
.mc-mega-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; }
.mc-mega-cat { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius-sm); font-size: var(--mc-fs-sm); font-weight: 600; color: var(--mc-gray-700); transition: var(--mc-t); }
.mc-mega-cat .bi { color: var(--mc-gray-400); }
.mc-mega-cat:hover { border-color: var(--mc-ink); color: var(--mc-ink); transform: translateY(-2px); box-shadow: var(--mc-shadow-sm); }
.mc-mega-cat:hover .bi { color: var(--mc-lime-700); }

/* Botón hamburguesa (mobile): a la IZQUIERDA del logo — es donde el pulgar
   lo espera y donde lo ponen la mayoría de tiendas. En el HTML ya está
   primero, así que basta con no reordenarlo. */
.mc-burger { display: none; }
/* Entre el burger (992) y ~1230 la isla queda justa: se compacta el nav para
   que los seis ítems y los iconos convivan sin salirse de la barra. */
@media (max-width: 1230px) {
  .mc-nav__link { padding-inline: .45rem; font-size: var(--mc-fs-xs); }
  .mc-header__bar { gap: .6rem; }
}
@media (max-width: 992px) {
  .mc-nav, .mc-header__search-inline { display: none; }
  .mc-burger { display: grid; order: 0; }
  .mc-header__logo { order: 1; margin-right: auto; }
  .mc-header__actions { order: 2; }
}

/* Buscador */
.mc-search { position: relative; flex: 1; max-width: 420px; }
.mc-search input { width: 100%; padding: .6rem 1rem .6rem 2.4rem; border-radius: var(--mc-radius-pill); border: 1.5px solid var(--mc-gray-200); background: var(--mc-gray-50); font-size: var(--mc-fs-sm); }
.mc-search input:focus { outline: none; border-color: var(--mc-ink); background: #fff; box-shadow: var(--mc-ring); }
.mc-search .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--mc-gray-400); }
@media (max-width: 1100px) { .mc-header__search-inline { max-width: 240px; } }

/* =====================================================================
   BUSCADOR (overlay)
   ===================================================================== */
.mc-search-overlay {
  /* Sin backdrop-filter: ver la nota del velo de la vista rápida */
  position: fixed; inset: 0; z-index: 1150; background: rgba(10,10,11,.55);
  opacity: 0; visibility: hidden; transition: opacity var(--mc-t), visibility var(--mc-t);
}
.mc-search-overlay.is-open { opacity: 1; visibility: visible; }
.mc-search-sheet {
  background: #fff; width: 100%; max-height: 92vh; overflow-y: auto;
  border-radius: 0 0 var(--mc-radius-lg) var(--mc-radius-lg); box-shadow: var(--mc-shadow-lg);
  transform: translateY(-100%); transition: transform .32s var(--mc-ease);
}
.mc-search-overlay.is-open .mc-search-sheet { transform: translateY(0); }
.mc-search-inner { padding-block: 1.1rem 1.8rem; }
.mc-search-bar { display: flex; align-items: center; gap: .6rem; border-bottom: 2px solid var(--mc-ink); padding-bottom: .7rem; }
.mc-search-bar .bi-search { font-size: 1.3rem; color: var(--mc-gray-500); }
.mc-search-bar input { flex: 1; min-width: 0; border: 0; outline: none; font-size: var(--mc-fs-xl); font-family: var(--mc-font-display); background: transparent; }
.mc-search-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 .5rem; }
.mc-search-chips a { font-size: var(--mc-fs-sm); font-weight: 600; padding: .4rem .9rem; border-radius: var(--mc-radius-pill); background: var(--mc-gray-100); color: var(--mc-gray-700); }
.mc-search-chips a:hover { background: var(--mc-ink); color: #fff; }
.mc-search-label { font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--mc-gray-400); margin: 1.2rem 0 .8rem; }
.mc-search-empty { color: var(--mc-gray-400); padding: 2rem 0; text-align: center; }

/* =====================================================================
   MINI-CARRITO (drawer)
   ===================================================================== */
.mc-drawer-overlay {
  /* Sin backdrop-filter: ver la nota del velo de la vista rápida */
  position: fixed; inset: 0; background: rgba(10,10,11,.5);
  opacity: 0; visibility: hidden; transition: var(--mc-t); z-index: 1100;
}
.mc-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--mc-white); z-index: 1101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--mc-ease);
  box-shadow: var(--mc-shadow-lg);
}
.mc-drawer.is-open { transform: translateX(0); }
.mc-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--mc-gray-200); }
.mc-drawer__head h3 { margin: 0; font-size: var(--mc-fs-lg); }
.mc-drawer__ship { padding: 1rem 1.4rem; border-bottom: 1px solid var(--mc-gray-200); background: var(--mc-gray-50); }
.mc-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.mc-drawer__foot { padding: 1.2rem 1.4rem; border-top: 1px solid var(--mc-gray-200); display: grid; gap: .8rem; }
.mc-drawer__total { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mc-font-display); }
.mc-drawer__total b { font-size: var(--mc-fs-xl); }

.mc-cart-empty { text-align: center; color: var(--mc-gray-400); padding: 3rem 1rem; display: grid; gap: 1rem; place-items: center; }
.mc-cart-empty .bi { font-size: 2.6rem; }

.mc-cartline { display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: center; }
.mc-cartline__img { width: 64px; height: 64px; border-radius: var(--mc-radius-sm); background: var(--mc-gray-50); border: 1px solid var(--mc-gray-200); object-fit: contain; padding: 6px; }
.mc-cartline__name { font-size: var(--mc-fs-sm); font-weight: 600; }
.mc-cartline__meta { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }

/* Stepper de cantidad (reutilizable) */
.mc-qtystep { display: inline-flex; align-items: center; border: 1.5px solid var(--mc-gray-200); border-radius: var(--mc-radius-pill); overflow: hidden; }
.mc-qtystep button { width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--mc-ink); display: grid; place-items: center; }
.mc-qtystep button:hover { background: var(--mc-gray-100); }
.mc-qtystep input { width: 34px; text-align: center; border: 0; outline: none; font-weight: 600; font-size: var(--mc-fs-sm); background: transparent; -moz-appearance: textfield; }
.mc-qtystep input::-webkit-outer-spin-button, .mc-qtystep input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-qtystep--lg button { width: 38px; height: 38px; font-size: 1.1rem; }
.mc-qtystep--lg input { width: 42px; }

/* =====================================================================
   WHATSAPP FLOAT
   ===================================================================== */
.mc-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 1050;
  width: 58px; height: 58px; border-radius: 999px; background: #25d366; color: #fff;
  display: grid; place-items: center; font-size: 1.8rem;
  box-shadow: 0 10px 24px rgba(37,211,102,.4); transition: transform var(--mc-t);
}
.mc-wa:hover { transform: scale(1.08); color: #fff; }
.mc-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid #25d366; animation: mc-pulse 2s infinite;
}
@keyframes mc-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* =====================================================================
   VISTA RÁPIDA
   Ficha del producto dentro de un modal: se carga la MISMA página en modo
   embebido, así la galería y los selectores de variante son exactamente los
   de la ficha y no hay dos versiones que mantener.
   ===================================================================== */
/* =====================================================================
   CALCULAR ENVÍO
   Informativo: qué transportadoras llegan a la ciudad y a qué precio. No se
   elige nada aquí — eso es del checkout.
   ===================================================================== */
.mc-shipmodal { position: fixed; inset: 0; z-index: 1900; display: none; }
.mc-shipmodal.is-open { display: block; }
.mc-shipmodal__bg { position: absolute; inset: 0; background: rgba(10,10,11,.55); }
.mc-shipmodal__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow: auto;
  background: var(--mc-surface); border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-lg);
}
.mc-shipmodal__head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--mc-gray-200); }
.mc-shipmodal__head h3 { margin: 0; font-size: var(--mc-fs-md); font-family: var(--mc-font-display); flex: 1; }
.mc-shipmodal__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--mc-gray-100); font-size: 1.1rem; cursor: pointer; }
.mc-shipmodal__x:hover { background: var(--mc-gray-200); }
.mc-shipmodal__body { padding: 1.1rem 1.2rem 1.3rem; }
.mc-shipmodal__form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mc-shipmodal__form label { display: grid; gap: .25rem; font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-gray-500); }
@media (max-width: 480px) { .mc-shipmodal__form { grid-template-columns: 1fr; } }
.mc-shipmodal__result { margin-top: 1rem; display: grid; gap: .5rem; min-height: 60px; }
.mc-shipmodal__note { margin: 1rem 0 0; font-size: var(--mc-fs-xs); color: var(--mc-gray-500); line-height: 1.5; }

/* Fila de transportadora (se reutiliza en el checkout) */
.mc-carrier { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius); }
.mc-carrier__logo { flex: 0 0 auto; width: 62px; height: 30px; display: grid; place-items: center; overflow: hidden; }
.mc-carrier__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Sin logo: iniciales, para que la fila no se vea coja */
.mc-carrier__logo span {
  font-family: var(--mc-font-display); font-weight: 700; font-size: var(--mc-fs-xs); letter-spacing: .04em;
  color: var(--mc-gray-600); background: var(--mc-gray-100); border-radius: var(--mc-radius-sm);
  width: 100%; height: 100%; display: grid; place-items: center;
}
/* display:grid ganaría al atributo hidden, así que se fuerza */
.mc-carrier__logo span[hidden] { display: none; }
.mc-carrier__body { flex: 1 1 auto; min-width: 0; }
.mc-carrier__name { font-weight: 600; font-size: var(--mc-fs-sm); }
.mc-carrier__eta { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.mc-carrier__price { font-family: var(--mc-font-display); font-weight: 700; }

/* Por encima del aviso de cookies (1800): mientras el modal está abierto es lo
   único con lo que se interactúa. */
.mc-quickwrap { position: fixed; inset: 0; z-index: 1900; display: none; }
.mc-quickwrap.is-open { display: block; }
/* Velo SIN backdrop-filter: con él, Chrome deja de pintar el color de fondo en
   cuanto no puede componer la capa (headless, GPU capada…) y el modal queda
   flotando sobre la página sin oscurecerla. El desenfoque no compensa perder
   el velo. */
.mc-quickwrap__bg { position: absolute; inset: 0; background: rgba(10,10,11,.6); }
.mc-quickwrap__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 2rem)); height: min(760px, calc(100vh - 2.5rem));
  background: var(--mc-surface); border-radius: var(--mc-radius-lg); overflow: hidden;
  box-shadow: var(--mc-shadow-lg); display: flex; flex-direction: column;
}
/* Barra mínima: solo el botón de cerrar, alineado a la derecha */
.mc-quickwrap__bar {
  display: flex; justify-content: flex-end; padding: .55rem .7rem 0; flex: 0 0 auto;
}
.mc-quickwrap__x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mc-gray-100);
  color: var(--mc-ink); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.mc-quickwrap__x:hover { background: var(--mc-gray-200); }
.mc-quickwrap iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; }
.mc-quickwrap__load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mc-gray-400); }
.mc-quickwrap.is-ready .mc-quickwrap__load { display: none; }
@media (max-width: 600px) {
  .mc-quickwrap__box { width: 100vw; height: 100vh; border-radius: 0; }
}

/* Dentro del modal: la ficha ocupa el ancho sin los aires de una página suelta */
body.mc-quick { background: var(--mc-surface); }
body.mc-quick .mc-section { padding-block: 0 1.5rem; }
body.mc-quick .mc-container { padding-inline: 1.1rem; }
body.mc-quick main { padding-top: 1.1rem !important; }

/* ---------------------------------------------------------------------
   VOLVER ARRIBA
   Va apilado sobre el botón de WhatsApp (de ahí el bottom), en oscuro para
   no pelearse con el verde. En reposo no existe: sin scroll no hay nada a
   donde volver, así que llega con el scroll y se va igual.
   --------------------------------------------------------------------- */
/* right = 26px para que su eje caiga sobre el del WhatsApp (20 + 58/2 − 46/2) */
.mc-totop {
  position: fixed; right: 26px; bottom: 88px; z-index: 1050;
  width: 46px; height: 46px; border-radius: 999px; padding: 0;
  background: var(--mc-black); color: #fff; border: 1px solid rgba(255,255,255,.12);
  display: grid; place-items: center; font-size: 1.15rem; cursor: pointer;
  box-shadow: var(--mc-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--mc-t), transform var(--mc-t), visibility var(--mc-t), background var(--mc-t), color var(--mc-t);
}
.mc-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.mc-totop:hover { background: var(--mc-lime); color: var(--mc-black); border-color: transparent; }
.mc-totop:focus-visible { outline: none; box-shadow: var(--mc-ring), var(--mc-shadow-lg); }
@media (prefers-reduced-motion: reduce) { .mc-totop { transition: opacity .15s linear, visibility .15s linear; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.mc-footer { background: var(--mc-black); color: var(--mc-gray-300); margin-top: 4rem; }
.mc-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; padding-block: 3.5rem; }
.mc-footer__brand svg { height: 28px; color: #fff; margin-bottom: 1rem; }
.mc-footer__brand p { font-size: var(--mc-fs-sm); color: var(--mc-gray-400); max-width: 32ch; }
.mc-footer h4 { color: #fff; font-size: var(--mc-fs-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem; }
.mc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.mc-footer a { color: var(--mc-gray-400); font-size: var(--mc-fs-base); }
.mc-footer a:hover { color: var(--mc-lime); }
.mc-footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.mc-footer__social a {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--mc-graphite);
  display: grid; place-items: center; font-size: 1.1rem; color: var(--mc-gray-300);
}
.mc-footer__social a:hover { background: var(--mc-lime); color: var(--mc-black); border-color: var(--mc-lime); }
.mc-footer__pay { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.mc-footer__pay span { background: var(--mc-graphite); color: var(--mc-gray-300); font-size: var(--mc-fs-xs); padding: .35rem .6rem; border-radius: var(--mc-radius-sm); }
.mc-footer__bottom { border-top: 1px solid var(--mc-graphite); padding-block: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }

@media (max-width: 900px) { .mc-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mc-footer__top { grid-template-columns: 1fr; } }

/* =====================================================================
   OFFCANVAS MENÚ MOBILE
   ===================================================================== */
.mc-mobnav {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 90%);
  background: #fff; z-index: 1101; transform: translateX(-100%);
  transition: transform .35s var(--mc-ease); display: flex; flex-direction: column;
  box-shadow: var(--mc-shadow-lg);
}
.mc-mobnav.is-open { transform: translateX(0); }
.mc-mobnav__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--mc-gray-200); }
.mc-mobnav__head svg { height: 22px; }
.mc-mobnav__body { padding: .5rem 0 1.5rem; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }

/* CTA principal del drawer: la personalización de frente, antes de las secciones */
.mc-mobnav__cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: .85rem;
  margin: .7rem 1.1rem .8rem; padding: .95rem 1.05rem;
  border-radius: var(--mc-radius); background: var(--mc-black); color: #fff;
}
.mc-mobnav__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 130% at 100% 0%, rgba(213,242,0,.32), transparent 55%);
}
.mc-mobnav__cta-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: var(--mc-lime); color: var(--mc-black);
  display: grid; place-items: center; font-size: 1.25rem;
}
.mc-mobnav__cta-tx { display: grid; gap: .05rem; min-width: 0; }
.mc-mobnav__cta-tx b { font-family: var(--mc-font-display); font-size: var(--mc-fs-base); line-height: 1.15; }
.mc-mobnav__cta-tx small { font-size: var(--mc-fs-xs); color: rgba(255,255,255,.72); }
.mc-mobnav__cta > .bi-arrow-right { margin-left: auto; color: var(--mc-lime); font-size: 1.1rem; }
.mc-mobnav__cta:hover { color: #fff; }

/* "Ser minorista" en el drawer: tarjeta sobria al final del listado */
.mc-mobnav__mino {
  display: flex; align-items: center; gap: .8rem;
  margin: .9rem 1.1rem .8rem; padding: .75rem 1rem;
  border: 1px solid var(--mc-gray-200); border-radius: var(--mc-radius);
  background: var(--mc-gray-50); color: var(--mc-ink);
}
.mc-mobnav__mino > .bi-shop { font-size: 1.25rem; color: var(--mc-lime-700); }
.mc-mobnav__mino span { display: grid; min-width: 0; }
.mc-mobnav__mino b { font-family: var(--mc-font-display); font-size: var(--mc-fs-sm); line-height: 1.2; }
.mc-mobnav__mino small { font-size: var(--mc-fs-xs); color: var(--mc-gray-500); }
.mc-mobnav__mino > .bi-arrow-right { margin-left: auto; color: var(--mc-gray-400); }
.mc-mobnav__mino:hover { border-color: var(--mc-ink); }

/* Pie del drawer: los accesos que el topbar esconde en móvil */
.mc-mobnav__foot {
  display: flex; gap: .5rem; padding: .8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mc-gray-200); background: var(--mc-gray-50);
}
.mc-mobnav__foot a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem .3rem; border: 1px solid var(--mc-gray-200); border-radius: 10px;
  background: #fff; font-size: var(--mc-fs-xs); font-weight: 600; color: var(--mc-gray-600);
  white-space: nowrap;
}
.mc-mobnav__foot a:hover { border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-mobnav__foot .bi-whatsapp { color: #25d366; }

/* Enlace simple de primer nivel (sin submenú) */
.mc-mobnav__link { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.3rem; font-family: var(--mc-font-display); font-weight: 600; text-transform: uppercase; font-size: var(--mc-fs-sm); color: var(--mc-ink); border-bottom: 1px solid var(--mc-gray-100); }
.mc-mobnav__link:hover { background: var(--mc-gray-50); }

/* Acordeón: cabecera de sección */
.mc-mobacc { border-bottom: 1px solid var(--mc-gray-100); }
.mc-mobacc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mc-font-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--mc-fs-sm); color: var(--mc-ink);
}
.mc-mobacc__head:hover { background: var(--mc-gray-50); }
.mc-mobacc__chev { font-size: .8em; color: var(--mc-gray-400); transition: transform .3s var(--mc-ease); }
.mc-mobacc__head[aria-expanded="true"] .mc-mobacc__chev { transform: rotate(180deg); }

/* Panel colapsable (grid-template-rows 0fr→1fr = animación de alto sin JS) */
.mc-mobacc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--mc-ease); background: var(--mc-gray-50); overflow: hidden; }
.mc-mobacc.is-open .mc-mobacc__panel { grid-template-rows: 1fr; }
/* solo padding horizontal: el vertical impediría que el panel colapse a 0 */
.mc-mobacc__inner { overflow: hidden; min-height: 0; padding: 0 1rem; }
.mc-mobacc__inner > :first-child { margin-top: .6rem; }
.mc-mobacc__inner > :last-child { margin-bottom: .8rem; }

/* Chips compactos (marcas, subcategorías): varios por fila */
.mc-mobacc__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; }
.mc-mobacc__chip { padding: .4rem .7rem; background: #fff; border: 1px solid var(--mc-gray-200); border-radius: 999px; font-size: var(--mc-fs-sm); color: var(--mc-gray-700); line-height: 1; }
.mc-mobacc__chip:hover { border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-mobacc__group { display: block; margin: .5rem 0 .35rem; font-size: var(--mc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mc-gray-500); }

/* Mini-tiles con imagen/swatch (colecciones, colaboraciones): 2 por fila */
.mc-mobacc__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.mc-mobtile { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem; background: #fff; border: 1px solid var(--mc-gray-200); border-radius: 10px; min-width: 0; }
.mc-mobtile:hover { border-color: var(--mc-ink); }
.mc-mobtile__img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--mc-gray-100); display: grid; place-items: center; }
.mc-mobtile__img img { width: 100%; height: 100%; object-fit: contain; }
/* fallback por si el color de la colección viene vacío o malformado (CSS inválido se descarta) */
.mc-mobtile__sw { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #16161a, #2a3045); }
.mc-mobtile__name { font-size: var(--mc-fs-xs); line-height: 1.15; font-weight: 600; color: var(--mc-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* "Ver todo" al final del panel */
.mc-mobacc__all { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; padding: .55rem .3rem 0; font-weight: 700; font-size: var(--mc-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--mc-lime-700); border-top: 1px solid var(--mc-gray-200); }

/* ============================ AVISO DE COOKIES ============================
   Banner inferior, no modal: informa y deja decidir sin bloquear la compra.
   Se retira con una transición corta al elegir. */
.mc-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1800;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto; padding: 1rem 1.2rem;
  background: #fff; border: 1px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-lg);
  transition: opacity .25s ease, transform .25s ease;
}
.mc-cookies.is-out { opacity: 0; transform: translateY(12px); }
.mc-cookies__txt { flex: 1 1 380px; min-width: 0; }
.mc-cookies__txt b { display: block; margin-bottom: .15rem; }
.mc-cookies__txt p { margin: 0; font-size: var(--mc-fs-sm); color: var(--mc-gray-600); line-height: 1.45; }
.mc-cookies__txt a { text-decoration: underline; }
.mc-cookies__acts { display: flex; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .mc-cookies { left: .6rem; right: .6rem; bottom: .6rem; padding: .9rem 1rem; }
  .mc-cookies__acts { width: 100%; margin-left: 0; }
  .mc-cookies__acts .mc-btn { flex: 1 1 auto; justify-content: center; }
}