:root {
    --bg-color-wh: white;
	--bg-color-bk: black;
    --color-txt-bk: black;
    --color-txt-wh: white;
    --color-btn: #365B3D;
    --color-btn-hover: #436e4b;
}

html {
	scroll-behavior: smooth;
}
body {
	background: var(--bg-color-wh);
    color: var(--color-txt-bk);
    font-size: 25px;
    height: 100%;
    width: 100%;
	line-height: 1.5;
}

p {
	line-height: 1.5;
}

a {
    text-decoration: none;
    color: var(--color-txt-bk);
}

.container, #primary {
    max-width: 1440px;
    margin: 0 auto;
	width: 90%;
}

.section-30 {
    padding: 30px 0;
}

		.section-50 {
			padding: 50px 0;
		}

        .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
		.gap-10 {
			gap: 10px;
		}
		.gap-20 {
			gap: 20px;
		}
		.gap-50 {
			gap: 50px;
		}
.padding-20 {
	padding: 20px;
}

        .column {
            flex-direction: column;
            padding: 20px;
        }

        .grid {
            display: grid;
        }

		.site-block {
			width: 100%;
		}

.no-scroll {
    overflow: hidden;
}
.btn, .button, .wc-block-cart__submit, .filters-toggle {
  padding: 8px 16px;
  background: linear-gradient(to right, #365B3D 0%, #4A7A52 100%);
  color: var(--color-txt-wh);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms ease-in-out;
}

.btn:hover, .button:hover, .wc-block-cart__submit:hover {
  background: linear-gradient(to right, #2E4D34 0%, #426B49 100%);
}

.wc-block-components-button__text {
	 color: var(--color-txt-wh);
}

.mobile-only {
  opacity: 0;
}
.filters-content {
    transition: opacity 0.3s cubic-bezier(.24,.24,.74,.75);
}

.home-title {
    font-size: 2em;
    text-align: center;
    padding: 20px 20px 50px;
}
/* ==================================================================================================== */

.logo-block, .social-icons {
	z-index: 12;
}
.logo-link {
	display: flex;
	gap: 10px;
	align-items: center;
}
.menu-list {
	font-size: 0.8em;
	display: flex;
	gap: 50px;
}
.menu-list li {
  position: relative;
  overflow: hidden;
}

.menu-list li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.menu-list li:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.social-icons {
	display: flex;
	gap: 10px;
}

/* ==================================================================================================== */
.footer-block {
	display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

/* ==================================================================================================== */

.burger-menu {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 15px;
        z-index: 1001;
        position: relative;
    }

    .burger-line {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--bg-color-bk);
        margin: 5px 0;
        transition: all 0.3s ease;
    }


/* ==================================================================================================== */

        .name-ru {
            font-size: 5em;
            font-family: 'Playfair Display', serif;
            color: var(--color-txt-bk);
            letter-spacing: 0.1em;
        }

        .logo-img, .icons {
            max-height: 30px;
            width: auto;
        }
        .nav-link {
            margin-left: 20px;
            text-decoration: none;
            color: #333;
        }
.hero-txt {
	    height: 100%;
    margin: auto 0;
	    align-items: stretch;
}
.hero-head {
	width: 100%;
}
        .hero-head h1 {
            font-size: 2em;
        }
.hero-head h2 {
	font-size: 1.5em;
	text-align: right;
}
.hero-info {
	    justify-items: start;
    align-content: space-between;
}

.hero-img {
	max-width: 600px;
}

.quote {
	padding: 20px 0;
}

/* ============================================================================================= */
.main-hero {
      grid-template-columns: 1fr 1fr;
}

.hero-text h1 {
  font-size: 1.5em;
}

.hero-featured {
    grid-row: span 2;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-featured-img img {
	max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 10px;
}
.hero-featured-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-featured-info {
    writing-mode: sideways-lr;
}
.hero-featured-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
.hero-big {
	display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-thumbs {
  display: flex;
  gap: 1em;
  font-size: 0.7em;
}
.hero-thumb {
	display: grid;
	gap: 10px;
	width: auto;
	max-width: 200px;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.hero-thumb:hover {
  transform: scale(1.05);
}
.hero-thumb img {
   width: 100%;
  object-fit: contain;
}

.product-info {
	display: flex;
	gap: 10px;
}

/* Эффект плавного перехода */

#featured-product {
  transition: all 0.3s ease-in-out;
}

#featured-product.transitioning .hero-featured-img img {
  opacity: 0;
  transform: scale(0.95);
}

#featured-product.transitioning .hero-featured-info h3,
#featured-product.transitioning .product-price {
  opacity: 0;
  transform: translateY(10px);
}

.hero-featured-img img,
.hero-featured-info h3,
.product-price {
  transition: all 0.3s ease-in-out;
}

.hero-featured-img img {
  opacity: 1;
  transform: scale(1);
}

.hero-featured-info h3,
.product-price {
  opacity: 1;
  transform: translateY(0);
}


.hero-thumb {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.hero-thumb:hover {
  transform: scale(1.05);
}

/* ============================================================================================= */

.home-about {
	display: flex;
    gap: 50px;
	align-items: center;
}
.home-about-txt {
	font-size: 1em;
}
.home-about-img img {
	max-height: 400px;
    height: auto;
    width: auto;
	border-radius: 20px;
}
.home-about-txt p {
	padding: 10px 0;
}

/* ============================================================================================= */
.shop-page .shop-layout {
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
	gap: 50px;
}
.shop-page .shop-sidebar p {
	padding: 20px 0;
}
.shop-page .widget_wpc_filters_widget {
	padding: 50px 0;
}
.shop-page .shop-products {
	display: grid;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.shop-page .woocommerce-result-count {
	font-size: 0.9em;
}
.shop-page .woocommerce-ordering {
	 text-align: end;
}
.shop-page .products,
.related > .products {
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	padding: 50px 0;
}

.related {
	padding: 50px 0;
}
.shop-page .product {
	padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}
.shop-page .product h2 {
	font-size: 0.8em;
}
.shop-page .woocommerce-LoopProduct-link {
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 10px;
}

.shop-page .product:hover {
	 box-shadow: 0 2px 8px rgb(54 91 61 / 20%);
}
.shop-page .price {
	color: var(--color-btn);
    width: 100%;
    text-align: start;
    font-size: 0.8em;
    font-weight: 600;
	padding: 0 0 10px 0;
}
.shop-page .woocommerce-notices-wrapper,
.shop-page .wpc-custom-selected-terms {
	display: none;
}
/* ============================================================================================= */

.contacts-section a {
	display: flex;
    gap: 0.5em;
    align-items: center;
}

.contacts-block {
	display: flex;
    justify-content: space-between;
    gap: 20px;
}

.contacts-block .social-icons {
	margin: 10px 0;
}

.phone-head {
	display: flex;
	gap: 10px;
}

.contact-card {
	border-radius: 20px;
    overflow: hidden;
}

/* ============================================================================================= */

/* -------------СЛАЙДЕР ОТЗЫВОВ--------------- */

/* Стили для слайдера */
.slider-reviews {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Вы можете изменить ширину слайдера */
}

.slider-reviews-track {
    display: flex;
    will-change: transform;
    transition: none;
    /* Отключаем анимации */
}

.slider-reviews-item {
    flex-shrink: 0;
    width: max-content;
    /* Вы можете изменить ширину здесь */
    margin: 15px;
    border-radius: 10px;
    transition: transform 0.5s, box-shadow 0.5s;
    text-align: center;
}


.slider-reviews-avatar {
    width: 300px;
    height: auto;
    margin: 10px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.slider-reviews-item:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.slider-reviews-text {
    font-size: 17px;
}

/* Стили для модального окна */
.reviews-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

.reviews-modal-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.reviews-modal-close {
    position: absolute;
    top: -3rem;
    right: -3rem;
    font-size: 3rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1010;
}

.reviews-modal-prev,
.reviews-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 56px;
    background: none;
    color: rgba(255, 255, 255, 0.678);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1010;
}

.reviews-modal-prev:hover,
.reviews-modal-next:hover {
    color: rgba(172, 172, 172, 0.678);
}

.reviews-modal-prev {
    left: -3rem;
}

.reviews-modal-next {
    right: -3rem;
}

.reviews-modal-slide img {

	max-height: 70vh;
    width: auto;
    height: 100%;
    border-radius: 10px;
}

.wp-block-list {
    list-style-type: disc;
}



/* ============================================================================================= */
.copyright {
	background: black;
    color: white;
}
.copyright p {
	font-size: 0.6em;
	padding: 20px;
}
.copy-link {
	color: #82dc92;
}
.copy-link:hover {
	color: #8cec9d;
}

/* ============================================================================================= */





@media (max-width: 1300px) {
	.section-50 {
		padding: 20px 0;
	}
	.main-hero {
    grid-template-columns: 1fr;
	}
	.hero-text {
		text-align: center;
	}
	.hero-featured {
		margin-top: -10%;
		z-index: -1;
	}
	.hero-thumbs {
        justify-content: center;
    }
	.hero-big {
    flex-direction: column;
	align-items: center;
	}
	.hero-featured-info {
    writing-mode: horizontal-tb;
		text-align: center;
	}
	.burger-menu {
            display: block;
        }

        .header .menu-container {
            position: fixed;
            top: -100vh;
            left: 0;
            width: 100%;
            height: 100vh;
            background: var(--bg-color-wh);
            z-index: 11;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: top 0.3s cubic-bezier(.24,.24,.74,.75);
        }

       .header .menu-list {
            flex-direction: column;
            align-items: center;
            gap: 30px !important;
            width: 100%;
            text-align: center;
        }

        /* Состояние открытого меню */
       .header .menu-container.active {
            top: 0;
        }

        /* Анимация бургера */
        .burger-menu.active .burger-line:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .burger-menu.active .burger-line:nth-child(2) {
            opacity: 0;
        }

        .burger-menu.active .burger-line:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }
		.slider-reviews-avatar {
		width: 200px;
	}
}



@media (max-width: 900px) {
	.home-about {
		flex-direction: column;
	}
	.home-about-img img {
    max-height: 90vw;
	}
	.footer .menu-list {
		gap: 20px;
	}
}
@media (max-width: 768px) {
	body {
		font-size: 20px;
	}
	.hero-thumb {
		max-width: 100px;
	}
}
@media (max-width: 600px) {
		body {
		font-size: 16px;
	}
		.name-ru {
    font-size: 4em;
	}
		.hero-thumb {
		max-width: 70px;
	}
		.shop-page .shop-products {
		 display: flex;
		 flex-direction: column;
		 align-items: flex-start;
	}
		.shop-page .products {
		 align-self: center;
	}
	.shop-page .shop-layout {
		flex-direction: column;
	}
	
	
	.mobile-only {
    opacity: 1;
  	}
  
  .desctop-only .filters-content {
    opacity: 0;
	  height: 0;
  }
  
  .desctop-only .filters-content.active {
    opacity: 1;
	  height: 100%;
  }
	
	.contacts-block {
		flex-wrap: wrap;
	}
	
	.footer .menu-list {
		flex-direction: column;
		gap: 10px;
	}
	
}
@media (max-width: 467px) {
.shop-page .shop-layout {
    gap: 20px;
	}
	.hero-thumb {
        max-width: 60px;
    }
}
@media (max-width: 400px) {
	.shop-page .size-woocommerce_thumbnail {

	}
		.shop-page .products {
	    grid-template-columns: 60vw;
	}
		.hero-thumbs {
		flex-wrap: wrap;
	}
}
@media (max-width: 340px) {
	.header .social-icons {
		display: none;
	}
	    .name-ru {
        font-size: 3em;
    }
	.footer-block {
		flex-direction: column;
	}
	.footer .menu-list {
		text-align: center;
	}
}
@media (max-width: 300px) {
	body {
		font-size: 14px;
	}
}