/** Shopify CDN: Minification failed

Line 554:0 Expected "}" to go with "{"

**/
/* ======================================================
   🍌 BANAANPERZIK — MENÚ MÓVIL
   Estructura limpia, misma apariencia y comportamiento.
   ====================================================== */

/* =======================================
   🟡 1. MENÚ MÓVIL (solo en pantallas pequeñas)
   ======================================= */
@media (max-width: 1024px) {

  /* === CONTENEDOR PRINCIPAL === */
  .bp-menu-mobile {
    background: #fff;
    padding: 20px;                   /* Espaciado interior base */
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  }

  /* === PANTALLAS DESLIZANTES === */
  .bp-menu-level {
    position: absolute;
    inset: 0 0 0 100%;
    background: #fff;
    overflow-y: auto;
    transition: left 0.32s cubic-bezier(.22,.61,.36,1);
    padding-bottom: 80px;
  }
  .bp-menu-level--active { left: 0; }

  /* === LISTA PRINCIPAL (CATEGORÍAS) === */
  .bp-menu-list {
    list-style: none;
    margin: 32px 0 0;                /* margen superior entre menú y borde */
    padding: 0;
  }
  .bp-menu-list li { margin-bottom: 10px; }

  .bp-menu-list a,
  .bp-menu-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    background: transparent;
    border: none;
    text-decoration: none;
    transition: background .2s;
  }

  /* Texto de categoría un poco más hacia dentro */
  .bp-menu-link {
    padding-left: 28px;
    padding-right: 20px;
  }

  .bp-menu-list a:hover,
  .bp-menu-link:hover { background: #f7f7f7; }

  /* Estado activo (ej: color amarillo, gris, etc.) */
  .bp-active {
    background: #FFD900;
  }

  /* === SUBMENÚS === */
  .bp-submenu-header {
    position: sticky; top: 0; background: #fff;
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    font-weight: 800; font-size: 18px;
    padding: 10px 0 16px; margin-bottom: 18px;
    border-bottom: 1px solid #eee;
    z-index: 1;
  }
  .bp-submenu-header button {
    background: none; border: none; color: #000; cursor: pointer; padding: 6px;
  }

  .bp-submenu-list { list-style: none; margin: 0; padding: 0; }
  .bp-submenu-list li { margin-bottom: 12px; }
  .bp-submenu-list a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    background: #f4f5fa; color: #000; text-decoration: none; font-weight: 600;
    transition: background .2s, transform .04s;
  }
  .bp-submenu-list a:active { transform: scale(.99); }
  .bp-submenu-list a:hover { background: #eef0f3; }

  .bp-submenu-list img {
    width: 28px; height: 28px; object-fit: contain;
    border-radius: 6px; background: #fff; flex: 0 0 28px;
  }
  .bp-icon-fallback {
    width: 28px; height: 28px; border-radius: 6px; background: #fff; display: inline-block;
  }

  /* === BLOQUE INFERIOR (QUIZ + BOTONES) === */
  .bp-menu-bottom {
    margin-top: 115px;             /* separación desde categorías */
    padding: 0 20px 40px;          /* mismo lateral que arriba */
    border-top: none;
  }

  /* --- QUIZ --- */
  .bp-quiz {
    display: block;
    background: #f4f5f9;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    font-size: 15px;
    color: #222;
    text-decoration: none;
    margin-bottom: 16px;
    transition: all 0.25s ease;
  }
  .bp-quiz strong {
    display: block;
    font-weight: 800;
    margin-bottom: 4px;
    color: #000;
  }

  /* --- BOTONES INFERIORES --- */
  .bp-menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "login help"
      "eroteca eroteca";
    gap: 16px; /* espacio uniforme */
  }

  .bp-btn {
    background: #f8f7f5;
    border: 1px solid ##f8f7f5;
    border-radius: 14px;
    text-align: center;
    padding: 16px 10px;
    font-size: 15px;
    color: #000;
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.25s ease;
  }

  .bp-btn:hover {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  }

  /* Distribución */
  .bp-btn:nth-child(1) { grid-area: login; }
  .bp-btn:nth-child(2) { grid-area: help; }
  .bp-btn:nth-child(3) { grid-area: eroteca; margin-top: 0; }

  /* === FUENTE GENERAL === */
  .bp-menu-mobile {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.2px;
  }
}

/* =======================================
   🖥️ 2. DESKTOP: Oculta menú móvil
   ======================================= */
@media (min-width: 1025px) {
  .bp-menu-mobile { display: none; }
}

/* =======================================
   🧩 3. CORRECCIONES DEL DRAWER DE SHOPIFY
   ======================================= */
.hdt-dialog-drawer {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

dialog#menu_mobile .hdt-dialog-drawer__inner {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.bp-menu-mobile {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
}

/* =======================================
   🎨 4. COLORES PERSONALIZADOS POR CATEGORÍA
   ======================================= */

/* Bestsellers (Juguetes) */
.bp-cat-Black-friday {
  background:rgb(120, 118, 255) !important; /* Amarillo pastel */
  color: #000;
}

   /* Speeltjes (Juguetes) */
.bp-cat-speeltjes {
  background:rgb(255, 255, 255) !important; /* Amarillo pastel */
  color: #000;
}

/* Lingerie */
.bp-cat-lingerie.bp-active {
  background: #FFD6E8 !important; /* Rosa claro */
  color: #000;
}

/* Glijmiddelen en meer */
.bp-cat-glijmiddelen-en-meer.bp-active {
  background: #C8F7DC !important; /* Verde menta */
  color: #000;
}

/* Intieme Gezondheid */
.bp-cat-intieme-gezondheid.bp-active {
  background: #B3E5FC !important; /* Azul suave */
  color: #000;
}

/* BDSM & Fetish */
.bp-cat-bdsm-fetish.bp-active {
  background: #E1D5FF !important; /* Lila suave */
  color: #000;
}
/* === FIX VISUAL - Alineación y aire lateral estilo PlátanoMelón === */
@media (max-width: 1024px) {

  /* Variable global para mantener coherencia */
  :root {
    --bp-side: 24px; /* ajusta entre 20–28px según prefieras */
  }

  /* Aplica el mismo margen lateral a todo el bloque */
  .bp-menu-mobile {
    padding-left: var(--bp-side);
    padding-right: var(--bp-side);
  }

  /* Cada enlace de categoría usa el mismo padding horizontal */
  .bp-menu-list a,
  .bp-menu-link {
    padding-left: var(--bp-side);
    padding-right: var(--bp-side);
  }

  /* Fondo activo (amarillo o personalizado) */
  .bp-menu-link.bp-active {
    background:rgb(0, 255, 85);
    border-radius: 12px;
    /* 🔧 Aire entre el bloque amarillo y los bordes */
    margin-left: 4px;
    margin-right: 4px;
    /* Texto un poco más hacia dentro */
    padding-left: calc(var(--bp-side) + 4px);
  }

  /* Bloque inferior (quiz + botones) alineado con categorías */
  .bp-menu-bottom {
    padding-left: var(--bp-side);
    padding-right: var(--bp-side);
  }
}
/* === FIX PRECISO DE ALINEACIÓN (bloque amarillo y texto) === */
@media (max-width: 1024px) {

  /* Margen lateral global del menú */
  :root {
    --bp-side: 24px;        /* 🟥 espacio desde el borde del móvil hasta donde empieza el bloque */
    --bp-text-inset: 44px;  /* 🟦 espacio desde el borde del móvil hasta donde empieza el texto */
  }

  /* Asegura que todo el contenido sigue esa guía */
  dialog#menu_mobile .bp-menu-mobile,
  dialog#menu_mobile .bp-menu-bottom {
    padding-left: var(--bp-side) !important;
    padding-right: var(--bp-side) !important;
  }

  /* Cada categoría */
  dialog#menu_mobile .bp-menu-link,
  dialog#menu_mobile button.bp-menu-link {
    display: block;
    width: 100%;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: var(--bp-text-inset) !important; /* texto entra más */
    color: #000;
    text-decoration: none;
    transition: background .25s ease;
  }
/* === FIX FINAL — FONDO AMARILLO ALINEADO CON BLOQUES INFERIORES === */
@media (max-width: 1024px) {

  dialog#menu_mobile .bp-menu-list .bp-menu-link,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link {
    border-radius: 12px;
    margin-left: 24px;  /* 👈 mismo margen que los bloques de abajo */
    margin-right: 24px; /* 👈 igual en el lado derecho */
    padding-left: 20px; /* 👈 texto entra un poco */
    padding-right: 20px;
    display: block;
  }

  dialog#menu_mobile .bp-menu-list .bp-menu-link.bp-active,
  dialog#menu_mobile .bp-menu-list .bp-menu-link:hover,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link.bp-active,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link:hover {
    background:rgb(141, 255, 118) !important;  /* Amarillo pastel */
    border-radius: 12px !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    color: #000 !important;
  }
}
/* === ALINEACIÓN EXACTA DE CATEGORÍAS VS. BLOQUES INFERIORES === */
@media (max-width: 1024px) {

  /* 1) Un único “gutter” (margen lateral) común para TODO */
  :root { 
    --bp-gutter: 24px;      /* borde rojo: mismo que los bloques inferiores */
    --bp-text-inset: 12px;  /* borde verde: cuanto entra el texto desde el amarillo */
  }

  /* 2) La lista lleva el gutter: así el fondo amarillo se recorta IGUAL que abajo */
  dialog#menu_mobile .bp-menu-list {
    padding-left:  var(--bp-gutter) !important;
    padding-right: var(--bp-gutter) !important;
    margin: 0 !important;
  }

  /* 3) Los enlaces NO llevan márgenes laterales (para no “romper” el alineado) */
  dialog#menu_mobile .bp-menu-list .bp-menu-link,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link {
    display: block;
    margin: 0 !important;
    border-radius: 12px;
    /* el texto empieza en la línea verde */
    padding-left:  var(--bp-text-inset) !important;
    padding-right: var(--bp-text-inset) !important;
  }

  /* 4) Fondo amarillo (activo y hover) con el MISMO ancho que los bloques de abajo */
  dialog#menu_mobile .bp-menu-list .bp-menu-link.bp-active,
  dialog#menu_mobile .bp-menu-list .bp-menu-link:hover,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link.bp-active,
  dialog#menu_mobile .bp-menu-list button.bp-menu-link:hover {
    background: transparent !important; /* tu amarillo */
    border-radius: 12px !important;
    margin: 0 !important; /* sin márgenes = alinea con el gutter de la lista */
    padding-left:  var(--bp-text-inset) !important; /* texto en línea verde */
    padding-right: var(--bp-text-inset) !important;
    color: #000 !important;
  }

  /* 5) El bloque inferior usa el mismo gutter (para que coincidan los bordes rojos) */
  dialog#menu_mobile .bp-menu-bottom {
    padding-left:  var(--bp-gutter) !important;
    padding-right: var(--bp-gutter) !important;
  }
}
/* === SOLO AÑADE ESPACIO BLANCO ARRIBA (sin tocar nada más) === */
@media (max-width: 1024px) {
  dialog#menu_mobile .bp-menu-list {
    margin-top: 32px !important; /* 🔧 ajusta 28–40px según prefieras */
  }
}
/* === BOTÓN DE CIERRE (X) EN EL MENÚ MÓVIL === */
@media (max-width: 1024px) {
  .bp-menu-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 28px;
    color: #000;
    cursor: pointer;
    z-index: 50;
    line-height: 1;
  }

  .bp-menu-close:hover {
    opacity: 0.6;
  }
}
@media (max-width: 1024px) {
  .bp-submenu-list {
    padding: 0 24px;
  }

  .bp-submenu-list li {
    margin-bottom: 12px;
  }

  .bp-submenu-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f4f5fa;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .05s ease;
  }

  .bp-submenu-list a:hover {
    background: #eef0f3;
  }

  .bp-submenu-list img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
  }
}
/* ==========================================================
   🎨 SUBMENÚS NIVEL 2 — Estilo PlátanoMelón
   ========================================================== */
@media (max-width: 1024px) {

  /* 🔹 Contenedor general del nivel 2 */
  .bp-menu-level[data-level="2"] {
    background: #fff;
    padding: 0 24px 40px;
    box-sizing: border-box;
  }

  /* 🔹 Cabecera (título + iconos) */
  .bp-submenu-header {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-weight: 800;
    font-size: 18px;
    border-bottom: none; /* quitamos línea gris */
    z-index: 10;
  }

  .bp-submenu-header span {
    font-size: 17px;
    font-weight: 700;
    color: #000;
  }

  /* 🔹 Enlace “Ver todo” */
  .bp-view-all {
    display: block;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* 🔹 Lista de subcolecciones */
  .bp-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bp-submenu-list li {
    margin-bottom: 12px;
  }

  .bp-submenu-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f4f5fa;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease;
  }

  .bp-submenu-list a:hover {
    background: #eef0f3;
  }

  /* 🔹 Imagen */
  .bp-submenu-list img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
  }
}
@media (max-width: 1024px) {
  /* Color especial solo para Bestsellers */
  dialog#menu_mobile .bp-menu-list .bp-menu-link[href*="/collections/black-friday"] {
    background:#ffd84d !important; /* 💜 lavanda suave (cámbialo al color que quieras) */
    color: #000 !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 700;
  }

  /* Efecto hover más suave */
  dialog#menu_mobile .bp-menu-list .bp-menu-link[href*="/collections/bestsellers"]:hover {
    background: #9da6ff !important; /* un poco más oscuro */
  }
}