/* ── TodoHogar (variedades-config) — paleta navy/rojo/crema tomada del mockup
   de referencia. Se carga DESPUÉS de rce-public.css (ver enqueue en los
   templates) para poder pisar todo lo que haga falta sin tocar el motor. ── */
:root {
  --vc-navy: #1a1a4e;
  --vc-navy-2: #14143c;
  --vc-red: #e83c2e;
  --vc-red-dim: #c22a1e;
  --vc-cream: #f5efe3;
  --vc-sand: #ece3d0;
  --vc-text: #1a1a4e;
  --vc-muted: #6b7280;
  --vc-border: #d9cdb0;
  --vc-radius: 14px;
  --vc-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Varias secciones (banner, nav de categorías, "Compra por categoría") usan
   márgenes negativos para pegar contra los bordes de la pantalla -- sin este
   overflow-x:hidden, esos px de más hacían que la PÁGINA ENTERA se pudiera
   arrastrar horizontalmente (bug real reportado: toda la web scrolleaba
   lateral, no solo las tiras que sí deben scrollear). */
html, body.rce-page { overflow-x: hidden; max-width: 100%; }
body.rce-page { background: var(--vc-cream); color: var(--vc-text); font-family: var(--vc-font); }

.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 22px; border-radius: 10px; border: 2px solid transparent;
  font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vc-btn--primary { background: var(--vc-navy); color: #fff; }
.vc-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,26,78,.25); color: #fff; }
.vc-btn--outline { background: transparent; border-color: var(--vc-navy); color: var(--vc-navy); }
.vc-btn--outline:hover { background: var(--vc-navy); color: #fff; }
.vc-btn--full { width: 100%; }

/* ── Header propio (catálogo) ─────────────────────────────────────────── */
.vc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--vc-cream); border-bottom: 2px solid var(--vc-navy);
  position: sticky; top: 0; z-index: 30;
}
.vc-header__logo { font-family: var(--vc-font); font-weight: 800; font-size: 1.4rem; color: var(--vc-navy); text-decoration: none; letter-spacing: -.01em; }
.vc-header__acciones { display: flex; align-items: center; gap: 10px; }
.vc-header__icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--vc-navy); background: #fff; color: var(--vc-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vc-header__badge {
  position: absolute; top: -4px; right: -4px; background: var(--vc-red); color: #fff;
  font-size: .65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.vc-header__buscar { padding: 0 20px; background: var(--vc-cream); }
.vc-header__buscar input {
  width: 100%; padding: 12px 16px; border: 2px solid var(--vc-navy); border-radius: 10px;
  font-family: var(--vc-font); font-size: 16px; margin-bottom: 14px;
}
/* iOS/WebKit hace zoom automático de TODA la página al enfocar un input/select
   con font-size menor a 16px -- eso quedaba fijo hasta que el usuario
   pellizcaba para volver atrás, y se percibía como "la página se desborda
   hacia los costados" (reportado en video real). 16px en todo campo de
   formulario de estas páginas evita el disparador. */
.vc-catalogo-page input, .vc-catalogo-page select, .vc-catalogo-page textarea,
.vc-home input, .vc-home select, .vc-home textarea { font-size: 16px; }

/* ── HERO (home) ───────────────────────────────────────────────────────── */
.vc-home { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.vc-hero {
  display: flex; flex-direction: column; gap: 28px; padding: 32px 0 40px;
}
.vc-hero__badge {
  display: inline-block; background: #fbbf24; color: var(--vc-navy); font-weight: 800;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; border: 2px solid var(--vc-navy); margin-bottom: 18px;
  transform: rotate(-2deg);
}
.vc-hero__titulo { font-size: 2.4rem; line-height: 1.08; font-weight: 800; color: var(--vc-navy); margin: 0 0 16px; text-wrap: balance; }
.vc-hero__titulo-acento { color: var(--vc-red); }
.vc-hero__sub { font-size: 1.05rem; color: var(--vc-muted); max-width: 480px; margin-bottom: 22px; }
.vc-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vc-hero__tagline { font-weight: 700; color: var(--vc-navy); font-size: .82rem; letter-spacing: .02em; }
.vc-hero__img-wrap { border-radius: var(--vc-radius); overflow: hidden; border: 2px solid var(--vc-navy); }
.vc-hero__img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }

@media (min-width: 900px) {
  .vc-hero { flex-direction: row; align-items: center; padding: 56px 0 64px; }
  .vc-hero__contenido { flex: 1; }
  .vc-hero__img-wrap { flex: 1; }
  .vc-hero__titulo { font-size: 3.4rem; }
}

/* ── Secciones genéricas ───────────────────────────────────────────────── */
.vc-seccion-titulo { font-size: 1.6rem; font-weight: 800; color: var(--vc-navy); margin: 0 0 18px; }
.vc-seccion-titulo--invert { color: #fff; }
.vc-seccion-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vc-seccion-header .vc-seccion-titulo { margin-bottom: 0; }
.vc-chip { padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.vc-chip--hot { background: var(--vc-red); color: #fff; }

/* ── Compra por categoría ──────────────────────────────────────────────── */
.vc-categorias { background: var(--vc-navy); margin: 0 -20px 40px; padding: 40px 0 40px 20px; }
.vc-categorias .vc-seccion-titulo { padding-right: 20px; }
.vc-categorias__grid {
  display: flex; gap: 14px; overflow-x: auto; padding-right: 20px; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  overscroll-behavior-x: contain; touch-action: pan-x;
}
.vc-categorias__grid::-webkit-scrollbar { display: none; }
.vc-cat-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  border: 2px solid rgba(255,255,255,.25); border-radius: var(--vc-radius); padding: 12px;
  transition: border-color .15s ease, transform .15s ease;
  flex: 0 0 132px;
}
.vc-cat-card:hover { border-color: var(--vc-red); transform: translateY(-2px); }
.vc-cat-card__img-wrap {
  aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--vc-cream);
  display: flex; align-items: center; justify-content: center;
}
.vc-cat-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.vc-cat-card__emoji { font-size: 2.6rem; }
.vc-cat-card__label { color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
@media (min-width: 640px) { .vc-cat-card { flex-basis: 160px; } }

/* ── Cards de producto (home: ofertas + destacados) ───────────────────── */
.vc-ofertas, .vc-destacados { margin-bottom: 44px; }
.vc-ofertas__lista { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vc-destacados__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) {
  .vc-ofertas__lista { grid-template-columns: repeat(2, 1fr); }
  .vc-destacados__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .vc-ofertas__lista { grid-template-columns: repeat(4, 1fr); }
  .vc-destacados__grid { grid-template-columns: repeat(4, 1fr); }
}
.vc-destacados__ver-todo { text-align: center; margin-top: 24px; }

/* ── Secciones temáticas por categoría (banner + grilla) ──────────────────
   "Todo para el regreso a clases"/"Haz tu hogar más práctico" del mockup de
   referencia -- reusan .vc-card (mismo componente de Ofertas/Destacados), así
   que ya se ven completas con emoji de categoría mientras no haya fotos
   reales cargadas (ver vc_producto_card() en template-home.php). */
.vc-tematica { margin: 0 -20px 44px; padding: 36px 20px 40px; }
.vc-tematica--escolar { background: #f7e3a8; }
.vc-tematica--hogar { background: #f1dcc6; }
.vc-tematica__banner { max-width: 620px; margin-bottom: 24px; }
.vc-tematica__titulo { font-size: 1.9rem; font-weight: 800; color: var(--vc-navy); line-height: 1.12; margin: 0 0 12px; text-wrap: balance; }
.vc-tematica__sub { color: var(--vc-text); opacity: .78; margin: 0 0 20px; font-size: .92rem; }
.vc-tematica__banner .vc-btn--outline { background: rgba(255,255,255,.55); }
.vc-tematica__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .vc-tematica__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .vc-tematica__titulo { font-size: 2.4rem; }
  .vc-tematica__grid { grid-template-columns: repeat(4, 1fr); }
}

.vc-card {
  background: #fff; border: 2px solid var(--vc-navy); border-radius: var(--vc-radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* :active cubre el toque en mobile (no hay :hover real al tocar una pantalla) */
.vc-card:hover, .vc-card:active {
  border-color: var(--vc-red); transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26,26,78,.18);
}
.vc-card__img-wrap { position: relative; aspect-ratio: 1/1; background: var(--vc-sand); }
.vc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.vc-card__img:not([src=""]) ~ .vc-card__img-placeholder { display: none; }

.vc-badge {
  position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; z-index: 2;
}
.vc-badge--oferta { background: var(--vc-red); color: #fff; }
.vc-badge--nuevo { background: #fbbf24; color: var(--vc-navy); }
/* El motor NO usa el atributo [hidden] para esto -- rce-public.js agrega la
   clase .rce-card--agotado al <article> padre cuando !p.disponible (ver
   renderProducts() en rce-public.js). El badge debe estar OCULTO por
   default y solo aparecer con esa clase -- una versión anterior de este
   archivo asumía [hidden] acá, lo que forzaba "Agotado" en TODOS los
   productos sin importar el stock real (bug real encontrado en producción). */
.vc-badge--agotado { position: absolute; bottom: 10px; left: 10px; top: auto; background: #fff; color: var(--vc-navy); border: 2px solid var(--vc-navy); display: none; }
.rce-card--agotado .vc-badge--agotado { display: inline-block; }

.vc-fav-btn {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vc-navy); color: var(--vc-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.vc-fav-btn.is-active { background: var(--vc-red); border-color: var(--vc-red); color: #fff; }
.vc-fav-btn svg path { fill: currentColor; fill-opacity: 0; }
.vc-fav-btn.is-active svg path { fill-opacity: 1; }

/* El "+" de agregar-al-carrito del catálogo reusa .vc-fav-btn como base
   circular pero con ícono/acento distinto -- ver template-catalogo.php. */
.rce-card__add-btn.vc-fav-btn { right: 10px; top: auto; bottom: 10px; background: var(--vc-navy); color: #fff; font-size: 1.2rem; font-weight: 800; }
.rce-card__add-btn.vc-fav-btn:hover { background: var(--vc-red); border-color: var(--vc-red); }

.vc-card__body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vc-card__cat { font-size: .68rem; font-weight: 700; color: var(--vc-muted); letter-spacing: .04em; }
.vc-card__title { font-size: .92rem; font-weight: 700; color: var(--vc-navy); margin: 0; line-height: 1.3; }
.vc-card__desc { font-size: .8rem; color: var(--vc-muted); margin: 0; }
.vc-card__precios { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.vc-card__precio { font-size: 1.15rem; font-weight: 800; color: var(--vc-red); }
.vc-card__precio-anterior { font-size: .82rem; color: var(--vc-muted); text-decoration: line-through; }
.vc-card__stock { font-size: .74rem; color: var(--vc-muted); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.vc-footer {
  background: var(--vc-navy-2); color: rgba(255,255,255,.75); margin: 0 -20px;
  padding: 44px 20px 28px; display: grid; gap: 28px;
}
.vc-footer__logo { color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; }
.vc-footer__col h4 { color: #fbbf24; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.vc-footer__col a { display: block; color: rgba(255,255,255,.75); text-decoration: none; margin-bottom: 8px; font-size: .88rem; }
.vc-footer__col a:hover { color: #fff; }
@media (min-width: 768px) { .vc-footer { grid-template-columns: 2fr 1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   CATÁLOGO
   ═══════════════════════════════════════════════════════════════════════ */
.vc-catalogo-page { max-width: 1400px; margin: 0 auto; }
.vc-catalogo-hero { padding: 24px 20px 8px; }
.vc-catalogo-hero h1 { font-size: 1.9rem; font-weight: 800; color: var(--vc-navy); margin: 0 0 4px; }
.vc-catalogo-hero p { color: var(--vc-muted); margin: 0; }

.vc-catalogo-body { padding: 16px 20px 60px; }

/* Píldoras de categoría -- mismo #rce-cat-nav que el genérico, reestilado de
   columna vertical fija a fila horizontal con scroll. */
.vc-cat-pills.rce-cat-nav {
  position: sticky; top: 76px; z-index: 25; width: auto; height: auto; flex-direction: row; overflow-x: auto;
  display: flex; gap: 8px; padding: 10px 0; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Sin esto, WebKit (iOS) le pasaba el gesto de swipe horizontal a TODA la
     página en vez de quedarse en esta fila -- reportado en video real:
     arrastrar sobre las píldoras desplazaba el sitio entero para el costado. */
  overscroll-behavior-x: contain; touch-action: pan-x;
  /* El genérico (.rce-cat-nav) trae fondo oscuro + sombra pensados para su
     columna lateral fija -- acá no aplican (bloques sueltos sobre el fondo
     crema de la página), sin este reset se veía una franja oscura detrás.
     El fondo crema propio (no "none") es necesario porque al quedar sticky
     tiene que tapar el contenido que sigue scrolleando debajo. */
  background: var(--vc-cream); box-shadow: none; border: none; border-bottom: 2px solid var(--vc-navy);
}
.vc-cat-pills.rce-cat-nav::-webkit-scrollbar { display: none; }
.vc-cat-pills .rce-cat-tab__emoji { display: none; }
.vc-cat-pills .rce-cat-tab {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: 8px 12px; border-radius: 8px; border: 2px solid var(--vc-navy);
  background: #fff; color: var(--vc-navy); font-weight: 700; font-size: .78rem;
  cursor: pointer; white-space: nowrap; width: auto; height: auto;
}
.vc-cat-pills .rce-cat-tab--active { background: var(--vc-navy); color: #fff; }
.vc-cat-pills .rce-cat-tab__label { display: inline; font-size: inherit; }

.vc-catalogo-main { display: flex; flex-direction: column-reverse; gap: 24px; }

/* El genérico reserva var(--rce-cat-nav-w, 84px) de margen izquierdo para SU
   columna fija de íconos -- esa variable solo se define en .rce-catalogo-page
   (no en .vc-catalogo-page), así que acá siempre caía en el fallback de
   84px y corría toda la grilla + la barra de herramientas hacia la derecha,
   dejando una franja vacía a la izquierda. */
.rce-products.vc-products { margin-left: 0; max-width: none; }

.vc-filtros { background: #fff; border: 2px solid var(--vc-border); border-radius: var(--vc-radius); padding: 18px; align-self: start; }
.vc-filtros__header h3 { margin: 0 0 14px; font-size: 1rem; color: var(--vc-navy); }
.vc-filtros__label { display: block; font-size: .76rem; font-weight: 800; color: var(--vc-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.vc-filtros__categorias { display: flex; flex-direction: column; gap: 4px; }
.vc-filtros-cat-item {
  display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none;
  padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: .86rem; color: var(--vc-text); font-family: inherit;
}
.vc-filtros-cat-item:hover { background: var(--vc-cream); }
.vc-filtros-cat-item.is-active { background: var(--vc-navy); color: #fff; font-weight: 700; }

.vc-product-grid.rce-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

@media (min-width: 900px) {
  .vc-catalogo-main { flex-direction: row; align-items: start; }
  .vc-filtros { width: 240px; flex: 0 0 240px; position: sticky; top: 90px; }
  .vc-products { flex: 1; min-width: 0; }
  .vc-product-grid.rce-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .vc-product-grid.rce-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Barra de contador + filtrar + orden (arriba de la grilla) ────────── */
.vc-catalogo-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.vc-catalogo-toolbar__count {
  font-size: .74rem; font-weight: 800; color: var(--vc-muted); text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto;
}
.vc-catalogo-toolbar__filtrar {
  display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 8px;
  border: 2px solid var(--vc-navy); background: #fff; color: var(--vc-navy); font-weight: 800;
  font-size: .74rem; font-family: var(--vc-font); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.vc-catalogo-toolbar__orden {
  flex: 0 0 auto; padding: 7px 8px; border-radius: 8px; border: 2px solid var(--vc-navy);
  background: #fff; color: var(--vc-navy); font-weight: 700; font-size: .74rem; font-family: var(--vc-font);
  cursor: pointer; max-width: 132px;
}
@media (min-width: 900px) {
  /* En desktop el panel de filtros ya es la columna fija de siempre -- el
     botón "Filtrar" (pensado para abrir el drawer mobile) sobra ahí. */
  .vc-catalogo-toolbar__filtrar { display: none; }
}

/* ── Banner promocional animado (home + catálogo) ─────────────────────── */
.vc-banner-promo {
  background: var(--vc-red); border-top: 2px solid var(--vc-navy); border-bottom: 2px solid var(--vc-navy);
  overflow: hidden; white-space: nowrap;
}
.vc-banner-promo__track { display: inline-flex; width: max-content; animation: vc-banner-scroll 22s linear infinite; }
.vc-banner-promo__item {
  display: inline-block; padding: 10px 0; color: #fff; font-weight: 800; font-size: .8rem;
  letter-spacing: .04em; padding-right: 2em;
}
@keyframes vc-banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vc-banner-promo__track { animation: none; }
  .vc-banner-promo { overflow-x: auto; }
}

/* ── Panel de filtros como drawer inferior en mobile ──────────────────── */
.vc-filtros__backdrop { display: none; }
@media (max-width: 899.98px) {
  .vc-filtros {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    border-radius: 20px 20px 0 0; border-bottom: none;
    max-height: 70vh; overflow-y: auto;
    transform: translateY(110%); transition: transform .25s ease;
    box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  }
  .vc-filtros.is-abierto { transform: translateY(0); }
  .vc-filtros__backdrop {
    display: block; position: fixed; inset: 0; background: rgba(20,20,60,.4); z-index: 89;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .vc-filtros__backdrop.is-abierto { opacity: 1; pointer-events: auto; }
  .vc-filtros__cerrar { display: inline-flex; }
}
.vc-filtros__cerrar {
  display: none; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--vc-navy); background: #fff; color: var(--vc-navy);
  cursor: pointer; margin-left: auto;
}
.vc-filtros__header { display: flex; align-items: center; }

/* ── Footer: tercera columna "Información" ────────────────────────────── */
.vc-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.vc-footer__social-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); color: #fff;
}
@media (min-width: 768px) { .vc-footer { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.vc-footer__copy { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: .76rem; color: rgba(255,255,255,.55); }

/* ── Nav inferior fijo (mobile app-like) ───────────────────────────────── */
.vc-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; background: var(--vc-cream); border-top: 2px solid var(--vc-navy);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.vc-bottom-nav__item, .vc-bottom-nav__item--btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; text-decoration: none; color: var(--vc-muted); font-size: .64rem; font-weight: 700;
  background: none; border: none; font-family: var(--vc-font); cursor: pointer;
}
.vc-bottom-nav__item.is-active, .vc-bottom-nav__item:hover { color: var(--vc-navy); }
.vc-bottom-nav__cart-wrap { position: relative; display: inline-flex; }
.vc-bottom-nav__badge {
  position: absolute; top: -6px; right: -8px; background: var(--vc-red); color: #fff;
  font-size: .6rem; font-weight: 800; min-width: 15px; height: 15px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* El header propio ya trae su ícono de carrito y el nav inferior su pestaña
   "Carrito" (ambos abren el mismo drawer) -- el FAB flotante de vidrio y el
   menú hamburguesa flotante del motor genérico quedan redundantes acá.
   :not(.vc-header__icon-btn) deja intacto el ícono del header (mismo id
   duplicado a propósito, ver cart-widget.php) y solo tapa el FAB suelto. */
#rce-menu-toggle,
.rce-cart-fab:not(.vc-header__icon-btn) { display: none !important; }

body.rce-page { padding-bottom: 66px; }
@media (min-width: 900px) {
  .vc-bottom-nav { display: none; }
  body.rce-page { padding-bottom: 0; }
}