/* Tienda opción B (2026-10-14, propuestas/tienda-celular.html): categorías en círculos, la categoría completa en
   secciones por subcategoría con pestañas pegadas arriba, y buscador a pantalla completa. Primero fue solo para el
   celular; el mismo día el usuario pidió que el escritorio quede igual. Al final van los ajustes del celular. */
.store-m-bubbles,.store-m-tabs,.store-m-search,.store-m-cancel,.store-m-section{display:none}
/* Las secciones y el orden de la búsqueda usan "order": las tarjetas tienen "transition: all" y sin esto el orden se
   animaba (y no se aplicaba con la pestaña en segundo plano). */
[data-store-products]>[data-store-product],[data-store-products]>[data-store-package],[data-store-products]>[data-store-style]{transition-property:transform,box-shadow,border-color,background-color,color,opacity!important}

/* Encabezado en una sola fila: buscador + total (solo con carrito) + carrito + cerrar; mientras se busca, Cancelar.
   Las listas desplegables siguen en la página (son las que filtran), pero ocultas. */
.store-modal-panel.has-mnav .store-modal-header{display:flex!important;flex-direction:row;align-items:center;gap:12px!important;padding:12px 20px!important;border-bottom:0}
.store-modal-panel.has-mnav .store-modal-header-catalog{flex:1;min-width:0;width:auto!important}
.store-modal-panel.has-mnav .store-modal-results-head{display:none!important}
.store-modal-panel.has-mnav .store-modal-tools{display:flex!important;align-items:center;gap:12px!important;width:100%!important;padding:0!important;border:0;background:transparent}
.store-modal-panel.has-mnav .store-modal-tools>label:not(.store-keyword-search){display:none!important}
.store-modal-panel.has-mnav .store-keyword-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 14px;border:0;border-radius:14px;background:#F3F0F9;color:#8F89A5}
.store-modal-panel.has-mnav .store-keyword-search>i{position:static!important;flex:none;transform:none!important;color:#8F89A5}
.store-modal-panel.has-mnav .store-keyword-search input{flex:1;min-width:0;height:100%;min-height:0!important;padding:0!important;border:0;background:transparent;box-shadow:none;outline:0;font-size:.95rem!important;color:#14112A}
.store-modal-panel.has-mnav .store-keyword-search input::placeholder{color:#8F89A5}
.store-modal-panel.has-mnav .store-modal-header-side{order:2;flex:0 0 auto;width:auto!important}
.store-modal-panel.has-mnav .store-modal-total{display:none!important}
/* Con algo en el carrito, el total vuelve junto al botón del carrito. */
.store-modal-panel.has-mnav .store-modal-header-side:has(.has-cart-energy) .store-modal-total{display:flex!important;flex-direction:row!important;align-items:baseline;gap:0!important;min-width:0!important;margin:0!important}
.store-modal-panel.has-mnav .store-modal-header-side:has(.has-cart-energy) .store-modal-total span{display:none}
.store-modal-panel.has-mnav .store-modal-header-side:has(.has-cart-energy) .store-modal-total strong{font-size:1rem!important}
.store-modal-panel.has-mnav.is-msearch .store-modal-header-side{display:none!important}
.store-modal-panel.has-mnav.is-msearch .store-m-cancel{display:block;flex:none;padding:0;border:0;background:transparent;color:var(--primary);font-size:.9rem;font-weight:800;cursor:pointer}

/* Círculos de categoría: se van al bajar. */
.store-modal-panel.has-mnav .store-m-bubbles{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none}
.store-m-bubbles::-webkit-scrollbar,.store-m-tabs::-webkit-scrollbar{display:none}
.store-m-bubble,.store-m-row,.store-m-popular button,.store-m-tabs button,.store-m-cancel{font-family:inherit}
.store-m-bubble{flex:none;width:86px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#4A465C;font-size:.74rem;font-weight:800;line-height:1.15;text-align:center;cursor:pointer}
.store-m-bubble i{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--bubble,#EEE);color:#14112A;font-size:1.55rem;transition:transform .15s,box-shadow .15s}
.store-m-bubble:hover i{transform:translateY(-2px)}
.store-m-bubble.is-occ i{background:linear-gradient(135deg,#7C3CFF,#FF3FA4);color:#fff}
.store-m-bubble span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.store-m-bubble.is-active{color:#14112A}
.store-m-bubble.is-active i{box-shadow:0 0 0 3px #fff,0 0 0 5px #14112A;transform:scale(1.04)}

/* Pestañas de subcategoría: quedan pegadas arriba y se marcan solas al bajar. */
.store-modal-panel.has-mnav .store-m-tabs:not([hidden]){position:sticky;top:var(--store-mhead,0px);z-index:8;display:flex;gap:22px;overflow-x:auto;margin:0 0 6px;padding:0 4px;border-bottom:1px solid #ECE8F5;background:#fff;box-shadow:0 -10px 0 #fff,0 6px 12px rgba(20,17,42,.04);scrollbar-width:none}
.store-m-tabs button{flex:none;padding:12px 0 10px;border:0;border-bottom:3px solid transparent;background:transparent;color:#8A84A0;font-size:.86rem;font-weight:800;white-space:nowrap;cursor:pointer}
.store-m-tabs button:hover{color:#14112A}
.store-m-tabs button.is-active{border-bottom-color:var(--primary);color:#14112A}
.store-modal-panel.has-mnav .store-m-section{display:block;grid-column:1/-1;margin:14px 0 -2px;color:#14112A;font-size:1.15rem;font-weight:900;line-height:1.2}
.store-m-section small{margin-left:6px;color:var(--muted);font-size:.78rem;font-weight:700}
/* Paquetes (Ocasiones, Infantiles) y experiencias (Drops, Experiencias): nombre más grande y sin la subcategoría encima,
   que ya dice el título de la sección (pedido del usuario 2026-10-14). En la búsqueda sí se muestra: ahí no hay título. */
.store-modal-panel.has-mnav:not(.is-msearch) .store-package-copy>small{display:none}
.store-modal-panel.has-mnav .store-package-copy h3,
.store-modal-panel.has-mnav .experience-card h3{font-size:1.08rem!important;line-height:1.22}

/* Buscador a pantalla completa. */
.store-modal-panel.has-mnav.is-msearch .store-m-bubbles,
.store-modal-panel.has-mnav.is-msearch .store-m-tabs{display:none!important}
.store-modal-panel.has-mnav.is-msearch-empty .store-catalog-scroll>:not(.store-m-search){display:none!important}
.store-modal-panel.has-mnav.is-msearch-empty .store-modal-footer,
.store-modal-panel.has-mnav.is-msearch-empty~.whatsapp-float{display:none!important}
.store-modal-panel.has-mnav .store-m-search:not([hidden]){display:block;max-width:760px;margin:0 0 6px}
.store-m-search h4{margin:0;padding:14px 14px 8px;color:var(--muted);font-size:.76rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.store-m-popular{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px}
.store-m-popular button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid #ECE8F5;border-radius:999px;background:#fff;color:#14112A;font-size:.82rem;font-weight:700;cursor:pointer}
.store-m-popular button:hover{border-color:var(--primary);color:var(--primary)}
.store-m-popular button i{color:#A39DB8}
.store-m-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 14px;border:0;border-bottom:1px solid #F4F1FA;background:#fff;text-align:left;cursor:pointer}
.store-m-row:hover{background:#FAF8FF}
.store-m-row>i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--bubble,#EEE);color:#14112A;font-size:1rem}
.store-m-row.is-occ>i{background:linear-gradient(135deg,#7C3CFF,#FF3FA4);color:#fff}
.store-m-row span{flex:1;min-width:0;color:#14112A;font-size:.88rem;font-weight:800}
.store-m-row span small{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.store-m-row em{color:#C1BAD6;font-size:.8rem}
.store-m-count{margin:0;padding:10px 14px 2px;color:var(--muted);font-size:.78rem;font-weight:600}
.store-m-count b{color:#14112A}

/* Círculos y buscador en miniatura al subir (2026-10-26, pedido del usuario): la fila chica cuelga bajo el encabezado
   (la arma storeMiniShow); al tocarla vuelve al tamaño normal (.is-mmini-open). Arriba de todo, los de siempre. */
.store-m-mini{display:none}
.store-modal-panel.has-mnav.is-mmini .store-modal-header{position:sticky;top:0;z-index:9;background:#fff}
.store-modal-panel.has-mnav.is-mmini .store-m-mini{position:absolute;top:100%;left:0;right:0;display:flex;gap:8px;overflow-x:auto;padding:6px 20px 8px;border-bottom:1px solid #ECE8F5;background:#fff;box-shadow:0 8px 14px rgba(20,17,42,.07);scrollbar-width:none;animation:storeMiniIn .18s ease-out}
.store-m-mini::-webkit-scrollbar{display:none}
@keyframes storeMiniIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.store-modal-panel.is-mmini:not(.is-mmini-open) .store-m-mini .store-m-bubble{width:auto;gap:0}
.store-modal-panel.is-mmini:not(.is-mmini-open) .store-m-mini .store-m-bubble span{display:none}
.store-modal-panel.is-mmini:not(.is-mmini-open) .store-m-mini .store-m-bubble i{width:34px;height:34px;font-size:.95rem}
.store-modal-panel.is-mmini:not(.is-mmini-open) .store-m-mini .store-m-bubble.is-active i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #14112A;transform:none}
.store-modal-panel.is-mmini-open .store-m-mini{padding-bottom:12px}
.store-modal-panel.has-mnav.is-mmini .store-m-tabs:not([hidden]){top:var(--store-mtop,var(--store-mhead,0px))}

/* Ajustes del celular: todo más compacto y a lo ancho de la pantalla. */
@media(max-width:600px){
  .store-modal-panel.has-mnav.is-mmini .store-m-mini{gap:6px;padding:5px 12px 7px}
  .store-modal-panel.has-mnav.is-mmini-open .store-m-mini{gap:4px;padding-bottom:12px}
  .store-modal-panel.has-mnav.is-mmini:not(.is-mmini-open) .store-modal-header{padding:5px 12px!important}
  .store-modal-panel.has-mnav.is-mmini:not(.is-mmini-open) .store-keyword-search{height:32px;border-radius:11px}
  .store-modal-panel.has-mnav.is-mmini:not(.is-mmini-open) .store-keyword-search input{font-size:.84rem!important}
  .store-modal-panel.has-mnav.is-mmini:not(.is-mmini-open) .store-header-cart-button,
  .store-modal-panel.has-mnav.is-mmini:not(.is-mmini-open) .store-modal-close{width:32px;min-width:32px;height:32px;min-height:32px}
  .store-modal-panel.has-mnav .store-modal-header{gap:8px!important;padding:8px 12px!important}
  .store-modal-panel.has-mnav .store-modal-tools{gap:10px!important}
  .store-modal-panel.has-mnav .store-keyword-search{height:42px;padding:0 12px}
  .store-modal-panel.has-mnav .store-keyword-search input{font-size:.92rem!important}
  .store-modal-panel.has-mnav .store-modal-header-side:has(.has-cart-energy) .store-modal-total strong{font-size:.9rem!important}
  .store-modal-panel.has-mnav.is-msearch .store-m-cancel{font-size:.86rem}
  .store-modal-panel.has-mnav .store-m-bubbles{gap:4px;margin:0 -12px;padding:4px 12px 12px}
  .store-m-bubble{width:70px;gap:5px;font-size:.66rem;line-height:1.1}
  .store-m-bubble i{width:54px;height:54px;font-size:1.4rem}
  .store-modal-panel.has-mnav .store-m-tabs:not([hidden]){gap:18px;margin:0 -12px 4px;padding:0 12px}
  .store-m-tabs button{padding:11px 0 9px;font-size:.8rem}
  .store-modal-panel.has-mnav .store-m-section{margin:12px 0 -2px;font-size:1rem}
  .store-m-section small{font-size:.72rem}
  .store-modal-panel.has-mnav .store-package-copy h3,
  .store-modal-panel.has-mnav .experience-card h3{font-size:.98rem!important}
  .store-modal-panel.has-mnav .store-m-search:not([hidden]){max-width:none;margin:0 -12px 4px}
}

/* Distintivo de grupo (2026-10-14, pedido del usuario): los paquetes van seguidos y sobre cada grupo hay una franja de su color
   que mide justo el ancho de sus tarjetas en esa fila (la ubica storeMobilePack). */
.store-modal-panel.has-mnav .store-m-section.is-band{align-self:end;min-width:0;margin:14px 0 -4px;padding:8px 14px 10px;overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--sec,#9B6BFF) 16%,#fff);box-shadow:inset 0 -4px 0 var(--sec,#9B6BFF);text-overflow:ellipsis;white-space:nowrap}
.store-modal-panel.has-mnav .store-m-section.is-band small{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 7px;border-radius:999px;background:var(--sec,#9B6BFF);color:#fff;font-size:.74rem;font-weight:900;vertical-align:2px}
@media(max-width:600px){
  .store-modal-panel.has-mnav .store-m-section.is-band{margin:10px 0 -2px;padding:7px 10px 9px;font-size:.95rem}
  .store-modal-panel.has-mnav .store-m-section.is-band small{height:20px;min-width:20px;font-size:.68rem}
}

/* 2026-10-20: Experiencias / Drops sin oferta en la comuna del evento. */
.store-experience-empty{grid-column:1/-1;display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border:2px dashed #C9B8FF;border-radius:20px;background:#FAF7FF}
.store-experience-empty[hidden]{display:none}
.store-experience-empty > i{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#A6E22E;color:#1D1033;font-size:1.5rem}
.store-experience-empty .kicker{display:block;margin-bottom:2px}
.store-experience-empty h3{margin:0 0 6px;font-size:1.15rem}
.store-experience-empty p{margin:0 0 12px;color:var(--muted)}
@media (max-width:640px){.store-experience-empty{flex-direction:column;padding:18px}}
/* 2026-10-20: retiro o envío se abre encima de la ficha del producto (antes quedaba detrás y parecía que el + no hacía nada). */
.store-delivery-modal{z-index:5050!important}
/* 2026-10-29: después de agregar un paquete, "Ir a la tienda" deja solo los círculos (todos a la vista) y la tarjeta "¿Ya tienes todo?". */
.store-modal-panel.is-after-add .store-catalog-scroll>*:not(.store-m-bubbles):not(.store-after-add):not(.store-after-add-quote){display:none!important}
/* 2026-10-30: bajo la tarjeta, "¿Te falta cotizar algo de esto?"; solo se ve junto a "¿Ya tienes todo?". */
.store-after-add-quote{display:none}
.store-modal-panel.is-after-add .store-after-add-quote{display:block}
.store-after-add-quote .quote-ask{margin:0 0 18px}
.store-modal-panel.has-mnav.is-after-add .store-m-bubbles{flex-wrap:wrap;justify-content:center;overflow:visible;row-gap:12px}
.store-after-add{display:grid;justify-items:center;gap:10px;margin:8px 0 18px;padding:28px 22px;border:1.5px solid #E4D9FF;border-radius:22px;background:linear-gradient(160deg,#F7F2FF 0%,#FFF4FA 100%);text-align:center;box-shadow:0 14px 34px rgba(91,45,190,.10)}
.store-after-add[hidden]{display:none}
.store-after-add-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#7A3FF0,#EB3C9C);color:#fff;font-size:1.6rem;box-shadow:0 10px 24px rgba(122,63,240,.28)}
.store-after-add h3{margin:0;font-size:1.35rem;font-weight:900;color:var(--dark2,#1D1736)}
.store-after-add p{max-width:460px;margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
.store-after-add-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.store-after-add-actions .btn{min-height:48px;padding:0 22px;border-radius:999px;font-size:.95rem}
@media(max-width:600px){
  .store-after-add{padding:22px 16px}
  .store-after-add-actions{display:grid;width:100%}
}
/* Tienda por partes (2026-11-06): mientras llegan las tarjetas de una categoría o de una búsqueda, tarjetas grises del mismo tamaño. */
.store-lazy-loading{grid-column:1/-1;order:-1;display:grid;gap:10px;margin:4px 0 6px}
.store-lazy-loading[hidden]{display:none}
.store-lazy-loading p{display:flex;align-items:center;gap:8px;margin:0;color:var(--primary);font-size:.86rem;font-weight:800}
.store-lazy-loading p span{width:9px;height:9px;border-radius:50%;background:var(--primary);animation:storeLazyPulse 1s ease-in-out infinite}
.store-lazy-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.store-lazy-card{display:grid;gap:8px;padding:10px;border:1px solid #ECE8F5;border-radius:16px;background:#fff}
.store-lazy-card i{display:block;aspect-ratio:4/5;border-radius:12px}
.store-lazy-card b{display:block;height:11px;border-radius:6px;width:85%}
.store-lazy-card b:nth-of-type(2){width:60%}
.store-lazy-card b:nth-of-type(3){width:38%;height:14px;margin-top:6px}
.store-lazy-card i,.store-lazy-card b{background:linear-gradient(90deg,#ECE8F6 0%,#F7F5FC 50%,#ECE8F6 100%);background-size:200% 100%;animation:storeLazyShine 1.2s linear infinite}
@keyframes storeLazyShine{to{background-position:-200% 0}}
@keyframes storeLazyPulse{50%{opacity:.25}}
@media(max-width:600px){.store-lazy-cards{grid-template-columns:1fr 1fr;gap:10px}.store-lazy-card:nth-child(n+5){display:none}}
@media(prefers-reduced-motion:reduce){.store-lazy-card i,.store-lazy-card b,.store-lazy-loading p span{animation:none}}