/* ----------------------------------- */
/* __---CART PAGE CSS---___ */
/* ----------------------------------- */

.cartPage {background-color: var(--c-light-bg); padding-block: 24px;}
.cartPage .wrapper {display: grid; grid-template-columns: minmax(430px, 900px) minmax(250px, 450px); gap: 20px; }
.cartPage .head {background-color: #fff; padding: 16px 24px; border-radius: 8px;}
.cartPage .head .title {display: flex; align-items: center; justify-content: space-between;}
.cartPage .head .title > :first-child {font-size: calc( var(--fs-md) + 2px); font-weight: 700; color: var(--_c-dark);}
.cartPage .head .title > :nth-child(2) {font-size: var(--fs-xs); font-weight: 600; line-height: 20px; color: var(--c-primary); position: relative;}
.cartPage .head .title > :nth-child(2)::before {content: ""; position: absolute; width: 100%; transform: scaleX(0); border-radius: 5px; height: 1px; bottom: 1px; left: 0; background: var(--c-primary); transform-origin: bottom right; transition: transform .25s ease-out;}
.cartPage .head .title > :nth-child(2):hover::before {transform: scaleX(1); transform-origin: bottom left;}

.cartPage .head > :nth-child(2) { font-size: var(--fs-base); font-weight: 600; background-color: var(--c-light-bg); padding: 10px 16px; border-radius: 4px; margin-top: 16px; color: var(--_c-dark);}
.cartPage .sold {background-color: #fff; border-radius: 8px; padding-block: unset; margin-top: 8px;}
.cartPage .choice {padding: 18px 24px; display: flex; align-items: center; gap: 5px; background: no-repeat top / 100% url('../images/yellow-bg.webp'); position: relative;}
.cartPage .choiceContent {display: flex; align-items: center; gap: 7px; }
.cartPage .choiceContent > :first-child {display: block; font-size: var(--fs-xs); color: var(--_c-dark); font-weight: 700; background-color: var(--_c-yellow-bg); line-height: 1; padding : 3px 4px 3px 4px;}
.cartPage .choiceContent > :nth-child(2) {font-size: var(--fs-base); color: var(--_c-dark); border-left: 1px solid var(--_c-product-border); padding-left: 7px; }
.cartPage .showContent img {height: 14px; width: 14px; cursor: pointer;}
.cartPage .showContent {position: relative;}
.cartPage .showContent > :nth-child(2) {width: 320px; display: none; font-size: var(--fs-sm); line-height: 1.5; background-color: #fff; color: var(--_c-dark); padding: 12px 16px; border-radius: 6px; box-shadow: var(--_c-btn-shadow); position: absolute; top: 26px; left: -154px; z-index: 2;}
.cartPage .showContent > :nth-child(2) img {position: absolute; top: -11px; right: 50%; transform: translateX(50%); filter: invert(1);}
.cartPage .showContent > :nth-child(2) p {font-size: calc(var(--fs-xs) + 1px);}
.cartPage .showContent:hover > :nth-child(2) {display: block;}
.cartPage .shippingItem {display: flex; align-items: center; justify-content: space-between; gap: 10px; background-color: var(--c-light-bg); padding-inline: 16px; border-radius: 8px; margin-inline: 24px; padding-block: 16px;}
.cartPage .shippingItem > :first-child {font-size: calc(var(--fs-xs) - 1px); font-weight: 700; line-height: 16px; color: var(--_c-dark);}
.cartPage .shippingItem > :first-child > :first-child {color: var(--_c-bg-red);}
.cartPage .shippingItem img {height: 12px; width: 12px;}
.cartPage .itemInfo {padding: 16px 24px;}
.cartPage .itemPic {position: relative; width: fit-content; height: fit-content;}
.cartPage .itemPic img {height: 100%; width: 120px; border-radius: 8px;}
.cartPage .itemInfo {display: flex; gap: 10px;}
.cartPage .textContent {width: 100%;}
.cartPage .textContent > :first-child {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.cartPage .textContent > :first-child > :first-child { display: flex; align-items: center; font-size: var(--fs-xs); color: var(--_c-dark); transition: var(--transition);}
.cartPage .blackFriday {font-size: calc(var(--fs-xs) - 3px); line-height: 1; text-transform: uppercase; text-wrap: nowrap; background-color: var(--_c-bg-red); color: #fff; padding: 3px 2px; margin-right: 6px; border-radius: 4px;}
.cartPage .textContent > :first-child > :first-child:hover {color: var(--_c-bg-red);}
.cartPage .textContent > :nth-child(2) {display: flex; align-items: center; gap: 2px; font-size: calc(var(--fs-xs) - 2px); color: var(--_c-font-color);}
.cartPage .textContent > :nth-child(2) img {height: 10px; width: 10px; filter: var(--_c-light-filter);}
.cartPage .textContent > :nth-child(3) {font-size: calc(var(--fs-xs) - 1px);font-weight: 300; border-radius: 15px;}
.cartPage .coupons {display: flex; align-items: center; gap: 3px; font-size: calc(var(--fs-xs) - 1px); margin-block: 10px 6px;}
.cartPage .coupons > * {display: flex; align-items: center; gap: 3px; font-size: calc(var(--fs-xs) - 1px);}
.cartPage .coupons :where(:first-child, :nth-child(2)) { color: var(--_c-bg-red); font-weight: 400;}
.cartPage .coupons > :first-child img {height: 15px; width: 10px;}
.cartPage .coupons > :nth-child(2) img {height: 15px;width: 20px;}
.cartPage .givenPrice {display: flex; align-items: center; justify-content: space-between; margin-top: 6px;}
.cartPage .givenPrice > :first-child {font-size: var(--fs-base); }
.cartPage .givenPrice .incremented {display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;}
.cartPage .givenPrice .incremented > :first-child {display: flex; align-items: center; border: 1px solid var(--_c-border); border-radius: 12px;}
.cartPage .givenPrice .incremented .btn__primary {background-color: #011f2d;}
.cartPage .quantity button {padding: 0 9px; color: #000; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-base);}
.cartPage .quantity > :nth-child(2) { font-weight: 700; width:3ch; background:transparent;text-align:center;}

.cartPage .aboutPrice .summary, .partner{background-color: #fff; border-radius: 8px; padding: 16px 24px;}
.cartPage .aboutPrice .summary {margin-bottom: 8px;}
.cartPage .summary .title > :first-child {font-size: calc(var(--fs-md) + 2px); font-weight: 700; margin-bottom: 16px; color: var(--_c-dark);}

.cartPage .summary :where(button, a) {width: 100%; font-size: var(--fs-base) ; font-weight: 700; line-height: 24px; padding-block: 10px;  margin-top: 16px;}
.cartPage .totalPrice {display: flex; flex-direction: column; gap: 13px;}
.cartPage .totalPrice > *{ display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--fs-xs) + 1px); font-weight: 500; line-height: 1; color: var(--_c-dark);}
.cartPage .totalPrice .savingPrice {display: flex; flex-direction: column; gap: 13px; display: none;}
.cartPage .totalPrice .savingPrice img {height: 10px; width: 10px; cursor: pointer;}
.cartPage .totalPrice .saved {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.cartPage .totalPrice .saved > :where(:nth-child(2), :nth-child(3)) {color: var(--_c-small-bg);}
.cartPage .totalPrice .savingPrice > :nth-child(2) {padding: 12px; background-color: #f9f9f9; position: relative;}
.cartPage .savingPrice > :nth-child(2) > :nth-child(2) {color: var(--_c-dark);}
.cartPage .totalPrice .savingPrice > :nth-child(2) img {height: 14px; width: 14px; position: absolute; top: -10px; right: 30px; filter: brightness(0) saturate(100%) invert(97%) sepia(1%) saturate(191%) hue-rotate(120deg) brightness(116%) contrast(95%);}
.cartPage .totalPrice > :last-child {font-weight: 700;}
.cartPage .totalPrice > :last-child > :last-child {font-size: var(--fs-md); font-weight: 700;}


.cartPage .promoCode {padding-block: 16px;}
.cartPage .promoCode img {height: 12px; width: 12px; margin-left: 5px; cursor: pointer; transition: 0.3s;}
.cartPage .promoCode img.rotate {transform: rotate(-180deg);}
.cartPage .couponCode {display: none; flex-direction: column; margin-bottom: 12px;}
.cartPage .couponCode.active {display: flex;}
.cartPage .couponCode p {font-size: calc(var(--fs-xs) - 1px); margin-bottom: 12px; color: var(--_c-dark); font-weight: 400;}

.cartPage form {width: 100%;}
.cartPage .inputField {display: flex;}
.cartPage .inputField input {width: 100%; height: 44px; padding: 10px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; outline: none;}
.cartPage .inputField input:focus {border: 1px solid #000;}
.cartPage .inputField input::placeholder {color: var(--_c-font-color);}
.cartPage .inputField button {border-radius: 0 4px 4px 0; width: 80px; cursor: pointer; margin-top: unset;}
.cartPage .appliedCode {display: flex; align-items: center; justify-content: center; gap: 5px;}
.cartPage .appliedCode > :first-child {font-size: var(--fs-base); font-weight: 800;}
.cartPage .appliedCode > :nth-child(2) {font-size: var(--fs-xs); font-weight: 400; color: var(--_c-bg-red);}
.cartPage .appliedCode > :nth-child(2):hover {text-decoration: underline;}
.cartPage .payTitle > :first-child {font-size: calc(var(--fs-base) + 2px); font-weight: 700; color: var(--_c-dark);}
.cartPage .partnerCompany {display: flex; flex-wrap: wrap; gap: 4px 8px; padding-block: 12px 16px; border-bottom: 1px solid var(--_c-border);}
.cartPage .partnerCompany img {height: 24px; width: auto;}
.cartPage .buyer {padding-top: 16px;}
.cartPage .buyer > :first-child {font-size: calc(var(--fs-base) + 4px); font-weight: 700; color: var(--_c-dark);}
.cartPage .buyer > :last-child {font-size: calc(var(--fs-xs) + 1px); font-weight: 600; color: var(--_c-dark); margin-top: 10px;}
.cartPage .buyer > :last-child img {margin-right: 7px;}

@media only screen and (max-width: 768px) {
    .cartPage .wrapper {grid-template-columns: 1fr;}
}
@media only screen and (max-width: 576px) {
    .cartPage .choice {flex-wrap: wrap; align-items: end; padding: 10px 15px;}
    .cartPage .showContent > :nth-child(2) {left: unset; width: 270px; right: -18px;}
    .cartPage .showContent > :nth-child(2) img {right: 24px;}
    .cartPage .textContent > :first-child > :first-child {flex-direction: column; align-items: start; gap: 5px; }

}
@media only screen and (max-width: 475px) {
    .cartPage .itemInfo {flex-direction: column;}
    .cartPage .textContent > :first-child {align-items: end;}
}
@media only screen and (max-width: 360px) {
    .cartPage .showContent > :nth-child(2) {width: 2980px;}
}

.sale-section .sale {padding-block: .5rem 60px;}