.add-to-mycart {
padding-left: 46px;
background-image: var(--img-koshik-botton);
background-repeat: no-repeat;
background-size: 36px 40px;
background-position: 24px 45%;
}

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

@font-face {
font-family: "sans-serif";
src: url("/fonts/sans-serif.ttf") format("truetype");
}
* {
box-sizing: border-box;
font-family: "Montserrat",sans-serif;
}
html {
font-family: "Montserrat",sans-serif;
overflow-y: scroll;
}
.main-container {
display: flex;
flex-direction: column;
width: 1200px;
height: auto;
margin: auto;
}
.line-top {
margin-top: 1px;
width: 100%;
height: 20px;
background-color: #848484;
}
main {
display: flex;
flex-direction: row;
width: 100%;
height: auto;
margin: auto;
}
/*-------main-------*/
.main-section {
display: flex;
flex-direction: column;
width: calc(100% - 300px - 20px);
margin-left: 20px;
}
h1 {
padding: 20px;
font-size: 22px;
font-weight: bold;
color: var(--color-blue);
line-height: 1.33;
}
.sect-1 {
display: flex;
flex-direction: row;
width: 100%;
}
.sect-1-A {
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
}
/*--------main-img-------*/
.main-img {
position: relative;
}
.big {
width: 100%;
}
.big > img,
.big > video {
display: flex;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto;
padding: 5px;
}
.like {
position: absolute;
width: 42px;
height: 38px;
top: 20px;
right: 20px;
background-image: var(--img-like-white);
background-size: 42px 38px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.small {
position: relative;
float: left;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0 auto;
}
.small > img,
.small > video {
border: 1px solid white;
padding: 4px;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.small > img:hover,
.small > video:hover {
border: 1px solid var(--color-blue);
}
.small-video:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: center;
background-image: url("/img/product/video.svg");
}
.small-video:hover:before {
background-image: url("/img/product/video-hover.svg");
}
.line {
margin-top: 10px;
width: 100%;
height: 20px;
background-color: #848484;
}
/*--------section_1-------*/
.sect-1-B {
padding-left: 24px;
display: flex;
flex-direction: column;
width: calc(100% - 560px);
min-width: 30%;
height: 100%;
}
.cost-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.id-product {
padding: 0 10px;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 40px;
font-size: 15px;
line-height: 1.5;
border-bottom: 3px solid #848484;
}
.cost-and-add {
display: flex;
flex-direction: column;
}
.cost-block {
margin: 0;
padding: 0;
margin-top: 10px;
display: flex;
flex-direction: column;
width: 100%;
width: 180px;
height: 90px;
min-height: 90px;
max-height: 90px;
}
.cost-info {
padding: 6px 4px;
font-size: 17px;
color: var(--color-graphite);
line-height: 1.5;
}
.price {
padding: 12px 4px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.price-count {
font-weight: bold;
color: var(--color-red);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.price-span {
margin-top: 4px;
font-size: 20px;
color: var(--color-red);
}
.add-to-mycart {
margin-top: 25px;
cursor: pointer;
color: #fff;
font-size: 20px;
font-weight: 400;
border: 1px solid grey;
background-color: var(--color-blue);
border-radius: 4px;
overflow: hidden;
line-height: 1.5;
width: 180px;
height: 80px;
min-height: 80px;
max-height: 80px;
}
.add-to-mycart:hover {
border: 1px solid red;
opacity: 0.8;
}
.add-to-mycart:active {
opacity: 1;
}
.add-to-mycart-empty {
pointer-events: none;
background-image: none;
padding-left: 5px;
font-size: 20px;
line-height: 1.33
}
.buy-info {
margin-top: 20px;
display: flex;
padding: 10px 20px;
line-height: 2;
border-top: 3px solid #848484;
}
.buy-ul-info {
margin-top: 8px;
padding-left: 5px;
position: relative;
}
.buy-ul-info > li {
padding: 8px 10px;
padding-left: 45px;
font-size: 16px;
cursor: pointer;
position: relative;
color: black;
}
.buy-ul-info > li:hover {
color: var(--color-blue);
}
.buy-ul-info > li::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
top: 7px;
left: 0;
background-size: 32px 32px;
}
.buy-ul-info > li:nth-child(1)::before {
background-image: url(/img/product/oplata.svg);
}
.buy-ul-info > li:nth-child(2)::before {
background-image: url(/img/product/garantia.svg);
}
/*-------main_2-------*/
.sect-2 {
margin-top: 15px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
width: 100%;
}
.tab-wrap {
width: 100%;
position: relative;
}
.tab {
display: flex !important;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tablinks {
width: 50%;
cursor: pointer;
padding: 14px 16px;
font-size: 18px;
font-weight: 600;
color: var(--color-blue);
border: 1px solid lightgrey;
}
.tablinks:hover {
background-color: #ccc !important;
}
.tablinks:active {
background-color: #ccc;
}
.tabcontent {
padding: 3px 10px;
}
.info-summary,
.info-specifications {
width: 100%;
margin: 15px 0;
line-height: 1.75;
height: 100% !important;
font-size: 16px;
padding: 10px 0;
}
.info-summary {
text-align: justify; /*--розтягування тексту по ширині--*/
text-indent: 20px;
}
.info-summary span[blue] {
color: var(--color-blue);
font-weight: 600;
}
.info-summary span[green] {
color: #2be32b;
font-weight: 600;
padding-right: 10px;
}
.info-summary b {
font-weight: 600;
}
table {
width: calc(100% - 60px);
}
td {
outline: 1px solid #DDDDDD;
padding: 7px 10px;
line-height: 1.5;
}
/*-------main_3-------*/
.sect-3 {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.other_title {
width: 100%;
height: 50px;
font-size: 22px;
font-weight: bold;
color: var(--color-blue);
display: flex;
align-items: center;
justify-content: center;
}
/*-------product_BOX-------*/
.prod-sect-1 {
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.column {
margin-top: 20px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
width: 33.33%;
padding: 5px;
}
.prod-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* height: 350px !important; */
border: 1px solid white;
}
.prod-img {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.prod-box:hover {
border: 1px solid var(--color-blue);
}
.prod-img > a > img {
padding: 4px;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.prod-box-2 {
padding-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 100%;
}
.prod-title {
padding: 10px 0;
width: 100%;
}
.prod-title a {
display: block;
padding: 0 6px;
font-size: 16px;
line-height: 1.33;
cursor: pointer;
text-decoration: none;
color: var(--color-graphite);
height: 46px !important;
overflow: hidden !important;
}
.prod-title a:hover {
color: var(--color-blue);
}
.prod-price {
padding-left: 24px;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
min-height: 30px;
max-height: 30px;
color: var(--color-red);
font-size: 24px;
}
.prod-price > span {
font-size: 22px;
}
.pdf-a {
margin: 0;
padding: 0;
margin-top: 10px;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
width: 52px;
}
.pdf-img {
margin: 0;
width: 50px;
}
@media screen and (max-width: 3840px) {
.main-container {
width: 1200px;
}}
@media screen and (max-width: 1680px) {
.main-container {
width: 1200px;
}}
@media screen and (max-width: 1270px) {
.main-container {
width: calc(100% - 10px);
}
.sect-1 {
flex-direction: column;
}
.sect-1-A {
width: 100%;
max-width: 100%;
}
.sect-1-B {
padding-left: 0px;
width: 100%;
height: auto;
}
.cost-section {
justify-content: space-around;
}
.cost-and-add {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 170px;
}
.cost-block {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 180px;
height: 90px;
min-height: 90px;
max-height: 90px;
border-bottom: 3px solid #848484;
}
.cost-info {
padding: 6px 6px;
}
.size-box {
width: 100%;
}
.price-count {
font-size: 28px;
}
.price-span {
margin-top: 8px;
font-size: 18px;
}
.buy-info {
display: none;
}
.add-to-mycart {
margin-top: 0;
width: 180px;
max-width: 180px;
height: 90px;
min-height: 90px;
max-height: 90px;
}
.add-to-mycart {
font-size: 20px;
}
.line {
margin-top: 10px;
}}
@media screen and (max-width: 1050px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 800px) {
.main-container {
width: 100%;
}
.main-section {
width: 100%;
padding: 0;
margin: 0;
}
nav {
display: none;
}
h1 {
padding: 10px 20px;
text-align: center;
}
.sect-1-A {
width: 100%;
max-width: 100%;
}
.cost-info {
font-size: 18px;
}
/*-------main-2-------*/
.sect-2 {
flex-direction: column;
width: 100%;
}
.tabcontent {
padding: 0;
}
.info-summary,
.info-specifications {
margin: 0;
margin-top: 15px;
line-height: 1.5;
padding: 10px;
font-size: 18px;
}
table {
width: calc(100% - 10px);
}
/*-------main-3-------*/
.sect-3 {
margin: 0;
padding: 0;
width: 100%;
}
.other_title {
margin-top: 5px;
font-size: 22px;
}
.prod-price {
font-size: 22px;
}
.prod-price > span {
font-size: 20px;
}
}
@media screen and (max-width: 476px) {
.cost-block {
width: 130px;
}
.add-to-mycart {
padding: 0;
width: 160px;
background-image: none;
}
}
@media screen and (max-width: 370px) {
.add-to-mycart {
max-width: 130px;
}
.cost-block {
max-width: 130px;
}
.column {
width: 100%;
}
}