/* блок со стилями для #wc_tiktok */
.wrap-to-scroll-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap-to-scroll-container {
  padding-top: 64px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.admin-bar .wrap-to-scroll-container {
  top: 32px;
}

.scroll-container {
  overflow: hidden;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch; /* Для плавности на iOS */
  background: #161616;
  background: linear-gradient(to right, #16222a, #3a6073);

  /* Вот эти строки добавь, чтобы скрыть скроллбар */
  -ms-overflow-style: none;  /* Для IE и Edge */
  scrollbar-width: none;  /* Для Firefox */
}

/* А вот это для WebKit-браузеров (Chrome, Safari, Opera) */
.scroll-container::-webkit-scrollbar {
  display: none;
}

.gradient-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  background: linear-gradient(to right, #16222a, #3a6073);
}

#bg1 {
  opacity: 1;
}
#bg2 {
  opacity: 0;
}
#bg3 {
  opacity: 0;
}

.product-screen {
  height: 90%;
  overflow: hidden;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 50vh auto;
  max-width: 320px;
  border-radius: 20px;
  background-color: #43434326;
  box-shadow: 0 0 50px 30px rgba(0, 0, 0, 0.288);
  border: solid 1px rgb(69 69 69 / 12%);
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}

.product-screen img {
  position: absolute;
  border: solid 1px transparent;
  border-radius: 19px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-screen .title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 2em;
  color: #ffffffe3;
  padding: 10px;
  padding-bottom: 2em;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.product-screen .price {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ff479d;
  padding: 13px;
  padding-top: 18em;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.918) 0%,
    rgba(0, 0, 0, 0.568) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.product-screen .description {
  position: absolute;
  bottom: 2rem;
  right: 0;
  left: 0;
  font-size: 0.9rem;
  color: #ffffff;
  text-shadow: 0 0 8px 2px black;
  padding: 30px 10px;
  padding-top: 2em;
}

.product-screen button,
.product-screen a {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1rem;
  font-weight: 600;
  background: #172df0;
  color: #ffffff;
  margin: 10px;
  padding: 5px 10px;
  border-radius: 20px;
  border: none;
}

/* блок для "темного" хедера */
.site-header,
.genesis-reforge-menus {
  --highlight-color: #e7e7e7bd;
  --border-color: #ffffff17;
  --bg-blur: 25px;
  --bg-color: #2c2c2c52;
  --bg-color-hover: #363636a6;
  --search-field-bg-color: #5d5d5d4d;
  --search-field-bg-color-focus: #97979780;
  --accent-color: #efefef;
  --accent-bg-color: #0a395fad;
}


#customlogo div {
  background: var(--bg-color);
  border: solid 1px var(--border-color);
  color: var(--highlight-color);
}

.site-header {
  backdrop-filter: blur(var(--bg-blur));
  background: var(--bg-color);
  border-bottom: solid 1px var(--border-color);
}

.site-header:hover {
  background: var(--bg-color-hover);
}

#woocommerce-dynamic-search-button, 
#woocommerce-header-account-button, 
#woocommerce-header-cart-button {
  color: var(--highlight-color);
}

.site-title a,
.site-title a:hover {
  color: var(--highlight-color);
}

#woocommerce-product-search-field {
  background: var(--search-field-bg-color);
  border: 1px solid var(--border-color);
  color: var(--highlight-color);
}

#woocommerce-product-search-field:focus {
  background: var(--search-field-bg-color-focus);
  border: 1px solid var(--border-color);
  color: var(--highlight-color);
  box-shadow: none;
  outline: none;
}

input[type="search"]::placeholder {
  color: var(--highlight-color);
}

.genesis-reforge-menus {
  background: var(--bg-color);
  backdrop-filter: blur(var(--bg-blur));
  border-right: solid 1px var(--border-color);
}

.genesis-reforge-menus nav ul a, 
.genesis-reforge-menus nav.woocommerce-MyAccount-navigation ul a {
  background: var(--bg-color);
  color: var(--highlight-color);
}

.genesis-reforge-menus nav ul a:focus, 
.genesis-reforge-menus nav ul a:hover, 
.genesis-reforge-menus nav ul li a:not(:has(*)):not([class]):not([role]):hover, 
.genesis-reforge-menus nav ul .current-menu-item > a, 
.genesis-reforge-menus nav ul li.is-active > a, 
.genesis-reforge-menus nav ul .sub-menu .current-menu-item > a:focus, 
.genesis-reforge-menus nav ul .sub-menu .current-menu-item > a:hover {
  background: var(--accent-bg-color);
  color: var(--accent-color);
}