/* ============================================================
 * Lace Secret — Mobile Bottom Navigation Bar
 * ============================================================
 * Structural reference: reference design.png
 *
 * Core rules:
 * - mobile only (<=1024px)
 * - fixed and completely motionless as a bar
 * - hidden while the existing Lace Secret intro owns the screen
 * - white surface with a raised white center island
 * - black Lace Secret monogram rotates sideways around the Y axis
 * - no JS animation / polling / scroll-driven positioning
 * ============================================================ */

@media(max-width:1024px){
  html{
    --ls-bn-height:74px;
    --ls-bn-center-size:68px;
    --ls-bn-center-rise:30px;
  }

  body{
    padding-bottom:var(--ls-bn-height);
    padding-bottom:calc(var(--ls-bn-height) + env(safe-area-inset-bottom,0px));
  }
}

.ls-bottom-nav{
  display:none;
}

@media(max-width:1024px){
  .ls-bottom-nav{
    /*
     * Permanent mobile shell.
     *
     * Do not couple this element to intro, scroll, header or section state.
     * The intro already sits at an extremely high z-index and naturally
     * covers the bar while it owns the screen. Keeping the nav rendered and
     * paint-stable prevents the close/open flash that can happen when display
     * is toggled during mobile viewport / lifecycle changes.
     */
    position:fixed!important;
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    z-index:180;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    height:calc(var(--ls-bn-height) + env(safe-area-inset-bottom,0px));
    padding:0 6px env(safe-area-inset-bottom,0px);
    background:#fff;
    border-radius:24px 24px 0 0;
    box-shadow:0 -8px 28px rgba(17,17,17,.075);
    overflow:visible;
    isolation:isolate;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent;

    /*
     * Keep the shell on its own compositor layer. A tiny viewport controller
     * supplies --ls-bn-vv-translate only on browsers where dynamic browser
     * chrome makes the visual viewport differ from the layout viewport.
     * This is not a hide/reveal animation: it counteracts browser-chrome
     * movement so the bar remains visually pinned to the physical screen.
     */
    -webkit-transform:none!important;
    transform:none!important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:auto;

    animation:none!important;
    transition:none!important;
  }

  /* Raised white bridge behind the center button, matching the reference
     silhouette without introducing another animated element. */
  .ls-bottom-nav::before{
    content:"";
    position:absolute;
    z-index:0;
    left:50%;
    top:-36px;
    width:98px;
    height:54px;
    transform:translateX(-50%);
    border-radius:52px 52px 0 0;
    background:#fff;
    box-shadow:0 -8px 22px rgba(17,17,17,.055);
    pointer-events:none;
  }

  /* Cover the lower part of the bridge shadow so the bridge and bar read as
     one continuous white surface. */
  .ls-bottom-nav::after{
    content:"";
    position:absolute;
    z-index:0;
    left:50%;
    top:0;
    width:112px;
    height:22px;
    transform:translateX(-50%);
    background:#fff;
    pointer-events:none;
  }
}

.ls-bottom-nav__item{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:var(--ls-bn-height,74px);
  padding:10px 3px 7px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#a0a0a0;
  text-decoration:none;
  font:inherit;
  font-size:11px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:0;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:color .14s ease,opacity .14s ease;
}

.ls-bottom-nav__item:active{
  opacity:.62;
}

.ls-bottom-nav__item.is-active,
.ls-bottom-nav__item[aria-expanded="true"]{
  color:#111;
}

.ls-bottom-nav__item.is-active .ls-bottom-nav__icon{
  stroke-width:1.8;
}

.ls-bottom-nav__icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
}

.ls-bottom-nav__icon-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.ls-bottom-nav__label{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* ============================================================
 * Center brand action
 * ============================================================ */

.ls-bottom-nav__center{
  z-index:3;
  align-self:stretch;
  min-height:var(--ls-bn-height,74px);
  padding:0;
  overflow:visible;
}

.ls-bottom-nav__center:active{
  opacity:1;
}

.ls-bottom-nav__circle{
  position:absolute;
  left:50%;
  top:calc(-1 * var(--ls-bn-center-rise,30px));
  width:var(--ls-bn-center-size,68px);
  height:var(--ls-bn-center-size,68px);
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  border:1px solid rgba(17,17,17,.075);
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 9px 20px rgba(17,17,17,.14),
    0 1px 0 rgba(255,255,255,.95) inset;
  perspective:460px;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
}

.ls-bottom-nav__center:focus-visible .ls-bottom-nav__circle{
  outline:1px solid #111;
  outline-offset:3px;
}

/* The official logo.png remains the source mask. The visible mark is BLACK
   on the WHITE center circle. Only this mark rotates — never the circle. */
.ls-bottom-nav__logo{
  position:relative;
  display:block;
  width:42px;
  height:42px;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  animation:ls-bn-side-spin 20s linear infinite;
  will-change:transform;
  pointer-events:none;
}

.ls-bottom-nav__logo::before,
.ls-bottom-nav__logo::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background:#111;
  -webkit-mask-image:var(--ls-bn-logo);
  mask-image:var(--ls-bn-logo);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  pointer-events:none;
}

.ls-bottom-nav__logo::after{
  transform:rotateY(180deg);
}

@keyframes ls-bn-side-spin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

@media(prefers-reduced-motion:reduce){
  .ls-bottom-nav__logo{
    animation:none;
    will-change:auto;
  }
}

/* ============================================================
 * Cart badge
 * ============================================================ */

.ls-bottom-nav__badge{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:1px solid #fff;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:10px;
  font-weight:600;
  line-height:15px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:scale(.72);
  transition:opacity .16s ease,transform .16s ease;
}

.ls-bottom-nav__badge.is-visible{
  opacity:1;
  transform:scale(1);
}

/* ============================================================
 * Existing sticky purchase compatibility
 * ============================================================ */

@media(max-width:1024px){
  /* Keep the legacy back-to-top control physically above the permanent nav
     instead of letting it appear over the cart item when scroll state changes. */
  .ls-ac-back-to-top{
    bottom:max(
      16px,
      calc(var(--ls-bn-height,74px) + env(safe-area-inset-bottom,0px) + 16px)
    )!important;
  }

  .ls-product-sticky{
    bottom:max(
      8px,
      calc(var(--ls-bn-height,74px) + env(safe-area-inset-bottom,0px) + 8px)
    );
  }

  html.ls-intro-pending .ls-product-sticky{
    bottom:max(8px,env(safe-area-inset-bottom,0px));
  }
}

@media(max-width:360px){
  .ls-bottom-nav{
    padding-inline:2px;
  }

  .ls-bottom-nav__item{
    padding-inline:1px;
    font-size:10.5px;
  }

  .ls-bottom-nav__icon{
    width:23px;
    height:23px;
  }
}