/* pages.css — стилі решти секцій усіх сторінок (каталог, товар, акаунт, чекаут, faq, відгуки тощо). Завантажується на всіх сторінках, КРІМ welcome. */

.catalog__inner {color:#000;}

/*  */
.contacts{
    background: #121212;
    padding: 0 0 72px;
}
.contacts__inner{
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: stretch;
}
.contacts__block{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.contacts__item{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 24px;
    line-height: 40px;
    transition: all .1s ease;
}
.contacts__item-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: #A7C70E;
    border-radius: 6px;
}
a.contacts__item:hover{
    color: #A7C70E;
}
.contacts__time{
    margin-top: 104px;
    line-height: normal;
}
.contacts__map{
    width: 100%;
    max-width: 1112px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contacts__media{
    position: relative;
    overflow: hidden;
}
.contacts__media video{
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}
.contacts__map iframe{
    width: 100%;
    flex: 1;
    min-height: 400px;
}
/* about */
.about{
    padding: 72px 0;
}
.about__inner{
    max-width: 1396px;
    width: 100%;
    margin: 0 auto;
}
.about__box{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.about__image{
    width: 100%;
    max-width: 686px;
}
.about__image img{
    width: 100%;
}
.about__content{
    width: 100%;
    max-width: 545px;
}
.about__descr{
    margin-top: 29px;
}
/* thanks */
.thanks{
    padding: 72px 0 88px;
    background-color: #fff;
}
.thanks__title{
    color: #161616;
    text-align: center;
    font-size: 64px;
    font-weight: 300;
    line-height: normal;
}
.thanks__descr{
    color: #161616;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 24px;
}
.thanks__btn{
    margin: 80px auto 0;
    height: 50px;
    max-width: 219px;
    font-size: 16px;
}
/* delivery */
.delivery{
    padding: 72px 0 80px;
    background-color: #fff;
}
.delivery__name,
.delivery__title{
    color: #121212;
}
.delivery__content{
    margin-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.delivery__block{
    padding: 16px 24px;
    background-color: #161616;
}
.delivery__block-icons{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.delivery__block-name{
    font-weight: 600;
    margin-top: 35px;
}
.delivery__block-descr{
    color: #FFF;
    line-height: 32px;
    margin-bottom: 20px;
}
.delivery__block-title{
    display: flex;
    align-items: center;
    gap: 24px;
}
.delivery__block-icons{
    margin-top: 24px;
}
.delivery__block-deliver {
    font-weight: 700;
    line-height: 32px;
    text-transform: uppercase;
}
/* Delivery page redesign (dlv) */
.dlv__lead{
    font-size: 18px;
    line-height: 1.6;
    color: #202222;
    max-width: 820px;
}
.dlv__heading{
    margin: 48px 0 24px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
}
.dlv__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.dlv__grid--pay{
    grid-template-columns: repeat(2, 1fr);
}
.dlv__card{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #161616;
    min-height: 180px;
}
.dlv__card-logo{
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    align-self: flex-start;
}
.dlv__card-logo--icon{
    height: 40px;
    width: 40px;
}
.dlv__card-name{
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFF;
}
.dlv__card-text{
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.8);
}
.dlv__card-text a{
    color: #A7C70E;
    text-decoration: underline;
}
.dlv__req{
    margin-top: 48px;
    padding: 32px;
    border: 1px solid #202222;
}
.dlv__req-title{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
    margin-bottom: 24px;
}
.dlv__req-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
    margin: 0;
}
.dlv__req-list dt{
    font-size: 13px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 4px;
}
.dlv__req-list dd{
    font-size: 16px;
    font-weight: 600;
    color: #161616;
    margin: 0;
    word-break: break-all;
}
.dlv__req-note{
    margin-top: 24px;
    font-size: 15px;
    color: #202222;
}
.dlv__req-note a{
    color: #161616;
    font-weight: 700;
    text-decoration: underline;
}
/* product */
.product{
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 128px;
}
.product__inner{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.product__content{
    width: 100%;
    max-width: 686px;
    padding: 40px 0 0;
}
.product__name{
    color: #161616;
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin-top: 8px;
}
.product__info{
    margin-top: 48px;
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.product__volume{
    color: #202222;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 260px;
}
.product__volume select{
    width: 100%;
}
.product__count{
    padding: 12px 16px;
    width: 100%;
    max-width: 118px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.product__count-plus,
.product__count-minus{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.product__count-minus{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33398 8H12.6673' stroke='%23161616' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}
.product__count-plus{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3.33301V12.6663' stroke='%23161616' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M3.33398 8H12.6673' stroke='%23161616' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}
.product__count input{
    padding: 0;
    margin: 0;
    border: none;
    font-size: 16px;
    height: auto;
    text-align: center;
    width: 100%;
}
.product__price{
    color: #161616;
    text-align: right;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
}
.product__add{
    font-size: 16px;
    margin-top: 48px;
    width: 100%;
}
.product__bottom{
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #202222;
}
.product__selects{
    display: flex;
    align-items: center;
    gap: 40px;
    border-bottom: 1px solid #E5E5E5;
}
.product__selects-btn{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    opacity: 0.35;
    padding: 12px 2px 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: opacity .2s ease, border-color .2s ease;
}
.product__selects-btn:hover,
.product__selects-btn.active{
    opacity: 1;
}
.product__selects-btn.active{
    border-bottom-color: #A7C70E;
}
.product__result{
    margin-top: 16px;
}
.product__result-content:not(.active){
    display: none;
}
.product__result-content{
    color: #202222;
}
.product__left{
    width: 100%;
    max-width: 828px;
    overflow: hidden;
}
.product__thumbs{
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    padding-bottom: 10px;
}
.product__thumbs.swiper > .swiper-scrollbar{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: rgba(22,22,22,.12);
}
.product__thumbs .swiper-scrollbar-drag{
    height: 100%;
    background: #A7C70E;
    border-radius: 2px;
    cursor: grab;
}
.product__thumbs .swiper-scrollbar-lock{
    display: none;
}
/* Галерея "Hydrophob у дії" на сторінці товару — слайдер, секція як related/faq */
.product__gallery{
    padding: 64px 0;
    background-color: #fff;
    border-top: 1px solid #202222;
}
.product__gallery-slider{
    overflow: hidden;
}
.product__gallery-item{
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: none;
    background: #161616;
    cursor: pointer;
    overflow: hidden;
}
.product__gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease, opacity .5s ease;
}
.product__gallery-item:hover img{
    transform: scale(1.05);
    opacity: .85;
}
.product__gallery-item .hm-gallery__play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(22,22,22,.8);
    color: #A7C70E;
    pointer-events: none;
    transition: background .3s ease;
}
.product__gallery-item:hover .hm-gallery__play{
    background: #A7C70E;
    color: #161616;
}
.product__slider .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.product__thumbs .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    border: 1px solid #161616;
    cursor: pointer;
    opacity: 0.7;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product__slider .swiper-slide img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}
.product__thumbs .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.product__thumbs .swiper-slide.swiper-slide-thumb-active{
    opacity: 1;
}
.product__slider{
    overflow: hidden;
    height: 600px;
    border: 1px solid #161616;
}
.product__slider-content{
    position: relative;
}
.product__slider-btns{
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.product__slider-btns button{
    opacity: 0.5;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: none;
    pointer-events: all;
}
.product__slider-btns button:hover{
    background-color: #161616;
    opacity: 1;
}
.product__slider-btns button svg path{
    transition: all .1s ease;
}
.product__slider-btns button:hover svg path{
    fill: #fff;
}
/* product faq */
.product__faq{
    padding: 64px 0;
    background-color: #fff;
    border-top: 1px solid #202222;
}
.product__faq-title{
    color: #161616;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.product__faq-list{
    margin-top: 32px;
    display: flex;
    flex-direction: column;
}
.product__faq-item{
    border-bottom: 1px solid #202222;
}
.product__faq-item:first-child{
    border-top: 1px solid #202222;
}
.product__faq-btn{
    width: 100%;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.product__faq-question{
    color: #161616;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    transition: color .1s ease;
}
.product__faq-item.active .product__faq-question{
    color: #A7C70E;
}
.product__faq-icon{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #161616;
    transition: transform .2s ease;
}
.product__faq-item.active .product__faq-icon{
    transform: rotate(180deg);
    color: #A7C70E;
}
.product__faq-answer{
    color: #202222;
    padding: 0 40px 24px 0;
    max-width: 900px;
}
/* product recently viewed / related sliders */
.product__viewed,
.product__related{
    padding: 64px 0;
    background-color: #fff;
    border-top: 1px solid #202222;
}
.product__viewed-head,
.product__related-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.product__viewed-title,
.product__related-title{
    color: #161616;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.product__viewed-btns,
.product__related-btns{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.product__viewed-prev,
.product__viewed-next,
.product__related-prev,
.product__related-next,
.product__gallery-prev,
.product__gallery-next{
    opacity: 0.5;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #161616;
}
.product__viewed-prev svg,
.product__viewed-next svg,
.product__related-prev svg,
.product__related-next svg,
.product__gallery-prev svg,
.product__gallery-next svg{
    max-width: 8px;
}
.product__viewed-prev:hover,
.product__viewed-next:hover,
.product__related-prev:hover,
.product__related-next:hover,
.product__gallery-prev:hover,
.product__gallery-next:hover{
    background-color: #161616;
    opacity: 1;
}
.product__viewed-prev svg path,
.product__viewed-next svg path,
.product__related-prev svg path,
.product__related-next svg path,
.product__gallery-prev svg path,
.product__gallery-next svg path{
    transition: all .1s ease;
}
.product__viewed-prev:hover svg path,
.product__viewed-next:hover svg path,
.product__related-prev:hover svg path,
.product__related-next:hover svg path,
.product__gallery-prev:hover svg path,
.product__gallery-next:hover svg path{
    fill: #fff;
}
.product__viewed-prev.swiper-button-disabled,
.product__viewed-next.swiper-button-disabled,
.product__related-prev.swiper-button-disabled,
.product__related-next.swiper-button-disabled,
.product__gallery-prev.swiper-button-disabled,
.product__gallery-next.swiper-button-disabled{
    opacity: 0.2;
    pointer-events: none;
}
.product__viewed-slider,
.product__related-slider,
.product__gallery-slider{
    margin-top: 32px;
    overflow: hidden;
}
.product__viewed-slider .swiper-slide,
.product__related-slider .swiper-slide{
    height: auto;
}
.product__viewed-slider .swiper-slide .product__item,
.product__related-slider .swiper-slide .product__item{
    height: 100%;
}
/* page */
.catalog{
    padding: 64px 0 104px;
    background-color: #fff;
}
.catalog__name,
.catalog__title{
    color: #121212;
}
.catalog__name span{
    display: inline-flex;
    padding: 0px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #1C1536;
    color: #FFF;
    margin: 0 18px;
    font-size: 64px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.catalog__founded{
    margin-top: 40px;
    border-top: 1px solid #202222;
    display: flex;
    width: 100%;
}
.catalog__filters{
    margin-top: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.catalog__filters select{
    max-width: max-content;
    padding: 0;
    margin: 0;
    border: none;
    height: auto;
    font-size: 24px;
    background-size: 32px;
    padding-right: 50px;
}
.catalog__filters select:first-of-type{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M13.3333 24H18.6667V21.3333H13.3333V24ZM4 8V10.6667H28V8H4ZM8 17.3333H24V14.6667H8V17.3333Z' fill='%23202222'/%3E%3C/svg%3E");
    max-width: 179px;
}
.catalog__content{
    margin-top: 18px;
    padding-top: 40px;
    border-top: 1px solid #202222;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.product__item{
    border: 1px solid #121212;
    background: #FFF;
    display: flex;
    flex-direction: column;
}
.product__item-image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    height: auto;
}
.product__item-image img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .5s ease;
}
.product__item-image:hover img{
    transform: scale(1.1);
}
.product__item-content{
    padding: 16px;
    flex: 1;
    min-height: 144px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}
.product__item-title h3{
    transition: all .1s ease;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: #202222;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product__item-title:hover h3{
    color: #A7C70E;
}
.product__item-title h3 span{
    font-size: 12px;
}
.product__item-price{
    margin-top: 8px;
    color:#202222;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.product__item-add{
    height: 0;
    font-size: 14px;
    width: 100%;
    margin-top: 0px;
    overflow: hidden;
    padding: 0;
    transition: all .5s ease;
}
.product__item:active .product__item-add,
.product__item:hover .product__item-add{
    height: 49px;
    margin-top: 7px;
}
/* catalog: breadcrumbs */
.catalog__crumbs{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    color: #161616;
    font-size: 13px;
    text-transform: uppercase;
}
.catalog__crumbs-link{
    color: #8a8a8a;
    transition: color .3s ease;
}
.catalog__crumbs-link:hover{
    color: #A7C70E;
}
.catalog__crumbs-link.is-current{
    color: #161616;
    pointer-events: none;
}
.catalog__crumbs-sep{
    color: #c7c7c7;
}
/* catalog: hero */
.catalog__hero{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 260px;
    padding: 40px 48px;
    background-color: #1C1536;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.catalog__hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,18,18,.88) 0%, rgba(18,18,18,.55) 60%, rgba(18,18,18,.15) 100%);
}
.catalog__hero-content{
    position: relative;
    z-index: 1;
}
.catalog__hero .catalog__title,
.catalog__hero .catalog__name{
    color: #FFF;
}
/* catalog: description */
.catalog__desc{
    margin-top: 32px;
    color: #202222;
}
.catalog__desc-scroll{
    max-height: 84px;
    overflow: hidden;
    position: relative;
    line-height: 1.6;
}
.catalog__desc-scroll p{
    margin-bottom: 12px;
}
.catalog__desc:not(.is-expanded) .catalog__desc-scroll::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}
.catalog__desc.is-expanded .catalog__desc-scroll{
    max-height: none;
}
.catalog__desc-more{
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1C1536;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    background: none;
}
.catalog__desc-more svg{
    transition: transform .3s ease;
}
.catalog__desc.is-expanded .catalog__desc-more svg{
    transform: rotate(180deg);
}
.catalog__desc-more:hover{
    color: #A7C70E;
    background: none;
}
/* catalog: toolbar extras (price / search) */
.catalog__price,
.catalog__search{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #161616;
}
.catalog__price-label{
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    white-space: nowrap;
}
.catalog__price-input{
    width: 70px;
    height: auto;
    border: none;
    padding: 0;
    font-size: 16px;
    text-align: center;
}
.catalog__price-input::placeholder,
.catalog__search-input::placeholder{
    font-size: 14px;
    font-weight: 400;
}
.catalog__price-sep{
    color: #161616;
}
.catalog__price-submit,
.catalog__search-btn{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #1C1536;
    color: #FFF;
    padding: 0;
}
.catalog__price-submit:hover,
.catalog__search-btn:hover{
    background: #A7C70E;
    color: #161616;
}
.catalog__search{
    flex: 1;
    min-width: 220px;
    max-width: 320px;
}
.catalog__search-input{
    flex: 1;
    border: none;
    padding: 0;
    height: auto;
    font-size: 16px;
}
/* catalog: chips */
.catalog__chips{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.catalog__chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #121212;
    font-size: 13px;
    color: #161616;
    transition: all .3s ease;
}
.catalog__chip:hover{
    background: #1C1536;
    color: #FFF;
    border-color: #1C1536;
}
.catalog__chips-clear{
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    text-decoration: underline;
    color: #161616;
}
/* catalog: aside toggle (mobile) */
.catalog__aside-toggle{
    display: none;
    margin-top: 24px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1C1536;
    color: #FFF;
    font-size: 14px;
    width: 100%;
}
/* catalog: body / aside / grid */
.catalog__body{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    margin-top: 18px;
    padding-top: 40px;
    border-top: 1px solid #202222;
}
.catalog__body--full{
    grid-template-columns: 1fr;
}
.catalog__aside{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: start;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.catalog__filter-title{
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #121212;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
}
.catalog__filter-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.catalog__filter-item{
    font-size: 14px;
    color: #202222;
    transition: color .3s ease;
}
.catalog__filter-item--check{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.catalog__filter-item:hover,
.catalog__filter-item.is-active{
    color: #A7C70E;
}
.catalog__main .catalog__content{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* catalog: product card extras (badges / wishlist / rating / sale) */
.product__item-media{
    position: relative;
}
.product__item-badges{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product__item-badge{
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFF;
    background: #1C1536;
}
.product__item-badge--sale{
    background: #A7C70E;
    color: #161616;
}
.product__item-wish{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.9);
    color: #161616;
    padding: 0;
    transition: all .3s ease;
}
.product__item-wish:hover{
    background: #1C1536;
    color: #FFF;
}
.product__item-rating{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    color: #d4d4d4;
}
.product__item-star.is-active{
    color: #A7C70E;
}
.product__item-price-old{
    text-decoration: line-through;
    color: #8a8a8a;
    font-weight: 400;
    font-size: 14px;
}
.product__item-price-new{
    color: #A7C70E;
}
/* checkout */
.checkout{
    padding: 64px 0 104px;
    background-color: #fff;
    color: #161616;
}
.checkout__inner{
    display: flex;
    gap: 24px;
    align-items: start;
}
.checkout__content{
    width: 100%;
    max-width: 1112px;
}
.checkout__title{
    color: #161616;
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
}

.checkout__block-inputs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 828px;
    width: 100%;
}
.checkout__block-name{
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    background-color: #161616;
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 24px;
}
.checkout__block + .checkout__block{
    margin-top: 48px;
}
.checkout__block-delivery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}
.payments__icons{
    margin: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.checkout__block-payments{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.checkout__busket{
    width: 100%;
    max-width: 544px;
}
#category-select {max-width:190px;}

/* Контейнер пагинации */
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
	color:#161616;
}

/* Элементы страниц */
ul.pagination li {
    margin: 0 5px 0 0;
}

/* Ссылки страниц */
ul.pagination li a {
    display: block;
    min-width: 40px;
    padding: 8px 12px;
    color: #161616;
    text-align: center;
    text-decoration: none;
    border: 1px solid #E5E5E5;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

/* Ссылка при наведении */
ul.pagination li a:hover {
    background-color: #A7C70E;
    color: #161616;
    border-color: #A7C70E;
}

/* Активная страница */
ul.pagination li.active a {
    background-color: #1C1536;
    color: #FFF;
    border-color: #1C1536;
    cursor: default;
}

/* Ссылки «вперед/назад» */
ul.pagination li a.prev,
ul.pagination li a.next {
    font-weight: bold;
}
.desc ul {padding-left:10px;}
.desc h1 {font-size:150%;margin:40px 0;}
.desc p {margin:7px 0;}
.desc ul li {margin-left:30px;list-style:square;}
.category-description {color:#000;margin-top:40px;border-top:1px solid #ccc;padding-top:20px;}

/* Account (LK) */
.account{
    padding: 64px 0 104px;
    background-color: #fff;
    color: #161616;
}
.account__crumbs{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
}
.account__crumbs a{
    opacity: .55;
    transition: all .3s ease;
}
.account__crumbs a:hover{
    opacity: 1;
    color: #A7C70E;
}
.account__crumbs span{
    opacity: .35;
}
.account__title{
    color: #161616;
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.account__lead{
    margin-top: 12px;
    max-width: 640px;
}
.account__notice{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid #161616;
    font-weight: 600;
    line-height: 1.4;
}
.account__notice svg{
    flex-shrink: 0;
    margin-top: 2px;
}
.account__notice--ok{
    border-color: #A7C70E;
}
.account__notice--error{
    border-color: #FF3D12;
    color: #FF3D12;
}
.account__row{
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.account__col{
    width: 100%;
    min-width: 0;
}
.account__col-aside{
    width: 100%;
    max-width: 280px;
    flex-shrink: 0;
}
.account__panel{
    border: 1px solid #161616;
    padding: 32px;
}
.account__panel + .account__panel{
    margin-top: 24px;
}
.account__panel-title{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.account__group{
    margin-top: 40px;
}
.account__group:first-of-type{
    margin-top: 0;
}
.account__group-title{
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.account__menu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.account__menu-item a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid #161616;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .3s ease;
}
.account__menu-item a svg{
    flex-shrink: 0;
    transition: all .3s ease;
}
.account__menu-item a:hover{
    background: #1C1536;
    border-color: #1C1536;
    color: #fff;
}
.account__menu-item a:hover svg path{
    stroke: #fff;
    fill: #fff;
}
.account__form{
    margin-top: 24px;
}
.account__fieldset + .account__fieldset{
    margin-top: 40px;
}
.account__legend{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #161616;
}
.account__form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.account__field{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account__field-full{
    grid-column: 1 / -1;
}
.account__field label{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.account__field textarea{
    height: auto;
    min-height: 140px;
    padding: 16px;
    resize: vertical;
}
.account__field-error{
    color: #FF3D12;
    font-size: 13px;
    font-weight: 600;
}
.account__radio-group,
.account__checkbox-group{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.account__radio,
.account__checkbox{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}
.account__radio input,
.account__checkbox input{
    width: auto;
    height: auto;
    accent-color: #1C1536;
}
.account__upload{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.account__upload-btn{
    padding: 12px 20px;
    font-size: 14px;
}
.account__upload-name{
    font-size: 14px;
    font-weight: 600;
    opacity: .7;
}
.account__actions{
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.account__link{
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all .3s ease;
}
.account__link:hover{
    color: #A7C70E;
}
.account__auth{
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.account__auth-card{
    border: 1px solid #161616;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.account__auth-card h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.account__auth-card p{
    margin-top: 12px;
}
.account__auth-card .account__form{
    margin-top: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.account__addresses{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.account__address{
    border: 1px solid #161616;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.account__address-badge{
    align-self: flex-start;
    padding: 4px 12px;
    background: #A7C70E;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.account__address-text{
    line-height: 1.6;
}
.account__address-actions{
    margin-top: auto;
    display: flex;
    gap: 24px;
    padding-top: 12px;
}
.account__table-wrap{
    margin-top: 24px;
    overflow-x: auto;
}
table.account__table{
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.account__table th,
.account__table td{
    border: 1px solid #ddd;
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}
.account__table th{
    background: #161616;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
}
.account__table td b{
    font-weight: 700;
}
.account__table-action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #161616;
    transition: all .3s ease;
    flex-shrink: 0;
}
.account__table-action:hover{
    background: #1C1536;
    border-color: #1C1536;
}
.account__table-action:hover svg path{
    stroke: #fff;
}
.account__status{
    display: inline-flex;
    padding: 4px 12px;
    border: 1px solid #161616;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.account__meta-row{
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.account__empty{
    margin-top: 24px;
    font-weight: 600;
}
.account__totals{
    margin-top: 24px;
    align-self: flex-end;
    width: 100%;
    max-width: 380px;
}
.account__wishlist{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.account__wishlist .product__item-content{
    align-items: stretch;
}
.account__wishlist-actions{
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.account__wishlist-remove{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #161616;
    transition: all .3s ease;
}
.account__wishlist-remove:hover{
    background: #FF3D12;
    border-color: #FF3D12;
}
.account__wishlist-remove:hover svg path{
    stroke: #fff;
}
.account__step{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .55;
}
.account__step-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1C1536;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}
:focus-visible{
    outline: 2px solid #A7C70E;
    outline-offset: 2px;
}
.btn-2:active,
.btn:active,
.product__item-add:active{
    transform: scale(.98);
}
.page-title,
.page-name,
.product__name{
    text-wrap: balance;
}
.product__name,
.hm-sec__title{
    letter-spacing: -0.01em;
}
/* єдина крива анімацій для інтерактиву */
.btn-2, .btn,
.product__item,
.product__item-add,
.catalog__filter-item,
.footer__menu li a,
a.footer__descr{
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* картка товару: підняття + тінтована тінь + зум фото */
.product__item{
    transition: transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}

/* Світлий main на сторінці товару: без чорних прогалин між білими секціями */
main.main--light{
    background-color: #fff;
}
/* Контакти: лід, месенджери, блок допомоги */
.contacts__lead{
    max-width: 640px;
    font-size: 15px;
    line-height: 1.7;
    margin: 16px 0 28px;
}
.contacts__msgs{
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.contacts__msg{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 2px solid #A7C70E;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .3s ease;
}
.contacts__msg svg{
    color: #A7C70E;
    transition: color .3s ease;
}
.contacts__msg:hover{
    background: #A7C70E;
    color: #161616;
}
.contacts__msg:hover svg{
    color: #161616;
}
.contacts__help{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
    max-width: 560px;
}
.contacts__help-item{
    position: relative;
    padding: 16px 20px;
    background: rgba(255,255,255,.04);
    transition: background .35s ease, box-shadow .35s ease;
}
.contacts__help-item::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 10%;
    background: #A7C70E;
    transition: height .45s cubic-bezier(0.16,1,0.3,1);
}
.contacts__help-item:hover{
    background: rgba(255,255,255,.07);
    box-shadow: 0 12px 32px rgba(167,199,14,.12);
}
.contacts__help-item:hover::before{
    height: 100%;
}
.contacts__help-name{
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.contacts__help-text{
    font-size: 14px;
    line-height: 1.6;
    opacity: .8;
}
/* сторінка search.html */
.search-page{
    padding: 48px 0 72px;
}
.search-page__title{
    margin-bottom: 8px;
}
.search-page__count{
    font-size: 15px;
    color: #6b6b6b;
    margin-bottom: 32px;
}
.search-page__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* === home-sections.css === */
/* Секції головної знімка (акційні/рекомендовані/галерея/faq/переглянуті) + collapse опису.
   Палітра сайту: чорний #161616 + акцент #A7C70E, білий фон. */
.hm-sec{
    padding: 56px 0 0;
}
.hm-sec:last-child{
    padding-bottom: 72px;
}
.hm-sec__title{
    margin-bottom: 32px;
}
.hm-slider-wrap{
    position: relative;
}
.hm-slider{
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.hm-slider::-webkit-scrollbar{
    display: none;
}
.hm-slider .hm-slide{
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 240px;
    scroll-snap-align: start;
}
.hm-arrow{
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #161616;
    color: #FFF;
    transition: background .3s ease, color .3s ease;
}
.hm-arrow:hover{
    background: #A7C70E;
    color: #161616;
}
.hm-arrow--prev{ left: -12px; }
.hm-arrow--next{ right: -12px; }
/* Галерея-плашки (кнопки, відкривають лайтбокс) */
.hm-gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    gap: 16px;
}
.hm-gallery__item{
    position: relative;
    overflow: hidden;
    background: #161616;
    padding: 0;
    border: none;
    cursor: pointer;
}
.hm-gallery__item--wide{
    grid-column: span 2;
}
.hm-gallery__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .5s ease;
}
.hm-gallery__item:hover img{
    transform: scale(1.05);
    opacity: .85;
}
.hm-gallery__play{
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(22,22,22,.85);
    color: #A7C70E;
    pointer-events: none;
}
/* лайтбокс */
.hm-lightbox{
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.85);
    padding: 32px;
}
.hm-lightbox.is-open{
    display: flex;
}
.hm-lightbox__body img,
.hm-lightbox__body video{
    max-width: min(1100px, 90vw);
    max-height: 85vh;
    display: block;
}
.hm-lightbox__close{
    position: absolute;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #161616;
    color: #FFF;
    transition: color .3s ease;
}
.hm-lightbox__close:hover{
    color: #A7C70E;
}
.hm-lightbox__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #161616;
    color: #FFF;
    z-index: 2;
    transition: background .3s ease, color .3s ease;
}
.hm-lightbox__nav:hover{
    background: #A7C70E;
    color: #161616;
}
.hm-lightbox__nav--prev{ left: 24px; }
.hm-lightbox__nav--next{ right: 24px; }
.hm-lightbox__counter{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFF;
    font-size: 14px;
    letter-spacing: 1px;
}

/* FAQ — заголовок зліва, блок по центру */
.hm-faq-sec .hm-sec__title{
    text-align: left;
}
.hm-faq{
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}
.hm-faq__item{
    background: #161616;
}
.hm-faq__btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 24px;
    background: none;
    color: #FFF;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
}
.hm-faq__btn svg{
    flex-shrink: 0;
    color: #A7C70E;
    transition: transform .3s ease;
}
.hm-faq__item.is-open .hm-faq__btn svg{
    transform: rotate(180deg);
}
.hm-faq__answer{
    display: none;
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.8);
}
.hm-faq__item.is-open .hm-faq__answer{
    display: block;
}
.hm-faq__item.is-open{
    border-left: 3px solid #A7C70E;
}


/* Особистий кабінет: welcome-панель + іконки-беджі в меню */
.account__welcome{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    border: 1px solid #161616;
    background: #F7F7F5;
}
.account__welcome-avatar{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1C1536;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.account__welcome-text .account__title{
    font-size: 28px;
}
.account__welcome-text .account__lead{
    margin-top: 6px;
}
.account__menu-item a{
    justify-content: flex-start;
}
.account__menu-icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #A7C70E;
    color: #161616;
    transition: background .3s ease, color .3s ease;
}
.account__menu-item a:hover .account__menu-icon{
    background: #FFF;
    color: #1C1536;
}
.account__menu-item a:hover .account__menu-icon svg path{
    stroke: #1C1536;
}
.account__menu-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.account__menu-title{
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}
.account__menu-sub{
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    opacity: .6;
}
.account__menu-item a:hover .account__menu-sub{
    opacity: .8;
}
.account__field-with-btn{
    display: flex;
    align-items: center;
    gap: 8px;
}
.account__field-with-btn input{
    flex: 1;
    min-width: 0;
}
.welcome__eyebrow{
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #A7C70E;
    margin-bottom: 12px;
}
.welcome__title{
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 12px;
}
.welcome__text{
    font-size: 16px;
    color: rgba(255,255,255,.7);
    margin-bottom: 48px;
}
.welcome__skip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #A7C70E;
    transition: color .3s ease;
}
.welcome__skip:hover{
    color: #A7C70E;
}

/* SEO-опис: окрема чорна секція зі світлою типографікою */
.seo-desc{
    background: #121212;
    padding: 64px 0 72px;
}
.seo-desc .desc{
    max-width: 960px;
}
.seo-desc .desc h1{
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 24px;
}
.seo-desc .desc h1::after{
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    background: #A7C70E;
    margin-top: 16px;
}
.seo-desc .desc h3{
    font-size: 19px;
    font-weight: 700;
    color: #FFF;
    margin: 32px 0 12px;
}
.seo-desc .desc p{
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255,255,255,.72);
    margin-bottom: 14px;
}
.seo-desc .desc p b{
    color: #A7C70E;
}
.seo-desc .desc ul{
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.seo-desc .desc ul li{
    position: relative;
    padding-left: 24px;
    margin-left: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
}
.seo-desc .desc ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background: #A7C70E;
}
.seo-desc .desc.is-collapsible::after{
    background: linear-gradient(to bottom, rgba(18,18,18,0), #121212);
}
.seo-desc .desc-toggle{
    color: #FFF;
}
.seo-desc .desc-toggle:hover{
    color: #A7C70E;
}
/* Хлібні крихти на темному фоні (about/contacts/delivery/search) */
.catalog__crumbs--light{
    color: #FFF;
    margin-bottom: 24px;
}
.catalog__crumbs--light .catalog__crumbs-link{
    color: rgba(255,255,255,.55);
}
.catalog__crumbs--light .catalog__crumbs-link:hover{
    color: #A7C70E;
}
.catalog__crumbs--light .catalog__crumbs-link.is-current{
    color: #FFF;
}
.catalog__crumbs--light .catalog__crumbs-sep{
    color: rgba(255,255,255,.3);
}

/* Типографіка .desc на темному фоні сторінки "Про нас" */
.about .desc h3{
    font-size: 19px;
    font-weight: 700;
    color: #FFF;
    margin: 28px 0 10px;
}
.about .desc h3:first-child{
    margin-top: 0;
}
.about .desc p{
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255,255,255,.72);
    margin-bottom: 14px;
}
.about .desc p b{
    color: #A7C70E;
}
.about .desc ul{
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about .desc ul li{
    position: relative;
    padding-left: 22px;
    margin-left: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
}
.about .desc ul li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #A7C70E;
}
.about .desc.is-collapsible{
    max-height: 370px;
}
.about .desc.is-collapsible.is-open{
    max-height: none;
}
.about .desc.is-collapsible::after{
    background: linear-gradient(to bottom, rgba(18,18,18,0), #121212);
}
.about .desc-toggle{
    color: #FFF;
}
.about .desc-toggle:hover{
    color: #A7C70E;
}
/* картинка праворуч: компактна при згорнутому описі, на всю висоту — при розгорнутому */
.about__box{
    align-items: stretch;
}
.about__image img{
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
    transition: max-height .5s ease;
}
.about__box:has(.desc.is-open) .about__image img{
    max-height: none;
}
/* collapse SEO-опису на головній — компактний, текстова кнопка */
.desc.is-collapsible{
    position: relative;
    max-height: 260px;
    overflow: hidden;
}
.desc.is-collapsible::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF);
    pointer-events: none;
}
.desc.is-collapsible.is-open{
    max-height: none;
}
.desc.is-collapsible.is-open::after{
    display: none;
}
.desc-toggle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    background: none;
    color: #161616;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #A7C70E;
    transition: color .3s ease;
}
.desc-toggle:hover{
    color: #A7C70E;
}
.desc-toggle svg{
    transition: transform .3s ease;
}
.desc-toggle.is-open svg{
    transform: rotate(180deg);
}
/* сторінка товару: рядок покупки (кількість + кошик + вибране), теги, стікери на фото */
.pui-buyrow{
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
}
.pui-buyrow .product__count{
    margin: 0;
    max-width: 132px;
    border: 2px solid #161616;
    justify-content: space-between;
    flex-shrink: 0;
}
.pui-buyrow .product__count input{
    width: 40px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 700;
}
.pui-buyrow .product__add{
    margin: 0;
    flex: 1;
}
.pui-wish{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: auto;
    background: none;
    border: 2px solid #161616;
    color: #161616;
    flex-shrink: 0;
    transition: all .3s ease;
}
.pui-wish:hover{
    border-color: #A7C70E;
    color: #A7C70E;
}
.pui-wish.is-active{
    background: #A7C70E;
    border-color: #A7C70E;
    color: #161616;
}
.pui-wish.is-active svg{
    fill: currentColor;
}
.pui-badges{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
}
.product__slider-content{
    position: relative;
}
.pui-tags{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.pui-tags__title{
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    margin-right: 4px;
}
.pui-tag{
    padding: 6px 12px;
    background: #F1F1F1;
    color: #161616;
    font-size: 13px;
    transition: background .3s ease, color .3s ease;
}
.pui-tag:hover{
    background: #A7C70E;
}
/* collapse опису на сторінці товару */
.product__result-content.pui-collapsible{
    position: relative;
    max-height: 380px;
    overflow: hidden;
}
.product__result-content.pui-collapsible::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF);
    pointer-events: none;
}
.product__result-content.pui-collapsible.is-open{
    max-height: none;
}
.product__result-content.pui-collapsible.is-open::after{
    display: none;
}
.hc-badge.is-bump{
    animation: hcBump .3s ease;
}
@keyframes hcBump{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.35); }
    100%{ transform: scale(1); }
}
.product__item-add.is-added,
.product__add.is-added{
    background: #A7C70E !important;
    color: #161616 !important;
    pointer-events: none;
}
.product__item-add.is-added svg path,
.product__add.is-added svg path{
    stroke: #161616;
}

/* Вкладки товару: інструкція + відгуки */
.product__instruction{
    margin: 12px 0 16px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product__instruction li{
    line-height: 1.6;
}
.product__review{
    padding: 16px 20px;
    border-left: 3px solid #A7C70E;
    background: rgba(22,22,22,.03);
    margin-bottom: 16px;
}
.product__review-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.product__review-stars{
    color: #A7C70E;
    letter-spacing: 2px;
}
.product__review-date{
    font-size: 13px;
    opacity: .55;
}
.product__item-wish.is-active svg,
.pui-wish.is-active svg{
    fill: #FF3D12;
    stroke: #FF3D12;
}
.product__item-wish.is-active svg path,
.pui-wish.is-active svg path{
    fill: #FF3D12;
    stroke: #FF3D12;
}

/* підпис перед значенням об'єму/варіанта на сторінці товару */
.product__volume-label{
    opacity: .55;
    font-weight: 400;
    margin-right: 4px;
}



/* Прелоадер слайдера товару: ховаємо слайди, поки Swiper не ініціалізувався */
.product__slider-content.is-loading .product__slider,
.product__slider-content.is-loading .product__thumbs{
    visibility: hidden;
}
.product__slider-loader{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
}
.product__slider-content.is-loading .product__slider-loader{
    display: flex;
}
.product__slider-loader span{
    display: block;
    width: 44px;
    height: 44px;
    border: 4px solid rgba(22,22,22,.15);
    border-top-color: #A7C70E;
    border-radius: 50%;
    animation: productSliderSpin .8s linear infinite;
}
@keyframes productSliderSpin{
    to{ transform: rotate(360deg); }
}

/* Рекламний банер у сітці каталогу: квадрат 2x2 картки, фото тлом */
.catalog__banner{
    grid-column: span 2;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #161616;
    color: #FFF;
}
.catalog__banner-media{
    position: absolute;
    inset: 0;
}
.catalog__banner-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .85;
    transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}
.catalog__banner:hover .catalog__banner-media img{
    transform: scale(1.05);
}
.catalog__banner::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22,22,22,.05) 30%, rgba(22,22,22,.85) 100%);
    pointer-events: none;
}
.catalog__banner-body{
    position: relative;
    z-index: 2;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.catalog__banner-title{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.catalog__banner-text{
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,.85);
    max-width: 440px;
}
.catalog__banner-btn{
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
}

/* ===== Сторінка відгуків + попапи відгук/питання ===== */
.rv-page{
    padding: 24px 0 88px;
    color: #161616;
}
.rv-rating{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 28px 0 32px;
    padding: 24px 28px;
    background: #F5F5F2;
}
.rv-rating__score{
    display: flex;
    align-items: center;
    gap: 14px;
}
.rv-rating__value{
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}
.rv-rating__count{
    font-size: 14px;
    opacity: .6;
}
.rv-stars{
    display: inline-flex;
    gap: 2px;
    color: #C9C9C4;
}
.rv-star--on{
    color: #A7C70E;
    fill: #A7C70E;
}
.rv-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.rv-card{
    padding: 24px;
    border: 1px solid #E5E5E1;
    background: #FFF;
    transition: transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
.rv-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(22,22,22,.1);
}
.rv-card__head{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.rv-card__avatar{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #161616;
    color: #A7C70E;
    font-size: 18px;
    font-weight: 700;
}
.rv-card__ident{
    min-width: 0;
    margin-right: auto;
}
.rv-card__name{
    font-size: 16px;
    font-weight: 700;
}
.rv-card__meta{
    font-size: 13px;
    opacity: .55;
}
.rv-card__product{
    font-size: 13px;
    margin-bottom: 8px;
    opacity: .8;
}
.rv-card__product a{
    color: #161616;
    text-decoration: underline;
}
.rv-card__product a:hover{
    color: #A7C70E;
}
.rv-card__text{
    font-size: 15px;
    line-height: 1.65;
}
/* Сторінка FAQ */
.faq-page{
    padding: 24px 0 88px;
}
.faq-group{
    margin-top: 40px;
}
.faq-group__title{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #A7C70E;
    margin-bottom: 16px;
}
/* Тизер відгуків (головна/каталог) */
.rv-teaser{
    padding: 56px 0 64px;
}
.rv-teaser--light{
    background: #fff;
    color: #161616;
}
.rv-teaser__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.rv-teaser__all{
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #A7C70E;
    transition: color .3s ease;
}
.rv-teaser--light .rv-teaser__all{ color: #161616; }
.rv-teaser__all:hover{ color: #A7C70E; }
.rv-teaser__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* темний варіант тизера (головна) */
.rv-teaser--dark .rv-card{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: #FFF;
}
.rv-teaser--dark .rv-card__name{ color: #FFF; }
.rv-teaser--dark .rv-card__product a{ color: #FFF; }
.rv-teaser--dark .rv-card__avatar{ background: #A7C70E; color: #161616; }

/* Опис категорії в сайдбарі каталогу + широкий попап */
.cat-desc-side__text{
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4a48;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-desc-side__text h1,
.cat-desc-side__text h2,
.cat-desc-side__text h3{
    font-size: 14px;
    margin-bottom: 6px;
}
.cat-desc-side__more{
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    border-bottom: 2px solid #A7C70E;
    transition: color .3s ease;
}
.cat-desc-side__more:hover{
    color: #A7C70E;
}
.cat-desc-full{
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #2a2a28;
}
.cat-desc-full p{
    margin-bottom: 12px;
}
.cat-desc-full h2,
.cat-desc-full h3{
    font-size: 17px;
    font-weight: 700;
    margin: 18px 0 8px;
}

/* ===== Фільтри каталогу в стилі hydrophob.net (групи-акордеони, чекбокси) ===== */
.hpf{
    border-bottom: 1px solid #E5E5E1;
    padding-bottom: 4px;
    margin-bottom: 12px;
}
.hpf__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 0;
    background: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    text-align: left;
}
.hpf__toggle svg{
    flex-shrink: 0;
    color: #A7C70E;
    transition: transform .3s ease;
}
.hpf.is-open .hpf__toggle svg{
    transform: rotate(180deg);
}
.hpf__body{
    display: none;
    padding: 4px 0 10px;
}
.hpf.is-open .hpf__body{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hpf__item{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #2a2a28;
}
.hpf__check{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hpf__box{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #161616;
    background: #FFF;
    position: relative;
    transition: background .2s ease, border-color .2s ease;
}
.hpf__check:checked + .hpf__box{
    background: #A7C70E;
    border-color: #A7C70E;
}
.hpf__check:checked + .hpf__box::after{
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #161616;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.hpf__check:focus-visible + .hpf__box{
    outline: 2px solid #A7C70E;
    outline-offset: 2px;
}
.hpf__item:hover .hpf__label{
    color: #161616;
}
.hpf__count{
    opacity: .45;
    font-size: 12.5px;
}
/* у темному drawer (мобільні фільтри) */
.cui-drawer .hpf__toggle{ color: #161616; }




/* --- перенесено з попереднього окремого html/css/pages.css (catalog filter drawer, account OTP тощо) --- */
/* === catalog-ui.css === */
/* Каталог знімка: тулбар (фільтри/сортування/сітка) + drawer + сайдбар праворуч */
.cui-toolbar{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.cui-filter-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 20px;
    background: #161616;
    color: #FFF;
    font-size: 14px;
    text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}
.cui-filter-btn:hover{
    background: #A7C70E;
    color: #161616;
}
.cui-sort{
    width: auto;
    max-width: 220px;
    height: 42px;
    padding: 0 36px 0 14px;
    border: 1px solid #161616;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}
.cui-grid-toggle{
    display: flex;
    gap: 8px;
}
.cui-grid-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: none;
    border: 1px solid #161616;
    color: #161616;
    transition: all .3s ease;
}
.cui-grid-btn:hover{
    border-color: #A7C70E;
    color: #A7C70E;
}
.cui-grid-btn.is-active{
    background: #161616;
    color: #A7C70E;
    border-color: #161616;
}
/* сітка по 2 */
.catalog__content.cui-cols-2{
    grid-template-columns: repeat(2, 1fr) !important;
}
/* групи-акордеони в drawer (початково згорнуті) */
.cui-group{
    border-bottom: 1px solid #E5E5E5;
}
.cui-group__btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    background: none;
    color: #161616;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}
.cui-group__btn svg{
    color: #A7C70E;
    transition: transform .3s ease;
}
.cui-group.is-open .cui-group__btn svg{
    transform: rotate(180deg);
}
.cui-group__body{
    padding: 0 0 16px;
}
.cui-group__body select,
.cui-group__body .catalog__price,
.cui-group__body .catalog__search{
    width: 100%;
    max-width: 100%;
}
/* пагінація по центру на всю ширину, текст результатів — праворуч від неї */
.catalog__main .row,
#json-pagination{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.catalog__main .row .col-sm-6{
    width: auto;
    float: none;
    text-align: center !important;
}
.catalog__main ul.pagination{
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.cui-results{
    font-size: 13px;
    color: #6b6b6b;
    text-align: center;
}

#json-pagination:not(:has(ul.pagination)) .cui-results{
    position: static;
    transform: none;
}
@media (max-width: 767px){
    #json-pagination .cui-results{
        position: static;
        transform: none;
        text-align: center;
    }
}
/* drawer */
.cui-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 90;
}
.cui-drawer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: #FFF;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 91;
    display: flex;
    flex-direction: column;
}
.cui-drawer-open .cui-overlay{
    opacity: 1;
    pointer-events: auto;
}
.cui-drawer-open .cui-drawer{
    transform: translateX(0);
}
.cui-drawer__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #161616;
    color: #FFF;
}
.cui-drawer__head p{
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.cui-drawer__close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    color: #FFF;
    transition: color .3s ease;
}
.cui-drawer__close:hover{
    color: #A7C70E;
}
.cui-drawer__body{
    padding: 24px;
    overflow-y: auto;
}
/* фільтри всередині drawer — вертикально */
.cui-drawer__body .catalog__filters{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0;
}
.cui-drawer__body .catalog__filters select,
.cui-drawer__body .catalog__price,
.cui-drawer__body .catalog__search{
    width: 100%;
    max-width: 100%;
}
/* сайдбар праворуч */
.cui-body{
    grid-template-columns: 1fr 280px;
}
.cui-body .cui-aside{
    order: 2;
    display: flex;
}
.cui-body .catalog__main{
    order: 1;
}
/* популярні товари в сайдбарі */
.cui-pop-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cui-pop{
    display: flex;
    align-items: center;
    gap: 12px;
}
.cui-pop__img{
    flex-shrink: 0;
    width: 56px;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    padding: 5px;
    background: #f4f4f4;
}
.cui-pop__meta{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cui-pop__name{
    font-size: 13px;
    line-height: 1.35;
    color: #202222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}
.cui-pop:hover .cui-pop__name{
    color: #A7C70E;
}
.cui-pop__price{
    font-size: 14px;
    font-weight: 700;
    color: #161616;
}

/* === delivery-extra.css === */
/* Єдиний стиль іконок перевізників */
.dlv__card-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid #A7C70E;
    border-radius: 50%;
    color: #A7C70E;
    flex-shrink: 0;
}
/* Додаткові секції сторінки доставки */
.dx-steps{
    padding: 56px 0 0;
}
.dx-steps__title,
.dx-cta__title{
    margin-bottom: 32px;
}
.dx-steps__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.dx-step{
    position: relative;
    padding: 28px 24px 24px;
    border: 1px solid #E0E0E0;
    background: #FFF;
}
.dx-step__num{
    position: absolute;
    top: -18px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #A7C70E;
    color: #161616;
    font-size: 16px;
    font-weight: 700;
}
.dx-step__name{
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
    margin-bottom: 8px;
}
.dx-step__text{
    font-size: 14px;
    line-height: 1.6;
    color: #202222;
}
.dx-perks{
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #161616;
}
.dx-perk{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.dx-perk:last-child{
    border-right: none;
}
.dx-perk svg{
    flex-shrink: 0;
    color: #A7C70E;
}
.dx-perk__text{
    font-size: 14px;
    line-height: 1.45;
    color: #FFF;
}
.dx-cta{
    margin: 56px 0 72px;
    padding: 48px 32px;
    background: #161616;
    text-align: center;
}
.dx-cta__name{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 8px;
}
.dx-cta__text{
    font-size: 15px;
    color: rgba(255,255,255,.8);
    margin-bottom: 24px;
}
.dx-cta__row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.dx-cta__phone{
    font-size: 22px;
    font-weight: 700;
    color: #A7C70E;
}

/* === legal.css === */
/* Юридичні сторінки */
.legal{
    padding: 48px 0 72px;
}
.legal__grid{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    margin-top: 24px;
}
.legal__aside{
    align-self: start;
    position: sticky;
    top: 24px;
}
.legal__aside-title{
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #121212;
}
.legal__menu{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legal__menu-link{
    font-size: 14px;
    color: #202222;
    transition: color .3s ease;
}
.legal__menu-link:hover,
.legal__menu-link.is-active{
    color: #A7C70E;
}
.legal__body{
    max-width: 820px;
}
.legal__updated{
    font-size: 13px;
    color: #6b6b6b;
    margin-bottom: 8px;
}
.legal__title{
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #121212;
    margin-bottom: 16px;
}
.legal__title::after{
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    background: #A7C70E;
    margin-top: 14px;
}
.legal__lead{
    font-size: 16px;
    line-height: 1.7;
    color: #202222;
    margin-bottom: 24px;
}
.legal__subtitle{
    font-size: 18px;
    font-weight: 700;
    color: #121212;
    margin: 28px 0 10px;
}
.legal__p{
    font-size: 15px;
    line-height: 1.75;
    color: #202222;
    margin-bottom: 12px;
}
.legal__list{
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.legal__list li{
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #202222;
}
.legal__list li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    background: #A7C70E;
}

/* === account-ui.css === */
/* account-ui.css — доповнення для статичних сторінок особистого кабінету (html.hydrophob.net.ua).
   Базові класи account__*, product__item*, btn-2 вже є в прод stylesheet.css —
   тут лише те, чого там немає: вхід за одноразовим кодом і статус-бейджі замовлень.
   Палітра: #161616 / #121212 (чорний), #A7C70E (зелений акцент), білий. Без синього. */

/* ===== Вхід за одноразовим кодом ===== */
.account__otp{
    margin-top: 24px;
}
.account__otp-desc{
    margin-top: 8px;
    max-width: 640px;
    opacity: .7;
    line-height: 1.5;
}
.account__otp-steps{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 24px 0;
}
.account__otp-step-badge{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .35;
    transition: opacity .3s ease, color .3s ease;
}
.account__otp-step-badge.is-active{
    opacity: 1;
    color: #A7C70E;
}
.account__otp-step-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 12px;
    flex-shrink: 0;
}
.account__otp-panel{
    display: none;
}
.account__otp-panel.is-active{
    display: block;
}
.account__otp-hint{
    margin-bottom: 16px;
    font-size: 14px;
    opacity: .7;
}
.account__otp-hint b{
    color: #161616;
    opacity: 1;
}
.account__otp-code-input{
    max-width: 240px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 10px;
}
.account__otp-resend{
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #161616;
    text-decoration: underline;
    cursor: pointer;
    transition: color .3s ease;
}
.account__otp-resend:disabled{
    opacity: .4;
    cursor: default;
    text-decoration: none;
}
.account__otp-resend:not(:disabled):hover{
    color: #A7C70E;
}
.account__otp-done{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid #A7C70E;
    font-weight: 600;
}
.account__otp-done svg{
    flex-shrink: 0;
    color: #A7C70E;
}
.account__otp-divider{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    opacity: .5;
}
.account__otp-divider::before,
.account__otp-divider::after{
    content: '';
    flex: 1;
    height: 1px;
    background: #161616;
    opacity: .15;
}

/* ===== Статуси замовлень ===== */
.account__status--success{
    background: #A7C70E;
    border-color: #A7C70E;
    color: #161616;
}
.account__status--pending{
    background: #FFF;
    border-color: #161616;
    color: #161616;
}
.account__status--cancelled{
    background: #161616;
    border-color: #161616;
    color: #FFF;
}