/*
Theme Name: Tattoo Theme
Theme URI: http://example.com/tattoo-theme
Author: Kenny
Author URI: http://example.com
Description: тема для сайта
Version: 1.2
*/
/* Общие стили */
/* Исправленный CSS */

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #0A0A0A;
    background: #F4F4F4;
}

@media (max-width: 300px) {
    html, body {
      overflow-x: hidden;
    }
    }


.page-loader {
    position: relative;
    width: 2.5em;
    height: 2.5em;
    transform: rotate(165deg);
}

.page-loader:before, .page-loader:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.25em;
    transform: translate(-50%, -50%);
}

.page-loader:before {
    animation: before8 2s infinite;
}

.page-loader:after {
    animation: after6 2s infinite;
}

@keyframes before8 {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
}

@keyframes after6 {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
}

.page-loader {
    position: absolute;
    top: calc(50% - 1.25em);
    left: calc(50% - 1.25em);
}

.page-loader-wallpaper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-out;
}

.page-loader-wallpaper.loaded {
    opacity: 0;
    visibility: hidden;
}



.main-header {
    position: absolute;
    width: 100%;
    top: 0;
    
    /* Добавляем общие стили для всех элементов */
    --header-color: #0A0A0A;
    --icon-filter: none;
    color: var(--header-color);
    z-index: 1000;
    transition: transform 0.4s ease; /* Анимация для появления/скрытия */
    transform: translateY(0); /* Начальное положение */

}
.main-header-info{
    position: absolute;
    left: 5.20vw;
    right: 5.20vw; 
    top: 2.23958vw;
    /* Добавляем общие стили для всех элементов */
    --header-color: #0A0A0A;
    --icon-filter: none;
    color: var(--header-color); 
}
.main-header-white {
    --header-color: #FFFFFF;
    --icon-filter: invert(0); /* Инвертируем черные иконки в белые */
}

.main-header-black {
    --header-color: #0A0A0A;
    --icon-filter: invert(1); /* Оставляем оригинальный цвет */
}
.main-header-black .logo-container_academy.white {
    display: none;
}
.main-header-black .logo-container_academy.black {
    --icon-filter: invert(0);
}
.main-header-white .logo-container_academy.black {
    display: none;
}
/* Наследование цветов для текста */
.nav-link,
.cart-text {
    color: inherit ; /* Принудительное наследование */
}

/* Стили для SVG иконок */
.logo,
.cart-icon,
.menu-icon {
    filter: var(--icon-filter);
    transition: filter 0.3s ease;
}

/* Остальные стили остаются без изменений */
.header-container {
    display: flex;
    position: relative;
    height: 100%;
    z-index: 100;
}

.header-nav {
    display: flex;
    position: absolute;
    left: 0;
    right: auto;
    gap: 2.08333vw;
    padding: 0 !important;
}

.nav-link {
    font: 500 0.83vw / 110% 'Inter';
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    align-content: flex-end;
}
.nav-link:hover {
  text-decoration: none;
  opacity: 0.6;
  color: inherit;
}

.logo-container {
    position: absolute;
    width: 10.41vw;
    height: 1.145vw;
    left: 39.218vw;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container_tattou{
    position: absolute;
    width: 10.41667vw;
    height: 2.447916666666667vw;
    left: 39.218vw;
    top: 0.52083vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container_academy{
    position: absolute;
    width: 10.41667vw;
    height: 2.5vw;
    left: 39.218vw;
    top: 0.52083vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-container:hover,
.logo-container_tattou:hover,
.logo-container_academy:hover{
    opacity: 0.6;
}
.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-controls {
    display: flex;
    position: absolute;
    right: 0;
    align-items: center;
    gap: 2.08vw;
}

.cart-container {
    background: none;
	border: none;
    display: flex;
    align-items: center;
    gap: 0.26vw;
    color: inherit ;
}
.cart-container:hover {
    opacity: 0.6;
}
.cart-icon {
    display: none;
    width: 1.04vw;
    height: 1.04vw;
}

.cart-text {
    color: inherit ;
    font-family: "Inter";
font-size: 0.83333vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 0.91667vw */
letter-spacing: -0.01667vw;
    white-space: nowrap;
}
.cart-counter-all{
    color: inherit ;
/* Desktop/Elements/Link/Link Header */
font-family: "Inter";
font-size: 0.83333vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 0.91667vw */
letter-spacing: -0.01667vw;
}
.menu-button {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-button:hover {
    opacity: 0.6;
}
.menu-icon {
    width: 1.458vw;
    height: 1.458vw;
}
.is-scrolling-up {
position: fixed;
background-color: #0A0A0A;
height: 5.9375vw;
 transform: translateY(0); 
}
.main-header:not(.is-scrolling-up) {
    transform: translateY(-100%); /* Скрытие вверх */
}
/* Планшетная версия (1024px) */
@media (max-width: 1024px) {
    .is-scrolling-up {
position: fixed;
background-color: #0A0A0A;
height: 8.59375vw;
}
    .main-header {

    }
    .main-header-info{
        top: 3.22266vw;
        left: 40.234375vw;
        right: 1.953125vw;
}
    .header-container {
        left: 0;
    }

    .header-nav {
        display: none;
    }

    .logo-container {
        left: 0;
        width: 19.53125vw; /* Фиксированная ширина */
        height: 1.95vw; /* Фиксированная высота */
    }
    .logo-container_tattou{
        left: 0;
        width: 19.53125vw;
        height: 4.5898vw;
    }

    .logo-container_academy{
        left: 0;
        width: 19.53125vw;
        height: 4.88281vw;
    }

    .header-controls {
        gap: 1.95vw;
    }

    .cart-icon,
    .menu-icon {
        display: block;
        width: 2.73vw;
        height: 2.73vw;
    }

    .cart-text {
        display: none;
    }
    .cart-counter-all{
font-size: 1.5625vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 1.71875vw */
letter-spacing: -0.03125vw;
}
}

/* Мобильная версия (375px) */
@media (max-width: 375px) {
        .is-scrolling-up {
position: fixed;
background-color: #0A0A0A;
height: 17.33333vw;
}
    .main-header {
 
    }
    .main-header-info{
       top: 5.33vw;
        left: 2.66vw;
        right: 2.66vw;
}
    .logo-container {
        left: 0;
        width: 53.33vw; /* Фиксированная ширина */
        height: 5.33vw; /* Фиксированная высота */
        justify-content: flex-start;
    }
    .logo-container_tattou{
        width: 53.33333vw;
        height: 12.53333vw;
    }

    .logo-container_academy{
        width: 53.33333vw;
        height: 13.33333vw;
    }

    .header-controls {
        right: 0;
        /*width: 20.26vw;*/
        gap: 5.33vw;
    }

    .cart-icon,
    .menu-icon {
        width: 7.46vw;
        height: 7.46vw;
    }
        .cart-counter-all{
font-size: 4.26667vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 4.69333vw */
letter-spacing: -0.08533vw;
}
}

/* Адаптация для админ-панели WordPress */

body.admin-bar .main-header {
    top: 1.66667vw;
}


/* Базовый фон при прокрутке (is-scroling-up) */
.is-scrolling-up {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.85) 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px) saturate(1.2); /* Усиленный эффект стекла */
}

/* Фон для белого текста */
.main-header-white.is-scrolling-up {
    background: linear-gradient(180deg, rgba(40, 40, 40, 0.9) 0%, rgba(50, 40, 30, 0.85) 100%); /* Тёмный с бронзовым оттенком */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

/* Фон для чёрного текста */
.main-header-black.is-scrolling-up {
    background: linear-gradient(180deg, rgba(240, 240, 235, 0.9) 0%, rgba(230, 230, 220, 0.85) 100%); /* Кремовый с золотистым оттенком */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px) saturate(1.2);
}

/* Поддержка для браузеров без backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .is-scrolling-up {
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
    }
    .main-header-white.is-scrolling-up {
        background: linear-gradient(180deg, rgba(40, 40, 40, 0.95) 0%, rgba(50, 40, 30, 0.9) 100%);
    }
    .main-header-black.is-scrolling-up {
        background: linear-gradient(180deg, rgba(240, 240, 235, 0.95) 0%, rgba(230, 230, 220, 0.9) 100%);
    }
}

/* Для всех кнопок */
button {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    
  }
  
  /* Для кастомных кнопок */
  .add-to-cart,
  .read-more {
    transition: transform 0.1s ease;
  }
  
  /* Убираем ховер на тач-устройствах */
  @media (hover: none) and (pointer: coarse) {
    .add-to-cart:hover,
    .read-more:hover {
      transform: none !important;
      background-color: initial !important;
    }
  }
  
  /* Стили для активного состояния */
  button:active {
    transform: scale(0.98);
    box-shadow: none !important;
  }
  
  /* Для Safari */
  button::-moz-focus-inner {
    border: 0;
  }


/* Стили для сортировки */
.social-order-item {
    padding: 10px 15px;
    margin: 8px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: move;
    position: relative;
}

.social-order-item:after {
    content: "≡";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    opacity: 0.3;
}

.ui-state-highlight {
    background: #f0f0f0;
    border: 1px dashed #ccc;
    height: 40px;
}


.cart-modal_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: -webkit-fill-available;
  background-color: #0A0A0A;
  z-index: 1000;
    padding-top: 2.08333vw ;
    padding-bottom: 2.08333vw;
    padding-left: 5.20833vw;
    padding-right: 5.20833vw;
  display: none;
  overflow-y: auto;
  transform-origin: top center;
}
    .cart-modal_menu::-webkit-scrollbar {
        display: none;
    }
/* Анимация появления (сверху вниз) */
@keyframes modalSlideIn_menu {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Анимация закрытия (снизу вверх) */
@keyframes modalSlideOut_menu {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Классы для анимации */
.modal-slide-in_menu {
  animation: modalSlideIn_menu 0.4s ease-out forwards;
}

.modal-slide-out_menu {
  animation: modalSlideOut_menu 0.4s ease-out forwards;
}

.menu-modal-render {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 10vw; /* 2.08333vw */
    height: auto;
    position: relative;
    overflow-y: auto;
}
.menu-modal-render::-webkit-scrollbar {
  display: none;
}
.menu-modal-header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}

.cart-modal_menu .cart-modal-close {
    width: 2.5vw;
    height: 2.5vw;
    background: transparent url("./assets/images/X_tattoo.svg") center/1.25vw no-repeat;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    left: auto;
    right: 0;
    margin-left: auto;
    margin-right: 0;
}

.menu_logo {
  content: '';
width: 44.27083vw;
height: 4.85771vw;
flex-shrink: 0;
aspect-ratio: 850.00/93.27;
flex-shrink: 0;
  background: url('./assets/images/Logo_footer.svg') center/contain no-repeat;
}

.menu_modal_groub{
    display: flex;
    flex-direction: column;
    gap: 5.625vw;
    align-items: flex-start;
    margin-left: 0;
    margin-right: auto;
}

.header-menu-container{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    width: 44.16667vw;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4.16667vw;
}

.header-column{
    display: flex;
    flex-direction: column;
    gap: 1.04167vw;
}

.header-parent-title{
color: var(--White-White-Text, #FFF);
font-size: 2.08333vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 2.08333vw */
letter-spacing: -0.04167vw;
text-transform: uppercase;
}

.header-child-list{
    display: flex;
    gap: 0.52083vw;
    flex-direction: column;
}
.header-child-item{
    color: var(--White-White-Text, #FFF);
/* Desktop/Elements/Link/Link Footer */
font-family: "Inter";
font-size: 1.25vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 1.375vw */
letter-spacing: -0.0375vw;
text-transform: uppercase;
}

.social-icons-header{
  display: flex;
  gap: 0.52083vw;
  justify-content: flex-start;
}
.social-icon-header{
  width: 2.29167vw;
  height: 2.29167vw;
}

.social-icon-header img{
  width: 100%;
  height: 100%;
}

.header-parent-title:hover,  .header-child-item:hover{
    color:  #FFF;
  text-decoration: none;
}
/*header_image_menu.png*/
.header_image_menu{
  content: '';
  position: absolute;
  right: 0;
  top:  auto;
width: 29.16667vw;
height: 29.16667vw;
flex-shrink: 0;
  background: url('./assets/images/header_image_menu.png') center/contain no-repeat;
}
@media (max-width: 1024px) {

.cart-modal_menu {
    padding-top: 2.92969vw ;
    padding-bottom: 2.92969vw;
    padding-left: 1.95312vw;
    padding-right: 1.95312vw;
}

.menu-modal-render {
    gap: 10.50781vw; /* 3.90625vw */
}

.menu-modal-header {
    width: 93.06641vw;
    margin-left: 0;
    margin-right: auto;
}

.cart-modal_menu .cart-modal-close {
        width: 2.34vw;
        height: 2.34vw;
        background: transparent url("./assets/images/X_tattoo.svg") center/1.3vw no-repeat;
}

.menu_logo {
width: 52.73438vw;
height: 5.73203vw;
flex-shrink: 0;
aspect-ratio: 540.00/58.70;
}

.menu_modal_groub{
    gap: 3.90625vw;
}

.header-menu-container{
    width: 48.82812vw;
    gap: 8.30078vw;
}

.header-column{
    gap: 1.95312vw;
}

.header-parent-title{
font-size: 2.34375vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 2.34375vw */
letter-spacing: -0.04688vw;
text-transform: uppercase;
}

.header-child-list{
    gap: 1.46484vw;
}
.header-child-item{
font-size: 1.75781vw;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 1.75781vw */
letter-spacing: -0.03516vw;
text-transform: uppercase;
}

    .social-icons-header{
      display: flex;
      gap: 0.52083vw;
    }
    .social-icon-header{
      width: 3.90625vw;
      height: 3.90625vw;
    }

/*header_image_menu.png*/
.header_image_menu{
         bottom: auto;
width: 35.15625vw;
height: 35.15625vw;
flex-shrink: 0;
}


}


@media (max-width: 375px) {

.cart-modal_menu {
    padding-top: 5.33333vw ;
    padding-bottom: 8vw;
    padding-left: 2.66667vw;
    padding-right: 2.66667vw;
    overflow-x: hidden;
}

.menu-modal-render {
    gap: 8.53333vw; /* 10.66667vw */
}

.menu-modal-header {
    width: 94.66667vw;
    margin-left: 0;
    margin-right: auto;
}

.cart-modal_menu .cart-modal-close {
        width: 6.4vw;
        height: 6.4vw;
        background: transparent url("./assets/images/X_tattoo.svg") center/3.4vw no-repeat;
}

.menu_logo {
width: 53.33333vw;
height: 5.86667vw;
flex-shrink: 0;
}

.menu_modal_groub{
    gap: 104vw;
}

.header-menu-container{
    width: 91.46667vw;
    gap: 5.33333vw;
}

.header-column{
    gap: 5.33333vw;
}

.header-parent-title{
font-size: 5.33333vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 5.33333vw */
letter-spacing: -0.10667vw;
text-transform: uppercase;
}

.header-child-list{
    gap: 4vw;
}
.header-child-item{
font-size: 3.73333vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 4.10667vw */
letter-spacing: -0.07467vw;
text-transform: uppercase;
}

    .social-icons-header{
      display: flex;
      gap: 2.13333vw;
    }
    .social-icon-header{
      width: 10.66667vw;
      height: 10.66667vw;
    }

/*header_image_menu.png*/
.header_image_menu{
  bottom: 18.66667vw;
width: 94.66667vw;
height: 88vw;
flex-shrink: 0;
}


}