.sytec-mobile-bottom-nav {
position: fixed;
z-index: 1000;
right: 0;
bottom: 0;
left: 0;
display: none;
width: 100%;
min-height: calc(var(--sytec-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
border-top: var(--sytec-mobile-nav-border-width) solid var(--sytec-mobile-nav-border-color);
background: var(--sytec-mobile-nav-bg);
box-shadow: var(--sytec-mobile-nav-shadow);
color: var(--sytec-mobile-nav-color);
}
.sytec-mobile-bottom-nav__items {
display: grid;
width: min(100%, var(--sytec-mobile-nav-max-width));
min-height: var(--sytec-mobile-nav-height);
margin-inline: auto;
padding: var(--sytec-mobile-nav-padding);
grid-template-columns: repeat(var(--sytec-mobile-nav-columns), minmax(0, 1fr));
align-items: stretch;
}
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item {
position: relative;
display: flex;
min-width: 0;
min-height: 44px;
margin: 0;
padding: var(--sytec-mobile-nav-item-padding);
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--sytec-mobile-nav-gap);
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
color: var(--sytec-mobile-nav-color);
font: inherit;
line-height: 1;
text-align: center;
text-decoration: none;
transform: none;
transition: background-color var(--sytec-transition), color var(--sytec-transition);
}
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item:hover,
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item:focus-visible {
background: transparent;
box-shadow: none;
color: var(--sytec-mobile-nav-hover-color);
transform: none;
}
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item.is-active,
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item[aria-current="page"] {
color: var(--sytec-mobile-nav-active-color);
}
.sytec-mobile-bottom-nav--active-line .sytec-mobile-bottom-nav__item.is-active::before,
.sytec-mobile-bottom-nav--active-line .sytec-mobile-bottom-nav__item[aria-current="page"]::before {
position: absolute;
top: calc((var(--sytec-mobile-nav-padding) * -1) - var(--sytec-mobile-nav-border-width));
left: 22%;
width: 56%;
height: 3px;
border-radius: 0 0 3px 3px;
background: currentColor;
content: "";
}
.sytec-mobile-bottom-nav--active-background .sytec-mobile-bottom-nav__item.is-active,
.sytec-mobile-bottom-nav--active-background .sytec-mobile-bottom-nav__item[aria-current="page"] {
background: var(--sytec-mobile-nav-active-bg);
}
.sytec-mobile-bottom-nav__icon {
position: relative;
display: grid;
place-items: center;
}
.sytec-mobile-bottom-nav__icon .sytec-header-icon {
width: var(--sytec-mobile-nav-icon-size);
height: var(--sytec-mobile-nav-icon-size);
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.sytec-mobile-bottom-nav__label {
display: block;
max-width: 100%;
overflow: hidden;
font-size: var(--sytec-mobile-nav-label-size);
font-weight: var(--sytec-mobile-nav-label-weight);
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.sytec-mobile-bottom-nav .sytec-cart-link__count {
position: absolute;
top: var(--sytec-mobile-nav-badge-y);
right: calc(var(--sytec-mobile-nav-badge-x) * -1);
display: grid;
min-width: var(--sytec-mobile-nav-badge-size);
height: var(--sytec-mobile-nav-badge-size);
padding: 0 4px;
place-items: center;
border: 2px solid var(--sytec-mobile-nav-bg);
border-radius: 999px;
background: var(--sytec-mobile-nav-badge-bg);
color: var(--sytec-mobile-nav-badge-color);
font-size: max(9px, calc(var(--sytec-mobile-nav-badge-size) * .55));
font-weight: 700;
line-height: 1;
}
@media (max-width: 768px) {
.sytec-mobile-bottom-nav {
display: block;
}
body.sytec-mobile-bottom-nav-active .sytec-site {
padding-bottom: calc(var(--sytec-mobile-nav-reserved-height, 64px) + env(safe-area-inset-bottom, 0px));
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.sytec-mobile-bottom-nav--tablet {
display: block;
}
body.sytec-mobile-bottom-nav-active.sytec-mobile-bottom-nav-tablet .sytec-site {
padding-bottom: calc(var(--sytec-mobile-nav-reserved-height, 64px) + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.sytec-mobile-bottom-nav .sytec-mobile-bottom-nav__item {
transition: none;
}
}