/* ─── Mobile Bottom Navigation ───────────────────────────────────────────── */
:root {
  --mobile-nav-h: 64px;
}

.mobile-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 80;
  width: min(440px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
}

.mobile-bottom-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: var(--mobile-nav-h);
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(242, 202, 80, 0.24);
  background: linear-gradient(
      180deg,
      rgba(36, 35, 33, 0.96),
      rgba(14, 14, 14, 0.97)
    );
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 248, 224, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

/* Individual icon buttons / links */
.mobile-bottom-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-gold);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__item .material-symbols-outlined {
  font-size: 25px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transition: font-variation-settings var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus-visible {
  color: var(--c-gold);
  outline: 0;
  transform: translateY(-1px);
}

/* Icon buttons stay flat — never fill on hover / focus / tap. The center cart
   disc keeps its gold because it is excluded here. */
.mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary),
.mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary):hover,
.mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary):focus,
.mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary):focus-visible,
.mobile-bottom-nav__item:not(.mobile-bottom-nav__item--primary):active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Active page indicator */
.mobile-bottom-nav__item.is-active {
  color: var(--c-gold);
}

.mobile-bottom-nav__item.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.mobile-bottom-nav__item.is-active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold);
  transform: translateX(-50%);
}

/* Filled heart when the wishlist holds items */
.mobile-bottom-nav__item--wishlist.is-filled .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Center primary action (cart) — elevated gold disc */
.mobile-bottom-nav__item--primary {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  margin-top: -24px;
  border-radius: 50%;
  color: #15120a;
  background: linear-gradient(135deg, #f6d469 0%, #d4af37 100%);
  border: 4px solid var(--c-bg-dark);
  box-shadow:
    0 10px 24px rgba(212, 175, 55, 0.42),
    0 0 0 1px rgba(242, 202, 80, 0.4);
}

.mobile-bottom-nav__item--primary .material-symbols-outlined {
  font-size: 26px;
  color: #15120a;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.mobile-bottom-nav__item--primary:hover,
.mobile-bottom-nav__item--primary:focus-visible {
  color: #15120a;
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px rgba(212, 175, 55, 0.55),
    0 0 0 1px rgba(242, 202, 80, 0.55);
}

.mobile-bottom-nav__item--primary.is-active::after {
  display: none;
}

/* Count badges */
.mobile-bottom-nav__badge {
  position: absolute;
  top: 4px;
  right: 50%;
  margin-right: -18px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-gold);
  color: #15120a;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

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

/* The cart badge sits on the elevated disc, so anchor it to the disc edge. */
.mobile-bottom-nav__item--primary .mobile-bottom-nav__badge {
  top: -2px;
  right: -2px;
  margin-right: 0;
  border: 2px solid var(--c-bg-dark);
  height: 18px;
  line-height: 14px;
}

/* ─── Show the bar on mobile / tablet and trim the header ─────────────────── */
@media (max-width: 1023px) {
  .mobile-bottom-nav {
    display: block;
  }

  /* Reserve space so the floating bar never hides footer content. */
  body {
    padding-bottom: calc(
      var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 44px
    );
  }

  /* These actions now live in the bottom bar — keep the header clean. */
  .site-header__actions .header-action--search,
  .site-header__actions .header-action--account,
  .site-header__actions .header-account-menu,
  .site-header__actions .header-action--wishlist,
  .site-header__actions .header-action--cart {
    display: none !important;
  }

  /* Lift Astra's scroll-to-top button above the floating bar so they don't collide. */
  #ast-scroll-top {
    bottom: calc(
      var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 30px
    ) !important;
    z-index: 79;
  }
}

/* Small phones — tighten the bar a touch. */
@media (max-width: 360px) {
  .mobile-bottom-nav {
    width: calc(100vw - 20px);
  }

  .mobile-bottom-nav__inner {
    padding: 0 12px;
  }

  .mobile-bottom-nav__item .material-symbols-outlined {
    font-size: 23px;
  }
}

/* ─── RTL ─────────────────────────────────────────────────────────────────── */
html[dir="rtl"] .mobile-bottom-nav__badge {
  right: auto;
  left: 50%;
  margin-right: 0;
  margin-left: -18px;
}

html[dir="rtl"] .mobile-bottom-nav__item--primary .mobile-bottom-nav__badge {
  left: -2px;
  right: auto;
  margin-left: 0;
}