/* cartShop CSS */ #cartShop {width: 800px; height: 550px; background: transparent; border-radius: 10px; overflow: hidden; box-shadow: none;} #cartShop close {background: color1A; border-radius: 0 0 0 10px; height: 40px; width: 40px;} #cartShop close:hover {background: #333;} #cartShop ico i {font-size: 24px;} #cartShop ul.cartMenu {display: flex; justify-content: flex-start; align-items: flex-start; background: #fff; border-radius: 10px 10px 0 0; padding: 10px 10px 0 5px;} #cartShop ul.cartMenu li {margin-left: 5px;} #cartShop ul.cartMenu li a {display: flex; justify-content: flex-start; align-items: center; font-size: 18px; padding-right: 15px; font-weight: 600; background: #eee; border-radius: 6px 6px 0 0;} #cartShop ul.cartMenu li.active a {background: color1A; color: #fff;} #cartShop ul.cartMenu li:not(.active):hover a {background: #ddd;} #cartShop div.cartPanel {border-top: 5px solid color1A; background: #f7f7f7; height: calc(100% - 50px);} #cartShop div.cartInfo {display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 60px; padding: 0 20px; background: color1A; color: #fff; border-top: 1px solid #eee; box-shadow: 0 -20px 10px -5px rgb(0 0 0 / 10%);} #cartShop div.cart {padding: 30px; overflow-y: auto; height: calc(100% - 60px);} #cartShop div.cart ul {display: table; border-collapse: collapse; width: 100%;} #cartShop div.cart ul li {display: table-row; justify-content: flex-start; align-items: center;} #cartShop div.cart ul li.item {border-bottom: 1px solid #eee; border-top: 1px solid #fff; background: linear-gradient(0deg, transparent, #f3f3f3); transition: 0.5s;} #cartShop div.cart ul li.cart-head {border-bottom: 3px solid #ccc;} #cartShop div.cart ul li.del {transform: scale(0.5); opacity: 0;} #cartShop div.cart ul li:first-child {border-top: none;} #cartShop div.cart ul li:last-child {border-bottom: none;} #cartShop div.cart ul li > div {display: table-cell; padding: 10px; vertical-align: middle; min-width: 100px;} #cartShop div.cart ul li div.photo {display: block; width: 100px; height: 100px; border-radius: 10px; background-size: contain; padding: 0; margin: 5px; border: 3px solid #eee; background-color: #fff;} #cartShop div.cart ul li div.item {width: calc(100% - 400px);} #cartShop div.cart ul li div.item h3 {font-weight: 600; margin-bottom: 5px;} #cartShop div.cart ul li div.item p {font-size: 12px; color: #aaa; margin-bottom: 5px;} #cartShop div.cart ul li div.item div.coast {display: inline-block; padding: 5px; background: #fff; font-size: 14px; font-weight: 600; border-radius: 6px; border: 1px solid #eee;} #cartShop div.cart ul li div.item div.coast i {font-style: normal; color: color1A; margin-right: 3px;} #cartShop div.cart ul li div.item div.coast s {color: color1A; margin-right: 2px; font-size: 12px; text-decoration: none;} #cartShop div.cart ul li div.item div.coast span.articul {color: #777; font-size: 12px; padding-right: 5px; margin-right: 5px; border-right: 1px solid #eee;} #cartShop div.cart ul li div.item div.coast span b {color: color1A;} #cartShop div.cart ul li div.price {width: 125px;} #cartShop div.cart ul li div.price span {font-weight: 600;} #cartShop div.cart ul li div.price span b {color: color1A;} #cartShop div.cart ul li div.price i {font-style: normal; font-weight: 600; color: color1A; margin-right: 3px;} #cartShop div.cart ul li div.count {width: 155px;} #cartShop div.cart ul li.cart-head div {padding: 0;} #cartShop div.cart ul li.cart-head span {padding: 6px 10px 3px; display: inline-block; background: #ccc; border-radius: 6px 6px 0 0; color: #fff;} #cartShop div.cart ul .count div {padding: 5px; background: linear-gradient(0deg, #fff, #eee); display: flex; justify-content: center; align-items: center; border-radius: 10px; box-shadow: 0 -10px 10px 5px #fff, 0 0px 10px 5px #ddd;} #cartShop div.cart ul button {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border: none; background: #aaa; color: #fff;} #cartShop div.cart ul button.minus {border-radius: 6px 0 0 6px;} #cartShop div.cart ul button.plus {border-radius: 0 6px 6px 0;} #cartShop div.cart ul button.delete {margin-left: 5px; border-radius: 6px; background: #444;} #cartShop div.cart ul button i {font-size: 24px;} #cartShop div.cart ul button:hover {background: color1A; cursor: pointer;} #cartShop div.cart ul input {width: 50px; height: 32px; display: flex; justify-content: center; align-items: center; text-align: center; border: 2px solid #aaa;} #cartShop div.cart ul input:hover {border-color: color1A;} #cartShop div.cartInfo div {margin-right: 20px; padding-right: 20px; border-right: 1px solid #eee; display: flex; justify-content: flex-start; align-items: center;} #cartShop div.cartInfo div i {font-size: 24px; margin-right: 10px;} #cartShop div.cartInfo div s {text-decoration: none; margin-right: 3px; color: #eee;} #cartShop div.cartInfo div span {font-weight: 600;} #cartShop div.cartInfo div span b {color: #ddd;} #cartShop div.cartInfo div span sup {color: #fff;} #cartShop div.cartInfo button {display: flex; justify-content: flex-start; align-items: center; padding: 0 10px 0 0; background: #fff; border: none; border-radius: 6px; font-weight: 600; box-shadow: 0 -5px 5px 3px rgb(255 255 255 / 20%), 0 5px 5px 3px rgb(0 0 0 / 20%); margin-left: auto;} #cartShop div.cartInfo button span {font-size: 18px;} #cartShop div.cartInfo button:hover {cursor: pointer; background: #333; color: #fff;} #cartShop div.order {height: 100%; overflow-y: auto;} #cartShop div[mode]::before {position: absolute; content: attr(test); top: 0; left: calc(50% - 60px); padding: 10px; background: orangered; color: #fff; font-weight: bold; border-radius: 0 0 6px 6px; z-index: 100;} #cartShop div.order form {padding: 30px;} #cartShop div.order div.row {display: flex; justify-content: flex-start; align-items: center; width: 100%; border: 3px solid #eee; background: #eee; border-radius: 6px;} #cartShop div.order div.row ico i {color: #ccc;} #cartShop div.order div.row input {width: calc(100% - 40px); display: flex; justify-content: flex-start; align-items: center; height: 40px; padding: 10px; border-radius: 6px; border: none;} #cartShop div.order div.row textarea {width: calc(100% - 40px); height: 100px; padding: 10px; border-radius: 6px; border: none; resize: none;} #cartShop div.order div.row input {font-family: 'fontText'; font-size: 18px; color: #444;} #cartShop div.order div.row textarea {font-family: 'fontText'; font-size: 16px; color: #444;} #cartShop div.order div.row.order-info {flex-wrap: wrap;} #cartShop div.order div.row.order-info div {display: flex; justify-content: flex-start; align-items: center; margin-left: 10px; border-left: 1px solid #ddd;} #cartShop div.order div.row.order-info div:first-child {margin: 0; border: none;} #cartShop div.order div.row.order-info div.last {margin: 5px 0 0 -6px; border: none; background: #fff; padding: 0 12px 0 8px; border-radius: 4px; z-index: 0;} #cartShop div.order div.row.order-info div.orderid {background: color1A; color: #eee; padding-right: 12px; margin: 5px 0 0 0; border: none; border-radius: 4px; box-shadow: 10px 0 5px -5px rgb(0 0 0 / 10%); z-index: 2;} #cartShop div.order div.row.order-info div.orderid ico {} #cartShop div.order div.row.order-info div.orderid ico i {color: #fff;} #cartShop div.order div.row.order-info div i {color: color1A;} #cartShop div.order div.row.order-info div span {font-weight: bold;} #cartShop div.order div.row.order-info div span.subtotal {margin-left: 10px; padding-left: 10px; border-left: 1px solid #ccc; color: #aaa;} #cartShop div.order div.row.order-info div span.discound, #cartShop div.order div.row.order-info div span.delivery {color: #aaa;} #cartShop div.order div.row.order-info div span b {color: color1A;} #cartShop div.order div.row.order-info div span sup {vertical-align: text-top;} #cartShop div.order div.row.order-info div s {text-decoration: none; margin-right: 5px; font-size: 12px; font-size: 14px; font-weight: 600; color: #aaa;} #cartShop div.order dir {width: calc(100% - 40px); margin: 0; padding: 0; background: #fff; border-radius: 6px;} #cartShop div.order div.value {position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 40px; padding: 0 15px; white-space: nowrap; overflow: hidden;} #cartShop div.order #res:empty, #cartShop div.order div#gopay:empty {display: none;} #cartShop div.order a#send {display: flex; justify-content: flex-start; align-items: center; height: 46px; width: 100%; background: #333; border: 2px solid #fff; border-radius: 6px; color: #fff; font-weight: bold; box-shadow: 0 -7px 7px #fff, 0 5px 7px #ddd;} #cartShop div.order a#send:hover {background: color1A;} #cartShop ul.authorization {display: flex; justify-content: flex-end; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; background: linear-gradient(0deg, #eee, #fff 40%, #fff);} #cartShop ul.authorization > ico i {font-size: 32px;} #cartShop ul.authorization h3 {margin-bottom: 3px; font-weight: 600;} #cartShop ul.authorization li {margin-left: 10px;} #cartShop ul.authorization li:first-of-type {margin-left: auto;} #cartShop ul.authorization a {display: flex; justify-content: flex-start; align-items: center; height: 40px; padding-right: 15px; background: #333; color: #fff; font-weight: 600; border-radius: 6px;} #cartShop ul.authorization a:hover {background: color1A;} #cartShop #gopay:empty {pointer-events: none;} #cartShop #gopay {position: absolute; display: flex; justify-content: center; align-items: center; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; width: 300px; height: fit-content; margin: auto;} #cartShop #gopay div.closeMe {position: absolute; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; width: 300px; height: fit-content; background: #fff; margin: auto; border-radius: 10px; overflow: hidden; border: 3px solid color1A; box-shadow: 0 0 50px rgb(0 0 0 / 20%), 0 20px 10px -10px rgb(0 0 0 / 20%); padding: 20px;} #cartShop #gopay form {padding: 0; margin: 10px 0;} #cartShop #gopay h2 {font-weight: 500; font-size: 1.25em; margin: 0;} #cartShop #gopay h1 {display: none;} #cartShop #gopay p {font-size: 15px;} #cartShop #res div {display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 75px; padding: 0 20px 0 10px; background: orange; color: #fff; border-radius: 6px;} #cartShop #res div i {margin-right: 10px;} #cartShop #res div#ok {background: green;} #cartShop #res div#err {background: coral;} #cartShop #res div#wrong {background: orange; height: 50px;} #cartEmpty {display: flex; justify-content: center; align-items: center; width: 280px; height: 120px; background: color1A; color: #fff; border-radius: 10px; box-shadow: inset 0 -10px 20px 10px rgb(255 255 255 / 15%), inset 0 10px 20px 10px rgb(0 0 0 / 20%); border: 5px solid transparent;} #cartEmpty div {display: flex; justify-content: center; align-items: center; padding: 0 30px;} #cartEmpty div i {font-size: 50px; margin-right: 10px; text-shadow: 5px 5px 10px rgb(0 0 0 / 70%);} #cartEmpty div h3 {display: inline-block; color: #fff; font-weight: bold; margin: 0; font-size: 20px; line-height: 1;} #cartEmpty close i {color: #333;} #cartEmpty close:hover i {color: #fff;} @media screen and (max-width: 1024px) { a.basket {margin: 0; right: 55px !important;} order {max-width: 100vw; max-height: 100vh; border-radius: 0;} #cartShop {width: 100vw; height: 100vh; border-radius: 0;} #cartShop ul.cartMenu {padding-top: 30px;} #cartShop ul.cartMenu li a {font-size: 14px;} #cartShop ul.cartMenu li a span {line-height: 0.9; max-width: 90px;} #cartShop div.cart {padding: 10px; height: calc(100% - 80px);} #cartShop div.cart ul {display: block;} #cartShop div.cart ul li {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding-bottom: 5px;} #cartShop div.cart ul li > div {display: flex; flex-direction: column; align-items: flex-start; justify-content: center;} #cartShop div.cart ul li > div.item {width: calc(100% - 110px);} #cartShop div.cart ul li div.price {width: 50%; justify-content: center; align-items: center;} #cartShop div.cart ul li div.count {width: 50%; padding: 0;} #cartShop div.cart ul .count div {box-shadow: none; background: #eee;} #cartShop div.cart ul .summ {font-size: 20px;} #cartShop div.cart ul li.cart-head {display: none;} #cartShop div.order {padding-bottom: 100px;} #cartShop div.cartInfo #to-order {display: none;} #cartEmpty {border-radius: 0;} }