/**
 * Bottom nav: fixed on all viewports, light theme, safe areas, scroll margins
 */

:root {
  --nav-btn-size: 3.35rem;
  --nav-stack-gap: 0.5rem;
  --nav-bar-offset: max(0.75rem, var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 768px) {
  :root {
    --nav-btn-size: 3rem;
    --nav-h: calc(var(--nav-btn-size) + var(--nav-bar-offset) + 0.5rem);
  }
}

@media (min-width: 769px) {
  :root {
    --nav-btn-size: 3.9rem;
    --nav-h: calc(var(--nav-btn-size) + var(--nav-bar-offset) + 0.65rem);
  }

  .lcs-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--nav-bar-offset) !important;
    top: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    z-index: 500;
  }
}

.lcs-nav {
  position: fixed !important;
  left: 50%;
  right: auto;
  top: auto !important;
  bottom: var(--nav-bar-offset);
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 500;
}

/* Never auto-hide on scroll — always visible */
.lcs-nav,
.lcs-nav.is-scrolled,
.lcs-nav.is-hidden,
body.is-scrolled .lcs-nav,
body.lcs-nav-open .lcs-nav {
  transform: translate3d(-50%, 0, 0) !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.lcs-nav__bar {
  background: var(--linen, #faf7f2);
  border: 1px solid rgba(26, 26, 26, 0.2);
  box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.08);
}

.lcs-nav__btn {
  color: var(--ink, #1a1a1a);
  border-right-color: rgba(26, 26, 26, 0.15);
}

.lcs-nav__btn:hover,
.lcs-nav__btn[aria-expanded="true"],
.lcs-nav__btn.is-active,
.lcs-nav__btn.is-chat-open {
  background: var(--ink, #1a1a1a);
  color: #f6f1ea;
}

.lcs-nav__mega,
.lcs-nav__chat {
  background: var(--linen, #faf7f2);
  color: var(--ink, #1a1a1a);
  border: 1px solid rgba(26, 26, 26, 0.18);
  box-shadow: 6px 6px 0 rgba(26, 26, 26, 0.06);
  width: min(100vw - 1.5rem, 24rem);
  max-width: 100%;
  box-sizing: border-box;
}

.lcs-nav__stack {
  width: 100%;
  align-items: stretch;
}

/* ——— Mobile & small tablet ——— */
@media (max-width: 768px) {
  :root {
    --nav-bar-offset: max(0.65rem, var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    --nav-panel-max-h: min(62dvh, 520px);
    --nav-h: calc(3.15rem + var(--nav-bar-offset) + 0.75rem);
  }

  .lcs-nav--4 {
    --nav-btn-size: max(2.7rem, min(3.2rem, calc((100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 1.25rem) / 4)));
  }

  .lcs-nav--5 {
    --nav-btn-size: max(2.55rem, min(3rem, calc((100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 1.25rem) / 5)));
  }

  .lcs-nav,
  .lcs-nav--4,
  .lcs-nav--5 {
    width: calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 0.5rem) !important;
    max-width: calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 0.5rem);
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .lcs-nav__stack {
    width: 100%;
    max-width: none;
    align-items: stretch;
    gap: 0.45rem;
  }

  .lcs-nav__mega,
  .lcs-nav__chat {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .lcs-nav__mega {
    max-height: var(--nav-panel-max-h);
    padding: 0.85rem 0.75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .lcs-nav__chat {
    max-height: min(90dvh, calc(100dvh - var(--nav-h, 4.5rem) - 0.5rem));
    min-height: min(72dvh, 480px);
  }

  .lcs-nav__chat .chatbot__messages {
    max-height: none;
    flex: 1 1 auto;
  }

  .lcs-nav__bar,
  .lcs-nav__bar--4,
  .lcs-nav__bar--5 {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    align-self: stretch;
  }

  .lcs-nav__bar--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lcs-nav__bar--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lcs-nav__item {
    width: auto;
    min-width: 0;
  }

  .lcs-nav__btn {
    width: 100%;
    height: var(--nav-btn-size);
    min-height: max(44px, var(--nav-btn-size));
    min-width: 0;
    touch-action: manipulation;
  }

  .lcs-nav__btn .ti {
    font-size: 1.32rem !important;
  }

  .lcs-nav__preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lcs-nav__preview a {
    aspect-ratio: 4/3;
    min-height: 4.75rem;
  }

  .lcs-nav__preview span {
    font-size: 0.6rem;
    line-height: 1.25;
    padding: 0.35rem 0.45rem;
  }

  .lcs-nav__mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lcs-nav__mega-grid--aux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lcs-nav__mega-link,
  .lcs-nav__mega-link--btn {
    min-height: 44px;
    padding: 0.8rem 0.6rem;
    font-size: 0.78rem;
    touch-action: manipulation;
  }

  .lcs-nav__mega-actions {
    margin-top: 0.65rem;
  }

  .lcs-nav__mega-actions .btn {
    min-height: 48px;
    padding: 0.85rem 0.75rem;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    touch-action: manipulation;
  }

  body.lcs-nav-open #main,
  body.lcs-nav-open .catalog-main,
  body.lcs-nav-open .product-detail--shop,
  body.lcs-nav-open .legal-page__main {
    padding-bottom: calc(var(--nav-h) + min(52dvh, 420px));
  }
}

@media (max-width: 380px) {
  .lcs-nav__preview span {
    font-size: 0.55rem;
    letter-spacing: 0.04em;
  }

  .lcs-nav__mega-link,
  .lcs-nav__mega-link--btn {
    font-size: 0.72rem;
    padding: 0.7rem 0.5rem;
  }
}

/* ——— Tablet (between phone and desktop) ——— */
@media (min-width: 769px) and (max-width: 1099px) {
  .lcs-nav,
  .lcs-nav--4,
  .lcs-nav--5 {
    width: min(640px, calc(100vw - 2rem)) !important;
  }

  .lcs-nav--5 {
    width: min(720px, calc(100vw - 2rem)) !important;
  }
}

@media (min-width: 769px) {
  .lcs-nav,
  .lcs-nav--4,
  .lcs-nav--5 {
    width: min(720px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 2rem)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .lcs-nav--5 {
    width: min(820px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 2rem)) !important;
  }

  .lcs-nav__stack {
    width: 100%;
    max-width: none;
    align-items: stretch;
  }

  .lcs-nav__mega,
  .lcs-nav__chat {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .lcs-nav__bar {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    align-self: center;
    --nav-btn-size: 4.35rem;
  }

  .lcs-nav__bar--4 {
    grid-template-columns: repeat(4, var(--nav-btn-size));
  }

  .lcs-nav__bar--5 {
    grid-template-columns: repeat(5, var(--nav-btn-size));
  }

  .lcs-nav__item {
    width: var(--nav-btn-size);
    min-width: var(--nav-btn-size);
  }

  .lcs-nav__btn .ti {
    font-size: 1.65rem;
  }

  .lcs-nav__preview {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .lcs-nav__preview a {
    aspect-ratio: 5/4;
    min-height: 7.5rem;
  }

  .lcs-nav__preview span {
    font-size: 0.72rem;
    padding: 0.5rem 0.65rem;
  }

  .lcs-nav__mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lcs-nav__mega-grid--aux {
    grid-template-columns: repeat(2, 1fr);
  }

  .lcs-nav__mega-actions .btn {
    padding: 0.85rem 1.25rem;
    font-size: 0.82rem;
  }
}

@media (min-width: 1100px) {
  .lcs-nav--4 {
    width: min(780px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 2.5rem)) !important;
  }

  .lcs-nav--5 {
    width: min(920px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 2.5rem)) !important;
  }

  .lcs-nav__bar {
    --nav-btn-size: 4.6rem;
  }
}

.lcs-nav__mega-link,
.lcs-nav__mega-link--btn {
  color: var(--ink, #1a1a1a);
}

.lcs-nav__mega-link:hover,
.lcs-nav__mega-link--btn:hover {
  background: var(--ink, #1a1a1a);
  color: #f6f1ea;
}

/* Page clearance for fixed bottom nav */
#main,
.catalog-main,
.product-detail--shop,
.legal-page__main {
  padding-bottom: var(--page-bottom, var(--nav-h));
}

.page-home #main {
  padding-bottom: var(--page-bottom, var(--nav-h));
}

.section[id],
.product-detail,
.catalog-hero {
  scroll-margin-bottom: calc(var(--nav-h, 4.5rem) + 1rem);
}

body.lcs-nav-open {
  overflow: hidden;
}