/**
 * Safe-area insets — notch, Dynamic Island, home indicator (iOS/Android)
 */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-h: 4.25rem;
  --page-bottom: calc(var(--nav-h) + var(--safe-bottom) + 0.75rem);
  --hero-controls-bottom: calc(var(--nav-h) + var(--safe-bottom) + 3.5rem);
}

@supports (padding: max(0px)) {
  :root {
    --page-bottom: calc(var(--nav-h) + max(0.75rem, env(safe-area-inset-bottom)) + 0.25rem);
    --hero-controls-bottom: calc(var(--nav-h) + max(0.75rem, env(safe-area-inset-bottom)) + 3.25rem);
  }
}

#main {
  padding-bottom: var(--page-bottom);
}

.page-home #main {
  padding-bottom: 0;
}

/* Bottom mega-nav — horizontal inset via nav-fixes width calc, not padding */
.lcs-nav,
.lcs-nav--4,
.lcs-nav--5 {
  bottom: max(0.75rem, var(--safe-bottom));
}

/* Shop / catalog top bar */
.shop-back-bar {
  padding-top: max(0.55rem, var(--safe-top));
  padding-left: max(clamp(1rem, 4vw, 3rem), var(--safe-left));
  padding-right: max(clamp(1rem, 4vw, 3rem), var(--safe-right));
}

.catalog-page .catalog-main {
  padding-bottom: var(--page-bottom);
}

.catalog-page .catalog-content {
  padding-bottom: 0;
}

.catalog-hero {
  padding-top: max(clamp(2.25rem, 6vh, 3.5rem), calc(1.25rem + var(--safe-top)));
  padding-left: max(clamp(1.25rem, 4vw, 3rem), var(--safe-left));
  padding-right: max(clamp(1.25rem, 4vw, 3rem), var(--safe-right));
}

.catalog-mobile-nav {
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* Mega-nav — lighter stroke + safe horizontal inset */
.lcs-nav__bar {
  border-width: 1px;
  box-shadow: 3px 3px 0 var(--black);
}

.lcs-nav__btn {
  border-right-width: 1px;
}

.lcs-nav__mega,
.lcs-nav__chat {
  border-width: 1px;
  box-shadow: 4px 4px 0 var(--black);
}

.lcs-nav__mega-link,
.lcs-nav__mega-link--btn {
  border: 0;
  box-shadow: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.catalog-page,
body.product-page {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.product-page .product-detail {
  padding-bottom: var(--page-bottom);
}

/* Product actions dock in .lcs-nav — see product-page-ui.css */