.co-container {
height: 100%;
margin-top: 120px;
padding: 70px 0 120px;
background-color: #f5f6f5;
display: flex;
}
.hidden {
display: none;
}
.co-grid {
display: grid;
grid-template-columns: 1fr 0.37fr;
gap: 45px;
}
.co-main-title {
font: 500 40px/1.2 var(--font-primary);
}
.co-h2 {
font: 500 28px/1.2 var(--font-primary);
}
.co-subtitle {
color: #767a78;
font: 18px/1.5 var(--font-secondary);
}
.w-block {
padding: 30px 40px;
border-radius: 20px;
border: 1px solid #e7eae7;
background: var(--color-white);
height: max-content;
}
.cart__title {
--gap: 15px;
margin-bottom: 35px;
display: flex;
align-items: center;
gap: var(--gap);
}
.cart__title-total {
font-size: 22px;
font-weight: 400;
margin-top: 4px;
}
.cart__title-total [data-cart-total] {
display: inline-block;
margin-left: calc(var(--gap) * 0.75);
}
.cart-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-item {
display: grid;
grid-template-columns: 80px 1fr 0.25fr 0.5fr 40px;
align-items: center;
gap: 25px;
}
.cart-item:not(:first-child) {
padding-top: 20px;
border-top: 1px solid #e7eae7;
}
.cart-item__thumb {
aspect-ratio: 0.8645;
position: relative;
width: 100%;
}
.cart-item__thumb img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.cart-item__title {
font: 22px/1 var(--font-secondary);
margin-bottom: 14px;
}
.cart-item__counter {
display: flex;
gap: 15px;
align-items: center;
justify-content: center;
}
.cart-item__counter-total {
font-size: 18px;
font-weight: 500;
}
.cart-item__counter-btn {
width: 30px;
height: 30px;
opacity: 0.7;
}
.cart-item__counter-btn:hover {
opacity: 1;
}
.cart-item__counter-btn.disabled {
pointer-events: none;
color: #bebebe;
}
.cart-item__final {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 15px;
}
.cart-item__final-one {
font-size: 16px;
color: #767a78;
padding-bottom: 3px;
}
.cart-item__delete {
color: #bebebe;
display: flex;
}
.cart-item__delete:hover {
color: #0c0c0c;
}
.cart__result-top {
color: #bebebe;
}
.cart__result-final {
margin: 10px 0 30px;
display: flex;
justify-content: space-between;
}
.cart-not-empty,
.cart-empty {
width: 100%;
}
.cart-empty-inner {
padding-top: 80px;
padding-bottom: 80px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cart-empty-inner__descr {
margin: 20px 0 50px;
}
.cart-empty-inner__link {
max-width: 260px;
}
.order {
padding-top: 50px;
}
.order__back {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-green-dark);
font-size: 18px;
margin-bottom: 12px;
}
.order__back :hover {
color: var(--color-orange);
}
.order__title {
margin-bottom: 40px;
}
.order-form-contacts {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}
.co-grid-order {
grid-template-columns: 1fr 0.6fr;
}
.co-row {
display: flex;
gap: 30px;
}
.co-row__item {
width: calc(50% - 15px);
}
.order-field {
display: block;
}
.order-field__inp {
width: 100%;
padding: 15px 20px;
border-radius: 10px;
background-color: #f5f6f5;
border: 1px solid #e7eae7;
font: 16px/1.4 var(--font-secondary);
}
.order-field.err .order-field__inp {
border-color: #971f1f;
color: #971f1f;
}
#order-form {
display: none;
}
.order-delivery-way-wrap {
display: flex;
flex-direction: column;
gap: 25px;
}
.order-radio {
position: relative;
display: flex;
gap: 15px;
align-items: center;
border-radius: 10px;
padding: 20px 25px;
border: 1px solid #0c0c0c;
font-size: 18px;
line-height: 1.5;
font: 500 18px/1.5 var(--font-secondary);
cursor: pointer;
}
.order-radio__inp {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
opacity: 0;
}
.order-radio__inp:checked + .order-radio__fake::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #0c0c0c;
}
.order-radio__fake {
border-radius: 50%;
width: 24px;
height: 24px;
border: 1px solid #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
}
.order-delivery-way .with-pad {
padding-left: 42px;
}
.order-delivery-way-address {
display: flex;
align-items: center;
gap: 10px;
font: 700 18px/1.5 var(--font-secondary);
margin-bottom: 5px;
}
.delivery-fields {
display: flex;
flex-direction: column;
gap: 20px;
}
.delivery-fields__row {
display: flex;
align-items: center;
gap: 20px;
}
.delivery-fields__row-item {
flex: 1 1 100%;
}
.order-text-light {
font: 16px/1.4 var(--font-secondary);
color: #767a78;
}
.order-list {
margin: 25px 0;
padding-bottom: 35px;
display: flex;
flex-direction: column;
gap: 20px;
border-bottom: 1px solid #e7eae7;
}
.order-item {
display: flex;
align-items: center;
gap: 15px;
}
.order-item__img {
width: 70px;
height: 80px;
position: relative;
}
.order-item__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.order-item__info {
display: flex;
gap: 10px;
align-items: center;
flex: 1 1 auto;
}
.order-item__title {
font: 18px/1.5 var(--font-secondary);
margin-bottom: 8px;
}
.order-item__subtitle {
font: 16px/1.4 var(--font-secondary);
color: #767a78;
}
.order-item__count {
margin-left: auto;
font: 18px/1.4 var(--font-secondary);
white-space: nowrap;
}
.order-final-count {
font: 18px/1.5 var(--font-secondary);
color: #bebebe;
margin-bottom: 10px;
}
.order-final-price {
display: flex;
justify-content: space-between;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
.order-submit {
width: 100%;
margin: 30px 0 15px;
}
.order-form-data {
display: none;
}
@media screen and (max-width: 1440px) {
.co-grid {
grid-template-columns: 1fr 0.42fr;
gap: 30px;
}
.co-grid-order {
grid-template-columns: 1fr 0.65fr;
}
}
@media screen and (max-width: 1280px) {
.co-container {
margin-top: 90px;
padding-bottom: 100px;
}
.order {
padding-top: 40px;
}
.co-grid-order {
grid-template-columns: 1fr;
gap: 40px;
}
.co-btn {
font-size: 16px;
}
.order-final-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.order-final-price-w {
display: none;
}
.confirm-order-block {
max-width: 560px;
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 24px;
}
.order-text-light {
font-size: 14px;
}
.order-submit {
margin: 0;
flex-shrink: 0;
width: 240px;
}
}
@media screen and (max-width: 1024px) {
.co-container {
margin-top: 80px;
padding: 65px 0 80px;
}
.co-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.co-main-title {
font-size: 36px;
}
.cart-item__final {
flex-direction: column;
align-items: center;
gap: 10px;
}
.cart__result {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart__result-final {
margin: 15px 0 0;
}
.cart__result-link {
width: 240px;
}
.cart__result-final-w {
display: none;
}
.order-delivery-way {
margin-top: 20px;
}
.order-radio {
font-size: 16px;
}
.co-row.delivery {
flex-direction: column;
gap: 25px;
}
.co-row.delivery .co-row__item {
width: 100%;
}
.co-row__item.delivery-text {
max-width: 520px;
}
}
@media screen and (max-width: 768px) {
.co-container {
margin-top: 0;
padding: 80px 0 60px;
}
.w-block {
border-radius: 20px;
padding: 25px 20px;
border: none;
}
.mob-shift {
width: 100vw;
margin-left: -20px;
}
.co-main-title {
font-size: 24px;
margin-bottom: 25px;
}
.co-h2 {
font-size: 18px;
}
.co-subtitle {
font-size: 14px;
}
.co-btn {
padding: 12px;
}
.cart__title {
--gap: 6px;
}
.cart__title-total {
font-size: 16px;
}
.cart-list {
border-radius: 0;
}
.cart-item {
grid-template-columns: 80px 1fr;
grid-template-rows: auto 24px 24px;
grid-template-areas:
"thumb descr"
"thumb price"
"counter delete";
gap: 10px 15px;
}
.cart-item__thumb {
grid-area: thumb;
aspect-ratio: none;
height: 100%;
}
.cart-item__thumb img {
border-radius: 0;
}
.cart-item__descr {
grid-area: descr;
align-self: flex-start;
}
.cart-item__title {
font-size: 14px;
margin-bottom: 6px;
}
.cart-item__counter {
grid-area: counter;
gap: 6px;
justify-content: space-between;
}
.cart-item__counter-total {
font-size: 12px;
}
.cart-item__counter-btn {
flex-shrink: 0;
width: 24px;
height: 24px;
}
.cart-item__counter-btn svg {
width: 100%;
height: 100%;
}
.cart-item__final {
grid-area: price;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
gap: 12px;
}
.cart-item__final-one {
padding-bottom: 0;
}
.cart-item__delete {
grid-area: delete;
justify-self: end;
}
.cart__result {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 0px -2px 15px 0px rgba(37, 37, 37, 0.11);
}
.cart__result-final {
margin-top: 5px;
}
.cart__result-final-v {
font-size: 20px;
}
.cart__result-link {
width: 150px;
}
.cart-empty {
margin: auto;
}
.cart-empty-inner__link {
width: 240px;
}
.order {
padding-top: 90px;
}
.co-row {
flex-direction: column;
gap: 20px;
}
.co-row__item {
width: 100%;
}
.order-field__inp {
padding: 12px 15px;
font-size: 14px;
}
.order-form-contacts {
margin-bottom: 25px;
gap: 20px;
}
.co-grid-order {
gap: 25px;
}
.order-delivery-way {
font-size: 14px;
margin-top: 0;
}
.delivery-way-toggle {
flex-direction: row;
}
.order-radio {
padding: 12px 15px;
gap: 10px;
font-size: 14px;
}
.order-delivery-way-address {
font-size: 14px;
gap: 5px;
}
.order-delivery-way-address svg {
width: 20px;
height: 20px;
}
.co-row__item.with-pad {
padding-left: 25px;
}
.order-form-contacts,
.order-delivery-way-wrap,
.order-final {
width: 100vw;
border-radius: 0;
margin-left: -20px;
}
.order-final-bottom,
.confirm-order-block {
flex-direction: column;
}
.order-item {
align-items: stretch;
}
.order-item__img {
height: auto;
}
.order-item__info {
flex-direction: column;
gap: 20px;
}
.order-item__descr {
width: 100%;
}
.order-item__count {
margin: auto 0 0 0;
width: 100%;
font-size: 16px;
}
.order-item__title,
.order-item__subtitle {
font-size: 14px;
}
.order-item__title {
margin-bottom: 4px;
}
.order-final-info {
width: 100%;
}
.order-final-count {
font-size: 14px;
}
.order-final-price {
font-size: 18px;
}
.order-final-price-w {
display: block;
}
.order-final-bottom {
align-items: flex-start;
gap: 30px;
}
.order-submit {
width: 100%;
}
}