@charset "utf-8";
* {
font-family: "Montserrat",sans-serif;
letter-spacing: 0.1;
}
/* Модальное окно */
.mycart-layout {
font-family: "Montserrat",sans-serif;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
.mycart-layout:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mycart-checkout {
display: inline-block;
width: 800px;
height: 90%; /* Встановлює висоту корзини від висоти екрана */
max-height: 900px;
margin: 0;
padding: 5px;
vertical-align: middle;
border-radius: 5px;
background-color: rgb(245, 245, 245);
box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.3);
position: relative;
}
/* Повідомлення "Корзина пуста" */
.mycart-empty-cart {
display: inline-block;
margin: 0;
width: 350px;
vertical-align: middle;
padding: 100px 0;
font-size: 26px;
border-radius: 5px;
background-color: rgb(245, 245, 245);
box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.3);
position: relative;
line-height: 2;
}
.mycart-block-line {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
}
.mycart-header {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
font-size: 22px;
font-weight: bold;
}
.mycart-title {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-graphite);
}
/* максимальна висота для таблиці з товарами, посля якої появиться прокрутка*/
.mycart-table-wrapper {
display: block;
height: calc(100% - 199px);
overflow-y: scroll;
border: 1px solid var(--color-blue);
}
.mycart-manage-order {
display: flex;
flex-direction: column;
border-collapse: collapse;
width: 100%;
}
.mycart-block-main {
display: flex;
flex-direction: column;
width: 100%;
}
.mycart-tr {
display: flex;
flex-direction: row;
width: 100%;
border-bottom: 1px solid var(--color-blue);
padding: 5px 0 5px 0;
}
.mycart-block-1 {
display: flex;
justify-content: center;
align-items: center;
min-width: 140px;
min-height: 140px;
max-width: 140px;
max-height: 140px;
margin-left: 4px;
}
.mycart-img  {
width: 100%;
height: 100%;
}
.mycart-img > img {
width: 100%;
height: 100%;
}
.mycart-block-2-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.mycart-block-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 100%;
min-height: 60px;
max-height: 60px;
}
.mycart-h1 {
text-align: start;
padding: 0 10px 0 30px;
min-height: 60px;
max-height: 60px;
overflow: hidden;
}
.mycart-h1 > a {
display: block;
padding-top: 4px;
font-size: 17px;
text-decoration: none;
color: var(--color-graphite);
line-height: 1.6;
}
/* Кнопка видалення окремого товару з корзини */
.mycart-btn-del {
margin-right: 10px;
margin-top: 5px;
border: 1px solid var(--color-red);
border-radius: 3px;
min-width: 35px;
min-height: 35px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mycart-btn-del:hover {
border: 3px solid var(--color-red);
}
.mycart-btn-del:before {
display: inline-block;
content: "X";
vertical-align: text-bottom;
color: var(--color-red);
cursor: pointer;
font-size: 20px;
}
.mycart-block-3 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 60px;
}
/* Блок кнопок +/- */
.mycart-block-count {
width: 190px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 33%;
}
.mycart-incr {
cursor: pointer;
border: 1px solid var(--color-blue);
width: 45px;
height: 45px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background-color: white;
}
.mycart-incr:hover {
border: 3px solid var(--color-blue);
}
.mycart-incr:active {
background-color: lightgreen;
}
.mycart-input_count {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 45px;
font-weight: bold;
text-align: center;
border: 1px solid gray;
border-radius: 3px;
font-size: 20px;
color: var(--color-graphite);
outline: none;
}
.mycart-sum {
padding-right: 10px;
width: 120px;
height: 45px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: flex-end;
color: var(--color-graphite);
margin-right: 20px;
}
.mycart-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Загальна сума */
.mycart-subtotal {
margin: 0;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 22px;
height: 50px;
padding: 0;
padding: 12px;
text-align: right;
padding-right: 55px;
background-color: rgb(199, 199, 199);
border: 1px solid grey;
font-weight: bold;
}
.mycart-subtotal > span {
font-size: 22px;
}
/* ---Блок кнопок---  */
.mycart-orderform {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100px;
}
input[type="submit"],
input[type="reset"] {
padding: 18px 24px;
border: 1px solid var(--color-red);
border-radius: 4px;
font-size: 17px;
cursor: pointer;
color:  white;
background-color: var(--color-blue);
}
input[type="reset"] {
color:  black;
background-color: white;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
border: 1px solid black;
opacity: 0.8;
}
input[type="submit"]:active,
input[type="reset"]:active {
opacity: 1;
}
@media screen and (max-width: 1020px) {
.mycart-checkout {
width: 800px;
}}
@media screen and (max-width: 800px) {
.mycart-checkout {
width: 100%;
height: 100%;
/* max-height: 100%; робимо висоту кошика на всю висоту екрана */
min-height: 100%; /* робимо висоту кошика на всю висоту екрана */
padding: 0;
border-radius: 0;
overflow-y: auto;
}
/* максимальна висота для таблиці з товарами, посля якої появиться прокрутка*/
.mycart-table-wrapper {
/* height: calc(100% - 199px); /* робимо висоту кошика на всю висоту екрана */ 
border-bottom: none;
}
.mycart-table-wrapper::-webkit-scrollbar {
width: 2px; /* ширина нового скроллбара */
}
.mycart-tr {
font-size: 14px;
}
.mycart-block-1 {
min-width: 90px;
min-height: 90px;
max-width: 90px;
max-height: 90px;
}
.mycart-block-2-3 {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.mycart-block-2 {
width: 100%;
min-height: 90px;
max-height: 90px;
}
.mycart-h1 {
min-height: 90px;
max-height: 90px;
}
.mycart-block-3 {
width: calc(100% + 90px);
margin-left: -90px;
}
.mycart-block-count {
margin-left: 130px;
}
.mycart-input_count {
font-size: 18px;
}
.mycart-subtotal {
height: 50px;
justify-content: center;
padding-right: 0px;
}
.mycart-h1 {
line-height: 1.33;
padding: 0 10px;
}
input[type="submit"],
input[type="reset"]  {
font-size: 18px;
}}
@media screen and (max-width: 500px) {
.mycart-block-count {
width: 180px;
margin-left: 120px;
}
.mycart-sum {
margin-right: 0px;
}
.mycart-btn-del {
min-width: 32px;
min-height: 32px;
}}
@media screen and (max-width: 450px) {
.mycart-block-count {
width: 160px;
margin-left: 100px;
}
.mycart-incr {
width: 40px;
height: 40px;
}
.mycart-input_count {
width: 50px;
height: 40px;
font-size: 18px;
}}
@media screen and (max-width: 410px) {
.mycart-block-count {
width: 145px;
margin-left: 95px;
}}
@media screen and (max-width: 376px) {
.mycart-block-count {
margin-left: 10%;
}
input[type="submit"],
input[type="reset"]  {
font-size: 17px;
}}