/*
Theme Name: L-green
Theme URI: https://l-green.ru
Author: Axel1155
Author URI: https://l-green.ru
Description: L-green store
Version: 1.0
Text Domain: l-green
*/
*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,select,textarea{font:inherit;border:none;background:0 0;outline:0}.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{transform:translate3d(0,0,0)}.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{float:left;height:100%;min-height:1px;display:none}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-ExtraLight.woff2) format("woff2"),url(assets/fonts/VelaSans-ExtraLight.woff) format("woff");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-Light.woff2) format("woff2"),url(assets/fonts/VelaSans-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-Regular.woff2) format("woff2"),url(assets/fonts/VelaSans-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-Medium.woff2) format("woff2"),url(assets/fonts/VelaSans-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-SemiBold.woff2) format("woff2"),url(assets/fonts/VelaSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-Bold.woff2) format("woff2"),url(assets/fonts/VelaSans-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Vela Sans";src:url(assets/fonts/VelaSans-ExtraBold.woff2) format("woff2"),url(assets/fonts/VelaSans-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}.slick-arrow{width:35px;height:35px;font-size:24px;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);font-size:0;cursor:pointer;flex-shrink:0}.slick-arrow span{font-size:24px}.slick-arrow::before{content:"arrow_forward_ios";font-family:"Material Icons";font-size:24px;color:#fff}.slick-arrow.slick-prev{transform:rotate(-180deg)}@media (max-width:1400px){.slick-arrow{width:40px;height:40px}}@media (max-width:767px){.slick-arrow{width:32px;height:32px}.slick-arrow::before{font-size:16px}}.h1{font-weight:800;font-size:32px;line-height:1.2}@media (max-width:1400px){.h1{font-size:28px}}@media (max-width:1279px){.h1{font-size:24px}}@media (max-width:991px){.h1{font-size:20px}}.h2{font-weight:800;font-size:24px;line-height:1.2}@media (max-width:1400px){.h2{font-size:22px}}@media (max-width:1279px){.h2{font-size:20px}}@media (max-width:991px){.h2{font-size:16px}}.h3{font-weight:800;font-size:19px;line-height:1.2}@media (max-width:1400px){.h3{font-size:17px}}@media (max-width:1279px){.h3{font-size:15px}}@media (max-width:991px){.h3{font-size:14px}}.h4{font-weight:800;line-height:1.2;font-size:16px}@media (max-width:1400px){.h4{font-size:14px}}@media (max-width:991px){.h4{font-size:12px}}.text-center{text-align:center}.font-weight-extra-bold{font-weight:800}.font-weight-bold{font-weight:700}.font-weight-semi-bold{font-weight:600}.font-weight-medium{font-weight:500}.font-weight-normal{font-weight:400}.font-weight-light{font-weight:300}.logo{display:flex;align-items:center;gap:20px;font-size:19px;line-height:24px;color:#36895f}@media (max-width:1400px){.logo{font-size:16px;line-height:20px}.logo img{width:48px}}.logo-text{display:flex;flex-direction:column}@media (max-width:767px){.logo-text{display:none}}.logo b{font-weight:700}.btn{height:48px;display:flex;align-items:center;padding:0 30px;justify-content:center;border-radius:40px;font-size:15px;cursor:pointer;font-weight:800;gap:8px;transition:.3s}@media (max-width:1400px){.btn{height:40px;padding:0 20px;font-size:14px}}@media (max-width:991px){.btn{height:32px;padding:0 14px;font-size:12px}}.btn--primary{color:#fff;border:1px solid #36895f;background:#36895f}.btn--primary:hover{background:rgb(39.5811518325,100.4188481675,69.6335078534)}.btn--small{height:40px;font-size:16px}@media (max-width:1400px){.btn--small{height:32px;font-size:14px}}@media (max-width:991px){.btn--small{height:28px;font-size:12px}}.btn--big{height:56px;font-size:16px}@media (max-width:1400px){.btn--big{height:48px;font-size:14px}}@media (max-width:1400px){.btn--big{height:40px;font-size:14px}}.btn--large{height:80px;font-size:16px}@media (max-width:1400px){.btn--large{height:60px;font-size:14px}}@media (max-width:1400px){.btn--large{height:40px;font-size:14px}}.btn--primary-outline{background:0 0;color:#36895f;border:1px solid #36895f}.btn--primary-outline:hover{color:#fff;background:#36895f}.btn--white{background:#fff;color:#36895f}.checkbox{display:inline-flex;cursor:pointer;align-items:center;gap:8px;font-size:16px;font-weight:600}@media (max-width:1400px){.checkbox{font-size:14px}}.checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkbox .checkmark{width:18px;height:18px;border-radius:50%;border:1px solid #36895f;background:#fff;flex-shrink:0;box-shadow:0 0 0 2px #fff;position:relative}@media (max-width:1400px){.checkbox .checkmark{width:16px;height:16px}}.checkbox .checkmark::after{content:"check";font-family:"Material Icons";position:absolute;display:none;top:50%;font-size:12px;left:50%;transform:translate(-50%,-50%);color:#fff}.checkbox input:checked~.checkmark{border-color:#36895f;background:#36895f}.checkbox input:checked~.checkmark::after{display:block}.radio{display:inline-flex;cursor:pointer;align-items:center;gap:8px;font-size:16px;font-weight:600}.radio input[type=radio]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.radio .checkmark{width:16px;height:16px;border-radius:50%;border:1px solid #36895f;background:#fff;position:relative}.radio .checkmark::after{content:"";position:absolute;display:none;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:8px;height:8px;background:#36895f}.radio input:checked~.checkmark{border-color:#36895f}.radio input:checked~.checkmark::after{display:block}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;width:560px;background:#fef8ec;border-radius:20px;max-width:90%;padding:50px 40px}.modal-title{text-align:center;color:#36895f;margin-bottom:24px}.modal:not(.active){display:none}@media (max-width:1400px){.modal{padding:50px 24px}}.modal-agree{font-size:16px;font-weight:600;color:#36895f}@media (max-width:1400px){.modal-agree{font-size:14px}}.modal-close{position:absolute;right:20px;top:20px;cursor:pointer}.modal form{display:flex;flex-direction:column;gap:16px;align-items:center}.modal .input{position:relative;width:100%}.modal .input span{font-size:24px;color:#fff;left:20px;top:50%;transform:translateY(-50%);position:absolute}@media (max-width:1400px){.modal .input span{font-size:20px;left:16px}}.modal .input input{background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);border-radius:40px;height:40px;padding-left:60px;width:100%;color:#fff;font-size:16px}@media (max-width:1400px){.modal .input input{height:32px;font-size:14px;padding-left:50px}}.modal .input input::-moz-placeholder{color:#fff}.modal .input input::placeholder{color:#fff}.inner .header{box-shadow:0 4px 2px 2px rgba(0,0,0,.03)}.header-bottom{height:60px;display:flex;align-items:center;justify-content:space-between;gap:60px; margin-bottom: 25px;}@media (max-width:1400px){.header-bottom{gap:40px}}.header-bottom ul{display:flex;gap:60px}@media (max-width:1400px){.header-bottom ul{gap:40px}}.header-bottom ul a{font-weight:500;font-size:18px;color:#161616;text-transform:uppercase}@media (max-width:1400px){.header-bottom ul a{font-size:16px}}@media (max-width:1279px){.header-bottom ul a{font-size:14px}}.header-bottom ul a:hover{color:#36895f}.header-bottom ul a.active{color:#36895f;font-weight:800}.header-bottom__search{position:relative;transition:.3s;min-width:230px}.header-bottom__search.active{flex:1}.header-bottom__search span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8e8e8e}.header-bottom__search input{height:41px;background:#f3f3f3;border-radius:50px;padding-left:45px;width:100%;font-size:14px;color:#8e8e8e;transition:.3s}.header-bottom__search input::-moz-placeholder{font-size:14px;color:#8e8e8e}.header-bottom__search input::placeholder{font-size:14px;color:#8e8e8e}.header-bottom__right{display:flex;gap:16px;flex:1;justify-content:flex-end}.header-bottom__right>a{display:flex;align-items:center;justify-content:center;border-radius:50%;width:41px;height:41px;background:#f3f3f3}.cart-icon-wrapper{position:relative!important}.cart-count-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;padding:0 4px;box-shadow:0 2px 4px rgba(0,0,0,.2);z-index:2}@media (max-width:1400px){.cart-count-badge{min-width:18px;height:18px;font-size:11px;top:-6px;right:-6px}}@media (max-width:991px){.cart-count-badge{min-width:16px;height:16px;font-size:10px;top:-4px;right:-4px}}.header-mobile__btn.cart-icon-wrapper{position:relative}.header-bottom__right>a.favorite{color:#fff;-webkit-text-stroke:2px #fa5352}.header-bottom__right>a .red{text-shadow:none;color:#fa5352}.header-bottom__right>a .green{color:#36895f}.cart-count-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;padding:0 4px;box-shadow:0 2px 4px rgba(0,0,0,.2);z-index:2}@media (max-width:1400px){.cart-count-badge{min-width:18px;height:18px;font-size:11px;top:-6px;right:-6px}}@media (max-width:991px){.cart-count-badge{min-width:16px;height:16px;font-size:10px;top:-4px;right:-4px}}.header-mobile__btn.cart-icon-wrapper{position:relative}.header-bottom__right>a.favorite{color:#fff;-webkit-text-stroke:2px #fa5352}.header-bottom__right>a .red{text-shadow:none;color:#fa5352}.header-bottom__right>a .green{color:#36895f}.header-top__info a[href^="tel:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.header-top__info a[href^="tel:"]:hover {
color: #36895f;
}
.header-mobile__contacts .header-top__info a[href^="tel:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.header-mobile__contacts .header-top__info a[href^="tel:"]:hover {
color: #36895f;
}
.header-top{display:flex;align-items:center;justify-content:space-between;height:96px}@media (max-width:1279px){.header-top{height:76px}}.header-top__info{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:#000;position:relative}@media (max-width:1400px){.header-top__info{font-size:16px}}@media (max-width:1279px){.header-top__info{font-size:14px}}.header-top__hint{position:absolute;right:0;top:-14px;font-size:14px;font-weight:400}@media (max-width:1279px){.header-top__hint{font-size:12px;top:-12px}}.header-top__right{display:flex;align-items:center;gap:24px}@media (max-width:1400px){.header-top__right{gap:16px}}.header-top__right .btn{text-transform:uppercase}.header-mobile{padding:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.25);position:fixed;top:0;left:0;width:100%;background:#fff;z-index:5}.header-mobile .container{display:flex;justify-content:space-between;align-items:center}.header-mobile__actions{display:flex;gap:16px}.header-mobile__search{position:fixed;top:50px;left:0;width:100%;padding:12px 16px;background:#fff;z-index:6;box-shadow:0 1px 3px rgba(0,0,0,.25)}.header-mobile__search:not(.active){display:none}.header-mobile__contacts{margin-top:auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}.header-mobile__contacts .header-top__info{margin-top:4px}.header-mobile__contacts .header-top__hint{right:auto;left:30px}.header-mobile__menu{position:fixed;top:50px;left:0;width:300px;background:#fff;z-index:901;height:calc(100% - 50px);display:flex;flex-direction:column;padding-bottom:24px}.header-mobile__menu:not(.active){display:none}.header-mobile__menu ul li a{display:block;padding:12px 16px;text-transform:uppercase;border-bottom:1px solid #36895f;font-weight:600}.header-mobile__menu ul li a.active{color:#36895f}.footer-column__contact a[href^="tel:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column__contact a[href^="tel:"]:hover {
color: #36895f;
}
/* Email link styles */
.header-top__info a[href^="mailto:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.header-top__info a[href^="mailto:"]:hover {
color: #36895f;
}
.header-mobile__contacts .header-top__info a[href^="mailto:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.header-mobile__contacts .header-top__info a[href^="mailto:"]:hover {
color: #36895f;
}
.footer-column__contact a[href^="mailto:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column__contact a[href^="mailto:"]:hover {
color: #36895f;
}
.contacts-address__text a[href^="mailto:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.product-card__buy.active .btn-to-cart {
display: flex !important;
}
.product-card__buy:not(.active) .btn-to-cart {
display: none !important;
}
.btn-to-cart {
border: 2px solid #fa5452;
margin-top: 16px;
}
.contacts-address__text a[href^="mailto:"]:hover {
color: #36895f;
}
.footer{padding:80px 0}@media (max-width:1279px){.footer{padding:60px 0}}.footer .logo{margin-bottom:40px}.footer .btn{text-transform:uppercase}.footer-columns{display:flex;justify-content:space-between}@media (max-width:1279px){.footer-columns{flex-wrap:wrap;gap:24px}}@media (max-width:767px){.footer-columns{flex-direction:column}}.footer-column__info{display:flex;flex-direction:column;align-items:flex-start}.footer-column__info ul{margin:16px 0;font-size:15px;display:flex;line-height:1.2;gap:12px;flex-direction:column;color:#000}.footer-column__info ul a{text-decoration:underline}.footer-column__contact{display:flex;align-items:center;color:#161616;font-size:14px;gap:8px}.footer-column__contact+.footer-column__contact{margin-top:8px}.footer-column__title{font-weight:600;font-size:20px;color:#161616;margin-bottom:14px}.footer-column ul{display:flex;flex-direction:column;gap:9px;font-size:15px;color:#161616}.footer-column ul a:hover{text-decoration:underline}.sidebar{width:280px;flex-shrink:0;position:sticky;top:80px;align-self:flex-start;max-height:calc(100vh - 100px);overflow-y:auto}.sidebar>ul>li:not(.sidebar--active){border-top:1px dashed #ccc}.sidebar>ul>li:first-child{border-top:none}.sidebar>ul>li:last-child{border-bottom:1px dashed #ccc}.sidebar>ul .sidebar--active+li{border:none!important}.sidebar-mobile{width:44px;height:44px;position:fixed;z-index:1;bottom:30vh;right:0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}.sidebar-mobile span{font-size:32px;color:#36895f}@media (max-width:991px){.sidebar{width:240px;position:sticky;top:60px;align-self:flex-start;max-height:calc(100vh - 80px);overflow-y:auto}}@media (max-width:767px){.sidebar{position:fixed;top:0;left:0;z-index:25;background:#fff;height:100%;transition:.3s}.sidebar:not(.active){transform:translateX(-100%)}}.sidebar-title{display:flex;align-items:center;height:52px;font-size:20px;color:#36895f;font-weight:800;border-bottom:1px dashed #ccc;margin-top:16px}@media (max-width:991px){.sidebar-title{font-size:16px;height:44px}}.sidebar-item{display:flex;align-items:center;height:52px;font-size:16px;font-weight:700;gap:16px}@media (max-width:991px){.sidebar-item{font-size:14px;height:44px}}@media (max-width:767px){.sidebar-item{padding:0 16px}}.sidebar-item--active{background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);border-radius:100px;color:#fff;border:none;padding:0 20px;border:none!important}@media (max-width:991px){.sidebar-item--active{padding:0 16px;gap:8px}}.sidebar>ul ul{display:flex;flex-direction:column;gap:12px;padding:8px 24px 16px;font-weight:500}.sidebar>ul>li:not(.active) ul{display:none}.breadcrumbs{margin-bottom:32px}@media (max-width:991px){.breadcrumbs{margin-bottom:24px}}.breadcrumbs ul{display:flex;align-items:center;gap:10px}@media (max-width:991px){.breadcrumbs ul{gap:8px}}.breadcrumbs ul li{display:flex;align-items:center;gap:10px}@media (max-width:991px){.breadcrumbs ul li{gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.breadcrumbs ul li a,.breadcrumbs ul li span:not(.icon){font-weight:400;font-size:14px;color:#1a1a1a;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breadcrumbs ul li span:not(.icon){font-weight:700}.breadcrumbs ul li span.icon{font-weight:400;color:#36895f}.breadcrumbs ul li:not(:last-child)::after{content:"arrow_forward_ios";color:#1a1a1a;font-size:10px;opacity:.5;font-family:"Material Symbols Outlined"}.home-banner{position:relative}.home-banner img{min-height:200px;-o-object-fit:cover;object-fit:cover;border-radius:20px}.home-banner .btn{font-weight:400}.home-banner__arrow{position:absolute;width:67px;height:67px;border:7px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);bottom:0;left:50%;transform:translate(-50%,50%);cursor:pointer}.home-banner__arrow span{transform:rotate(-90deg) translateX(7px);font-size:28px}@media (max-width:1279px){.home-banner__arrow{width:56px;height:56px}}@media (max-width:991px){.home-banner__arrow{width:48px;height:48px;border-width:5px}.home-banner__arrow span{font-size:20px;transform:rotate(-90deg) translateX(3px)}}.home-banner__inner{position:absolute;left:150px;top:50%;transform:translateY(-50%);color:#fff}@media (max-width:1279px){.home-banner__inner{left:80px}}@media (max-width:991px){.home-banner__inner{left:50px}}@media (max-width:767px){.home-banner__inner{left:28px}}.home-banner__inner .h1{margin-bottom:10px}.home-banner__inner .btn{margin-top:40px}@media (max-width:1279px){.home-banner__inner .btn{margin-top:32px}}@media (max-width:991px){.home-banner__inner .btn{margin-top:24px}}.home-catalog .h4{margin-bottom:80px}@media (max-width:1279px){.home-catalog .h4{margin-bottom:60px}}@media (max-width:991px){.home-catalog .h4{margin-bottom:40px}}@media (max-width:767px){.home-catalog .h4{margin-bottom:20px}}.home-catalog .h1{margin-bottom:8px}@media (max-width:767px){.home-catalog .h1{font-size:16px;margin-right:12px}}.home-catalog__list{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 24px}@media (max-width:1279px){.home-catalog__list{gap:24px}}@media (max-width:991px){.home-catalog__list{gap:16px}}@media (max-width:767px){.home-catalog__list{flex-direction:column;display:flex;max-width:500px;margin:0 auto}}.home-catalog__title{max-width:260px}.home-catalog__item{display:flex;align-items:center;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);box-shadow:0 0 30px rgba(186,186,186,.5);border-radius:20px;overflow:hidden;color:#fff;padding-left:50px;transition:0s;height:190px}.home-catalog__item:hover{color:#36895f;background:#fef8ec}.home-catalog__item img{margin-left:auto;height:100%;-o-object-fit:cover;object-fit:cover}@media (max-width:767px){.home-catalog__item img{width:90px}}@media (max-width:1279px){.home-catalog__item{height:160px;padding-left:40px}}@media (max-width:991px){.home-catalog__item{height:140px;padding-left:32px}}@media (max-width:767px){.home-catalog__item{height:90px;padding-left:16px}}.home-featured .h1{margin-bottom:40px}.home-featured__list{background:rgba(254,248,236,.7);box-shadow:0 0 30px rgba(186,186,186,.5);border-radius:20px;padding:64px 32px;display:flex;gap:24px}@media (max-width:1279px){.home-featured__list{padding:40px 16px;gap:16px}}@media (max-width:991px){.home-featured__list{flex-wrap:wrap;justify-content:center;max-width:767px;margin:0 auto}}@media (max-width:767px){.home-featured__list{max-width:420px}}.home-featured__title{color:#36895f;padding:20px 12px}.home-featured__item{background:rgba(254,248,236,.6);box-shadow:0 0 30px rgba(186,186,186,.5);overflow:hidden;position:relative;flex:1;border-radius:20px}@media (max-width:991px){.home-featured__item{width:180px;flex:unset}}.home-products .h1{margin-bottom:40px}.home-products__slider{margin-bottom:50px;display:flex;align-items:center;gap:16px}.home-products__slider .slick-arrow{flex-shrink:0}@media (max-width:1400px){.home-products__slider{margin-bottom:40px}}@media (max-width:991px){.home-products__slider{margin-bottom:20px;gap:8px}}.home-products__item{display:flex;margin:0 16px;flex-direction:column;border-radius:20px;overflow:hidden;background:rgba(254,248,236,.6)}@media (max-width:1400px){.home-products__item{margin:0 8px}}.home-products__title{color:#36895f;display:flex;align-items:center;justify-content:center;padding:32px 12px;line-height:1.2;gap:24px}.home-products__title .arrow{width:30px;height:30px;font-size:16px;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);flex-shrink:0}.home-products__title .arrow span{font-size:16px}@media (max-width:991px){.home-products__title .arrow{width:24px;height:24px}.home-products__title .arrow span{font-size:14px}}@media (max-width:991px){.home-products__title{padding:16px;gap:16px}}.home-products__image img{width:100%;height:235px;-o-object-fit:cover;object-fit:cover}@media (max-width:1400px){.home-products__image img{height:170px}}.home-products__buttons{display:flex;gap:32px;justify-content:center}.home-products__buttons .btn{width:240px}@media (max-width:991px){.home-products__buttons{gap:16px}.home-products__buttons .btn{width:200px}}@media (max-width:767px){.home-products__buttons{flex-wrap:wrap}.home-products__buttons .btn{width:100%}}.home-why .h3{max-width:200px;margin-bottom:10px}.home-why__image{margin-top:170px}@media (max-width:991px){.home-why__image{display:none}}.home-why__image img{width:100%;min-width:979px}.home-why__steps{display:flex;justify-content:space-between;position:absolute;width:100%;top:0}@media (max-width:991px){.home-why__steps{position:static}}@media (max-width:767px){.home-why__steps{flex-direction:column;gap:24px;align-items:center}}.home-why__wrapper{position:relative}@media (max-width:991px){.home-why__wrapper{margin-top:40px}}.home-why__icon{width:88px;height:88px;border-radius:50%;background:#fef8ec;display:flex;align-items:center;justify-content:center;margin-top:70px}.home-why__icon:first-child{margin:0 0 16px}@media (max-width:991px){.home-why__icon{order:-1;margin:0 0 24px!important}}.home-why__step{max-width:255px;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}.home-why__step:first-child{top:-60px}@media (max-width:1279px){.home-why__step:first-child{top:-90px}}.home-why__step:nth-child(2){top:100px}@media (max-width:1279px){.home-why__step:nth-child(2){top:60px}}.home-why__step:last-child{top:40px}@media (max-width:1279px){.home-why__step:last-child{top:10px}}@media (max-width:991px){.home-why__step{position:static}}.feedback-form{display:grid;gap:32px;grid-template-columns:1fr 3px 1fr}@media (max-width:1400px){.feedback-form{gap:24px}}@media (max-width:991px){.feedback-form{display:flex;justify-content:center}}@media (max-width:991px){.feedback-form__left{display:none}}.feedback-form__separator{width:3px;background:#36895f;margin:16px 0}@media (max-width:991px){.feedback-form__separator{display:none}}.feedback-form__right{background:rgba(254,248,236,.4);border-radius:20px 0 0 20px;padding:50px calc((100vw - 1320px)/ 2) 50px 50px}@media (max-width:1400px){.feedback-form__right{padding-left:0}}@media (max-width:1279px){.feedback-form__right{padding:32px 16px}}@media (max-width:991px){.feedback-form__right{border-radius:20px}}.feedback-form__right .h1{margin-bottom:32px}@media (max-width:1400px){.feedback-form__right .h1{margin-bottom:24px}}@media (max-width:1279px){.feedback-form__right .h1{margin-bottom:16px}}.feedback-form__right .h3{font-weight:500;color:#36895f}.feedback-form__right form{max-width:530px;margin:40px auto 0;display:flex;flex-direction:column;align-items:center;gap:20px}@media (max-width:1400px){.feedback-form__right form{margin-top:30px;gap:12px}}@media (max-width:1279px){.feedback-form__right form{margin-top:20px}}.feedback-form__right .btn{text-align:center;width:240px;font-weight:400}.feedback-form .input{position:relative;width:100%}.feedback-form .input span{font-size:30px;color:#fff;left:24px;top:50%;transform:translateY(-50%);position:absolute}@media (max-width:1279px){.feedback-form .input span{font-size:24px;left:20px}}.feedback-form .input input{background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);border-radius:40px;height:60px;padding-left:70px;width:100%;color:#fff;font-size:16px}@media (max-width:1400px){.feedback-form .input input{height:50px;padding-left:60px;font-size:14px}}@media (max-width:1279px){.feedback-form .input input{height:40px;padding-left:50px}}.feedback-form .input input::-moz-placeholder{color:#fff}.feedback-form .input input::placeholder{color:#fff}.feedback-form__agree{font-size:18px;line-height:1.2;color:#36895f;margin:20px 0}@media (max-width:1400px){.feedback-form__agree{margin:12px 0;font-size:16px}}@media (max-width:1279px){.feedback-form__agree{font-size:14px;text-align:center}}.feedback-form__left img{border-radius:0 20px 20px 0;width:100%;-o-object-fit:cover;object-fit:cover;height:655px}.certificates{padding:32px 0}.certificates .h1{color:#36895f;margin-bottom:32px}@media (max-width:1400px){.certificates .h1{margin-bottom:24px}}.certificates-main{display:flex;justify-content:center;gap:64px}@media (max-width:1400px){.certificates-main{gap:48px}}@media (max-width:1279px){.certificates-main{gap:32px}}@media (max-width:991px){.certificates-main{gap:24px}}@media (max-width:767px){.certificates-main{flex-direction:column;align-items:center}}.certificates-main__left{display:flex;flex-direction:column;gap:24px}@media (max-width:1400px){.certificates-main__left{gap:20px}}@media (max-width:1279px){.certificates-main__left{gap:16px}}@media (max-width:991px){.certificates-main__left{gap:12px}}@media (max-width:767px){.certificates-main__left{width:420px;max-width:100%}}.certificates-main__warning{background:rgba(217,217,217,.4);border-radius:10px;padding:10px;display:flex;gap:6px;font-size:14px;color:#1a1a1a;line-height:1.2;align-items:flex-start}@media (max-width:1400px){.certificates-main__warning{font-size:12px;padding:6px}}.certificates-main__warning div{opacity:.5}.certificates-main__warning span{width:24px;display:block;background:#36895f;flex-shrink:0;text-align:center;border-radius:50%;color:#fff;line-height:24px}@media (max-width:1400px){.certificates-main__warning span{width:20px;line-height:20px}}@media (max-width:1279px){.certificates-main__warning span{width:16px;line-height:16px}}.certificates-main__right{width:420px;display:flex;flex-direction:column;gap:40px;max-width:100%}@media (max-width:1400px){.certificates-main__right{gap:32px}}@media (max-width:1279px){.certificates-main__right{gap:24px}}@media (max-width:991px){.certificates-main__right{gap:16px}}.certificates-main__text{font-size:14px;line-height:1.2;color:#1a1a1a;opacity:.5}.certificates-main__step{display:flex;flex-direction:column;gap:24px}@media (max-width:1400px){.certificates-main__step{gap:20px}}@media (max-width:1279px){.certificates-main__step{gap:16px}}@media (max-width:991px){.certificates-main__step{gap:12px}}.certificates-main__input{display:flex;gap:20px;flex:1}.certificates-main__email input{padding:0 10px;width:100%;height:41px;border:1px solid #36895f;border-radius:10px}@media (max-width:1400px){.certificates-main__email input{height:32px}}.certificates-main__quantity{display:flex;position:relative;width:170px}@media (max-width:1400px){.certificates-main__quantity{width:140px}}@media (max-width:767px){.certificates-main__quantity{width:100px}}.certificates-main__quantity input{height:48px;text-align:center;font-size:15px;font-weight:800;width:100%}@media (max-width:1400px){.certificates-main__quantity input{height:32px}}@media (max-width:1400px){.certificates-main__quantity input{font-size:14px}}.certificates-main__quantity button{position:absolute;width:48px;height:48px;background:#36895f;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;border:2px solid #36895f}@media (max-width:1400px){.certificates-main__quantity button{height:32px;width:32px}}.certificates-main__quantity button::after,.certificates-main__quantity button::before{content:"";width:16px;height:1px;background:#fff;position:absolute}.certificates-main__quantity button::after{transform:rotate(90deg)}.certificates-main__quantity button.disabled{background:rgba(54,137,95,.25);border-color:transparent;cursor:default}.certificates-main__quantity button.minus{left:0}.certificates-main__quantity button.minus::after{display:none}.certificates-main__quantity button.plus{right:0}.certificates-main__agree .checkbox{align-items:flex-start}.certificates-main__selection{display:flex;flex-direction:column}.certificates-main__selection .certificates-main__email{margin-top:12px}.certificates-main__select{position:relative}.certificates-main__select+.certificates-main__select{margin-top:12px;padding-top:12px;border-top:1px solid #36895f}.certificates-main__select+.certificates-main__select .radio{top:12px}.certificates-main__select .radio{position:absolute;right:0;top:0}.certificates-main__select-title{font-size:16px;margin-bottom:8px}@media (max-width:1400px){.certificates-main__select-title{font-size:14px}}.certificates-main__select-text{font-size:14px;color:#1a1a1a;opacity:.5}@media (max-width:1400px){.certificates-main__select-text{font-size:12px}}.certificates-main__amount{flex:1}.certificates-main__amount input{width:100%;height:48px;border:2px solid #36895f;border-radius:10px;color:#1a1a1a;padding:0 0 0 18px}@media (max-width:1400px){.certificates-main__amount input{height:32px;font-size:14px;padding-left:8px}}@media (max-width:767px){.certificates-main__amount input{font-size:12px}}.certificates-main__amount input::-moz-placeholder{color:#b3b1b1}.certificates-main__amount input::placeholder{color:#b3b1b1}.certificates-main__textarea{display:flex;flex-direction:column;gap:24px}@media (max-width:1400px){.certificates-main__textarea{gap:20px}}@media (max-width:1279px){.certificates-main__textarea{gap:16px}}@media (max-width:991px){.certificates-main__textarea{gap:12px}}.certificates-main__textarea textarea{height:126px;border:1px solid #36895f;border-radius:10px;padding:20px 10px;font-weight:400;font-size:14px;line-height:1.2;color:#1a1a1a;width:100%}.certificates-subtitle{font-size:20px;font-weight:700}@media (max-width:1400px){.certificates-subtitle{font-size:18px}}@media (max-width:1279px){.certificates-subtitle{font-size:16px}}@media (max-width:991px){.certificates-subtitle{font-size:14px}}.certificates-title{font-size:20px;font-weight:600}@media (max-width:1400px){.certificates-title{font-size:18px}}@media (max-width:1279px){.certificates-title{font-size:16px}}@media (max-width:991px){.certificates-title{font-size:14px}}.category-main{padding:32px 0}.category-main .container{display:flex;gap:32px}@media (max-width:991px){.category-main .container{gap:24px}}@media (max-width:767px){.category-main .container{flex-direction:column-reverse}}.category-main__content{overflow:hidden;flex:1}.category-main__content .slick-dots{position:absolute;bottom:24px;left:0;width:100%;display:flex;justify-content:center;gap:12px}.category-main__content .slick-dots button{font-size:0;width:12px;height:12px;background:#fff;border-radius:50%}.category-main__content .slick-dots .slick-active button{background:#36895f}.category-main .category-banner{margin-bottom:32px}.category-main .category-banner img{max-height:400px;-o-object-fit:cover;object-fit:cover;width:100%}@media (max-width:991px){.category-main .category-banner{margin-bottom:24px}}.category-main__title{color:#36895f;margin-bottom:32px}@media (max-width:991px){.category-main__title{margin-bottom:24px}}.custom-wishlist-btn{cursor:pointer;color:#fff}.custom-wishlist-btn.in-wishlist{color:#fa5352}.product-card{position:relative;text-align:center;overflow:hidden}.product-card__variations{text-align:left}.product-card__variations select{width:100%;padding:4px;font-size:14px;border:1px solid #36895f;border-radius:4px;margin:4px 0 16px}.product-card__info{display:flex;flex-direction:column;align-items:center;gap:12px}
.product-card__title{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;padding:0 8px;line-height:1.2}.product-card__qty{position:relative}.product-card__qty button{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;cursor:pointer;justify-content:center}.product-card__qty .minus{left:16px}.product-card__qty .minus::before{content:"";display:block;width:24px;height:2px;background:#fff}.product-card__qty .plus{right:16px}.product-card__qty .plus::after,.product-card__qty .plus::before{content:"";display:block;width:24px;height:2px;background:#fff}.product-card__qty .plus::before{transform:rotate(90deg);position:absolute}.product-card__qty input{width:100%;text-align:center;background:linear-gradient(86.89deg,#36895f 2.58%,#00552f 97.42%);border-radius:40px;height:48px;font-size:18px;font-weight:600;color:#fff}.product-card__qty--small{width:120px}.product-card__qty--small input{height:36px;font-size:15px}.product-card__qty--small .minus{left:10px}.product-card__qty--small .plus{right:10px}.product-card__qty--small .minus::after,.product-card__qty--small .minus::before,.product-card__qty--small .plus::after,.product-card__qty--small .plus::before{width:16px}.product-card__buy{width:210px;max-width:100%}.product-card__buy .btn{width:100%;display:none}.product-card__buy:not(.active) .btn{display:flex}.product-card__buy:not(.active) .product-card__qty{display:none}.product-card__price{color:#36895f}.product-card__image{position:relative;padding-top:100%;margin-bottom:20px}.product-card__image a{position:absolute;left:0;top:0;width:100%;height:100%}.product-card__image a img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:20px}.product-card__favorite{position:absolute;color:#fff;right:10px;top:10px;z-index:2}.product-card__favorite span{font-size:32px}.products-list{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px}@media (max-width:991px){.products-list{grid-template-columns:repeat(2,1fr)}}.recommend .products-list{grid-template-columns:repeat(4,1fr)}@media (max-width:767px){.recommend .products-list{grid-template-columns:repeat(2,1fr)}}.recommend .h1{margin-bottom:32px;color:#36895f}@media (max-width:1400px){.recommend .h1{margin-bottom:24px}}.product-tabs{margin-top:40px}@media (max-width:1279px){.product-tabs{margin-top:24px}}.product-tabs__additional{font-size:14px;line-height:1.2;margin-top:40px}@media (max-width:1279px){.product-tabs__additional{font-size:12px;margin-top:24px}}.product-tabs__tech .product-main__tech{margin:0}.product-tabs__tech .product-main__tech-item,.product-tabs__tech .product-main__tech-title{font-size:14px;line-height:1.5}@media (max-width:1279px){.product-tabs__tech .product-main__tech-item,.product-tabs__tech .product-main__tech-title{font-size:12px}}.product-tabs__tech .product-main__tech-title{font-size:16px;padding:8px 0}@media (max-width:1279px){.product-tabs__tech .product-main__tech-title{font-size:14px}}.product-tabs__description{font-size:16px;line-height:1.7;font-weight:400}@media (max-width:1279px){.product-tabs__description{font-size:14px}}.product-tabs__description b{font-weight:800}.product-tabs__body>div:not(.active){display:none}.product-tabs__header{display:flex;gap:10px;margin-bottom:24px;overflow-y:auto}@media (max-width:1279px){.product-tabs__header{margin-bottom:16px}}.product-tabs__header div{height:35px;display:flex;align-items:center;cursor:pointer;padding:0 15px;transition:.3s;border-radius:40px;font-weight:800;font-size:14px;border:1px solid #36895f;white-space:nowrap}.product-tabs__header div.active,.product-tabs__header div:hover{background:#36895f;color:#fff}.product-main{display:flex;gap:50px}@media (max-width:1279px){.product-main{gap:24px}}@media (max-width:991px){.product-main{flex-direction:column}}.product-main .container{display:flex;gap:32px}@media (max-width:991px){.product-main .container{gap:24px}}.product-main__tech{margin-top:20px}.product-main__tech-title{font-weight:700;font-size:12px}.product-main__tech-item{line-height:14px;padding-bottom:6px;display:flex;justify-content:space-between;border-bottom:1px dashed #ccc;font-weight:400;font-size:12px}.product-main__tech-item div:last-child{text-align:right}.product-main__tech-item:not(:last-child){margin-bottom:6px}.product-main__buy{margin-top:auto}@media (max-width:1279px){.product-main__buy{margin-top:24px}}.product-main__right{flex:1;display:flex;flex-direction:column}.product-main__price{color:#36895f;margin-bottom:20px}.product-main__left{display:flex;gap:24px;flex-shrink:0;width:500px}@media (max-width:1279px){.product-main__left{gap:12px;width:400px}}@media (max-width:991px){.product-main__left{gap:12px;width:100%}}@media (max-width:767px){.product-main__left{flex-direction:column}}.product-main__image{flex:1}.product-main__image img{width:380px;height:310px;-o-object-fit:cover;object-fit:cover;border-radius:20px}@media (max-width:1279px){.product-main__image img{max-width:100%;height:262px}}@media (max-width:991px){.product-main__image img{height:320px;width:100%}}.product-main__gallery{display:flex;flex-direction:column;justify-content:space-between}@media (max-width:767px){.product-main__gallery{flex-direction:row;justify-content:flex-start;gap:16px;flex-wrap:wrap}}.product-main__gallery div{cursor:pointer}.product-main__gallery div:not(.active) > img{opacity:.6}.product-main__gallery img{width:95px;height:95px;border-radius:20px}@media (max-width:1279px){.product-main__gallery img{width:80px;height:80px;min-width:80px}}@media (max-width:991px){.product-main__gallery img{width:100px;height:100px;min-width:100px}}.cart{padding:32px 0}.cart-title{color:#36895f;margin-bottom:32px}@media (max-width:1400px){.cart-title{margin-bottom:24px}}@media (max-width:991px){.cart-title{text-align:center}}.cart-delivery__totals{margin:16px 0;display:flex;flex-direction:column;gap:16px;padding:28px 0;border-top:1px solid #36895f;border-bottom:1px solid #36895f}@media (max-width:1400px){.cart-delivery__totals{margin:12px 0;gap:12px;padding:20px 0}}.cart-delivery__total{display:flex;justify-content:space-between;align-items:center}.cart-delivery__total--green{color:#36895f;font-weight:800;font-size:20px}@media (max-width:1400px){.cart-delivery__total--green{font-size:12px}}.cart-delivery__total--base div:first-child{font-size:16px;font-weight:600;display:flex;flex-direction:column;gap:8px}@media (max-width:1400px){.cart-delivery__total--base div:first-child{font-size:14px}}.cart-delivery__total--base div:first-child a{color:#36895f;font-size:14px;letter-spacing:.03em}@media (max-width:1400px){.cart-delivery__total--base div:first-child a{font-size:12px}}.cart-delivery__total--base div:last-child{font-size:14px;font-weight:800}.cart-delivery__total--base div.red{color:#d83d3f}.cart-delivery__total--main div:first-child{font-size:20px;font-weight:700}@media (max-width:1400px){.cart-delivery__total--main div:first-child{font-size:16px}}.cart-delivery__total--main div:last-child{font-weight:100;font-size:14px}@media (max-width:1400px){.cart-delivery__total--main div:last-child{font-size:12px}}.cart-delivery__hint{padding:0 12px;font-size:12px;line-height:1.2;color:#36895f;margin:20px 0}.cart-delivery__hint a{text-transform:uppercase;text-decoration:underline}.cart-delivery__warning{display:flex;text-align:center;justify-content:center;align-items:center;line-height:40px;font-size:16px;font-weight:600;color:#36895f;gap:12px;background:#f3f3f3;letter-spacing:.03em;border-radius:40px}@media (max-width:1400px){.cart-delivery__warning{font-size:14px;gap:8px;line-height:24px;padding:6px}}.cart-delivery__warning .icon{width:24px;display:block;background:#36895f;border-radius:50%;color:#fff;line-height:24px}@media (max-width:1400px){.cart-delivery__warning .icon{width:16px;line-height:16px;min-width:16px;font-size:12px}}.cart-main{display:flex;gap:32px}@media (max-width:1279px){.cart-main{gap:16px}}@media (max-width:991px){.cart-main{flex-direction:column;max-width:600px;margin:0 auto}}.cart-main__formline{display:flex;gap:10px}.cart-main__delivery .radio{font-size:12px}.cart-main__delivery form{width:320px;display:flex;flex-direction:column;gap:10px;max-width:100%}.cart-main__delivery form input,.cart-main__delivery form textarea{width:100%;height:32px;background:#fff;border-radius:12px;border:1px solid #e9ecef;font-size:14px;padding:0 12px;font-weight:400}.cart-main__delivery form textarea{padding:12px;height:120px;resize:none;border-radius:10px}.cart-main__delivery+.cart-main__delivery{padding-top:12px;margin-top:12px;border-top:1px solid #36895f}.cart-main__delivery-person,.cart-main__delivery-title{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;line-height:16px;color:#161616;margin-bottom:12px}.cart-main__delivery-person span,.cart-main__delivery-title span{color:#36895f}.cart-main__delivery-person{background:white;border-radius:12px;padding:20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);font-weight:400;margin-top:12px;align-items:flex-start}.cart-main__delivery-person span{margin-top:8px}.cart-main__delivery-body{background:white;padding:20px;border-radius:12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);font-size:12px;font-weight:500;display:flex;flex-direction:column;gap:12px}@media (max-width:767px){.cart-main__delivery-body{padding:0}}.cart-main__actions{display:flex;gap:32px}@media (max-width:1400px){.cart-main__actions{gap:24px}}.cart-main__products{display:flex;flex-direction:column;gap:20px}.cart-main__delete{background:#f3f3f3;border-radius:50%;display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:#36895f}.cart-main__delete span{font-size:18px}.cart-main__payments{background:white;padding:20px;border-radius:12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);display:flex;gap:20px;margin-bottom:32px}@media (max-width:1400px){.cart-main__payments{margin-bottom:24px;gap:12px;flex-wrap:wrap}}.cart-main__payment{cursor:pointer;width:120px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;font-size:12px;font-weight:500;background:white;text-align:center;padding:4px;border:1px solid #e9ecef;transition:.3s}.cart-main__payment.active{border-color:#36895f;background:#f3f3f3}.cart-main__payment span{font-size:40px;color:#36895f}.cart-main__title{font-size:18px;font-weight:600;margin-bottom:12px}.cart-main__share{gap:8px;color:#36895f;font-size:16px;background:#f3f3f3;border-radius:40px;width:200px;height:30px;display:flex;justify-content:center;align-items:center}@media (max-width:1400px){.cart-main__share{font-size:14px;width:160px}}.cart-main__share span{transform:rotateY(180deg)}.cart-main__available{font-size:16px;font-weight:600;padding:0 16px;line-height:56px;background:#f3f3f3;margin-bottom:20px;border-radius:20px}@media (max-width:1400px){.cart-main__available{font-size:14px;line-height:40px}}.cart-main__top{display:flex;justify-content:space-between;margin-bottom:16px;height:56px;align-items:center;background:rgba(254,248,236,.2);border-radius:20px}@media (max-width:1400px){.cart-main__top{gap:16px;flex-wrap:wrap;height:auto}}.cart-main__left{flex:1}.cart-main__right{width:500px;flex-shrink:0;padding-top:32px;background:white;padding:20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);border-radius:12px;height:100%;margin-top:30px}@media (max-width:1279px){.cart-main__right{width:320px}}@media (max-width:991px){.cart-main__right{width:100%}}.cart-main__right .btn{font-weight:400}.cart-modal{position:fixed;top:0;background:#fff;z-index:10;width:100%;height:100%;left:0;display:flex;flex-direction:column}.cart-modal:not(.active){display:none}.cart-modal__locations{margin-top:24px;background:#fff;border:1px solid #ededed;border-radius:25px;overflow-y:auto;margin-bottom:20px}@media (max-width:1400px){.cart-modal__locations{margin-top:20px}}@media (max-width:1279px){.cart-modal__locations{margin-top:16px}}@media (max-width:991px){.cart-modal__locations{margin-top:12px}}.cart-modal__location{padding:16px 32px 16px 16px;position:relative;cursor:pointer}.cart-modal__location.active{background:#36895f;color:#fff}.cart-modal__location.active *{color:inherit;opacity:1}@media (max-width:1400px){.cart-modal__location{padding:12px 28px 12px 12px}}@media (max-width:1279px){.cart-modal__location{padding:8px 24px 8px 8px}}.cart-modal__location p{margin-bottom:8px;font-size:16px;color:#1a1a1a;opacity:.5}@media (max-width:1400px){.cart-modal__location p{font-size:14px}}.cart-modal__location span{font-weight:600;font-size:16px;line-height:1.3;color:#36895f}@media (max-width:1400px){.cart-modal__location span{font-size:14px}}.cart-modal__location .material-icons{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#36895f;font-size:24px}@media (max-width:1400px){.cart-modal__location .material-icons{font-size:20px}}.cart-modal__location:not(:last-child){border-bottom:1px solid #ededed}.cart-modal__tabs{display:flex;overflow:hidden}.cart-modal__input input{width:100%;height:32px;background:#fff;border-radius:12px;border:1px solid #e9ecef;font-size:14px;padding:0 12px;font-weight:400}.cart-modal__geo{color:#36895f;gap:12px;display:flex;align-items:center;cursor:pointer;font-weight:600}@media (max-width:1400px){.cart-modal__geo{font-size:14px;gap:8px}}.cart-modal__text p{font-size:20px;font-weight:600;color:#36895f;margin-bottom:8px}@media (max-width:1400px){.cart-modal__text p{font-size:18px}}@media (max-width:1279px){.cart-modal__text p{font-size:16px}}@media (max-width:991px){.cart-modal__text p{font-size:14px}}.cart-modal__text span{font-weight:400;font-size:15px;line-height:1;color:#1a1a1a;opacity:.5}@media (max-width:1400px){.cart-modal__text{font-size:14px}}@media (max-width:1279px){.cart-modal__text{font-size:12px}}.cart-modal__tab{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #e9ecef;border-radius:12px 0 0 12px;font-size:16px;cursor:pointer;transition:.3s}@media (max-width:1400px){.cart-modal__tab{font-size:14px;height:40px}}.cart-modal__tab:last-child{border-radius:0 12px 12px 0}.cart-modal__tab.active{background:#36895f;color:#fff}.cart-modal__section{padding:24px 60px;display:flex;flex-direction:column;gap:24px;border-bottom:1px solid #ededed;margin-right:-60px;margin-left:-60px}@media (max-width:1400px){.cart-modal__section{padding:20px 48px;margin-left:-48px;margin-right:-48px;gap:20px}}@media (max-width:1279px){.cart-modal__section{padding:16px 32px;margin-left:-32px;margin-right:-32px;gap:16px}}@media (max-width:991px){.cart-modal__section{padding:12px 24px;margin-left:-24px;margin-right:-24px;gap:12px}}.cart-modal__main{display:flex;flex:1;overflow:hidden}@media (max-width:767px){.cart-modal__main{flex-direction:column-reverse}}.cart-modal__main .cart-modal__left{border-right:1px solid #ededed;padding-right:60px}@media (max-width:1400px){.cart-modal__main .cart-modal__left{padding-right:48px}}@media (max-width:1279px){.cart-modal__main .cart-modal__left{padding-right:32px}}@media (max-width:991px){.cart-modal__main .cart-modal__left{padding-right:24px}}@media (max-width:767px){.cart-modal__main .cart-modal__left{width:100%;max-height:30vh;overflow-y:auto}.cart-modal__main .cart-modal__left>div{flex-shrink:0}}.cart-modal__main .cart-modal__left .h1{color:#36895f}.cart-modal__header{width:100%;display:flex;align-items:center;height:96px;border-bottom: 1px solid #ededed;padding:0 60px}@media (max-width:1400px){.cart-modal__header{height:80px;padding:0 48px}}@media (max-width:1279px){.cart-modal__header{height:70px;padding:0 32px}}@media (max-width:991px){.cart-modal__header{height:60px;padding:0 24px}}.cart-modal__header .container{width:100%}.cart-modal__formline{display:flex;gap:12px}.cart-modal__form{padding:24px 0}@media (max-width:1400px){.cart-modal__form{padding:20px 0 0}}@media (max-width:1279px){.cart-modal__form{padding:16px 0 0}}@media (max-width:991px){.cart-modal__form{padding:12px 0 0}}.cart-modal__form form{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;padding:20px;border-radius:12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}@media (max-width:1400px){.cart-modal__form form{margin-bottom:20px}}@media (max-width:1279px){.cart-modal__form form{margin-bottom:16px}}@media (max-width:991px){.cart-modal__form form{margin-bottom:12px}}.cart-modal__form input{width:100%;height:32px;background:#fff;border-radius:12px;border:1px solid #e9ecef;font-size:14px;padding:0 12px;font-weight:400}.cart-modal__form-tip{display:flex;align-items:center;gap:4px;font-size:16px;margin-bottom:12px}@media (max-width:1400px){.cart-modal__form-tip{font-size:14px}}.cart-modal__form-tip div{color:#1a1a1a;opacity:.5}.cart-modal__form-tip span{color:#36895f}.cart-modal__form-title{font-size:24px;color:#36895f;font-weight:800;margin-bottom:12px}@media (max-width:1400px){.cart-modal__form-title{font-size:20px}}@media (max-width:1279px){.cart-modal__form-title{font-size:18px}}@media (max-width:991px){.cart-modal__form-title{font-size:16px}}.cart-modal__left{padding-left:60px;width:480px;display:flex;flex-direction:column}@media (max-width:1400px){.cart-modal__left{padding-left:48px;width:420px}}@media (max-width:1279px){.cart-modal__left{padding-left:32px;width:380px}}@media (max-width:991px){.cart-modal__left{padding-left:24px;width:340px}}@media (max-width:767px){.cart-modal__left{width:auto}}.cart-modal__buttons{margin-top:auto;margin-bottom:64px}@media (max-width:767px){.cart-modal__buttons{margin:16px 0 0}}.cart-modal__top{height:100px;display:flex;align-items:center;border-bottom:1px solid #ededed}@media (max-width:1400px){.cart-modal__top{height:90px}}@media (max-width:1279px){.cart-modal__top{height:80px}}@media (max-width:991px){.cart-modal__top{height:70px}}@media (max-width:767px){.cart-modal__top{height:auto;min-height:70px;padding:12px 0;flex-direction:column;align-items:flex-start;gap:12px}}.cart-modal__top .cart-modal__right{display:flex;align-items:center;gap:24px}@media (max-width:767px){.cart-modal__top .cart-modal__right{flex:unset;padding:0 24px;flex-wrap:wrap;gap:12px 24px}}.cart-modal__top .breadcrumbs{margin:0}@media (max-width:767px){.cart-modal__heading{width:100%}}.cart-modal__heading span{font-size:14px;color:#1a1a1a;opacity:.5}@media (max-width:1279px){.cart-modal__heading span{font-size:12px}}.cart-modal__heading p{color:#36895f;font-weight:800;font-size:28px;line-height:1.3}@media (max-width:1400px){.cart-modal__heading p{font-size:24px}}@media (max-width:1279px){.cart-modal__heading p{font-size:20px}}@media (max-width:991px){.cart-modal__heading p{font-size:16px}}.cart-modal__right{flex:1;overflow:hidden}.cart-modal__right iframe{height:100%}.cart-product{display:flex;position:relative;width:100%;gap:20px;align-items:flex-start}
/* Оптимизация корзины для мобильных устройств */
@media (max-width: 767px) {
.cart {
padding: 16px 0;
}
.cart-title {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.cart-main {
gap: 16px;
padding: 0 16px;
}
.cart-main__right {
padding-top: 20px;
}
.cart-main__top {
flex-direction: column;
gap: 12px;
height: auto;
padding: 16px;
}
.cart-main__actions {
flex-direction: column;
gap: 16px;
}
.cart-main__payments {
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.cart-main__payment {
width: 100%;
min-height: 60px;
}
.cart-product {
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid #e1e8ed;
border-radius: 12px;
margin-bottom: 16px;
}
.cart-product__image {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.cart-product__image img {
width: 100%;
height: auto;
border-radius: 12px;
}
.cart-product__info {
width: 100%;
text-align: center;
}
.cart-product__main {
flex-direction: column;
gap: 12px;
align-items: center;
}
.cart-product__name {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.cart-product__description {
font-size: 14px;
color: #6c757d;
margin-bottom: 12px;
}
.cart-product__price {
font-size: 18px;
font-weight: 700;
color: #36895f;
margin-bottom: 12px;
}
.cart-product__actions {
justify-content: center;
gap: 16px;
}
.cart-product__actions button {
width: 36px;
height: 36px;
}
.cart-main__delivery form {
width: 100%;
}
.cart-main__delivery form input,
.cart-main__delivery form textarea {
height: 44px;
font-size: 16px;
padding: 0 16px;
}
.cart-main__delivery form textarea {
height: 100px;
padding: 12px 16px;
}
.cart-delivery__totals {
margin: 12px 0;
padding: 16px 0;
}
.cart-delivery__total {
font-size: 16px;
}
.cart-delivery__total--main div:first-child {
font-size: 18px;
}
.cart-delivery__warning {
font-size: 14px;
padding: 12px 16px;
border-radius: 12px;
}
/* Центрирование цены и количества товара в корзине на мобильных устройствах */
.cart-product__price {
text-align: center;
margin: 0 auto 12px auto;
width: 100%;
}
.cart-product__qty {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.cart-product__qty input {
text-align: center;
}
/* Оптимизация checkout для мобильных устройств */
.woocommerce-checkout {
padding: 16px 0;
}
.woocommerce-checkout .woocommerce {
max-width: 100%;
padding: 0 16px;
}
.woocommerce-checkout .col2-set {
display: block;
}
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
width: 100%;
margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
font-size: 20px;
margin-bottom: 16px;
text-align: center;
}
.woocommerce-checkout .form-row {
margin-bottom: 16px;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
width: 100%;
height: 44px;
font-size: 16px;
padding: 0 16px;
border: 1px solid #e1e8ed;
border-radius: 8px;
background: #fff;
}
.woocommerce-checkout .form-row textarea {
height: 100px;
padding: 12px 16px;
resize: vertical;
}
.woocommerce-checkout .form-row label {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
margin-top: 24px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e1e8ed;
}
.woocommerce-checkout .woocommerce-checkout-review-order h3 {
font-size: 20px;
margin-bottom: 16px;
text-align: center;
}
.woocommerce-checkout .shop_table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
padding: 12px 8px;
text-align: left;
border-bottom: 1px solid #e1e8ed;
font-size: 14px;
}
.woocommerce-checkout .shop_table th {
font-weight: 600;
background: #f8f9fa;
}
.woocommerce-checkout .shop_table .product-name {
font-weight: 600;
}
.woocommerce-checkout .shop_table .product-total {
text-align: right;
font-weight: 600;
color: #36895f;
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
font-size: 16px;
font-weight: 700;
background: #f8f9fa;
border-top: 2px solid #36895f;
}
.woocommerce-checkout .payment_methods {
margin-top: 20px;
}
.woocommerce-checkout .payment_methods li {
margin-bottom: 12px;
padding: 16px;
background: #fff;
border: 1px solid #e1e8ed;
border-radius: 8px;
}
.woocommerce-checkout .payment_methods label {
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
}
.woocommerce-checkout .payment_methods input[type="radio"] {
width: 20px;
height: 20px;
margin: 0;
}
.woocommerce-checkout .place-order {
margin-top: 24px;
text-align: center;
}
.woocommerce-checkout .place-order .button {
width: 100%;
height: 50px;
font-size: 16px;
font-weight: 600;
background: #36895f;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.woocommerce-checkout .place-order .button:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
margin: 16px 0;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
}
.woocommerce-checkout .woocommerce-error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.woocommerce-checkout .woocommerce-message {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.woocommerce-checkout .woocommerce-info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
/* Оптимизация личного кабинета поставщика для мобильных устройств */
.supplier-dashboard {
position: relative;
}
/* Мобильное меню для личного кабинета поставщика */
.supplier-mobile-menu-toggle {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
width: 50px;
height: 50px;
background: #36895f;
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.3);
transition: all 0.3s ease;
}
.supplier-mobile-menu-toggle:hover {
background: #2d6b4a;
transform: scale(1.05);
}
.supplier-mobile-menu-toggle.active {
background: #2d6b4a;
transform: rotate(90deg);
}
/* Боковая панель для мобильных */
.supplier-sidebar {
transition: transform 0.3s ease;
}
.supplier-sidebar.mobile-hidden {
transform: translateX(-100%);
}
/* Оверлей для мобильного меню */
.supplier-mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
}
.supplier-mobile-overlay.active {
display: block;
opacity: 1;
}
/* Адаптация контента для мобильных */
.supplier-main {
transition: margin-left 0.3s ease;
}
.supplier-main.mobile-full {
margin-left: 0;
}
/* Улучшенные стили для мобильных карточек */
.stat-card {
text-align: center;
padding: 20px 16px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e8ed;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.stat-icon {
font-size: 40px;
margin-bottom: 12px;
display: block;
}
.stat-content h3 {
font-size: 14px;
font-weight: 600;
color: #6c757d;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #36895f;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: #6c757d;
}
/* Улучшенные стили для навигации */
.sidebar-nav {
padding: 0;
}
.nav-item {
display: flex;
align-items: center;
padding: 16px 20px;
color: #495057;
text-decoration: none;
border-bottom: 1px solid #f8f9fa;
transition: all 0.3s ease;
font-weight: 500;
}
.nav-item:hover {
background: #f8f9fa;
color: #36895f;
padding-left: 24px;
}
.nav-item.active {
background: #e8f5e8;
color: #36895f;
border-left: 4px solid #36895f;
font-weight: 600;
}
.nav-icon {
font-size: 20px;
margin-right: 12px;
width: 24px;
text-align: center;
}
/* Улучшенные стили для заголовков */
.main-header {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 24px;
border: 1px solid #e1e8ed;
}
.main-header h1 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.last-update {
font-size: 14px;
color: #6c757d;
margin-top: 8px;
}
/* Улучшенные стили для быстрых действий */
.quick-actions {
margin-bottom: 32px;
}
.quick-actions h2 {
font-size: 22px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e1e8ed;
}
.actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.action-card {
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e8ed;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
text-align: center;
}
.action-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
color: #36895f;
}
.action-icon {
font-size: 32px;
margin-bottom: 12px;
display: block;
}
.action-card h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
color: #2c3e50;
}
/* Адаптация для очень маленьких экранов */
@media (max-width: 480px) {
.supplier-mobile-menu-toggle {
width: 45px;
height: 45px;
font-size: 20px;
top: 15px;
left: 15px;
}
.stat-card {
padding: 16px 12px;
}
.stat-icon {
font-size: 32px;
}
.stat-value {
font-size: 20px;
}
.action-card {
padding: 20px 16px;
}
.action-icon {
font-size: 28px;
}
.main-header h1 {
font-size: 24px;
}
.nav-item {
padding: 14px 16px;
font-size: 14px;
}
.nav-icon {
font-size: 18px;
margin-right: 10px;
}
}
/* Оптимизация страницы запросов фотографий для мобильных устройств */
.orders-filters {
padding: 16px;
margin-bottom: 20px;
border-radius: 12px;
}
.orders-filters h2 {
font-size: 18px;
margin-bottom: 16px;
text-align: center;
}
.filter-row {
flex-direction: column;
gap: 12px;
}
.filter-group {
min-width: 100%;
}
.filter-group label {
font-size: 14px;
margin-bottom: 6px;
}
.filter-group select,
.filter-group input {
width: 100%;
height: 44px;
font-size: 16px;
padding: 0 16px;
border: 1px solid #e1e8ed;
border-radius: 8px;
background: #fff;
}
/* Адаптация таблицы запросов */
.orders-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 20px;
}
.orders-table-container h2 {
font-size: 18px;
margin-bottom: 16px;
text-align: center;
}
.orders-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.orders-table thead {
background: #f8f9fa;
}
.orders-table th {
padding: 12px 8px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: #495057;
border-bottom: 2px solid #e1e8ed;
white-space: nowrap;
}
.orders-table td {
padding: 12px 8px;
font-size: 13px;
border-bottom: 1px solid #f8f9fa;
vertical-align: top;
}
.orders-table tr:hover {
background: #f8f9fa;
}
/* Адаптация элементов таблицы */
.product-item {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.request-message {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #6c757d;
}
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-in_progress {
background: #d1ecf1;
color: #0c5460;
}
.status-completed {
background: #d4edda;
color: #155724;
}
.status-cancelled {
background: #f8d7da;
color: #721c24;
}
.btn-small {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.respond-btn {
background: #36895f;
color: white;
}
.respond-btn:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.completed-text {
color: #28a745;
font-size: 12px;
font-weight: 500;
}
/* Модальное окно для мобильных */
.photo-request-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.photo-request-modal-overlay.active {
display: flex;
}
.photo-request-modal-container {
background: white;
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.photo-request-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #e1e8ed;
background: #f8f9fa;
border-radius: 12px 12px 0 0;
}
.photo-request-modal-title {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #2c3e50;
}
.photo-request-modal-close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #6c757d;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.photo-request-modal-close-btn:hover {
background: #e9ecef;
color: #495057;
}
.photo-request-modal-body {
padding: 20px;
}
.photo-request-form-group {
margin-bottom: 20px;
}
.photo-request-form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
}
.photo-request-form-group textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #e1e8ed;
border-radius: 8px;
font-size: 14px;
resize: vertical;
min-height: 100px;
}
.photo-request-form-group input[type="file"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #e1e8ed;
border-radius: 8px;
font-size: 14px;
background: #fff;
}
.photo-request-form-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.photo-request-btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.photo-request-btn-success {
background: #36895f;
color: white;
}
.photo-request-btn-success:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.photo-request-btn-secondary {
background: #6c757d;
color: white;
}
.photo-request-btn-secondary:hover {
background: #5a6268;
transform: translateY(-1px);
}
/* Сообщение "Нет запросов" */
.no-orders {
text-align: center;
padding: 40px 20px;
}
.no-orders-content {
max-width: 400px;
margin: 0 auto;
}
.no-orders-icon {
font-size: 48px;
margin-bottom: 16px;
}
.no-orders h3 {
font-size: 18px;
color: #2c3e50;
margin-bottom: 8px;
}
.no-orders p {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
}
/* ===== ПОЛНАЯ МОБИЛЬНАЯ ОПТИМИЗАЦИЯ СИСТЕМЫ ПОСТАВЩИКОВ ===== */
/* Общие стили для всех страниц поставщика */
.supplier-dashboard {
min-height: 100vh;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* Мобильная кнопка меню */
.supplier-mobile-menu-toggle {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #36895f 0%, #2d6b4a 100%);
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(54, 137, 95, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
align-items: center;
justify-content: center;
}
/* Скрываем кнопку на всех устройствах */
.supplier-mobile-menu-toggle {
display: none !important;
}
.supplier-mobile-menu-toggle:hover {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(54, 137, 95, 0.6);
}
.supplier-mobile-menu-toggle.active {
background: linear-gradient(135deg, #2d6b4a 0%, #1e4d2e 100%);
transform: rotate(90deg) scale(1.1);
}
/* Боковая панель */
.supplier-sidebar {
width: 300px;
background: white;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 1000;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-right: 1px solid #e1e8ed;
}
/* Скрываем боковую панель на мобильных по умолчанию */
@media (max-width: 768px) {
.supplier-sidebar {
transform: translateX(-100%);
}
.supplier-sidebar:not(.mobile-hidden) {
transform: translateX(0);
}
}
.supplier-sidebar.mobile-hidden {
transform: translateX(-100%);
}
/* Заголовок боковой панели */
.sidebar-header {
padding: 24px 20px;
background: linear-gradient(135deg, #36895f 0%, #2d6b4a 100%);
color: white;
position: relative;
overflow: hidden;
}
.sidebar-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.sidebar-header h2 {
margin: 0 0 8px 0;
font-size: 22px;
font-weight: 700;
position: relative;
z-index: 1;
}
.sidebar-header p {
margin: 0;
opacity: 0.9;
font-size: 14px;
position: relative;
z-index: 1;
}
/* Навигация */
.sidebar-nav {
padding: 0;
background: white;
}
/* Скрытие навигации на мобильных устройствах */
@media (max-width: 768px) {
.sidebar-nav {
display: none;
}
/* Показываем навигацию когда боковая панель открыта */
.supplier-sidebar:not(.mobile-hidden) .sidebar-nav {
display: block;
}
}
.nav-item {
display: flex;
align-items: center;
padding: 16px 24px;
color: #495057;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 4px solid transparent;
position: relative;
font-weight: 500;
font-size: 15px;
}
.nav-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #36895f;
transform: scaleY(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover {
background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
color: #36895f;
padding-left: 28px;
transform: translateX(4px);
}
.nav-item:hover::before {
transform: scaleY(1);
}
.nav-item.active {
background: linear-gradient(90deg, #e8f5e8 0%, #f0f8f0 100%);
color: #36895f;
border-left-color: #36895f;
font-weight: 600;
box-shadow: inset 4px 0 0 #36895f;
}
.nav-item.active::before {
transform: scaleY(1);
}
.nav-item.logout {
color: #e74c3c;
border-top: 1px solid #f8f9fa;
margin-top: 8px;
padding-top: 20px;
}
.nav-item.logout:hover {
background: linear-gradient(90deg, #fdf2f2 0%, #fce8e8 100%);
color: #c0392b;
}
.nav-icon {
font-size: 20px;
margin-right: 16px;
width: 24px;
text-align: center;
transition: transform 0.3s ease;
}
.nav-item:hover .nav-icon {
transform: scale(1.1);
}
/* Основной контент */
.supplier-main {
flex: 1;
margin-left: 0;
padding: 20px;
transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 100vh;
}
.supplier-main.mobile-full {
margin-left: 0;
}
/* Заголовок страницы */
.main-header {
background: white;
padding: 24px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 24px;
border: 1px solid #e1e8ed;
position: relative;
overflow: hidden;
}
.main-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #2d6b4a 100%);
}
.main-header h1 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 8px 0;
position: relative;
}
.last-update {
font-size: 14px;
color: #6c757d;
font-weight: 500;
}
/* Сетка статистики */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.stat-card {
background: white;
padding: 24px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e1e8ed;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #2d6b4a 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-icon {
font-size: 48px;
margin-bottom: 16px;
display: block;
text-align: center;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.stat-content h3 {
font-size: 14px;
font-weight: 600;
color: #6c757d;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: #36895f;
margin-bottom: 4px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.stat-label {
font-size: 12px;
color: #6c757d;
text-align: center;
font-weight: 500;
}
/* Быстрые действия */
.quick-actions {
margin-bottom: 32px;
}
.quick-actions h2 {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 3px solid #e1e8ed;
position: relative;
}
.quick-actions h2::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #36895f 0%, #2d6b4a 100%);
}
.actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.action-card {
background: white;
padding: 28px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e1e8ed;
text-decoration: none;
color: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
position: relative;
overflow: hidden;
}
.action-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #2d6b4a 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.action-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
color: #36895f;
}
.action-card:hover::before {
transform: scaleX(1);
}
.action-icon {
font-size: 40px;
margin-bottom: 16px;
display: block;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.action-card h3 {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #2c3e50;
}
/* Оверлей */
.supplier-mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
}
.supplier-mobile-overlay.active {
display: block;
opacity: 1;
}
/* Адаптация для очень маленьких экранов */
@media (max-width: 480px) {
.supplier-mobile-menu-toggle {
width: 48px;
height: 48px;
font-size: 20px;
top: 16px;
left: 16px;
}
.supplier-main {
padding: 16px;
}
.main-header {
padding: 20px;
}
.main-header h1 {
font-size: 24px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-card {
padding: 20px;
}
.stat-icon {
font-size: 40px;
}
.stat-value {
font-size: 28px;
}
.actions-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.action-card {
padding: 24px;
}
.action-icon {
font-size: 36px;
}
.nav-item {
padding: 14px 20px;
font-size: 14px;
}
.nav-icon {
font-size: 18px;
margin-right: 12px;
}
.sidebar-header {
padding: 20px;
}
.sidebar-header h2 {
font-size: 20px;
}
}
/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
.supplier-mobile-menu-toggle {
display: none;
}
.supplier-sidebar {
position: relative;
width: 100%;
height: auto;
box-shadow: none;
border-right: none;
border-bottom: 1px solid #e1e8ed;
}
.supplier-main {
margin-left: 0;
}
.sidebar-nav {
display: flex;
flex-wrap: wrap;
padding: 16px;
gap: 8px;
}
.nav-item {
flex: 1;
min-width: 140px;
border-left: none;
border-bottom: 3px solid transparent;
text-align: center;
padding: 12px 16px;
border-radius: 8px;
}
.nav-item::before {
display: none;
}
.nav-item:hover {
background: #f8f9fa;
color: #36895f;
padding-left: 16px;
transform: none;
}
.nav-item.active {
background: #e8f5e8;
color: #36895f;
border-bottom-color: #36895f;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.actions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Десктоп */
@media (min-width: 1025px) {
.supplier-mobile-menu-toggle {
display: none;
}
.supplier-sidebar {
position: fixed;
width: 280px;
}
.supplier-main {
margin-left: 280px;
}
.supplier-main.mobile-full {
margin-left: 280px;
}
}
}.cart-product__select{position:absolute;left:-4px;top:-4px}.cart-product__info{display:flex;flex-direction:column;height:96px;justify-content:space-between;flex:1}.cart-product__actions{display:flex;gap:10px}.cart-product__actions button{width:41px;height:41px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f3f3f3;color:#000}.cart-product__description{font-size:12px}.cart-product__name{font-size:14px;font-weight:600}.cart-product__price{font-size:14px;font-weight:600;margin-right:24px}.cart-product__main{display:flex;align-items:center;flex:1;justify-content:space-between}@media (max-width:767px){.cart-product__main{flex-direction:column;align-items:flex-start;gap:16px;margin: 20px;}}.cart-product__image{flex-shrink:0;width:94px;box-shadow:0 0 30px rgba(186,186,186,.5);overflow:hidden;border-radius:20px}.cart-product__image img{height:94px;-o-object-fit:cover;object-fit:cover;width:100%}.contacts-address__text a[href^="tel:"] {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
/* Ozon-style Product Page */
.ozon-product-page {
padding: 20px 0;
background: #fff;
min-height: 100vh;
}
.ozon-product-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 30px;
display: grid;
grid-template-columns: 400px 1fr;
gap: 0;
min-height: 500px;
border: 1px solid #e5e5e5;
}
@media (max-width: 1279px) {
.ozon-product-card {
grid-template-columns: 350px 1fr;
}
}
@media (max-width: 991px) {
.ozon-product-card {
grid-template-columns: 1fr;
margin-bottom: 20px;
}
}
/* Ozon Gallery Styles */
.ozon-gallery {
background: #fff;
padding: 20px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.ozon-thumbnails {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 400px;
overflow-y: auto;
padding-right: 8px;
}
.ozon-thumb {
width: 60px;
height: 60px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.ozon-thumb:hover {
border-color: #36895f;
box-shadow: 0 2px 8px rgba(54, 137, 95, 0.2);
}
.ozon-thumb.active {
border-color: #36895f;
box-shadow: 0 2px 8px rgba(54, 137, 95, 0.3);
}
.ozon-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ozon-main-image {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.ozon-image-container {
position: relative;
width: 100%;
height: 400px;
border-radius: 8px;
overflow: hidden;
background: #f8f9fa;
border: 1px solid #e5e5e5;
}
.ozon-main-img {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
display: block;
margin: 0;
padding: 0;
}
.ozon-zoom-btn {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
}
.ozon-image-container:hover .ozon-zoom-btn {
opacity: 1;
}
@media (max-width: 991px) {
.ozon-gallery {
flex-direction: column;
padding: 15px;
}
.ozon-thumbnails {
flex-direction: row;
max-height: none;
overflow-x: auto;
padding-right: 0;
padding-bottom: 8px;
}
.ozon-image-container {
height: 300px;
}
}
/* Ozon Product Info Styles */
.ozon-product-info {
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ozon-header {
display: flex;
flex-direction: column;
gap: 12px;
}
.ozon-title {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.3;
margin: 0;
}
.ozon-rating {
display: flex;
align-items: center;
gap: 8px;
}
.ozon-stars {
display: flex;
gap: 2px;
}
.ozon-stars .material-symbols-outlined {
font-size: 16px;
color: #ffc107;
}
.ozon-rating-text {
font-weight: 600;
color: #1a1a1a;
font-size: 14px;
}
.ozon-reviews {
color: #6c757d;
font-size: 14px;
}
.ozon-pricing {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e5e5e5;
}
.ozon-price-main {
display: flex;
flex-direction: column;
gap: 4px;
}
.ozon-price-label {
font-size: 14px;
color: #6c757d;
font-weight: 500;
}
.ozon-price-current {
font-size: 28px;
font-weight: 700;
color: #36895f;
}
.ozon-price-wholesale {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.ozon-wholesale-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: #6c757d;
}
.ozon-wholesale-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #36895f;
}
.ozon-wholesale-price {
font-size: 24px;
font-weight: 700;
color: #36895f;
}
.ozon-wholesale-info {
margin-top: 12px;
padding: 12px;
background: #e8f5e8;
border-radius: 6px;
border-left: 4px solid #36895f;
}
.ozon-wholesale-badge {
display: inline-block;
padding: 4px 8px;
background: #36895f;
color: white;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
margin-bottom: 8px;
}
.ozon-wholesale-min-qty {
font-size: 14px;
color: #495057;
font-weight: 500;
}
/* Sale Badge Styles */
.product-card {
position: relative;
}
.ozon-header {
position: relative;
}
.archive-sale-badge {
position: absolute;
top: 10px;
left: 10px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
z-index: 10;
animation: sale-pulse 2s infinite;
}
.single-sale-badge {
position: absolute;
top: 0px;
right: 0px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
padding: 12px 24px;
border-radius: 30px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
z-index: 10;
animation: sale-pulse 2s infinite;
}
@keyframes sale-pulse {
0% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(231, 76, 60, 0.6);
}
100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}
}
/* Lightbox Styles */
.ozon-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
overflow: hidden;
}
.ozon-lightbox.active {
display: flex;
align-items: center;
justify-content: center;
}
.ozon-lightbox-content {
position: relative;
width: 90%;
height: 90%;
max-width: 1200px;
display: flex;
flex-direction: column;
}
.ozon-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
transition: background 0.3s ease;
}
.ozon-lightbox-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.ozon-lightbox-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 20px;
}
.ozon-lightbox-prev,
.ozon-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
transition: background 0.3s ease;
}
.ozon-lightbox-prev {
left: 20px;
}
.ozon-lightbox-next {
right: 20px;
}
.ozon-lightbox-prev:hover,
.ozon-lightbox-next:hover {
background: rgba(255, 255, 255, 0.3);
}
.ozon-lightbox-image-container {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ozon-lightbox-image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.ozon-lightbox-thumbnails {
height: 100px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 0;
}
.ozon-lightbox-thumbnails-container {
display: flex;
gap: 10px;
justify-content: center;
min-width: max-content;
}
.ozon-lightbox-thumbnail {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s ease;
flex-shrink: 0;
}
.ozon-lightbox-thumbnail.active {
border-color: #36895f;
}
.ozon-lightbox-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Similar Products Modal Styles */
.ozon-similar-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
overflow-y: auto;
}
.ozon-similar-modal.active {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.ozon-similar-modal-content {
background: white;
border-radius: 12px;
width: 100%;
max-width: 1200px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ozon-similar-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #e5e5e5;
}
.ozon-similar-modal-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #333;
}
.ozon-similar-modal-close {
background: none;
border: none;
color: #666;
cursor: pointer;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.ozon-similar-modal-close:hover {
background: #f5f5f5;
}
.ozon-similar-modal-body {
padding: 24px;
flex: 1;
overflow-y: auto;
}
.ozon-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px;
color: #666;
font-size: 16px;
}
.ozon-loading .material-symbols-outlined {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ozon-similar-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.ozon-similar-product {
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.ozon-similar-product:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ozon-similar-product-image {
width: 100%;
height: 200px;
overflow: hidden;
}
.ozon-similar-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ozon-similar-product-info {
padding: 16px;
}
.ozon-similar-product-title {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ozon-similar-product-price {
font-size: 16px;
font-weight: 600;
color: #36895f;
}
.ozon-attributes {
display: flex;
flex-direction: column;
gap: 8px;
}
.ozon-attribute {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.ozon-attribute:last-child {
border-bottom: none;
}
.ozon-attr-label {
font-weight: 500;
color: #6c757d;
font-size: 14px;
}
.ozon-attr-value {
font-weight: 500;
color: #1a1a1a;
font-size: 14px;
text-align: right;
}
/* Ozon Variations */
.ozon-variations {
display: flex;
flex-direction: column;
gap: 16px;
}
.ozon-variation {
display: flex;
flex-direction: column;
gap: 8px;
}
.ozon-variation-label {
font-weight: 500;
color: #1a1a1a;
font-size: 14px;
}
.ozon-variation-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ozon-variation-option {
padding: 8px 16px;
border: 1px solid #d0d0d0;
border-radius: 6px;
font-size: 14px;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
color: #1a1a1a;
}
.ozon-variation-option:hover {
border-color: #36895f;
color: #36895f;
}
.ozon-variation-option.selected {
border-color: #36895f;
background: #36895f;
color: #fff;
}
/* Ozon Actions */
.ozon-actions {
display: flex;
flex-direction: column;
gap: 16px;
}
.ozon-quantity {
display: flex;
flex-direction: column;
gap: 8px;
}
.ozon-quantity-label {
font-weight: 500;
color: #1a1a1a;
font-size: 14px;
}
.ozon-quantity-controls {
display: flex;
align-items: center;
gap: 0;
border: 1px solid #d0d0d0;
border-radius: 6px;
overflow: hidden;
max-width: 120px;
}
.ozon-qty-btn {
width: 32px;
height: 32px;
border: none;
background: #f8f9fa;
color: #6c757d;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ozon-qty-btn:hover {
background: #e9ecef;
color: #1a1a1a;
}
.ozon-qty-input {
width: 56px;
height: 32px;
border: none;
text-align: center;
font-size: 14px;
font-weight: 500;
background: #fff;
}
.ozon-qty-input:focus {
outline: none;
}
.ozon-buttons {
display: flex;
gap: 12px;
align-items: center;
}
.ozon-add-cart {
flex: 1;
background: #36895f;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.ozon-add-cart:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.ozon-wishlist {
width: 48px;
height: 48px;
border: 1px solid #d0d0d0;
background: #fff;
color: #6c757d;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ozon-wishlist:hover {
border-color: #36895f;
color: #36895f;
}
/* Ozon Delivery */
.ozon-delivery {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e5e5e5;
}
.ozon-delivery-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ozon-delivery-item .material-symbols-outlined {
font-size: 20px;
color: #36895f;
margin-top: 2px;
}
.ozon-delivery-title {
font-weight: 600;
color: #1a1a1a;
font-size: 14px;
margin-bottom: 2px;
}
.ozon-delivery-desc {
color: #6c757d;
font-size: 12px;
}
/* Ozon Returns */
.ozon-returns {
display: flex;
gap: 16px;
}
.ozon-return-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #e8f5e8;
border-radius: 6px;
font-size: 12px;
color: #36895f;
font-weight: 500;
}
.ozon-return-item .material-symbols-outlined {
font-size: 16px;
}
.product-attribute {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
}
.product-attribute:last-child {
border-bottom: none;
}
.product-attribute__label {
font-weight: 600;
color: #6c757d;
font-size: 14px;
}
.product-attribute__value {
font-weight: 600;
color: #1a1a1a;
font-size: 14px;
text-align: right;
}
/* Product Actions Styles */
.product-info__actions {
margin-top: auto;
}
.product-actions-compact {
display: flex;
flex-direction: column;
gap: 20px;
}
.quantity-and-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: end;
}
@media (max-width: 767px) {
.quantity-and-buttons {
grid-template-columns: 1fr;
gap: 15px;
}
}
.quantity-selector {
display: flex;
flex-direction: column;
gap: 12px;
}
.quantity-selector__label {
font-weight: 600;
color: #1a1a1a;
font-size: 16px;
}
.quantity-selector__controls {
display: flex;
align-items: center;
background: #f8f9fa;
border-radius: 12px;
padding: 6px;
width: fit-content;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.quantity-selector__controls:focus-within {
border-color: #36895f;
box-shadow: 0 0 0 3px rgba(54, 137, 95, 0.1);
}
.quantity-btn {
width: 44px;
height: 44px;
border: none;
background: #36895f;
color: #fff;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 18px;
}
.quantity-btn:hover {
background: #2d6b4a;
transform: scale(1.05);
}
.quantity-btn:active {
transform: scale(0.95);
}
.quantity-selector__input {
width: 80px;
height: 44px;
border: none;
background: transparent;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
outline: none;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.add-to-cart-btn {
background: linear-gradient(135deg, #36895f 0%, #2d6b4a 100%);
color: #fff;
border: none;
padding: 14px 20px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(54, 137, 95, 0.3);
min-height: 48px;
}
.add-to-cart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(54, 137, 95, 0.4);
}
.add-to-cart-btn:active {
transform: translateY(0);
}
.wishlist-btn {
background: #fff;
color: #6c757d;
border: 2px solid #e9ecef;
padding: 14px 20px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
min-height: 48px;
}
.wishlist-btn:hover {
border-color: #36895f;
color: #36895f;
transform: translateY(-2px);
}
.product-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
border: 1px solid #e9ecef;
}
@media (max-width: 767px) {
.product-features {
grid-template-columns: 1fr;
gap: 12px;
}
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #495057;
}
.feature-item span:first-child {
color: #36895f;
font-size: 20px;
}
.out-of-stock-message {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 12px;
color: #856404;
font-weight: 600;
text-align: center;
justify-content: center;
}
/* Tabs Styles */
.product-tabs {
background: #fff;
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 40px;
}
.product-tabs__nav {
display: flex;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.product-tabs__nav-item {
flex: 1;
padding: 20px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: #6c757d;
transition: all 0.3s ease;
position: relative;
}
.product-tabs__nav-item:hover {
color: #36895f;
background: rgba(54, 137, 95, 0.05);
}
.product-tabs__nav-item.active {
color: #36895f;
background: #fff;
}
.product-tabs__nav-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #36895f;
}
.product-tabs__content {
padding: 40px;
}
@media (max-width: 991px) {
.product-tabs__content {
padding: 20px;
}
}
.product-tabs__panel {
display: none;
}
.product-tabs__panel.active {
display: block;
}
.product-description {
font-size: 16px;
line-height: 1.7;
color: #495057;
}
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
color: #1a1a1a;
margin-bottom: 16px;
}
.product-description p {
margin-bottom: 16px;
}
.product-attributes {
display: flex;
flex-direction: column;
gap: 16px;
}
.product-delivery h3 {
color: #1a1a1a;
margin-bottom: 20px;
font-size: 24px;
}
.delivery-options {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
.delivery-option {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
}
.delivery-option span {
color: #36895f;
font-size: 24px;
flex-shrink: 0;
}
.delivery-option h4 {
color: #1a1a1a;
margin-bottom: 8px;
font-size: 18px;
}
.delivery-option p {
color: #6c757d;
margin: 0;
line-height: 1.5;
}
/* Similar Products Styles */
.similar-products {
background: #fff;
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
padding: 40px;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.similar-products {
padding: 20px;
}
}
.similar-products__title {
text-align: center;
color: #1a1a1a;
margin-bottom: 30px;
font-size: 28px;
font-weight: 800;
}
.similar-products__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.similar-product {
background: #fff;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
position: relative;
}
.similar-product:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
border-color: #36895f;
}
.similar-product__link {
display: block;
text-decoration: none;
color: inherit;
position: relative;
}
.similar-product__image {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
background: #f8f9fa;
}
.similar-product__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.similar-product__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(54, 137, 95, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
color: #fff;
font-size: 24px;
}
.similar-product:hover .similar-product__overlay {
opacity: 1;
}
.similar-product:hover .similar-product__image img {
transform: scale(1.1);
}
.similar-product__info {
padding: 24px;
position: relative;
}
.similar-product__name {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 44px;
}
.similar-product__price {
color: #36895f;
font-size: 20px;
font-weight: 800;
margin-bottom: 16px;
}
.similar-product__add-btn {
background: linear-gradient(135deg, #36895f 0%, #2d6b4a 100%);
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
width: 100%;
box-shadow: 0 2px 8px rgba(54, 137, 95, 0.3);
}
.similar-product__add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(54, 137, 95, 0.4);
}
.similar-products__empty {
text-align: center;
color: #6c757d;
font-style: italic;
padding: 60px 40px;
grid-column: 1 / -1;
background: #f8f9fa;
border-radius: 16px;
border: 2px dashed #dee2e6;
}
.contacts-address__text a[href^="tel:"]:hover {
color: #36895f;
}
.contacts{padding:32px 0}.contacts-title{color:#36895f;margin-bottom:32px}.contacts-address{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:60px;gap:20px}@media (max-width:1400px){.contacts-address{margin-bottom:48px}}@media (max-width:1279px){.contacts-address{margin-bottom:32px}}@media (max-width:991px){.contacts-address{margin-bottom:24px}}@media (max-width:767px){.contacts-address{display:flex;flex-direction:column}}.contacts-address__text{display:flex;align-items:center;gap:10px;font-size:16px;color:#36895f}@media (max-width:1400px){.contacts-address__text{font-size:14px}}.contacts-address__text img{width:24px}@media (max-width:1400px){.contacts-address__text img{width:20px}}.contacts-address__text+.contacts-address__text{margin-top:40px}@media (max-width:1400px){.contacts-address__text+.contacts-address__text{margin-top:32px}}@media (max-width:1279px){.contacts-address__text+.contacts-address__text{margin-top:24px}}@media (max-width:991px){.contacts-address__text+.contacts-address__text{margin-top:16px}}.contacts-address__column{display:flex;flex-direction:column;gap:24px}.contacts-address__title{font-size:20px;line-height:1.5;letter-spacing:.02em;margin-bottom:16px}@media (max-width:1400px){.contacts-address__title{font-size:18px;margin-bottom:12px}}@media (max-width:1279px){.contacts-address__title{font-size:16px;margin-bottom:8px}}@media (max-width:991px){.contacts-address__title{font-size:14px}}.contacts-info{display:flex;flex-direction:column;gap:16px}.contacts-info__item{display:flex;font-size:20px;font-weight:600}@media (max-width:1400px){.contacts-info__item{font-size:18px}}@media (max-width:1279px){.contacts-info__item{font-size:16px}}@media (max-width:991px){.contacts-info__item{font-size:14px}}.contacts-info__item div:first-child{width:500px;max-width:100%}@media (max-width:1400px){.contacts-info__item div:first-child{width:400px}}@media (max-width:1279px){.contacts-info__item div:first-child{width:300px}}@media (max-width:991px){.contacts-info__item div:first-child{width:200px}}.contacts-map{margin-bottom:60px}@media (max-width:1400px){.contacts-map{margin-bottom:48px}}@media (max-width:1279px){.contacts-map{margin-bottom:32px}}@media (max-width:991px){.contacts-map{margin-bottom:24px}}.contacts-map__title{font-size:20px;font-weight:600;margin-bottom:24px}@media (max-width:1400px){.contacts-map__title{font-size:18px;margin-bottom:20px}}@media (max-width:1279px){.contacts-map__title{font-size:16px;margin-bottom:16px}}@media (max-width:991px){.contacts-map__title{font-size:14px;margin-bottom:12px}}.partners{padding:32px 0}.partners-title{color:#36895f;margin-bottom:32px}@media (max-width:1279px){.partners-title{margin-bottom:24px}}.partners-btn{display:flex;justify-content:center;margin-top:70px}@media (max-width:1279px){.partners-btn{margin-top:40px}}@media (max-width:991px){.partners-btn{margin-top:20px}}.partners-btn .btn{text-transform:uppercase}.partners-slide{display:flex!important;flex-direction:column}.partners-slider{display:flex;align-items:center;gap:20px}@media (max-width:1279px){.partners-slider{gap:16px}}.partners-item{margin:20px}@media (max-width:1279px){.partners-item{margin:12px}}.partners-item__image{position:relative;padding-top:100%;border-radius:20px;box-shadow:0 0 2px #bababa;overflow:hidden}.partners-item__image img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;left:0;top:0}button{cursor:pointer}.woocommerce-info{border-top-color:#36895f!important}.woocommerce-info::before{color:#36895f!important}input.error{border-color:red!important}.woocommerce-product-search input[type=search]::-webkit-search-cancel-button{display:none}.woocommerce-product-search input[type=search]{-webkit-appearance:none;-moz-appearance:none;appearance:none}body,html{font-family:"Vela Sans",sans-serif;color:#161616}@media (max-width:991px){body{padding-top:80px}}a{transition:.3s}.base-section{margin:80px 0}@media (max-width:1279px){.base-section{margin:60px 0}}@media (max-width:991px){.base-section{margin:40px 0}}.container{max-width:1320px;position:relative;margin:0 auto}@media (max-width:1400px){.container{max-width:1200px;padding:0 16px}}@media (max-width:1279px){.container{max-width:991px;padding:0 16px}}@media (max-width:991px){.desktop{display:none!important}}@media (min-width:992px){.mobile{display:none!important}}@media (min-width:992px){.xs-mobile{display:none!important}}@media (max-width:1400px){.material-icons,.material-symbols-outlined{font-size:20px!important}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:20}.overlay:not(.active){display:none}body.no-scroll{overflow:hidden}
/* Force show all product cards - prevent hiding */
.product-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override any hiding attempts */
.product-card[style*="display: none"],
.product-card[style*="visibility: hidden"],
.product-card[style*="opacity: 0"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override any classes that might hide */
.product-card.hidden,
.product-card.hide,
.product-card.fadeOut {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Force show parent containers too */
.products-list .product-card,
.category-main__content .product-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Product price transition for smooth variation updates */
.product-main__price {
transition: all 0.3s ease;
}
.product-main__price .woocommerce-Price-amount {
transition: all 0.3s ease;
}
.product-main__price .price {
transition: all 0.3s ease;
}
/* Product card price transition for smooth variation updates */
.product-card__price {
transition: all 0.3s ease;
}
.product-card__price .woocommerce-Price-amount {
transition: all 0.3s ease;
}
.product-card__price .price {
transition: all 0.3s ease;
}
/* Variable product card styles */
.product-card__variations {
margin-bottom: 16px;
}
.product-card__attribute-select {
width: 100%;
padding: 8px 12px;
margin-bottom: 8px;
border: 1px solid #36895f;
border-radius: 20px;
font-size: 14px;
background: #fff;
color: #333;
transition: all 0.3s ease;
}
.product-card__attribute-select:focus {
outline: none;
border-color: #00552f;
box-shadow: 0 0 5px rgba(54, 137, 95, 0.3);
}
.product-card__attribute-select:last-child {
margin-bottom: 0;
}
@media (max-width: 1400px) {
.product-card__attribute-select {
padding: 6px 10px;
font-size: 13px;
margin-bottom: 6px;
}
}
@media (max-width: 991px) {
.product-card__attribute-select {
padding: 5px 8px;
font-size: 12px;
margin-bottom: 5px;
}
}
/* Desktop header container back to normal flow */
.header.desktop{position:relative;z-index:1000;background:#fff}
.header.desktop.is-stuck{box-shadow:none}
/* Floating only bottom row when fixed */
.header-bottom.fixed{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);width:100%;padding:0 calc((100vw - 1320px)/ 2)}
@media (max-width:1400px){.header-bottom.fixed{padding:0 16px}}
@media (max-width:1279px){.header-bottom.fixed{padding:0 16px}}
/* Promo hero (top banner before main banner) */
.promo-hero{margin:40px 0 20px}
.promo-hero .container{display:flex;gap:24px;align-items:stretch}
.promo-hero__content{background:linear-gradient(82.23deg,#36895f -1.99%,#00552f 100%);color:#fff;border-radius:20px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-width:360px}
@media (max-width:1279px){.promo-hero__content{min-width:300px}}
@media (max-width:991px){.promo-hero .container{flex-direction:column}.promo-hero__content{min-width:unset}}
.promo-hero__cta{align-self:flex-start;margin-top:20px}
.promo-hero__products{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1279px){.promo-hero__products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.promo-hero__products{grid-template-columns:1fr}}
.promo-hero__item{background:rgba(254,248,236,.8);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 20px rgba(186,186,186,.4)}
.promo-hero__image img{width:100%;height:160px;-o-object-fit:cover;object-fit:cover}
.promo-hero__info{padding:12px 14px;color:#36895f;display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Wholesale price styles */
.wholesale-label {
color: #36895f;
font-weight: 600;
font-size: 12px;
margin-left: 4px;
}
.wholesale-price {
color: #36895f;
font-weight: 700;
}
.wholesale-price .original-price {
text-decoration: line-through;
color: #999;
font-weight: 400;
margin-right: 8px;
}
/* Плавные переходы для обновления корзины */
.cart-main__products {
transition: opacity 0.3s ease-in-out;
}
.cart-main__products.updating {
opacity: 0.7;
}
.js-totals {
transition: opacity 0.3s ease-in-out;
}
.js-totals.updating {
opacity: 0.7;
}
/* Плавное появление новых элементов корзины */
.cart-product {
animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Плавное исчезновение удаляемых элементов */
.cart-product.removing {
animation: fadeOutDown 0.3s ease-in forwards;
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
/* Плавное обновление элементов корзины */
.cart-product.updating {
opacity: 0.7;
transform: scale(0.98);
transition: all 0.2s ease-in-out;
}
/* Плавная анимация счетчика корзины */
.cart-count-badge {
transition: all 0.3s ease-in-out;
transform-origin: center;
}
.cart-count-badge.updating {
transform: scale(1.2);
background: linear-gradient(82.23deg, #ff6b6b -1.99%, #ff5252 100%);
animation: cartCountPulse 0.4s ease-in-out;
}
.cart-count-badge.adding {
transform: scale(1.3);
background: linear-gradient(82.23deg, #4caf50 -1.99%, #2e7d32 100%);
animation: cartCountBounce 0.5s ease-in-out;
}
.cart-count-badge.removing {
transform: scale(0.8);
background: linear-gradient(82.23deg, #ff9800 -1.99%, #f57c00 100%);
animation: cartCountShrink 0.3s ease-in-out;
}
@keyframes cartCountPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes cartCountBounce {
0% { transform: scale(1); }
25% { transform: scale(1.4); }
50% { transform: scale(1.1); }
75% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes cartCountShrink {
0% { transform: scale(1); }
50% { transform: scale(0.7); }
100% { transform: scale(1); }
}
/* Стили для ПВЗ в карточке товара */
.product-card__pvz {
margin-bottom: 16px;
padding: 12px 0;
border-bottom: 1px solid #e9ecef;
}
.product-card__pvz-label {
margin: 0 0 4px 0;
font-size: 13px;
font-weight: 500;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-card__pvz-value {
font-size: 14px;
color: #495057;
line-height: 1.3;
font-weight: 400;
}
/* PVZ block alignment */
.product-card__pvz { text-align: left; }
.product-card__pvz-label { text-align: left; }
/* Form validation styles */
.form-group input.error,
.form-group textarea.error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
.error-message {
color: #dc3545;
font-size: 12px;
margin-top: 4px;
display: block;
}
.notice {
padding: 12px 16px;
margin: 16px 0;
border-radius: 8px;
border-left: 4px solid;
}
.notice-success {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
.notice-error {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.notice p {
margin: 0;
font-weight: 500;
}
.notice small {
display: block;
margin-top: 4px;
opacity: 0.8;
}
/* Стили для карточки статуса одобрения */
.approval-status-card {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid #e9ecef;
border-radius: 16px;
padding: 24px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.approval-status-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: #36895f;
}
.status-icon {
flex-shrink: 0;
}
.status-circle {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: pulse 2s infinite;
}
.status-circle.pending {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.status-circle.approved {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.status-circle.rejected {
background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}
.status-emoji {
font-size: 24px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.status-content {
flex: 1;
text-align: left;
}
.status-content h3 {
margin: 0 0 8px 0;
color: #2c3e50;
font-size: 18px;
font-weight: 600;
}
.status-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.status-badge.pending {
background: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.status-badge.approved {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status-badge.rejected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status-description {
margin: 0;
color: #6c757d;
font-size: 14px;
line-height: 1.4;
}
/* Адаптивные стили для карточки статуса */
@media (max-width: 768px) {
.approval-status-card {
flex-direction: column;
text-align: center;
padding: 20px;
gap: 15px;
}
.status-content {
text-align: center;
}
.status-circle {
width: 50px;
height: 50px;
}
.status-emoji {
font-size: 20px;
}
.status-content h3 {
font-size: 16px;
}
.status-badge {
font-size: 11px;
padding: 4px 8px;
}
.status-description {
font-size: 13px;
}
}
/* Анимация пульсации для статуса */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Isolated site modals to avoid conflicts with supplier */
.site-modal{z-index:1000;background:#ffffff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:32px;max-width:520px;width:92%}
.site-modal .modal-title{color:#2c3e50;margin-bottom:16px}
.site-modal .input span{color:#36895f}
.site-modal .input input{background:#f3f7f5;border:1px solid #cde6d9;color:#2c3e50}
.site-modal .input input::placeholder{color:#7a8a85}
.site-modal .modal-agree{color:#6c757d;font-weight:500}
.site-modal .btn{width:220px}
.site-modal .modal-close{color:#36895f}
/* Accessibility tweaks */
.site-modal:focus{outline:2px solid #36895f;outline-offset:2px}
.thumbnail_info {
border-top: 1px solid #000;
padding-top: 30px;
margin-top: 30px;
}
.slick-vertical .slick-arrow.slick-prev {
transform: rotate(-90deg);
position: absolute;
top: 20px;
left: calc(50% - 15px);
z-index: 2;
}
.slick-vertical .slick-arrow.slick-next {
transform: rotate(90deg);
position: absolute;
bottom: 31px;
left: calc(50% - 15px);
z-index: 2;
}
.product-main__gallery {
width: 80px;
}
.product-main__gallery .slick-slide {
margin-bottom: 11px;
}
@media (max-width: 991px) {
.product-main__gallery {
width: 102px;
}
}
/* Load more button centering for catalog */
.load-more-container {
text-align: center !important;
margin-bottom: 30px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.load-more-container button {
margin: 0 auto !important;
}
@media (max-width: 767px) {
.product-main__gallery {
width: 100%;
align-items: center;
flex-wrap: nowrap;
}
.product-main__gallery .slick-slide {
margin: 0 10px 0 0;
}
}
/* Wishlist Page Styles */
.wishlist-main {
margin-top: 20px;
}
.wishlist-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.wishlist-count {
font-size: 18px;
font-weight: 400;
color: #6c757d;
margin-left: 10px;
}
.wishlist-empty {
text-align: center;
padding: 80px 20px;
background: #f8f9fa;
border-radius: 12px;
margin: 40px 0;
}
.wishlist-empty__icon {
margin-bottom: 30px;
}
.wishlist-empty__icon .material-symbols-outlined {
font-size: 80px;
color: #ddd;
}
.wishlist-empty__title {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
}
.wishlist-empty__text {
font-size: 16px;
color: #6c757d;
margin-bottom: 30px;
line-height: 1.5;
}
.wishlist-empty .btn {
padding: 12px 30px;
font-size: 16px;
font-weight: 600;
}
/* Products grid for wishlist */
.wishlist-content .products-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
/* Mobile styles for wishlist */
@media (max-width: 768px) {
.wishlist-empty {
padding: 60px 20px;
margin: 20px 0;
}
.wishlist-empty__icon .material-symbols-outlined {
font-size: 60px;
}
.wishlist-empty__title {
font-size: 24px;
}
.wishlist-empty__text {
font-size: 14px;
}
.wishlist-content .products-list {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
}
/* ========================================
ЛИЧНЫЙ КАБИНЕТ КЛИЕНТА
======================================== */
.account-page {
padding: 40px 0;
min-height: 70vh;
}
.account-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.account-sidebar {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
padding: 0;
height: fit-content;
position: sticky;
top: 20px;
}
.account-nav {
padding: 0;
}
.account-user-info {
padding: 25px;
border-bottom: 1px solid #e9ecef;
display: flex;
align-items: center;
gap: 15px;
}
.user-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.user-avatar .material-icons {
font-size: 28px;
}
.user-details h3 {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
.user-details p {
margin: 0;
color: #6c757d;
font-size: 14px;
}
.account-menu {
list-style: none;
margin: 0;
padding: 0;
}
.account-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 25px;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.account-menu-item:hover {
background: #f8f9fa;
color: #36895f;
text-decoration: none;
}
.account-menu-item.active {
background: #e8f5e8;
color: #36895f;
border-left-color: #36895f;
font-weight: 600;
}
.account-menu-item.logout {
color: #dc3545;
border-top: 1px solid #e9ecef;
margin-top: 10px;
}
.account-menu-item.logout:hover {
background: #f8d7da;
color: #dc3545;
}
.account-menu-item .material-icons {
font-size: 20px;
}
.account-content {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
padding: 30px;
}
/* Dashboard Styles */
.account-dashboard {
max-width: 100%;
}
.account-welcome {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e9ecef;
}
.account-welcome h2 {
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 28px;
font-weight: 700;
}
.account-welcome p {
margin: 0;
color: #6c757d;
font-size: 16px;
}
.account-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 25px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.stat-icon .material-icons {
font-size: 24px;
}
.stat-content h3 {
margin: 0 0 5px 0;
font-size: 32px;
font-weight: 700;
color: #2c3e50;
}
.stat-content p {
margin: 0;
color: #6c757d;
font-size: 14px;
font-weight: 500;
}
.recent-orders h3 {
margin: 0 0 20px 0;
color: #2c3e50;
font-size: 22px;
font-weight: 600;
}
.orders-list {
margin-bottom: 20px;
}
.order-item {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.order-item:hover {
background: #e8f5e8;
border-color: #36895f;
}
.order-info {
flex: 1;
}
.order-number {
margin-bottom: 8px;
}
.order-number strong {
color: #2c3e50;
font-size: 16px;
}
.order-date {
color: #6c757d;
font-size: 14px;
margin-left: 10px;
}
.order-status {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-processing {
background: #cce5ff;
color: #004085;
}
.status-shipped {
background: #d4edda;
color: #155724;
}
.status-delivered {
background: #d1ecf1;
color: #0c5460;
}
.status-cancelled {
background: #f8d7da;
color: #721c24;
}
.order-total {
font-size: 18px;
font-weight: 700;
color: #36895f;
margin: 0 20px;
}
.view-all-orders {
text-align: center;
}
/* Orders Page Styles */
.my-orders-page h2 {
margin: 0 0 30px 0;
color: #2c3e50;
font-size: 28px;
font-weight: 700;
}
.orders-table {
background: #fff;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.orders-header {
background: #f8f9fa;
display: grid;
grid-template-columns: 1fr 120px 120px 120px 100px;
gap: 20px;
padding: 15px 20px;
font-weight: 600;
color: #2c3e50;
border-bottom: 1px solid #e0e0e0;
}
.order-row {
display: grid;
grid-template-columns: 1fr 120px 120px 120px 100px;
gap: 20px;
padding: 20px;
border-bottom: 1px solid #e9ecef;
align-items: center;
transition: all 0.3s ease;
}
.order-row:hover {
background: #f8f9fa;
}
.order-row:last-child {
border-bottom: none;
}
.status-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.no-orders {
text-align: center;
padding: 60px 20px;
}
.no-orders-icon {
margin-bottom: 20px;
}
.no-orders-icon .material-icons {
font-size: 64px;
color: #6c757d;
}
.no-orders h3 {
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 24px;
}
.no-orders p {
margin: 0 0 30px 0;
color: #6c757d;
font-size: 16px;
}
/* Profile Page Styles */
.my-profile-page h2 {
margin: 0 0 30px 0;
color: #2c3e50;
font-size: 28px;
font-weight: 700;
}
.profile-form {
max-width: 600px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
background: #fff;
}
.form-group input:focus {
outline: none;
border-color: #36895f;
box-shadow: 0 0 0 3px rgba(54, 137, 95, 0.1);
}
.form-actions {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
/* Addresses Page Styles */
.my-addresses-page h2 {
margin: 0 0 30px 0;
color: #2c3e50;
font-size: 28px;
font-weight: 700;
}
.addresses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
}
.address-card {
background: #f8f9fa;
border-radius: 12px;
padding: 25px;
border: 1px solid #e0e0e0;
}
.address-card h3 {
margin: 0 0 20px 0;
color: #2c3e50;
font-size: 20px;
font-weight: 600;
padding-bottom: 15px;
border-bottom: 2px solid #36895f;
}
.address-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.address-form .form-group {
margin-bottom: 15px;
}
.address-form .form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #2c3e50;
font-size: 13px;
}
.address-form .form-group input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 13px;
transition: all 0.3s ease;
background: #fff;
}
.address-form .form-group input:focus {
outline: none;
border-color: #36895f;
box-shadow: 0 0 0 2px rgba(54, 137, 95, 0.1);
}
.address-form .form-actions {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
}
/* Login Required Message */
.account-login-required {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e0e0e0;
}
.account-login-required h3 {
margin: 0 0 15px 0;
color: #2c3e50;
font-size: 24px;
}
.account-login-required p {
margin: 0 0 30px 0;
color: #6c757d;
font-size: 16px;
}
/* Responsive Design */
@media (max-width: 768px) {
.account-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.account-sidebar {
position: static;
order: 2;
}
.account-content {
order: 1;
padding: 20px;
}
.account-stats {
grid-template-columns: 1fr;
}
.order-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.order-total {
margin: 0;
}
.orders-header,
.order-row {
grid-template-columns: 1fr;
gap: 10px;
}
.orders-header {
display: none;
}
.order-row {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 15px;
padding: 15px;
}
.addresses-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
}
/* Catalog Button Styles */
.catalog-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #36895f;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 20px;
}
.catalog-btn:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.catalog-btn .material-icons {
font-size: 20px;
}
.catalog-btn-mobile {
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%);
color: white;
border: none;
border-radius: 12px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(54, 137, 95, 0.3);
min-width: auto;
white-space: nowrap;
}
.catalog-btn-mobile:hover {
background: linear-gradient(135deg, #2d6b4a 0%, #1e4d2e 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.4);
}
/* Мобильный футер - компактный и красивый */
@media (max-width: 767px) {
.footer {
padding: 40px 0 20px !important;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.footer .container {
padding: 0 20px;
}
/* Скрываем логотип в мобильной версии */
.footer .logo {
display: none !important;
}
/* Компактные колонки футера */
.footer-columns {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 24px 16px !important;
margin-bottom: 24px;
}
/* Стили для заголовков колонок */
.footer-column__title {
font-size: 16px !important;
font-weight: 700 !important;
color: #36895f !important;
margin-bottom: 12px !important;
border-bottom: 2px solid #36895f;
padding-bottom: 4px;
}
/* Стили для списков */
.footer-column ul {
gap: 8px !important;
font-size: 14px !important;
}
.footer-column ul li a {
color: #495057 !important;
transition: color 0.3s ease;
padding: 4px 0;
display: block;
}
.footer-column ul li a:hover {
color: #36895f !important;
text-decoration: none !important;
transform: translateX(4px);
}
/* Специальные стили для контактной информации */
.footer-column:last-child {
grid-column: 1 / -1 !important;
margin-top: 16px;
padding-top: 20px;
border-top: 2px solid #36895f;
}
.footer-column__info {
gap: 16px !important;
}
.footer-column__contact {
background: rgba(54, 137, 95, 0.1) !important;
padding: 12px 16px !important;
border-radius: 12px !important;
border: 1px solid rgba(54, 137, 95, 0.2) !important;
transition: all 0.3s ease !important;
}
.footer-column__contact:hover {
background: rgba(54, 137, 95, 0.15) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.2);
}
.footer-column__contact span {
color: #36895f !important;
font-size: 20px !important;
}
.footer-column__contact div {
font-weight: 600 !important;
color: #212529 !important;
}
.footer-column__contact div a {
color: #36895f !important;
text-decoration: none !important;
font-weight: 700 !important;
}
/* Стили для кнопки */
.footer-column__info .btn {
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%) !important;
color: white !important;
border: none !important;
border-radius: 25px !important;
padding: 12px 24px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.3) !important;
width: 100% !important;
text-align: center !important;
}
.footer-column__info .btn:hover {
background: linear-gradient(135deg, #2c6e4a 0%, #1e4d2e 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(54, 137, 95, 0.4) !important;
}
/* Стили для ссылок в футере */
.footer-column__info ul {
background: rgba(255, 255, 255, 0.7) !important;
padding: 12px 16px !important;
border-radius: 12px !important;
border: 1px solid rgba(54, 137, 95, 0.1) !important;
}
.footer-column__info ul li a {
color: #6c757d !important;
font-size: 13px !important;
transition: color 0.3s ease !important;
}
.footer-column__info ul li a:hover {
color: #36895f !important;
text-decoration: none !important;
}
/* Стили для копирайта */
.thumbnail_info {
text-align: center !important;
margin-top: 24px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(54, 137, 95, 0.2) !important;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 12px !important;
padding: 16px !important;
}
.thumbnail_info b {
color: #6c757d !important;
font-size: 12px !important;
font-weight: 500 !important;
}
}
/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
.footer-columns {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.footer-column__title {
font-size: 15px !important;
}
.footer-column ul {
font-size: 13px !important;
}
.footer-column__contact {
padding: 10px 12px !important;
}
.footer-column__contact span {
font-size: 18px !important;
}
}
/* Оптимизированный мобильный header */
.header-mobile {
padding: 8px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 1000;
border-bottom: 1px solid #f0f0f0;
}
.header-mobile .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
max-width: 100%;
}
/* Логотип слева */
.header-mobile__logo {
display: flex;
align-items: center;
flex-shrink: 0;
z-index: 10;
}
.header-mobile__logo img {
width: 40px;
height: 40px;
object-fit: contain;
}
/* Кнопка каталога по центру */
.catalog-btn-mobile {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 12px rgba(54, 137, 95, 0.3);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
z-index: 10;
min-width: 120px;
}
.catalog-btn-mobile:hover {
background: linear-gradient(135deg, #2d6b4a 0%, #1e4d2e 100%);
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(54, 137, 95, 0.4);
}
.catalog-btn-mobile .material-icons {
font-size: 20px;
}
.catalog-btn-mobile span:not(.material-icons) {
font-family: "Vela Sans", sans-serif;
font-size: 12px;
font-weight: 600;
}
/* Правая группа действий */
.header-mobile__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.header-mobile__action {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f8f9fa;
color: #495057;
transition: all 0.3s ease;
position: relative;
text-decoration: none;
border: 1px solid #e9ecef;
}
.header-mobile__action:hover {
background: #36895f;
color: white;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(54, 137, 95, 0.3);
}
.header-mobile__action .material-icons {
font-size: 18px;
}
/* Специальные стили для корзины */
.header-mobile__action.cart-icon-wrapper {
position: relative;
}
.header-mobile__action.cart-icon-wrapper .cart-count-badge {
position: absolute;
top: -6px;
right: -6px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
color: white;
border-radius: 50%;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
line-height: 1;
padding: 0 4px;
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
z-index: 2;
}
/* Специальные стили для избранного */
.header-mobile__action.favorite .material-icons.red {
color: #ff6b6b;
}
.header-mobile__action.favorite:hover .material-icons.red {
color: white;
}
/* Адаптивность */
@media (max-width: 480px) {
.header-mobile .container {
padding: 0 12px;
}
.header-mobile__logo img {
width: 36px;
height: 36px;
}
.catalog-btn-mobile {
padding: 8px 16px;
font-size: 12px;
min-width: 100px;
}
.catalog-btn-mobile .material-icons {
font-size: 18px;
}
.catalog-btn-mobile span:not(.material-icons) {
font-size: 11px;
}
.header-mobile__actions {
gap: 6px;
}
.header-mobile__action {
width: 32px;
height: 32px;
}
.header-mobile__action .material-icons {
font-size: 16px;
}
}
@media (max-width: 360px) {
.header-mobile .container {
padding: 0 8px;
}
.catalog-btn-mobile {
padding: 6px 12px;
min-width: 90px;
}
.catalog-btn-mobile .material-icons {
font-size: 16px;
}
.catalog-btn-mobile span:not(.material-icons) {
font-size: 10px;
}
.header-mobile__action {
width: 30px;
height: 30px;
}
.header-mobile__action .material-icons {
font-size: 14px;
}
}
/* Catalog Modal Styles */
.catalog-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
}
.catalog-modal.active {
display: flex;
}
.catalog-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.catalog-modal__content {
position: relative;
width: 90%;
max-width: 1200px;
height: 80%;
max-height: 800px;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
margin: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.catalog-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
}
.catalog-modal__header h2 {
margin: 0;
color: #2c3e50;
font-size: 24px;
font-weight: 700;
}
.catalog-modal__close {
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
color: #6c757d;
}
/* Мобильные стили для каталога */
@media (max-width: 768px) {
.catalog-modal__content {
width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
max-height: none;
}
.catalog-modal__header {
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 10;
background: white;
border-bottom: 2px solid #36895f;
}
.catalog-modal__header h2 {
font-size: 20px;
color: #36895f;
}
.catalog-modal__body {
display: flex;
flex-direction: column;
height: calc(100% - 80px);
}
.catalog-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
max-height: 60%;
overflow-y: auto;
padding: 0;
}
.catalog-content {
flex: 1;
overflow-y: auto;
background: white;
}
/* Улучшенные стили для категорий в мобильной версии */
.catalog-category {
display: flex;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: white;
margin: 0;
border-radius: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.catalog-category:hover {
background: linear-gradient(135deg, rgba(54, 137, 95, 0.08) 0%, rgba(54, 137, 95, 0.12) 100%);
transform: translateX(6px);
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.15);
}
.catalog-category.active {
background: linear-gradient(135deg, rgba(54, 137, 95, 0.15) 0%, rgba(54, 137, 95, 0.2) 100%);
border-left: 5px solid #36895f;
box-shadow: 0 4px 16px rgba(54, 137, 95, 0.2);
}
.catalog-category .material-icons {
color: #36895f;
font-size: 22px;
margin-right: 16px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.catalog-category:hover .material-icons {
color: #2c6e4a;
transform: scale(1.1);
}
.catalog-category.active .material-icons {
color: #fff;
transform: scale(1.1);
}
.catalog-category__name {
flex: 1;
font-size: 17px;
font-weight: 600;
color: #2c3e50;
margin-right: 12px;
transition: all 0.3s ease;
}
.catalog-category:hover .catalog-category__name {
color: #36895f;
}
.catalog-category.active .catalog-category__name {
color: #fff;
font-weight: 700;
}
.catalog-category__count {
font-size: 14px;
color: #6c757d;
background: #e9ecef;
padding: 6px 12px;
border-radius: 16px;
font-weight: 600;
transition: all 0.3s ease;
min-width: 32px;
text-align: center;
}
.catalog-category:hover .catalog-category__count {
background: rgba(54, 137, 95, 0.1);
color: #36895f;
}
.catalog-category.active .catalog-category__count {
background: #36895f;
color: white;
transform: scale(1.05);
}
/* Стили для подкатегорий в мобильной версии */
.catalog-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.catalog-item {
display: flex;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: all 0.3s ease;
background: white;
margin: 0;
border-radius: 0;
border: none;
text-decoration: none;
color: #2c3e50;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.catalog-item:hover {
background: linear-gradient(135deg, rgba(54, 137, 95, 0.05) 0%, rgba(54, 137, 95, 0.08) 100%);
transform: translateX(4px);
text-decoration: none;
color: #2c3e50;
box-shadow: 0 2px 8px rgba(54, 137, 95, 0.1);
}
.catalog-item.active {
background: linear-gradient(135deg, rgba(54, 137, 95, 0.1) 0%, rgba(54, 137, 95, 0.15) 100%);
border-left: 4px solid #36895f;
box-shadow: 0 2px 12px rgba(54, 137, 95, 0.15);
}
.catalog-item__name {
flex: 1;
font-size: 15px;
font-weight: 500;
color: #2c3e50;
margin-right: 12px;
margin-bottom: 0;
transition: all 0.3s ease;
}
.catalog-item:hover .catalog-item__name {
color: #36895f;
font-weight: 600;
}
.catalog-item.active .catalog-item__name {
color: #2c6e4a;
font-weight: 600;
}
.catalog-item__count {
font-size: 13px;
color: #6c757d;
background: #e9ecef;
padding: 4px 10px;
border-radius: 12px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 28px;
text-align: center;
}
.catalog-item:hover .catalog-item__count {
background: rgba(54, 137, 95, 0.1);
color: #36895f;
}
.catalog-item.active .catalog-item__count {
background: #36895f;
color: white;
transform: scale(1.05);
}
/* Улучшенные стили для placeholder */
.catalog-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
text-align: center;
color: #6c757d;
padding: 20px;
}
.catalog-placeholder .material-icons {
font-size: 48px;
color: #dee2e6;
margin-bottom: 16px;
}
.catalog-placeholder p {
font-size: 16px;
margin: 0;
line-height: 1.4;
}
/* Стили для контейнера категорий */
.catalog-categories {
padding: 0;
}
/* Стили для контейнера подкатегорий */
.catalog-subcategories,
.catalog-plant-types {
padding: 0;
flex: 1;
overflow-y: auto;
}
}
.catalog-modal__close:hover {
background: #e9ecef;
color: #2c3e50;
}
.catalog-modal__body {
display: flex;
flex: 1;
overflow: hidden;
}
.catalog-sidebar {
width: 300px;
background: #f8f9fa;
border-right: 1px solid #e0e0e0;
overflow-y: auto;
padding: 20px 0;
}
.catalog-categories {
padding: 0 20px;
}
.catalog-category {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 4px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
color: #2c3e50;
text-decoration: none;
}
.catalog-category:hover {
background: #e8f5e8;
color: #36895f;
text-decoration: none;
}
.catalog-category.active {
background: #36895f;
color: white;
}
.catalog-category .material-icons {
font-size: 20px;
}
.catalog-category__name {
font-weight: 500;
font-size: 14px;
}
.catalog-category__count {
margin-left: auto;
font-size: 12px;
opacity: 0.7;
}
.catalog-content {
flex: 1;
display: flex;
overflow: hidden;
}
.catalog-subcategories,
.catalog-plant-types {
flex: 1;
padding: 30px;
overflow-y: auto;
}
.catalog-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #6c757d;
text-align: center;
}
.catalog-placeholder .material-icons {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.catalog-placeholder p {
font-size: 16px;
margin: 0;
}
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.catalog-item {
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
color: #2c3e50;
}
.catalog-item:hover {
border-color: #36895f;
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.15);
text-decoration: none;
color: #2c3e50;
}
.catalog-item__name {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.catalog-item__count {
font-size: 12px;
color: #6c757d;
}
/* Plant Type Filter Styles */
.plant-type-filter-info {
display: none;
}
/* Адаптивные стили для каталога */
@media (max-width: 768px) {
.catalog-modal__content {
width: 95%;
height: 90%;
margin: 5% auto;
}
.catalog-modal__header {
padding: 15px 20px;
}
.catalog-modal__header h2 {
font-size: 20px;
}
.catalog-sidebar {
width: 100%;
}
.catalog-subcategories,
.catalog-plant-types {
padding: 20px;
}
.catalog-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.catalog-item {
padding: 12px;
}
.catalog-category {
padding: 10px 12px;
}
.catalog-category__name {
font-size: 13px;
}
}
/* Header Account Icon */
.account-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 50%;
margin-right: 10px;
}
.account-icon-wrapper:hover {
color: #36895f;
background: #e8f5e8;
text-decoration: none;
}
.account-icon-wrapper .material-icons {
font-size: 24px;
}
/* Account Auth Dropdown */
.account-auth-dropdown {
position: relative;
display: inline-block;
}
.auth-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
min-width: 200px;
padding: 10px 0;
margin-top: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.account-auth-dropdown:hover .auth-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.auth-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: #2c3e50;
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
}
.auth-option:hover {
background: #f8f9fa;
color: #36895f;
text-decoration: none;
}
.auth-option .material-icons {
font-size: 18px;
color: #6c757d;
}
.auth-option:hover .material-icons {
color: #36895f;
}
/* ========================================
АВТОРИЗАЦИЯ ПО НОМЕРУ ТЕЛЕФОНА
======================================== */
.phone-auth-page {
min-height: 100vh;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 40px 0;
display: flex;
align-items: center;
}
.auth-wrapper {
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.auth-content {
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
overflow: hidden;
}
.auth-logo {
background: linear-gradient(135deg, #36895f 0%, #2c6e4a 100%);
padding: 40px 30px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.auth-logo img {
width: 50px;
height: 50px;
object-fit: contain;
}
.logo-text b {
display: block;
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.logo-text span {
font-size: 14px;
opacity: 0.9;
}
.auth-form-container {
padding: 40px 30px;
}
.phone-auth-container {
max-width: 100%;
}
.phone-auth-form {
width: 100%;
}
.auth-header {
text-align: center;
margin-bottom: 30px;
}
.auth-header h2 {
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 28px;
font-weight: 700;
}
.auth-header p {
margin: 0;
color: #ffffff;
font-size: 16px;
line-height: 1.5;
}
.phone-form {
position: relative;
}
.form-step {
transition: all 0.3s ease;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #fff;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #36895f;
box-shadow: 0 0 0 3px rgba(54, 137, 95, 0.1);
}
.form-group input:invalid {
border-color: #dc3545;
}
.form-hint {
display: block;
margin-top: 5px;
color: #6c757d;
font-size: 12px;
}
.btn--full {
width: 100%;
margin-bottom: 15px;
}
.btn--primary:active {
transform: translateY(0);
}
.btn--primary:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn--secondary {
background: #f8f9fa;
color: #6c757d;
border: 2px solid #e0e0e0;
padding: 15px 25px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn--secondary:hover {
background: #e9ecef;
border-color: #d0d0d0;
}
.btn-link {
background: none;
border: none;
color: #36895f;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
padding: 0;
margin-top: 10px;
display: block;
}
.btn-link:hover {
color: #2c6e4a;
}
.btn-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.code-info {
background: #e8f5e8;
border: 1px solid #c3e6c3;
border-radius: 8px;
padding: 15px;
margin-bottom: 25px;
text-align: center;
}
.code-info p {
margin: 0 0 10px 0;
color: #2c3e50;
font-size: 14px;
}
.auth-footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.auth-footer p {
margin: 0;
color: #6c757d;
font-size: 14px;
}
.auth-link {
color: #36895f;
text-decoration: none;
font-weight: 600;
}
.auth-link:hover {
color: #2c6e4a;
text-decoration: underline;
}
.auth-info {
background: #f8f9fa;
padding: 30px;
border-top: 1px solid #e9ecef;
}
.auth-info h3 {
margin: 0 0 20px 0;
color: #2c3e50;
font-size: 18px;
font-weight: 600;
}
.auth-info ul {
margin: 0;
padding: 0;
list-style: none;
}
.auth-info li {
margin-bottom: 10px;
color: #6c757d;
font-size: 14px;
line-height: 1.5;
}
.auth-message {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
animation: slideDown 0.3s ease;
}
.auth-message--success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.auth-message--error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.phone-auth-page {
padding: 20px 0;
}
.auth-wrapper {
margin: 0 20px;
}
.auth-logo {
padding: 30px 20px;
flex-direction: column;
gap: 10px;
}
.auth-form-container {
padding: 30px 20px;
}
.auth-header h2 {
font-size: 24px;
}
.form-group input {
padding: 12px 15px;
font-size: 16px; /* Предотвращает зум на iOS */
}
.btn--primary,
.btn--secondary {
padding: 12px 20px;
font-size: 16px;
}
.auth-info {
padding: 20px;
}
}
@media (max-width: 480px) {
.auth-wrapper {
margin: 0 10px;
}
.auth-logo {
padding: 25px 15px;
}
.auth-form-container {
padding: 25px 15px;
}
.auth-header h2 {
font-size: 22px;
}
.auth-header p {
font-size: 14px;
}
}
/* ===== CONTACTS PAGE STYLES ===== */
/* Main Contacts Container */
.contacts {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
position: relative;
overflow: hidden;
}
.contacts::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.contacts .container {
position: relative;
z-index: 2;
}
/* Contacts Title */
.contacts-title {
font-size: 48px;
font-weight: 900;
color: #161616;
margin-bottom: 60px;
text-align: center;
background: linear-gradient(135deg, #161616 0%, #36895f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.contacts-title::after {
content: '';
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #00552f 100%);
border-radius: 2px;
}
/* Contacts Address Section */
.contacts-address {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-bottom: 80px;
background: #fff;
padding: 60px;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(54, 137, 95, 0.1);
border: 1px solid rgba(54, 137, 95, 0.1);
position: relative;
}
.contacts-address::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(54, 137, 95, 0.02) 0%, transparent 50%);
border-radius: 24px;
z-index: -1;
}
.contacts-address__column {
display: flex;
flex-direction: column;
gap: 32px;
}
.contacts-address__item {
padding: 24px;
background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
border-radius: 16px;
border: 1px solid rgba(54, 137, 95, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contacts-address__item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(54, 137, 95, 0.05) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.contacts-address__item:hover::before {
opacity: 1;
}
.contacts-address__item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(54, 137, 95, 0.15);
border-color: rgba(54, 137, 95, 0.3);
}
.contacts-address__title {
font-size: 20px;
font-weight: 700;
color: #161616;
margin-bottom: 16px;
position: relative;
z-index: 2;
}
.contacts-address__text {
display: flex;
align-items: center;
gap: 16px;
font-size: 18px;
color: #36895f;
font-weight: 500;
position: relative;
z-index: 2;
}
.contacts-address__text .material-icons {
font-size: 24px;
color: #36895f;
background: rgba(54, 137, 95, 0.1);
padding: 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
.contacts-address__item:hover .contacts-address__text .material-icons {
background: rgba(54, 137, 95, 0.2);
transform: scale(1.1);
}
.contacts-address__text img {
width: 32px;
height: 32px;
background: rgba(54, 137, 95, 0.1);
padding: 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
.contacts-address__item:hover .contacts-address__text img {
background: rgba(54, 137, 95, 0.2);
transform: scale(1.1);
}
.contacts-address__text a {
color: #36895f;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.contacts-address__text a:hover {
color: #00552f;
text-decoration: underline;
}
/* Contacts Map Section */
.contacts-map {
margin-bottom: 80px;
background: #fff;
padding: 60px;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(54, 137, 95, 0.1);
border: 1px solid rgba(54, 137, 95, 0.1);
position: relative;
}
.contacts-map::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(54, 137, 95, 0.02) 0%, transparent 50%);
border-radius: 24px;
z-index: -1;
}
.contacts-map__title {
font-size: 32px;
font-weight: 800;
color: #161616;
margin-bottom: 32px;
text-align: center;
background: linear-gradient(135deg, #161616 0%, #36895f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.contacts-map__title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #00552f 100%);
border-radius: 2px;
}
.contacts-map__search {
margin-bottom: 24px;
position: relative;
}
.contacts-map__search .search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #36895f;
z-index: 2;
transition: all 0.3s ease;
}
.contacts-map__search .input {
width: 100%;
height: 56px;
padding: 0 20px 0 56px;
border: 2px solid rgba(54, 137, 95, 0.2);
border-radius: 16px;
background: #f8f9fa;
color: #161616;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.contacts-map__search:hover .search-icon {
color: #00552f;
transform: translateY(-50%) scale(1.1);
}
.contacts-map__search .input:focus {
border-color: #36895f;
background: #fff;
outline: none;
box-shadow: 0 8px 25px rgba(54, 137, 95, 0.15);
}
.contacts-map__search .input::placeholder {
color: #6c757d;
font-weight: 400;
}
#contacts-map {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(54, 137, 95, 0.1);
border: 2px solid rgba(54, 137, 95, 0.1);
}
.contacts-pickup-points {
margin-top: 24px;
padding: 24px;
background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
border-radius: 16px;
border: 1px solid rgba(54, 137, 95, 0.1);
}
/* Contacts Info Section */
.contacts-info {
background: #fff;
padding: 60px;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(54, 137, 95, 0.1);
border: 1px solid rgba(54, 137, 95, 0.1);
position: relative;
}
.contacts-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(54, 137, 95, 0.02) 0%, transparent 50%);
border-radius: 24px;
z-index: -1;
}
.contacts-info .contacts-map__title {
font-size: 32px;
font-weight: 800;
color: #161616;
margin-bottom: 40px;
text-align: center;
background: linear-gradient(135deg, #161616 0%, #36895f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.contacts-info .contacts-map__title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #36895f 0%, #00552f 100%);
border-radius: 2px;
}
.contacts-info__item {
display: flex;
align-items: center;
padding: 20px;
margin-bottom: 16px;
background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
border-radius: 16px;
border: 1px solid rgba(54, 137, 95, 0.1);
transition: all 0.3s ease;
font-size: 18px;
font-weight: 600;
}
.contacts-info__item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(54, 137, 95, 0.15);
border-color: rgba(54, 137, 95, 0.3);
}
.contacts-info__item div:first-child {
width: 300px;
max-width: 100%;
color: #6c757d;
font-weight: 500;
margin-right: 20px;
}
.contacts-info__item div:last-child {
color: #36895f;
font-weight: 700;
flex: 1;
}
.contacts-info__item span {
background: rgba(54, 137, 95, 0.1);
padding: 4px 12px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 16px;
}
/* Contacts Animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Add animation classes */
.contacts-title {
animation: slideInUp 0.8s ease-out;
}
.contacts-address {
animation: slideInUp 1s ease-out;
animation-delay: 0.2s;
animation-fill-mode: both;
}
.contacts-map {
animation: slideInUp 1s ease-out;
animation-delay: 0.4s;
animation-fill-mode: both;
}
.contacts-info {
animation: slideInUp 1s ease-out;
animation-delay: 0.6s;
animation-fill-mode: both;
}
.contacts-address__item {
animation: slideInUp 0.6s ease-out;
animation-fill-mode: both;
}
.contacts-address__item:nth-child(1) { animation-delay: 0.3s; }
.contacts-address__item:nth-child(2) { animation-delay: 0.4s; }
.contacts-address__item:nth-child(3) { animation-delay: 0.5s; }
.contacts-address__item:nth-child(4) { animation-delay: 0.6s; }
.contacts-info__item {
animation: slideInLeft 0.6s ease-out;
animation-fill-mode: both;
}
.contacts-info__item:nth-child(1) { animation-delay: 0.7s; }
.contacts-info__item:nth-child(2) { animation-delay: 0.8s; }
.contacts-info__item:nth-child(3) { animation-delay: 0.9s; }
.contacts-info__item:nth-child(4) { animation-delay: 1.0s; }
.contacts-info__item:nth-child(5) { animation-delay: 1.1s; }
.contacts-info__item:nth-child(6) { animation-delay: 1.2s; }
.contacts-info__item:nth-child(7) { animation-delay: 1.3s; }
/* Responsive Design */
@media (max-width: 1200px) {
.contacts-address {
grid-template-columns: 1fr;
gap: 32px;
padding: 40px;
}
.contacts-map,
.contacts-info {
padding: 40px;
}
}
@media (max-width: 768px) {
.contacts {
padding: 60px 0;
}
.contacts-title {
font-size: 36px;
margin-bottom: 40px;
}
.contacts-address,
.contacts-map,
.contacts-info {
padding: 32px 24px;
margin-bottom: 60px;
}
.contacts-address__item {
padding: 20px;
}
.contacts-address__text {
font-size: 16px;
gap: 12px;
}
.contacts-address__text .material-icons {
font-size: 20px;
padding: 6px;
}
.contacts-address__text img {
width: 28px;
height: 28px;
padding: 6px;
}
.contacts-map__title,
.contacts-info .contacts-map__title {
font-size: 28px;
margin-bottom: 24px;
}
.contacts-info__item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-size: 16px;
}
.contacts-info__item div:first-child {
width: 100%;
margin-right: 0;
}
}
@media (max-width: 480px) {
.contacts {
padding: 40px 0;
}
.contacts-title {
font-size: 28px;
margin-bottom: 32px;
}
.contacts-address,
.contacts-map,
.contacts-info {
padding: 24px 16px;
margin-bottom: 40px;
}
.contacts-address__item {
padding: 16px;
}
.contacts-address__text {
font-size: 14px;
gap: 10px;
}
.contacts-map__title,
.contacts-info .contacts-map__title {
font-size: 24px;
margin-bottom: 20px;
}
.contacts-info__item {
font-size: 14px;
padding: 16px;
}
.contacts-info__item span {
font-size: 14px;
padding: 3px 8px;
}
}
/* Стили для секции запроса реального фото в правой колонке */
.ozon-request-photo-section {
margin: 15px 0;
display: flex;
gap: 12px;
align-items: center;
}
/* Стили для кнопки запроса реального фото */
.ozon-request-photo-btn {
flex: 1;
background: #36895f;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.ozon-request-photo-btn:hover {
background: #2d6b4a;
transform: translateY(-1px);
}
.ozon-request-photo-btn:active {
transform: translateY(0);
}
.ozon-request-photo-btn .material-symbols-outlined {
font-size: 18px;
}
/* Стили для модального окна запроса фото */
.ozon-request-photo-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.ozon-request-photo-modal.active {
opacity: 1;
visibility: visible;
}
.ozon-request-photo-modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.8);
transition: transform 0.3s ease;
}
.ozon-request-photo-modal.active .ozon-request-photo-modal-content {
transform: scale(1);
}
.ozon-request-photo-modal-header {
padding: 20px 24px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.ozon-request-photo-modal-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #1f2937;
}
.ozon-request-photo-modal-close {
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.ozon-request-photo-modal-close:hover {
background-color: #f3f4f6;
}
.ozon-request-photo-modal-close .material-symbols-outlined {
font-size: 24px;
color: #6b7280;
}
.ozon-request-photo-modal-body {
padding: 24px;
}
.ozon-request-photo-info {
margin-bottom: 24px;
}
.ozon-request-photo-info p {
margin: 0 0 16px 0;
color: #6b7280;
line-height: 1.5;
}
.ozon-product-details {
background: #f9fafb;
border-radius: 8px;
padding: 16px;
border: 1px solid #e5e7eb;
}
.ozon-product-detail {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.ozon-product-detail:last-child {
margin-bottom: 0;
}
.ozon-detail-label {
font-weight: 500;
color: #374151;
}
.ozon-detail-value {
color: #1f2937;
font-weight: 600;
}
/* Стили для формы */
.ozon-request-photo-form {
margin-bottom: 20px;
}
.ozon-form-group {
margin-bottom: 20px;
}
.ozon-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #374151;
}
.ozon-form-group input,
.ozon-form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.ozon-form-group input:focus,
.ozon-form-group textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.ozon-form-group textarea {
resize: vertical;
min-height: 80px;
}
.ozon-form-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.ozon-btn {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: flex;
align-items: center;
gap: 8px;
}
.ozon-btn-secondary {
background: #f3f4f6;
color: #374151;
}
.ozon-btn-secondary:hover {
background: #e5e7eb;
}
.ozon-btn-primary {
background: linear-gradient(82.23deg, #36895f -1.99%, #00552f 100%);
color: white;
}
.ozon-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(54, 137, 95, 0.3);
}
.ozon-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Стили для результата */
.ozon-request-photo-result {
margin-top: 20px;
}
.ozon-success-message,
.ozon-error-message {
padding: 16px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.ozon-success-message {
background: #d1fae5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.ozon-error-message {
background: #fee2e2;
border: 1px solid #fecaca;
color: #991b1b;
}
.ozon-success-message .material-symbols-outlined,
.ozon-error-message .material-symbols-outlined {
font-size: 20px;
}
.ozon-success-message p,
.ozon-error-message p {
margin: 0;
font-weight: 500;
}
/* Адаптивность */
@media (max-width: 768px) {
.ozon-request-photo-modal-content {
width: 95%;
margin: 20px;
}
.ozon-request-photo-modal-header {
padding: 16px 20px 12px;
}
.ozon-request-photo-modal-body {
padding: 20px;
}
.ozon-form-actions {
flex-direction: column;
}
.ozon-btn {
width: 100%;
justify-content: center;
}
}
/* Стили для значка входа поставщика в десктопной версии */
.header-bottom__right .supplier-login-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 41px;
height: 41px;
background: #f3f3f3;
transition: all 0.3s ease;
}
.header-bottom__right .supplier-login-icon-wrapper:hover {
background: #36895f;
color: #fff;
}
.header-bottom__right .supplier-login-icon-wrapper span {
font-size: 24px;
color: #36895f;
transition: color 0.3s ease;
}
.header-bottom__right .supplier-login-icon-wrapper:hover span {
color: #fff;
}
/* Адаптивность для значка поставщика в десктопной версии */
@media (max-width: 1400px) {
.header-bottom__right .supplier-login-icon-wrapper {
width: 36px;
height: 36px;
}
.header-bottom__right .supplier-login-icon-wrapper span {
font-size: 20px;
}
}
@media (max-width: 991px) {
.header-bottom__right .supplier-login-icon-wrapper {
width: 32px;
height: 32px;
}
.header-bottom__right .supplier-login-icon-wrapper span {
font-size: 18px;
}
}
/* ===== УЛУЧШЕННЫЕ МОБИЛЬНЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ ===== */
/* Баннер на главной странице - мобильная оптимизация */
@media (max-width: 767px) {
.home-banner {
padding: 20px 0;
margin-bottom: 30px;
}
.home-banner img {
min-height: 180px;
border-radius: 15px;
}
.home-banner__inner {
left: 20px !important;
top: 50%;
transform: translateY(-50%);
max-width: calc(100% - 40px);
}
.home-banner__inner .h1 {
font-size: 18px !important;
line-height: 1.3;
margin-bottom: 8px;
padding-left: 20px;
}
.home-banner__inner .h4 {
font-size: 12px !important;
line-height: 1.4;
margin-bottom: 16px;
padding-left: 20px;
}
.home-banner__inner .btn {
margin-top: 16px !important;
height: 36px;
font-size: 12px;
padding: 0 20px;
margin-left: 20px;
}
.home-banner__arrow {
width: 40px !important;
height: 40px !important;
border-width: 4px !important;
}
.home-banner__arrow span {
font-size: 16px !important;
transform: rotate(-90deg) translateX(2px) !important;
}
}
/* Каталог на главной странице - скрыть на мобильных устройствах */
@media (max-width: 767px) {
.home-catalog {
display: none !important;
}
}
/* Секция "Почему мы" - мобильная оптимизация */
@media (max-width: 767px) {
.home-why {
padding: 30px 0;
}
.home-why .h1 {
font-size: 20px !important;
margin-bottom: 24px;
}
.home-why__wrapper {
margin-top: 0 !important;
}
.home-why__steps {
flex-direction: column !important;
gap: 32px !important;
align-items: center !important;
position: static !important;
}
.home-why__step {
position: static !important;
max-width: 280px;
text-align: center;
padding: 20px;
background: rgba(254, 248, 236, 0.6);
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.home-why__step .h3 {
font-size: 16px !important;
margin-bottom: 8px;
max-width: none;
}
.home-why__step .h4 {
font-size: 14px !important;
line-height: 1.4;
}
.home-why__icon {
width: 60px !important;
height: 60px !important;
margin: 0 0 16px !important;
order: -1 !important;
}
.home-why__icon img {
width: 30px;
height: 30px;
}
}
/* Секция товаров - мобильная оптимизация */
@media (max-width: 767px) {
.home-products {
padding: 30px 0;
}
.home-products .h1 {
font-size: 20px !important;
margin-bottom: 24px;
}
.home-products__slider {
margin-bottom: 24px !important;
gap: 8px !important;
}
.home-products__item {
margin: 0 8px !important;
border-radius: 15px;
}
.home-products__image img {
height: 140px !important;
}
.home-products__title {
padding: 16px 12px !important;
gap: 12px !important;
}
.home-products__title .h3 {
font-size: 14px !important;
line-height: 1.3;
}
.home-products__title .arrow {
width: 24px !important;
height: 24px !important;
}
.home-products__title .arrow span {
font-size: 12px !important;
}
.home-products__buttons {
flex-direction: column !important;
gap: 12px !important;
padding: 0 16px;
}
.home-products__buttons .btn {
width: 100% !important;
height: 44px;
font-size: 14px;
}
}
/* Форма обратной связи - мобильная оптимизация */
@media (max-width: 767px) {
.feedback-form {
padding: 30px 0;
display: flex !important;
justify-content: center !important;
}
.feedback-form__right {
border-radius: 20px !important;
padding: 24px 16px !important;
margin: 0 16px;
width: calc(100% - 32px);
}
.feedback-form__right .h1 {
font-size: 20px !important;
margin-bottom: 16px !important;
}
.feedback-form__right .h3 {
font-size: 14px !important;
margin-bottom: 20px;
line-height: 1.4;
}
.feedback-form__right form {
margin-top: 20px !important;
gap: 16px !important;
max-width: 100% !important;
}
.feedback-form .input {
width: 100%;
}
.feedback-form .input span {
font-size: 20px !important;
left: 16px !important;
}
.feedback-form .input input {
height: 44px !important;
padding-left: 50px !important;
font-size: 14px !important;
border-radius: 30px;
}
.feedback-form__agree {
font-size: 14px !important;
margin: 16px 0;
text-align: center;
line-height: 1.4;
}
.feedback-form__right .btn {
width: 100% !important;
height: 44px;
font-size: 14px;
margin-top: 8px;
}
}
/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 480px) {
.home-banner__inner {
left: 16px !important;
max-width: calc(100% - 32px);
}
.home-banner__inner .h1 {
font-size: 16px !important;
}
.home-banner__inner .h4 {
font-size: 11px !important;
}
.home-catalog__item {
margin: 0 12px;
height: 70px !important;
padding-left: 16px !important;
}
.home-catalog__title {
font-size: 14px !important;
max-width: 160px;
}
.home-catalog__item img {
width: 70px !important;
height: 70px !important;
}
.home-why__step {
max-width: 100%;
margin: 0 12px;
}
.home-products__image img {
height: 120px !important;
}
.feedback-form__right {
margin: 0 12px;
width: calc(100% - 24px);
padding: 20px 12px !important;
}
}
/* Улучшения для планшетов */
@media (min-width: 768px) and (max-width: 1024px) {
.home-banner__inner {
left: 40px !important;
}
.home-banner__inner .h1 {
font-size: 22px !important;
}
.home-banner__inner .h4 {
font-size: 14px !important;
}
.home-catalog__list {
gap: 20px !important;
}
.home-catalog__item {
height: 120px !important;
padding-left: 30px !important;
}
.home-why__steps {
gap: 24px !important;
}
.home-products__image img {
height: 160px !important;
}
}
.btn-br-new {
border-radius: 12px !important;
}
.cart-main__delivery-title_margin {
margin-top: 12px !important;
}