.category__crumbs {
color: var(--clr-grey);
font-size: 14px;
font-weight: 400;
line-height: 140%;
}
.category__crumbs span {
margin: 0 8px;
}
.category__crumb-link {
color: var(--clr-grey);
}
.category__header {
padding: 60px 0 22px;
border-bottom: 1px solid #CFD0D250;
}
.category__title {
margin: 0;
}
.swiper-slide {
border: none !important;
border-radius: 20px;
background-color: var(--clr-gray);
}
.product__slider {
position: relative;
width: 100%;
max-width: 720px;
max-height: 550px;
display: flex;
gap: 20px;
}
.product__slider-big {
position: relative;
width: 80%;
min-height: 320px;
overflow: hidden;
outline: 1px solid var(--clr-gray);
border-radius: 20px;
}
.product__slider-big .swiper-slide {
height: 100%;
width: 100%;
}
.product__slider-big .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide {
cursor: pointer;
}
.product__slider-min {
position: relative;
width: 20%;
max-height: 562px;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
.product__slider-min .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-button {
position: absolute;
content: '';
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 36px;
background-color: #f5f5f5;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
cursor: pointer;
z-index: 6;
}
.product-button-next {
top: 48%;
right: 2%;
background: url(//tecnovaprus.ru/wp-content/themes/tecnovap/assets/icons/chevron-next.svg);
}
.product-button-prev {
top: 48%;
left: 2%;
background: url(//tecnovaprus.ru/wp-content/themes/tecnovap/assets/icons/chevron-left.svg);
}
.swiper-button-disabled {
opacity: .4;
cursor: default;
}
.country__img {
max-width: 56px !important;
} @media screen and (max-width: 1440px) { }
@media screen and (max-width: 1280px) {
.product-slide img {
height: auto !important;
max-width: 100% !important;
}
.product__img {
width: 516px;
}
.product__top-block {
flex-direction: column-reverse;
}
.product__price {
display: flex;
justify-content: center;
}
}
@media screen and (max-width: 1024px) {
.product__row {
flex-direction: column;
}
.product__slider {
max-width: 100%;
flex-direction: column;
gap: 12px;
}
.product__slider-big {
width: 100%;
min-height: 280px;
}
.product__slider-min {
width: 100%;
max-height: none;
flex-direction: row;
}
.product__slider-min .swiper-slide img {
height: auto;
}
.product__price-wrap {
width: 280px;
}
}
@media screen and (max-width: 768px) {
.product__img {
width: 100%;
margin-bottom: 32px;
}
.product__main {
flex-direction: var(--coln);
}
.product__top-logo {
width: 128px;
}
.product__top-wrap {
padding-bottom: 26px;
margin-bottom: 20px;
}
.product__top-info {
width: 100%;
} .product__price-wrap {
width: 100%;
}
.product__img-wrap {
width: 100%;
}
}
@media screen and (max-width: 480px) {
.product__slider-big {
min-height: 220px;
}
} #productBackdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 9998;
}
#productFormPopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: #fff;
border-radius: 12px;
max-width: 560px;
width: 90%;
padding: 24px;
}
#productCloseFormBtn {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #f5f5f5;
border: none;
cursor: pointer;
}
#productFormTitle {
margin: 0 0 16px;
}
.product-form__grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.product-form__grid input[type="text"],
.product-form__grid input[type="tel"],
.product-form__grid input[type="email"],
.product-form__grid textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
}
.product-form__grid-item {
display: flex;
flex-direction: column;
}
.product-form__privacy {
display: flex;
gap: 8px;
align-items: center;
}
.product-form__actions {
display: flex;
gap: 10px;
}
@media screen and (max-width: 480px) {
#productFormPopup {
max-width: 80%;
width: 80%;
padding: 16px;
}
} .product__cart {
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.product__title {
margin: 30px 0 20px;
}
.product__row {
display: flex;
gap: 20px;
}
.product__info {
padding: 20px;
height: min-content;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
border-radius: 12px;
background-color: #F5F5F5;
overflow: hidden;
} @media screen and (min-width: 1025px) {
.product__row {
align-items: flex-start;
}
.product__info {
position: sticky;
top: 100px; max-height: calc(100vh - 120px);
overflow: auto;
}
}
.product__info .wrap {
width: 100%;
display: flex;
align-items: flex-start;
gap: 20px;
}
.characteristics {
width: 75%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.characteristics__title {
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
}
.characteristics__table {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.characteristics__table-row {
display: flex;
}
.characteristics__table-wrap {
width: 100%;
display: flex;
align-items: flex-end;
}
.characteristics__table-wrap:first-child::after {
content: '';
margin: 0 10px;
display: block;
width: 100%;
height: 1px;
border-bottom: 1px dashed #767676;
}
.characteristics__table-title {
margin: 0;
color: #767676;
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
white-space: nowrap;
}
.characteristics__link {
position: relative;
color: var(--clr-dark);
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
}
.characteristics__link::after {
content: '';
position: absolute;
bottom: -6px;
height: 1px;
width: 100%;
display: block;
border-bottom: 2px solid var(--clr-blue);
}
.content-characteristic {
display: flex;
flex-direction: column;
gap: 20px;
}
.dop__info {
width: 25%;
display: flex;
flex-direction: column;
gap: 10px;
}
.dop__info .country {
display: flex;
align-items: center;
gap: 12px;
}
.country__title {
font-size: 12px;
}
.dop__info .brand {
display: flex;
flex-direction: column;
gap: 5px;
}
.brand__title {
margin: 0;
font-size: 12px;
}
.brand__name {
margin: 0;
color: #767676;
font-size: 12px;
}
.btn__wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.btn__wrap .row {
display: flex;
gap: 10px;
}
.btn__product {
padding: 12px 32px;
color: var(--clr-white);
font-size: 14;
font-weight: bold;
line-height: 140%;
letter-spacing: 0%;
border-radius: 8px;
cursor: pointer;
transition: .3s ease-in-out;
background-color: var(--clr-blue);
}
.btn__product:hover {
color: var(--clr-blue);
background-color: var(--clr-white);
}
.btn__title {
margin: 0;
color: #8A8A8A;
font-size: 12px;
font-weight: 500;
letter-spacing: 0%;
line-height: 140%;
}
.product__content {
display: flex;
flex-direction: column;
gap: 40px;
}
.product__tabs-container {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.product__tab-list-wrapper {
flex: 1;
overflow-y: hidden;
}
.product__tab-list {
display: flex;
gap: 10px;
transition: transform 0.3s ease;
}
.product__tab-item {
padding: 12px 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-black);
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0%;
border-radius: 12px;
background-color: #F5F5F5;
white-space: nowrap;
flex-shrink: 0;
}
.product__tab-item.active {
color: var(--clr-white);
background-color: var(--clr-blue);
}
.product__tab-item:hover {
color: var(--clr-white);
background-color: var(--clr-blue);
}
.product__tab-arrow {
display: none;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: #F5F5F5;
color: var(--clr-black);
cursor: pointer;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.product__tab-arrow:hover {
background-color: var(--clr-blue);
}
.product__tab-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.product__tab-arrow:disabled:hover {
background-color: #F5F5F5;
}
@media screen and (max-width: 768px) {
.product__tab-arrow {
display: flex;
}
.product__tab-item {
padding: 6px 12px;
}
.product__tab-list::-webkit-scrollbar {
display: none;
}
}
.content-description {
display: flex;
flex-direction: column;
gap: 20px;
}
.product__content-block {
padding: 40px;
border-radius: 12px;
background-color: #F5F5F5;
}
.product__content-block p {
line-height: 140%;
}
.product__content-block ul {
padding-left: 20px;
}
.product__content-block ul li {
margin: 16px 0;
} .product__content-item {
display: none;
}
.product__content-item.active {
display: flex;
}
.product__table {
width: 100%;
}
caption {
margin-bottom: 24px;
color: var(--clr-black);
font-size: 1rem;
font-weight: 600;
line-height: 140%;
letter-spacing: 0%;
}
td {
padding: 10px;
}
.content-video {
flex-direction: column;
gap: 20px;
}
.product__video-block {
width: min-content;
display: flex;
overflow: hidden;
border-radius: 12px;
} .product__files-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.product__file-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--clr-dark);
text-decoration: none;
}
.product__file-link::before {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain; filter: invert(12%) sepia(2%) saturate(0%) hue-rotate(178deg) brightness(96%) contrast(87%);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23384255" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>');
}
.product__file-link:hover {
color: var(--clr-blue);
} .content-review .woocommerce-Reviews {
padding: 24px;
border-radius: 12px;
background: #F5F5F5;
}
.content-review .woocommerce-Reviews-title {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
color: var(--clr-black);
}
.content-review .commentlist {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.content-review .comment_container {
padding: 16px;
border-radius: 12px;
background: #fff;
}
.content-review .comment_container .meta {
margin: 0 0 8px;
font-size: 12px;
color: #767676;
}
.content-review .comment_container .description {
color: var(--clr-black);
font-size: 14px;
line-height: 150%;
}
.content-review .comment-form {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-review .comment-form input[type="text"],
.content-review .comment-form input[type="email"],
.content-review .comment-form textarea,
.content-review .comment-form select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
}
.content-review .comment-form .form-submit input[type="submit"] {
padding: 12px 24px;
border-radius: 8px;
background: var(--clr-blue) !important;
color: var(--clr-black) !important;
font-weight: 700;
border: none;
cursor: pointer;
transition: .2s ease-in-out;
}
.content-review .comment-form .form-submit input[type="submit"]:hover {
background: var(--clr-black);
color: var(--clr-blue);
} .content-review .stars a,
.content-review .star-rating::before,
.content-review .star-rating span::before {
color: var(--clr-blue);
}
.content-review .avatar {
border-radius: 50%;
}
@media screen and (max-width: 768px) {
.content-review .woocommerce-Reviews {
padding: 16px;
}
.content-review .comment_container {
padding: 12px;
}
}
@media screen and (max-width: 1280px) {
.product__info .wrap {
flex-direction: column-reverse;
}
}
@media screen and (max-width: 1024px) {
.product__info {
width: auto;
}
}
@media screen and (max-width: 768px) {
h1 {
font-size: 6vw;
}
.swiper-slide {
min-height: 100% !important;
}
.btn__wrap .row {
flex-direction: column;
}
.category__header {
padding: 32px 0 12px;
}
.product__tab-item {
white-space: nowrap;
}
.product__content-block {
padding: 20px;
}
td {
padding: 0;
}
.characteristics {
width: 100%;
}
.characteristics__table-title {
font-size: 11px;
}
}