/**
 * Common Styles
 * 
 * Shared styles for the entire theme, including typography, colors, and global resets.
 */

/* === RESET / NORMALIZE FOR ELEMENTOR === */

/* Box sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Убираем стандартные отступы */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
li,
figure,
blockquote,
dl, dd {
	margin: 0;
	padding: 0;
}

/* Базовые настройки */
html {
	scroll-behavior: smooth;
}

body {
	min-height: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Ссылки */
a {
	text-decoration: none;
	color: inherit;
}

/* Списки */
ul,
ol {
/* 	list-style: none; */
}

/* ----- sticky header ----- */
header .elementor-sticky--effects{
    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.08);
}

/* -----------SEARCH------------- */
.header-search button{
    cursor: pointer;
}
.header-search.e-focus button{
    border-color: #ee922b !important;
    transition: border-color 0.3s !important;
}
.header-search search button{
    border-color: #f4f4f4 !important;
    transition: border-color 0s !important;
}
.header-search.e-focus input{
    transition: border-color 0.3s !important;
}

@media (max-width: 767px){
    .header-search .e-search-input-wrapper{
        min-width: 175px !important;
    }
    .header-search {
        max-width: 50% !important;
    }
}

/* ------------ WPML ------------ */
.language-switcher .wpml-ls-flag{
    height: 16px;
    width: 16px;
    border-radius: 20px;
    object-fit: cover;
}
.language-switcher{
    text-transform: uppercase;
}
.language-switcher a{
    padding-right: 0;
}
.language-switcher a:hover, .language-switcher .sub-menu li a:hover{
    background: #f4f4f4 !important;
}
.language-switcher a.has-submenu .sub-arrow svg{
    display: none;
}
.language-switcher a.has-submenu{
    position: relative;
}
.language-switcher a.has-submenu + .sub-menu{
    min-width: 0 !important;
    right: 0;
    left: auto !important;
}
.language-switcher a.has-submenu .sub-arrow {
    /* Скрываем стандартную стрелку, если она там есть (текст или иконка темы) */
    display: inline-block;
    width: 9px; /* Укажите ширину вашей SVG */
    height: 16px; /* Укажите высоту вашей SVG */
    
    /* Позиционирование */
    position: absolute;
    right: 5px; /* Отступ от правого края */
    top: 70%;
    transform: translateY(-50%);
    
    /* Стилизация через маску (предпочтительно, так как цвет можно менять в CSS) */
    background-color: currentColor; /* Цвет как у текста */
    mask-image: url("/wp-content/uploads/2026/04/sub-arrow.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/wp-content/uploads/2026/04/sub-arrow.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    /* Плавная анимация */
    transition: transform 0.3s ease;
}

/* Если маска не нужна и нужен именно оригинальный цвет SVG через content: */
.language-switcher a.has-submenu .sub-arrow::after {
    content: url("/wp-content/uploads/2026/04/sub-arrow.svg");
    display: block;
    line-height: 0; /* Убираем лишние отступы */
}

/* Поворот при открытии */
.language-switcher a.has-submenu.highlighted .sub-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ---------- Catalog button toggle(header) -------- */
.catalog-toggle .e-n-menu-title{
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 8px !important;
    cursor: pointer;
}
.catalog-toggle .e-n-menu-title button{
    margin: 0 !important;
}
.catalog-toggle .e-n-menu-title-text {
    cursor: pointer !important;
}

@media (min-width: 1024px){
    .catalog-toggle .e-n-menu-content.e-active div.e-active{
        left: 167px !important;
    }
}
@media (min-width: 1440px){
    .catalog-toggle .e-n-menu-content.e-active div.e-active{
         left: calc((100% - 1440px) / 2 + 167px) !important;
    }
}


/* ----- Catalog menu styles ----- */
.catalog-menu .products a{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    gap: 12px;
    border-radius: 8px;
    transition: background 0.3s
}
.catalog-menu .products a:hover{
    background: #F4F4F4;
    transition: background 0.3s;
}
.catalog-menu ul.products li.product a img{
    width: 46px;
    height: 46px;
    margin: 0;
}
.catalog-menu .woocommerce-loop-category__title .count{
    display: none;
}

/*------- footer styles -------*/
@media (max-width: 767px){
    .footer-links nav ul .menu-item a{
        justify-content: center !important;
    }
}

/* ----- subscribe form ----- */
.subscribe-form{
    max-width: 420px !important;
}
.subscribe-form .elementor-field-type-submit{
    position: absolute;
    top: 3px;
    right: 3px;
    width: auto;
}
.subscribe-form button{
    cursor: pointer;
}

/* ----- contact form ----- */
.contact-form input{
    padding: 16px 12px;
}
.contact-form textarea{
    padding: 16px 12px;
}
.contact-form input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 4px;
}
.contact-form input[type="checkbox"]:checked{
    
    accent-color: #EE922B;
}
.contact-form .elementor-field-type-acceptance .elementor-field-option{
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.contact-form button{
    cursor: pointer;
}
@media (min-width: 769px){
    .contact-form .elementor-field-group-name, .contact-form .elementor-field-group-email, .contact-form .elementor-field-group-reg, .contact-form .elementor-field-group-phone{
        width: 50%;
    }
}



/* ----- breadcrumbs dot ----- */
.tespi-breadcrumb-dot{
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1E1E1E;
    vertical-align: middle;
    margin: 0 10px;
}

.woocommerce-breadcrumb{
    font-family: "Google Sans", sans-serif;
}

.woocommerce-breadcrumb a{
    transition: color 0.3s;
}

.woocommerce-breadcrumb a:hover{
    color: #EE922B;
}