/* ==========================================================================
   Mobile Nav A/B — Sticky Footer Navigation (Mobile Only)
   10 Variations: M1-M10 (M9 = baseline, others = enhanced)
   Loaded on ALL pages. The active variant class is set by mobile-nav-ab.js
   ========================================================================== */

@media (max-width: 768px) {

  /* Hide desktop hamburger + nav-links + footer when mobile nav is active */
  body.has-mnav .hamburger { display: none !important; }
  body.has-mnav .nav-links { display: none !important; }
  body.has-mnav .vnav-hamburger { display: none !important; }
  body.has-mnav .vnav-links { display: none !important; }
  body.has-mnav .vnav-right { display: none !important; }
  body.has-mnav .footer { display: none !important; }
  body.has-mnav .floating-cta { bottom: 76px !important; }

  /* Pad page bottom so content isn't hidden behind the nav */
  body.has-mnav { padding-bottom: 80px !important; }

  /* ===========================================================================
     SHARED BASE — all navs share this emoji bar foundation (M9 = the baseline)
     =========================================================================== */
  .enav {
    position: fixed; bottom: 0; left: 0; right: 0; height: 70px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex; align-items: center; justify-content: space-around;
    padding: 4px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 99999;
  }
  .enav a {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font-size: 9px; font-weight: 600; color: #999; flex: 1;
    padding: 4px 2px; border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .enav .em { font-size: 22px; line-height: 1.3; transition: all 0.2s ease; }
  .enav a.on { color: #2C2420; }

  /* ===========================================================================
     M1: EMBOSSED — each button sits on a raised embossed card
     =========================================================================== */
  .n1 {
    background: linear-gradient(180deg, #f7f0ea, #efe6dd);
    border-top: 1px solid #e0d6cc;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n1 a {
    background: linear-gradient(145deg, #faf5f0, #e8dfd6);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.08), -2px -2px 4px rgba(255,255,255,0.9),
                inset 0 1px 0 rgba(255,255,255,0.6);
    margin: 0 2px; padding: 5px 2px 4px; border-radius: 12px;
  }
  .n1 a.on {
    background: linear-gradient(145deg, #e8f5e9, #d4ecd6);
    box-shadow: 3px 3px 6px rgba(94,142,98,0.15), -2px -2px 4px rgba(255,255,255,0.8),
                inset 0 1px 0 rgba(255,255,255,0.5);
    color: #3d6941;
  }
  .n1 a.shop-a {
    background: linear-gradient(145deg, #6a9e6e, #4A7350);
    color: #fff !important;
    box-shadow: 3px 3px 8px rgba(94,142,98,0.3), -2px -2px 4px rgba(255,255,255,0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
  }

  /* ===========================================================================
     M2: DEBOSSED — buttons are sunken / pressed into the surface
     =========================================================================== */
  .n2 {
    background: #e8dfd6;
    border-top: 1px solid #d5ccc3;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n2 a {
    background: #e8dfd6;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 4px rgba(255,255,255,0.7);
    margin: 0 2px; padding: 5px 2px 4px; border-radius: 12px;
  }
  .n2 a.on {
    color: #3d6941;
    box-shadow: inset 3px 3px 6px rgba(94,142,98,0.15), inset -2px -2px 5px rgba(255,255,255,0.8);
    background: linear-gradient(145deg, #dce8dc, #e8dfd6);
  }
  .n2 a.shop-a {
    background: #5E8E62; color: #fff !important;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15), inset -1px -1px 3px rgba(255,255,255,0.15);
  }

  /* ===========================================================================
     M3: 3D DEPTH — buttons float with stacked bottom shadow
     =========================================================================== */
  .n3 {
    bottom: 8px; left: 8px; right: 8px; width: auto;
    border-radius: 18px; border-top: none;
    box-shadow: 0 4px 0 #d5ccc3, 0 8px 20px rgba(0,0,0,0.1);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n3 a {
    margin: 0 1px; position: relative;
  }
  .n3 a.on {
    color: #3d6941;
    background: #f0f8f0;
    box-shadow: 0 2px 0 #b5d4b7, 0 4px 8px rgba(94,142,98,0.12);
    transform: translateY(-2px);
    border-radius: 12px;
  }
  .n3 a.shop-a {
    background: #5E8E62; color: #fff !important;
    box-shadow: 0 3px 0 #3d6941, 0 6px 12px rgba(94,142,98,0.25);
    transform: translateY(-3px);
    border-radius: 12px;
  }

  /* ===========================================================================
     M4: GLASSMORPHISM — frosted glass bar with blur
     =========================================================================== */
  .n4 {
    bottom: 10px; left: 10px; right: 10px; width: auto;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n4 a { color: rgba(44,36,32,0.5); }
  .n4 a.on {
    color: #3d6941;
    background: rgba(94,142,98,0.12);
    border: 1px solid rgba(94,142,98,0.2);
    border-radius: 12px;
  }
  .n4 a.shop-a {
    background: rgba(94,142,98,0.85); color: #fff !important;
    border: 1px solid rgba(94,142,98,0.3);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(94,142,98,0.25);
  }

  /* ===========================================================================
     M5: NEON GLOW — dark bar, glowing neon halos on active
     =========================================================================== */
  .n5 {
    background: #1a1a2e;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n5 a { color: rgba(255,255,255,0.35); }
  .n5 a .em { filter: grayscale(80%) brightness(0.6); }
  .n5 a.on { color: #8BB88F; }
  .n5 a.on .em {
    filter: none;
    text-shadow: 0 0 8px rgba(139,184,143,0.8), 0 0 20px rgba(139,184,143,0.4);
  }
  .n5 a.shop-a { color: #E8A5AB; }
  .n5 a.shop-a .em {
    filter: none;
    text-shadow: 0 0 8px rgba(212,114,122,0.7), 0 0 20px rgba(212,114,122,0.35);
  }

  /* ===========================================================================
     M6: NEUMORPHISM — soft UI dual-shadow raised + pressed
     =========================================================================== */
  .n6 {
    background: #e8dfd6;
    border-top: none;
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .n6 a {
    background: #e8dfd6;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.1), -4px -4px 8px rgba(255,255,255,0.7);
    margin: 0 2px; padding: 6px 2px 4px; border-radius: 14px;
  }
  .n6 a.on {
    color: #3d6941;
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.08), inset -3px -3px 6px rgba(255,255,255,0.6);
  }
  .n6 a.shop-a {
    background: linear-gradient(135deg, #5E8E62, #4A7350); color: #fff !important;
    box-shadow: 4px 4px 10px rgba(94,142,98,0.3), -3px -3px 6px rgba(255,255,255,0.4);
  }

  /* ===========================================================================
     M7: LIQUID BLOB — animated morphing blob behind active
     =========================================================================== */
  .n7 a.on {
    color: #fff; position: relative; z-index: 1;
  }
  .n7 a.on::before {
    content: ''; position: absolute; inset: -1px -4px;
    background: linear-gradient(135deg, #5E8E62, #7BAE7F);
    border-radius: 16px; z-index: -1;
    animation: blobmorph 3s ease-in-out infinite;
  }
  @keyframes blobmorph {
    0%, 100% { border-radius: 16px 14px 18px 12px; }
    25% { border-radius: 12px 18px 14px 16px; }
    50% { border-radius: 18px 12px 16px 14px; }
    75% { border-radius: 14px 16px 12px 18px; }
  }
  .n7 a.shop-a { color: #5E8E62; font-weight: 800; }

  /* ===========================================================================
     M8: SHIMMER — animated light sweep across active
     =========================================================================== */
  .n8 a.on {
    color: #3d6941;
    background: linear-gradient(135deg, #e8f5e9, #f0f8f0);
    border: 1px solid rgba(94,142,98,0.12);
    border-radius: 12px;
    position: relative; overflow: hidden;
  }
  .n8 a.on::after {
    content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: rotate(25deg);
    animation: shimmer 2.5s ease-in-out infinite;
  }
  @keyframes shimmer { 0% { left: -60%; } 100% { left: 160%; } }
  .n8 a.shop-a {
    background: linear-gradient(135deg, #5E8E62, #4A7350); color: #fff !important;
    border: none; border-radius: 12px;
    position: relative; overflow: hidden;
  }
  .n8 a.shop-a::after {
    content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: rotate(25deg);
    animation: shimmer 3s ease-in-out infinite;
  }

  /* ===========================================================================
     M9: BASELINE — plain emoji nav, no effects (the floor)
     uses .enav defaults only
     =========================================================================== */

  /* ===========================================================================
     M10: TACTILE PRESS — 3D pushable buttons, active = pressed down
     =========================================================================== */
  .n10 {
    bottom: 6px; left: 8px; right: 8px; width: auto;
    background: linear-gradient(180deg, #fff, #f5efe8);
    border-radius: 20px; border-top: none;
    box-shadow: 0 2px 0 #ddd, 0 6px 16px rgba(0,0,0,0.08);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .n10 a {
    background: linear-gradient(180deg, #faf7f3, #f0ebe4);
    box-shadow: 0 3px 0 #d8d0c8, 0 4px 8px rgba(0,0,0,0.05);
    margin: 0 2px; padding: 5px 2px 4px; border-radius: 12px;
    transform: translateY(0);
  }
  .n10 a.on {
    color: #3d6941;
    background: linear-gradient(180deg, #eef6ee, #ddeedd);
    box-shadow: 0 1px 0 #b5d4b7;
    transform: translateY(2px);
  }
  .n10 a.shop-a {
    background: linear-gradient(180deg, #6a9e6e, #4A7350); color: #fff !important;
    box-shadow: 0 3px 0 #3d6941, 0 6px 12px rgba(94,142,98,0.2);
  }

} /* end @media (max-width: 768px) */