/* ==========================================================================
   Menú hamburguesa: botón "Tienda online" y pie compacto (home y /tienda)
   ========================================================================== */
/* Botón "Tienda online" con distintivo "Nuevo" */
.mobile-nav-footer .nav-store-cta {
  position: relative; margin-bottom: .65rem;
  background: linear-gradient(135deg, var(--tst-dark), var(--tst-green));
}
.nav-new-badge {
  position: absolute; top: -8px; right: 10px;
  padding: .12rem .5rem; border: 2px solid #fff; border-radius: 999px;
  color: var(--tst-dark); background: var(--tst-accent);
  font: 800 .6rem/1.3 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  animation: navNewPulse 2.4s ease-in-out infinite;
}
@keyframes navNewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .nav-new-badge { animation: none; } }

/* responsive.css oculta todo .nav-cta en celulares de 480px o menos; dentro del
   menú hamburguesa ambos botones tienen que seguir visibles. */
@media (max-width: 480px) {
  .mobile-nav-footer .nav-cta { display: flex !important; }
}

/* Contador del carrito sobre el ícono de la cabecera */
.home-cart-link { position: relative; }
.home-cart-count {
  position: absolute; top: -5px; right: -5px;
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 2px solid #0e2e2a; border-radius: 999px;
  color: #0e2e2a; background: #8ff3d9;
  font: 800 .66rem/1 'Inter', sans-serif;
}
.home-cart-count[hidden] { display: none; }

/* Home: acciones de las tarjetas de la tienda */
.home-store-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid #ffffff20; }
.home-store-add {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem;
  border: 0; border-radius: 999px; color: #0e2e2a; background: #8ff3d9;
  font: 700 .8rem 'Inter', sans-serif; cursor: pointer; transition: transform .2s, background .2s;
}
.home-store-add:hover { transform: translateY(-1px); background: #b4f7e6; }
.home-store-add.is-added { color: #fff; background: #1f6f63; }
.home-store-add.is-disabled { color: #a8c7bd; background: #ffffff14; cursor: default; }
.home-store-actions .home-store-link { margin: 0; padding: 0; border: 0; min-height: 40px; gap: .4rem; }
.home-store-status { grid-column: 1 / -1; min-height: 1.2em; margin: .6rem 0 0; color: #bff5e6; font-size: .85rem; }
.home-store-status.is-error { color: #ffd2cc; }

/* Home: distintivo "Nuevo" en la esquina de la sección de tienda */
.home-store-section { position: relative; }
.section-new-badge {
  position: absolute; z-index: 2; top: clamp(1.1rem, 2.5vw, 2rem); right: max(1.25rem, calc((100% - 1280px) / 2));
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem; border: 2px solid #fff; border-radius: 999px;
  color: #0e2e2a; background: var(--tst-accent, #00d4aa);
  font: 800 .72rem/1.2 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  animation: navNewPulse 2.4s ease-in-out infinite;
}
.section-new-badge i { font-size: .7rem; }
@media (max-width: 600px) { .section-new-badge { top: .9rem; font-size: .66rem; } }
@media (prefers-reduced-motion: reduce) { .section-new-badge { animation: none; } }

/* Aviso "añadido al carrito" (tienda y home) */
.cart-toast {
  position: fixed; z-index: 1200; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .6rem; max-width: min(92vw, 460px);
  padding: .75rem 1rem; border-radius: 14px; color: #fff; background: #0e2e2a;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28); font: 600 .86rem 'Inter', sans-serif;
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .25s, transform .25s;
}
.cart-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.cart-toast i { color: #8ff3d9; }
.cart-toast.is-error i { color: #ffb4a8; }
.cart-toast a { margin-left: auto; padding-left: .6rem; color: #8ff3d9; font-weight: 800; text-decoration: underline; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cart-toast { transition: none; } }

/* Cuenta del cliente en la cabecera (junto al carrito) */
.home-account-link.is-logged { border-color: #8ff3d9; }
.home-account-initial { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #0e2e2a; background: #8ff3d9; font: 800 .8rem 'Inter', sans-serif; }
/* En escritorio ya está «Iniciar sesión / Mi cuenta»: el ícono de cuenta queda para celular. */
@media (min-width: 769px) { .home-account-link { display: none !important; } }

/* Menú de perfil del cliente (account-menu.js): inicial en círculo y menú
   desplegable con Mi perfil, Mis pedidos y Cerrar sesión. */
.account-menu { position: relative; display: inline-flex; }
.account-trigger { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .8rem .25rem .3rem; border: 1px solid #ffffff38; border-radius: 999px; color: #fff; background: #ffffff0f; font: 700 .82rem 'Inter', sans-serif; cursor: pointer; transition: border-color .2s, background .2s; }
.account-trigger:hover, .account-menu.is-open .account-trigger { border-color: #8ff3d9; background: #ffffff1a; }
.account-trigger .fa-chevron-down { font-size: .6rem; opacity: .8; transition: transform .2s; }
.account-menu.is-open .account-trigger .fa-chevron-down { transform: rotate(180deg); }
.account-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #0e2e2a; background: linear-gradient(135deg, #8ff3d9, #3fae9a); font: 800 .9rem 'Inter', sans-serif; }
.account-trigger-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 1200; display: grid; min-width: 230px; padding: .45rem; border: 1px solid #dce9e5; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(10, 35, 30, .22); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.account-menu.is-open .account-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.account-dropdown-head { display: flex; align-items: center; gap: .65rem; margin: 0 0 .35rem; padding: .55rem .6rem .75rem; border-bottom: 1px solid #edf2f0; }
.account-dropdown-head strong { display: block; color: #173f38; font: 800 .9rem 'Inter', sans-serif; }
.account-dropdown-head small { color: #7b8c88; font-size: .72rem; }
.account-dropdown a, .account-dropdown button { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .65rem .7rem; border: 0; border-radius: 10px; color: #173f38; background: none; font: 600 .86rem 'Inter', sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.account-dropdown a i, .account-dropdown button i { width: 1.1rem; color: #3fae9a; text-align: center; }
.account-dropdown a:hover, .account-dropdown button:hover, .account-dropdown a:focus-visible, .account-dropdown button:focus-visible { background: #eef7f4; outline: none; }
.account-dropdown button[data-account-logout] { margin-top: .25rem; border-top: 1px solid #edf2f0; border-radius: 0 0 10px 10px; color: #b42318; }
.account-dropdown button[data-account-logout] i { color: #b42318; }
@media (max-width: 768px) { .nav-actions .account-menu { display: none; } }
/* Menú hamburguesa con sesión: tres botones en filas completas. */
.mobile-nav-utility .account-logout-mobile { color: #b42318 !important; border-color: rgba(180, 35, 24, .3) !important; font-family: 'Inter', sans-serif; }