body {
--tgs-main-color: var(--ms-main-color);
--tgs-light: var(--ms-btn-ghost);
--skeleton-gradient: linear-gradient(90deg,#dce0e5,#f0f2f4,#dce0e5);
--ms-secondary: var(--ms-muted); 
}

html.dark body {
--skeleton-gradient: linear-gradient(90deg,#101e33,#1f2e44,#101e33);
}

#navbar {
 position: fixed;
 z-index: 9999;
 bottom: 0 !important;
 left: 0;
 right: 0;
 width: auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 70px;
 max-width: 600px;
 margin: auto;
 padding: 16px;
 transition: bottom .3s;
 background: var(--skeleton-gradient);
 border-radius: 0;
}

#navbar .cart-button {
 position: relative;
}
 
#navbar .counter {
 position: absolute;
 top: 6px;
 right: 14px;
 width: 18px;
 height: 18px;
 background-color: red;
 border-radius: 50%;
 display: flex;
 color: #fff;
 justify-content: center;
 align-items: center;
 z-index: 9;
 font-size: 9px;
 user-select: none;
 pointer-events: none;
}

#navbar .counter:after {
 color: #fff;
 font-size: 9px;
 pointer-events: none;
}

#navbar button {
 background: none;
 border: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 70px;
 height: 70px;
 flex-direction: column;
 gap: 0;
}

#navbar .navbar-button-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }

#navbar .navbar-label {
 font-size: 10px;
 margin-top: 6px;
 color: var(--ms-secondary);
 }

#navbar button svg {
 width: 22px;
 height: 22px;
 fill: var(--ms-main-color);
}

#navbar .visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
 }

.tooltip {
 position: fixed;
 background: var(--skeleton-gradient);
 border-radius: 8px;
 color: inherit;
 padding: 6px 9px;
 font-size: 12px;
 z-index: 9999;
 pointer-events: none;
 white-space: nowrap;
 opacity: 0;
 transform: translateY(8px);
 transition: opacity 0.3s ease-out, transform 0.3s ease-out;
 will-change: opacity, transform;
}

.tooltip.show {
 opacity: 1;
 transform: translateY(0);
}

.product-modal-popup .swal2-footer {
 padding: 6px 12px 76px !important;
 border: 0;
 margin: 0;
 position: fixed;
 top: calc(100svh - 132px) !important;
}

.shop-mode #toggle-button,
.sort__button,
.support-button {
 display: none !important;
}

.swal2-product-modal-container, .swal2-page-modal-container, .products {
 padding-bottom: 120px !important;
}

.scroll-button {
 --btn-size: 40px !important;
 bottom: 80px !important;
}

.control-panel {
 display: none;
 position: relative;
 background-color: transparent;
 border-radius: 0;
 padding: 0;
 box-shadow: none;
 flex-direction: row-reverse;
 --ms-control-size: 0;
}

.control-panel .search {
 max-height: 0;
 overflow: hidden;
 pointer-events: none;
 display: flex;
 align-items: center;
 margin-right: 0;
 opacity: 0;
 visibility: hidden;
 transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s;
}

.control-panel .search.active {
 max-height: none;
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 box-shadow: none;
}

.closesearch {
 position: absolute;
 right: 12px;
 height: 40px;
 width: 40px;
 align-items: center;
 justify-content: center;
 z-index: 999;
 cursor: pointer;
 background-color: var(--ms-surface);
 border-radius: 50%;
}

.control-panel .search__input {
 border-radius: var(--ms-main-radius);
 background-color: var(--ms-surface);
 border: .8px solid var(--ms-main-color);
 height: 46px;
 font-size: 14px;
 padding: 6px 0 6px 40px;
}

.menu, .sort {
 margin-left: 0;
 background: transparent;
 background-color: transparent;
 border-radius: 0;
 box-shadow: none;
}

.menu__button, .sort__button {
 box-shadow: none;
}

.footer.shop-footer {
 margin-top: -60px;
 padding-bottom: 60px;
}

.menu__overlay {
 top: auto !important;
}

.scroll-button svg {
 fill: #fff !important;
}

.cart-bar {
 opacity: 0 !important;
 left: 50% !important;
 transform: translateX(-50%) !important;
}

.cart-bar__badge {
 display: none;
 }