/* P_Cart/Cart.html */
/* =========================================================
MAIN
========================================================= */
body.page-p-cart-cart .cart-page{
width:
100%;
padding:
118px 16px 75px;
}
/* =========================================================
HERO
========================================================= */
body.page-p-cart-cart .cart-hero{
position:
relative;
overflow:
hidden;
isolation:
isolate;
width:
min(100%, 900px);
margin:
10px auto 28px;
padding:
32px 28px;
border-radius:
25px;
text-align:
center;
background:
linear-gradient(
135deg,
rgba(127,255,212,0.45),
rgba(255,255,255,0.56),
rgba(255,179,198,0.30)
);
backdrop-filter:
blur(15px);
-webkit-backdrop-filter:
blur(15px);
border:
1.5px solid
rgba(255,255,255,0.70);
box-shadow:
0 12px 32px
rgba(0,0,0,0.11),
inset 0 1px 0
rgba(255,255,255,0.75);
animation:
fadeInUp
.75s
ease-out
both;
}
body.page-p-cart-cart .cart-hero::before{
content:
"";
position:
absolute;
top:
-70px;
right:
-60px;
width:
180px;
height:
180px;
border-radius:
50%;
background:
rgba(127,255,212,0.24);
filter:
blur(7px);
animation:
bubbleFloat
7s
ease-in-out
infinite;
}
body.page-p-cart-cart .cart-hero::after{
content:
"";
position:
absolute;
bottom:
-75px;
left:
-60px;
width:
180px;
height:
180px;
border-radius:
50%;
background:
rgba(255,179,198,0.22);
filter:
blur(8px);
animation:
bubbleFloat
8s
ease-in-out
infinite reverse;
}
body.page-p-cart-cart .cart-hero-icon{
position:
relative;
z-index:
2;
width:
70px;
height:
70px;
margin:
0 auto 12px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
20px;
background:
rgba(255,255,255,0.58);
border:
1px solid
rgba(255,255,255,0.76);
box-shadow:
0 7px 17px
rgba(0,0,0,0.09);
}
body.page-p-cart-cart .cart-hero-icon img{
width:
42px;
height:
42px;
object-fit:
contain;
}
body.page-p-cart-cart .cart-hero h1{
position:
relative;
z-index:
2;
margin:
0 0 7px;
font-size:
2rem;
font-weight:
900;
}
body.page-p-cart-cart .cart-hero p{
position:
relative;
z-index:
2;
margin:
0;
color:
var(--text-soft);
font-size:
13px;
line-height:
2;
}
/* =========================================================
CART LAYOUT
========================================================= */
body.page-p-cart-cart .cart-layout{
width:
100%;
max-width:
1120px;
margin:
0 auto;
display:
grid;
grid-template-columns:
minmax(0,1fr)
330px;
gap:
24px;
align-items:
start;
}
/* =========================================================
PRODUCTS PANEL
========================================================= */
body.page-p-cart-cart .cart-products-panel{
position:
relative;
overflow:
hidden;
width:
100%;
max-width:
760px;
margin:
0 auto;
padding:
20px;
border-radius:
22px;
background:
rgba(255,255,255,0.54);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
border:
1.5px solid
rgba(255,255,255,0.68);
box-shadow:
0 8px 24px
rgba(0,0,0,0.09),
inset 0 1px 0
rgba(255,255,255,0.72);
animation:
fadeInUp
.75s
ease-out
.12s
both;
}
body.page-p-cart-cart .panel-heading{
position:
relative;
z-index:
2;
display:
flex;
align-items:
center;
justify-content:
center;
gap:
10px;
margin:
0 0 16px;
padding-bottom:
14px;
border-bottom:
1px solid
rgba(0,8,117,0.09);
}
body.page-p-cart-cart .panel-heading-title{
display:
flex;
align-items:
center;
justify-content:
center;
gap:
8px;
margin:
0;
font-size:
17px;
font-weight:
900;
}
body.page-p-cart-cart .panel-heading-icon{
width:
34px;
height:
34px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
border-radius:
10px;
background:
rgba(127,255,212,0.42);
}
body.page-p-cart-cart .panel-heading-icon img{
width:
21px;
height:
21px;
object-fit:
contain;
}
body.page-p-cart-cart .panel-heading-count{
min-width:
27px;
height:
27px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
0 8px;
border-radius:
50px;
background:
linear-gradient(
135deg,
var(--pink),
var(--pink-light)
);
direction:
ltr;
font-family:
Arial,
sans-serif;
font-size:
11px;
font-weight:
900;
}
/* =========================================================
CART ITEMS
========================================================= */
body.page-p-cart-cart .cart-items{
position:
relative;
z-index:
2;
display:
flex;
flex-direction:
column;
gap:
12px;
}
/* =========================================================
SUMMARY
========================================================= */
body.page-p-cart-cart .cart-summary{
position:
sticky;
top:
100px;
width:
100%;
padding:
21px;
border-radius:
22px;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.76),
rgba(127,255,212,0.27)
);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
border:
1.5px solid
rgba(255,255,255,0.72);
box-shadow:
0 9px 24px
rgba(0,0,0,0.10);
animation:
fadeInUp
.75s
ease-out
.20s
both;
}
body.page-p-cart-cart .summary-title{
margin:
0 0 18px;
text-align:
center;
font-size:
16px;
font-weight:
900;
}
body.page-p-cart-cart .summary-row{
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
padding:
9px 0;
border-bottom:
1px dashed
rgba(0,8,117,0.10);
color:
var(--text-soft);
font-size:
11px;
}
body.page-p-cart-cart .summary-row strong{
color:
var(--text);
direction:
ltr;
font-family:
Arial,
sans-serif;
}
body.page-p-cart-cart .summary-total{
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
margin-top:
14px;
padding-top:
13px;
font-size:
13px;
font-weight:
900;
}
body.page-p-cart-cart .summary-total-price{
direction:
ltr;
font-family:
Arial,
sans-serif;
color:
var(--text);
font-size:
18px;
font-weight:
900;
}
body.page-p-cart-cart .summary-total-price small{
margin-right:
4px;
font-family:
"Vazirmatn",
Arial,
sans-serif;
font-size:
9px;
opacity:
.62;
}
body.page-p-cart-cart .checkout-btn{
width:
100%;
min-height:
47px;
margin-top:
17px;
border:
none;
border-radius:
13px;
background:
linear-gradient(
135deg,
var(--mint),
var(--mint-dark)
);
color:
var(--text);
font-family:
inherit;
font-size:
13px;
font-weight:
900;
box-shadow:
0 6px 15px
rgba(0,8,117,0.09);
}
body.page-p-cart-cart .continue-shopping{
width:
100%;
min-height:
42px;
margin-top:
9px;
display:
flex;
align-items:
center;
justify-content:
center;
border:
1px solid
rgba(255,179,198,0.48);
border-radius:
12px;
background:
rgba(255,220,229,0.48);
color:
var(--text);
font-size:
11px;
font-weight:
800;
}
body.page-p-cart-cart .summary-note{
margin:
15px 0 0;
padding:
10px;
border-radius:
11px;
background:
rgba(255,255,255,0.48);
color:
rgba(0,8,117,0.55);
font-size:
9px;
line-height:
1.9;
text-align:
center;
}
/* =========================================================
EMPTY CART
========================================================= */
body.page-p-cart-cart .empty-cart{
min-height:
360px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
padding:
30px 20px;
text-align:
center;
}
body.page-p-cart-cart .empty-cart-icon{
width:
90px;
height:
90px;
margin:
0 auto 15px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
28px;
background:
linear-gradient(
135deg,
rgba(127,255,212,0.50),
rgba(255,179,198,0.38)
);
border:
1px solid
rgba(255,255,255,0.74);
box-shadow:
0 8px 18px
rgba(0,0,0,0.08);
}
body.page-p-cart-cart .empty-cart-icon img{
width:
52px;
height:
52px;
object-fit:
contain;
}
body.page-p-cart-cart .empty-cart h2{
margin:
0 0 8px;
font-size:
1.25rem;
font-weight:
900;
}
body.page-p-cart-cart .empty-cart p{
max-width:
430px;
margin:
0;
color:
var(--text-soft);
font-size:
12px;
line-height:
2;
}
body.page-p-cart-cart .empty-cart-btn{
margin-top:
18px;
min-height:
43px;
padding:
0 18px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
border-radius:
12px;
background:
linear-gradient(
135deg,
var(--mint),
var(--mint-dark)
);
color:
var(--text);
font-size:
11px;
font-weight:
800;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {body.page-p-cart-cart .cart-layout{
grid-template-columns:
1fr;
max-width:
760px;
}
body.page-p-cart-cart .cart-summary{
position:
relative;
top:
auto;
max-width:
500px;
margin:
0 auto;
}}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {body.page-p-cart-cart .cart-page{
padding:
98px 10px 45px;
}
body.page-p-cart-cart .cart-hero{
padding:
27px 18px;
}
body.page-p-cart-cart .cart-hero h1{
font-size:
1.65rem;
}}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 576px) {body.page-p-cart-cart .cart-page{
padding:
91px 6px 35px;
}
body.page-p-cart-cart .cart-hero h1{
font-size:
1.38rem;
}
body.page-p-cart-cart .cart-hero p{
font-size:
10px;
}
body.page-p-cart-cart .cart-products-panel{
padding:
12px;
}
body.page-p-cart-cart .panel-heading-title{
font-size:
12px;
}
body.page-p-cart-cart .cart-summary{
padding:
17px;
}}