/* ======================================================================
   DjimlyStore Digital v2.26.6 — FORCED MINIMAL NEUMORPHIC NAVIGATION
   Dedicated asset + inline fallback. This file intentionally owns only nav UI.
====================================================================== */

/* Mobile / tablet floating dock */
@media (max-width: 899px) {
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav {
    position: absolute !important;
    z-index: 9999 !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(650px, calc(100% - 18px)) !important;
    height: auto !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 28px !important;
    background: #edf1f6 !important;
    box-shadow:
      11px 13px 28px rgba(163,177,198,.32),
      -8px -8px 22px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 5px 2px 4px !important;
    display: grid !important;
    grid-template-rows: 35px 14px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 1px !important;
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #697386 !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    line-height: 1 !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 12px !important;
    background: #edf1f6 !important;
    color: #5f6979 !important;
    -webkit-text-fill-color: #5f6979 !important;
    box-shadow:
      5px 5px 10px rgba(163,177,198,.34),
      -5px -5px 10px rgba(255,255,255,.98) !important;
    font-family: 'Material Symbols Rounded' !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-variation-settings: 'FILL' 0,'wght' 520,'GRAD' 0,'opsz' 24 !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > span:not(.ms):not(.djs-cart-count-badge):not(.djs-message-unread-badge),
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > span:not(.ms):not(.djs-cart-count-badge):not(.djs-message-unread-badge) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  /* Selected item is recessed, not a red filled square. */
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active {
    border-color: rgba(255,255,255,.54) !important;
    background: #edf1f6 !important;
    color: #e30613 !important;
    box-shadow:
      inset 4px 4px 9px rgba(163,177,198,.31),
      inset -4px -4px 9px rgba(255,255,255,.97) !important;
    transform: none !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active > .ms,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active > .ms {
    border-color: rgba(255,255,255,.42) !important;
    background: #edf1f6 !important;
    color: #e30613 !important;
    -webkit-text-fill-color: #e30613 !important;
    box-shadow:
      inset 4px 4px 8px rgba(163,177,198,.35),
      inset -4px -4px 8px rgba(255,255,255,.98) !important;
    font-variation-settings: 'FILL' 0,'wght' 680,'GRAD' 0,'opsz' 24 !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active::after,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 3px !important;
    width: 16px !important;
    height: 3px !important;
    border-radius: 99px !important;
    background: #e30613 !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 2px 6px rgba(227,6,19,.24) !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-cart-count-badge:not(:empty) {
    position: absolute !important;
    top: 3px !important;
    right: calc(50% - 23px) !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid #edf1f6 !important;
    border-radius: 99px !important;
    background: #e30613 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(227,6,19,.25) !important;
  }

  html body #djs-portal.djs-build-v2266 .djs-scroller { padding-bottom: 112px !important; }
}

@media (max-width: 430px) {
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav {
    width: calc(100% - 12px) !important;
    min-height: 71px !important;
    padding: 6px !important;
    gap: 2px !important;
    border-radius: 24px !important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item {
    height: 57px !important;
    grid-template-rows: 33px 13px !important;
    border-radius: 16px !important;
    font-size: 9px !important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms {
    width: 31px !important;
    height: 31px !important;
    border-radius: 11px !important;
    font-size: 20px !important;
  }
}

@media (max-width: 360px) {
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item { font-size: 8px !important; letter-spacing: -.04em !important; }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms { width: 29px !important; height: 29px !important; font-size: 19px !important; }
}

/* Dark mode */
@media (max-width: 899px) {
  [data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav,
  html body[data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav {
    border-color: rgba(255,255,255,.05) !important;
    background: #20252d !important;
    box-shadow: 11px 14px 28px rgba(8,10,14,.52), -7px -7px 20px rgba(59,67,78,.32) !important;
  }
  [data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item { color: #aeb7c5 !important; }
  [data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item > .ms {
    border-color: rgba(255,255,255,.035) !important;
    background: #20252d !important;
    color: #aeb7c5 !important;
    -webkit-text-fill-color: #aeb7c5 !important;
    box-shadow: 5px 5px 10px rgba(8,10,14,.52), -5px -5px 10px rgba(59,67,78,.30) !important;
  }
  [data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active {
    background: #20252d !important;
    color: #ff5a64 !important;
    box-shadow: inset 4px 4px 9px rgba(8,10,14,.55), inset -4px -4px 9px rgba(59,67,78,.30) !important;
  }
  [data-theme="dark"] #djs-portal.djs-build-v2266 .djs-bottom-nav .djs-bn-item.active > .ms {
    background: #20252d !important;
    color: #ff5a64 !important;
    -webkit-text-fill-color: #ff5a64 !important;
    box-shadow: inset 4px 4px 8px rgba(8,10,14,.58), inset -4px -4px 8px rgba(59,67,78,.30) !important;
  }
}


/* ======================================================================
   v2.37.8 — MATHEMATICALLY CENTERED SIX-COLUMN CUSTOMER DOCK
   Active state never changes geometry.
====================================================================== */
@media (max-width:899px){
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(680px,calc(100% - 16px))!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    column-gap:0!important;
    row-gap:0!important;
    padding:7px 8px!important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:34px 16px!important;
    place-items:center!important;
    align-content:center!important;
    justify-content:center!important;
    padding:4px 1px!important;
    border-radius:18px!important;
    transform:none!important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(1){grid-column:1!important}
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(2){grid-column:2!important}
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(3){grid-column:3!important}
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(4){grid-column:4!important}
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(5){grid-column:5!important}
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item:nth-child(6){grid-column:6!important}

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item>.djs-modern-nav-icon{
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#111827!important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg{
    width:25px!important;height:25px!important;display:block!important;
    fill:none!important;stroke:currentColor!important;stroke-width:1.85!important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item>span:not(.djs-modern-nav-icon):not(.djs-cart-count-badge):not(.djs-message-unread-badge){
    grid-row:2!important;
    justify-self:stretch!important;
    align-self:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:0!important;margin:0!important;
    text-align:center!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:9.5px!important;font-weight:800!important;line-height:1!important;
  }

  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item.active{
    width:auto!important;
    padding:4px 1px!important;
    background:rgba(255,255,255,.54)!important;
    border-color:rgba(255,255,255,.62)!important;
    box-shadow:inset 3px 3px 8px rgba(163,177,198,.25),inset -3px -3px 8px rgba(255,255,255,.92)!important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon{
    background:#fff!important;color:#df1723!important;
    box-shadow:0 5px 13px rgba(223,23,35,.08)!important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item.active::before{
    content:""!important;position:absolute!important;top:-7px!important;left:50%!important;
    width:34px!important;height:4px!important;border-radius:0 0 999px 999px!important;
    background:#e11d2e!important;transform:translateX(-50%)!important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item.active::after{display:none!important}
}

@media(max-width:390px){
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav,
  html body.djs-fullscreen-active #djs-portal.djs-build-v2266 .djs-bottom-nav{
    width:calc(100% - 10px)!important;padding-left:5px!important;padding-right:5px!important;
  }
  html body #djs-portal.djs-build-v2266 .djs-bottom-nav>.djs-bn-item>span:not(.djs-modern-nav-icon):not(.djs-cart-count-badge):not(.djs-message-unread-badge){
    font-size:8px!important;
  }
}