:root{

   --font:'Inter',sans-serif;

   --bg:#f8f8f8;

}

*{

   margin:0;
   padding:0;
   box-sizing:border-box;
}

body{

   font-family:var(--font);

   background:var(--bg);
}








main{

padding:20px;

}


.hero{

margin-bottom:14px;

}



.hero h1{

font-size:24px;

line-height:1.1;

color:#6e082f;

margin-bottom:4px;

font-weight:700;

}



.hero p{

font-size:13px;

color:#777;

}


.map{

height:260px;

border-radius:24px;

overflow:hidden;

margin-bottom:20px;

background:#eee;

box-shadow:

0 10px 30px

rgba(
0,
0,
0,
.06

);

border:

1px solid

rgba(
0,
0,
0,
.04

);

}



.map img,

.map iframe{

width:100%;

height:100%;

border:0;

display:block;

object-fit:cover;

}


.stores{

display:flex;

flex-direction:column;

gap:18px;

}


.store{

display:flex;

align-items:center;

gap:16px;

padding:14px;

width:100%;

background:white;

border:none;

border-radius:24px;

box-shadow:

0 8px 25px

rgba(
0,
0,
0,
.05

);

transition:.25s;

}


#continueBtn{

width:100%;

height:56px;

border:none;

border-radius:18px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

box-shadow:

0 12px 30px

rgba(
124,
14,
67,
.30

);

}


#continueBtn:disabled{

opacity:.4;

}

.map{

height:240px;

border-radius:16px;

overflow:hidden;

margin-bottom:20px;

}

.map img{

width:100%;

height:100%;

object-fit:cover;

}

.store{

display:flex;

gap:16px;

padding:16px;

margin-bottom:12px;

width:100%;

background:white;

border:none;

border-radius:16px;

}

.store-image{

width:120px;

height:120px;

border-radius:18px;

overflow:hidden;

flex-shrink:0;

}

.store-image img{

width:100%;

height:100%;

object-fit:cover;

object-position:center;

}

.store-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:6px;

flex:1;

}



.store-info h3{

font-size:28px;

color:#5f0c31;

}



.store-info p{

color:#555;

line-height:1.5;

}

.store.active{

border:

2px solid

#7c0e43;

transform:

translateY(
-2px
);

}

.selected-store{

display:flex;

gap:16px;

padding:20px;

background:white;

border-radius:16px;

margin-bottom:20px;

}

.selected-store img{

width:80px;

height:80px;

border-radius:12px;

object-fit:cover;

}



.categories{

position:sticky;

top:76px;

z-index:50;

display:flex;

gap:12px;

overflow-x:auto;

padding:12px 0;

background:white;

}



.categories::-webkit-scrollbar{

display:none;

}

.categories button{

    height:52px;

    padding:0 24px;

    border:none;

    border-radius:999px;

    background:white;

    white-space:nowrap;

    font-weight:600;

    font-size:15px;

    color:#333;

    box-shadow:
    0 4px 12px rgba(0,0,0,.05);
}



.products{

display:flex;

flex-direction:column;

gap:16px;

}



.product{

display:flex;

gap:16px;

background:white;

padding:16px;

border-radius:16px;

min-height:180px;

}



.product img{

width:140px;

height:140px;

object-fit:cover;

border-radius:16px;

}



.product button{

margin-left:auto;

width:90px;

height:48px;

background:#7c0e43;

color:white;

border:none;

border-radius:12px;

}

.cat-btn.active{

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

}

#search{

width:100%;

height:56px;

padding:0 16px;

margin-bottom:20px;

border:none;

border-radius:16px;

background:white;

}

.hidden{

display:none !important;

}

.floating-cart{

position:fixed;

left:14px;

right:14px;

bottom:14px;

z-index:90;

display:flex;

align-items:center;

justify-content:space-between;

gap:14px;

padding:16px 18px;

border-radius:24px;

background:

rgba(
124,
14,
67,
.96

);

backdrop-filter:

blur(
16px
);

color:white;

box-shadow:

0 18px 40px

rgba(
0,
0,
0,
.22

);

}

.floating-cart button{

height:48px;

padding:0 20px;

background:white;

color:#7c0e43;

border:none;

border-radius:12px;

}

.floating-cart a{

display:flex;

align-items:center;

justify-content:center;

height:48px;

padding:

0 22px;

background:white;

color:#7c0e43;

border-radius:14px;

text-decoration:none;

font-weight:700;

flex-shrink:0;

}

.floating-cart strong{

font-size:18px;

}



.floating-cart small{

opacity:.8;

font-size:12px;

display:block;

margin-top:2px;

}

.view-cart{

background:white;

color:#7c0e43;

padding:12px 18px;

border-radius:12px;

text-decoration:none;

font-weight:700;

}

.cart-card{

display:flex;

gap:16px;

background:white;

padding:16px;

border-radius:16px;

margin-bottom:16px;

}

.cart-card img{

width:110px;

aspect-ratio:1/1;

height:auto;

display:block;

overflow:hidden;

object-fit:cover;

object-position:center;

border-radius:16px;

flex-shrink:0;

}

.cart-summary{

position:sticky;

bottom:20px;

background:#7c0e43;

padding:20px;

border-radius:20px;

color:white;

}

.cart-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px;

background:white;

position:sticky;

top:0;

z-index:100;

border-bottom:
1px solid rgba(0,0,0,.06);

}









.cart-header h1{

font-size:28px;

margin:0;

}



.cart-right .header-account{

width:44px;

height:44px;

border-radius:50%;

background:#f5f5f5;

display:flex;

align-items:center;

justify-content:center;

}



.cart-right .header-account img{

width:22px;

height:22px;

}

.cart-summary a{

display:block;

text-align:center;

padding:16px;

background:white;

color:#7c0e43;

text-decoration:none;

border-radius:16px;

}

.product,
.cart-card{

align-items:center;

}

.checkout-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:20px;

}



.checkout-card input,

.checkout-card textarea{

width:100%;

margin-top:12px;

height:52px;

padding:12px;

}



.checkout-card textarea{

height:120px;

}



.checkout-summary{

background:#fafafa;

border-radius:20px;

padding:18px;

}



.checkout-summary button{

width:100%;

height:56px;

background:white;

color:#7c0e43;

border:none;

border-radius:16px;

}



.success{

padding:40px;

text-align:center;

}

.order-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

display:flex;

flex-direction:column;

gap:12px;

}



.order-card select{

height:48px;

border-radius:12px;

padding:10px;

}



.order-card button{

height:48px;

background:#7c0e43;

color:white;

border:none;

border-radius:12px;

}

.detail-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:20px;

}



.item-card{

display:flex;

justify-content:space-between;

padding:16px;

background:white;

border-radius:12px;

margin-bottom:10px;

}

.stats{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:12px;

margin-bottom:20px;

}



.stats div{

background:white;

padding:20px;

border-radius:16px;

text-align:center;

}



.stats strong{

display:block;

font-size:28px;

margin-top:10px;

color:#7c0e43;

}

.queue-grid{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:20px;

}



.queue-grid section{

background:white;

padding:20px;

border-radius:20px;

min-height:80vh;

}



.queue-grid h2{

color:#7c0e43;

margin-bottom:20px;

}



.queue-card{

background:

#7c0e43;

color:white;

padding:20px;

border-radius:16px;

font-size:28px;

font-weight:700;

margin-bottom:12px;

}



@media(
max-width:900px
){

.queue-grid{

grid-template-columns:
1fr;

}

}

.track-card{

background:white;

padding:30px;

border-radius:20px;

text-align:center;

}



.track-card h2{

font-size:42px;

color:#7c0e43;

}

.order-history{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

}

.track-options{
margin-top:8px;
}

.track-option{
font-size:13px;
color:#666;
line-height:1.5;
margin-top:2px;
}



.order-history a{

display:inline-block;

margin-top:10px;

background:#7c0e43;

color:white;

padding:10px 16px;

border-radius:12px;

text-decoration:none;

}

.admin-order{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

display:flex;

flex-direction:column;

gap:10px;

}

.admin-links{

margin-top:30px;

}



.admin-links a{

display:block;

padding:20px;

background:#7c0e43;

color:white;

text-align:center;

border-radius:16px;

text-decoration:none;

font-weight:700;

}

.report-row{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:12px;

display:flex;

justify-content:space-between;

align-items:center;

}

.customer-card{

background:white;

padding:20px;

border-radius:16px;

margin-bottom:16px;

}



.customer-card a{

display:inline-block;

margin-top:10px;

padding:10px 16px;

background:#7c0e43;

color:white;

border-radius:12px;

text-decoration:none;

}

.low-stock{

border:

3px solid

#ff9800;

}



.low-stock strong{

color:

#ff9800;

}

/* POLISH PASS */

body{

max-width:1600px;

margin:auto;

}



main{

padding:24px;
padding-bottom:120px;

}




button{

transition:

.25s;

}



button:hover{

transform:

translateY(
-1px
);

}



button:active{

transform:

scale(
.98
);

}



input,

select,

textarea{

font-size:16px;

}



.product,

.store,

.cart-card,

.order-card,

.customer-card,

.report-row{

box-shadow:

0 8px 24px

rgba(
0,
0,
0,
.05

);

}



.product img,

.store-image img,

.cart-card img{

background:

#eee;

}



button:disabled{

opacity:.6;

cursor:not-allowed;

}



.empty-state{

padding:60px;

text-align:center;

color:#777;

}



@media(
min-width:1100px
){

.products{

display:grid;

grid-template-columns:

1fr;

gap:18px;

}



.stores{

display:grid;

grid-template-columns:

repeat(
2,
1fr
);

}



}

/* MOBILE STORE COMPACT */

@media(
max-width:768px
){

.map{

height:150px;

margin-bottom:16px;

}



.store{

padding:6px 10px;

margin-bottom:0;

}



.store-image{

width:54px;

height:54px;

}
.store-info{

display:flex;

flex-direction:column;

justify-content:center;

align-items:flex-start;

text-align:left;

gap:2px;

flex:1;

}


.store-info h3{

font-size:16px;

margin:0;

text-align:left;

width:100%;

}



.store-info p{

font-size:12px;

line-height:1.2;

margin:0;

}



.stores{

gap:4px;

}

.store-address{

font-size:12px;

line-height:1.3;

color:#777;

text-align:left;

width:100%;

margin:0;

}



.store-hours{

display:flex;

justify-content:flex-start;

align-items:center;

gap:6px;

font-size:12px;

width:100%;

margin-top:4px;

}



.store-hours span{

color:#555;

font-weight:500;

}



#continueBtn{

height:50px;

font-size:16px;

margin-top:10px;

}



main{

padding-bottom:80px;

}

}

.disabled-store{

opacity:.55;

filter:

grayscale(
1
);

}



.disabled-store img{

opacity:.6;

}



.coming-soon{

margin-top:4px;

font-size:11px;

color:

#7c0e43;

font-weight:700;

}

.header-right{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

}

/* MOBILE STICKY CONTINUE */

@media(
max-width:768px
){

#continueBtn{

position:fixed;

left:12px;

right:12px;

bottom:12px;

width:auto;

height:54px;

z-index:100;

border-radius:16px;

}



main{

padding-bottom:90px;

}

}



.header-account img{

width:24px;

height:24px;

object-fit:contain;

display:block;

}



.header-account:active{

transform:

scale(
.95
);

}



.header-account:hover{

background:

#efefef;

}

/* DESKTOP STORE LAYOUT B */

@media(
min-width:1200px
){

body{

max-width:none;

}



/* CONTAINER */

main{

max-width:1320px;

margin:auto;

padding:

32px
40px
60px;

}



/* REMOVE OLD WRAPPERS */

.desktop-left,
.desktop-right{

display:contents;

}



/* TITLE */

.hero{

text-align:center;

margin-bottom:24px;

}



.hero h1{

font-size:28px;

margin-bottom:6px;

}



.hero p{

font-size:14px;

}



/* MAP */

.map{

height:320px;

max-width:1100px;

margin:

0 auto
20px;

}



/* STORE LIST */

.stores{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:18px;

align-items:stretch;

}



.store{

display:flex;

flex-direction:column;

align-items:flex-start;

padding:12px;

height:100%;

}



.store-image{

width:100%;

height:160px;

}

.store-image img{

width:100%;

height:100%;

object-fit:cover;

}

.store-info{

width:100%;

margin-top:14px;

}



.store-info h3{

font-size:16px;

}



.store-address{

font-size:14px;

}



.store-hours{

font-size:13px;

}



/* CONTINUE */

section:last-child{

display:flex;

justify-content:center;

}



#continueBtn{

position:static;

width:420px;

margin-top:26px;

left:auto;

right:auto;

}



}

@media(
max-width:1350px
){

.stores{

grid-template-columns:

repeat(
2,
1fr
);

}

}






.header-account img{

width:20px;

height:20px;

object-fit:contain;

}




/* MOBILE */

@media(
max-width:1400px
){









}

/* MENU PRODUCT POLISH */

.products{

display:grid;

grid-template-columns:1fr;

gap:18px;

}



.product{

display:flex;

flex-direction:column;

background:white;

padding:14px;

border-radius:24px;

overflow:hidden;

min-height:auto;

box-shadow:

0 10px 30px

rgba(
0,
0,
0,
.06

);

}



.product img{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

margin-bottom:14px;

}



.product h3{

font-size:22px;

margin-bottom:6px;

color:#5f0c31;

}



.product p{

font-size:14px;

line-height:1.5;

color:#666;

margin-bottom:12px;

}



.product strong{

font-size:22px;

color:#7c0e43;

}



.product button{

width:100%;

height:52px;

margin-top:16px;

border:none;

border-radius:14px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-weight:700;

font-size:16px;

}



/* DESKTOP */

@media(
min-width:900px
){

.products{

grid-template-columns:

repeat(
3,
1fr
);

}

}

/* MENU MOCKUP STYLE */

.products{

display:flex;

flex-direction:column;

gap:14px;

}



/* PRODUCT CARD */

.product{

display:grid;

grid-template-columns:

110px
1fr
110px;

align-items:center;

gap:16px;

padding:14px;

background:white;

border-radius:22px;

min-height:140px;

box-shadow:

0 8px 24px

rgba(
0,
0,
0,
.05

);

}



/* IMAGE */

.product img{

width:110px;

height:110px;

border-radius:18px;

object-fit:cover;

margin:0;

}



/* INFO */

.product-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:6px;

}



.product h3{

font-size:18px;

margin:0;

color:#111;

}



.product p{

font-size:14px;

line-height:1.4;

margin:0;

color:#666;

}



.product strong{

font-size:28px;

color:#7c0e43;

margin-top:8px;

}



/* BUTTON */

.product button{

width:100%;

height:52px;

border:none;

border-radius:14px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:16px;

font-weight:700;

margin:0;

}



/* DESKTOP SUCCESS PAGE CENTERING */
@media(min-width:769px){

.success-page{
width:100%;
max-width:none;
margin:0;
transform:none;
box-sizing:border-box;
padding:40px 20px;
}

.success-card{
margin:0 auto;
}

}

/* MOBILE */

@media(
max-width:768px
){

.product{

grid-template-columns:

92px
1fr
92px;

gap:12px;

padding:12px;

min-height:120px;

}



.product img{

width:92px;

height:92px;

border-radius:16px;

}



.product h3{

font-size:16px;

}



.product p{

font-size:12px;

}



.product strong{

font-size:18px;

}



.product button{

height:46px;

font-size:15px;

}

}

/* FINAL MENU MOCKUP */

.products{

display:flex;

flex-direction:column !important;

gap:14px !important;

}



.product{

grid-template-columns:

92px
1fr
92px;

align-items:center;

gap:14px;

padding:12px;

background:white;

border-radius:20px;

min-height:120px;

box-shadow:

0 6px 20px

rgba(
0,
0,
0,
.05

);

}

.product.show{

display:grid;

}



/* IMAGE */

.product img{

width:92px !important;

height:92px !important;

border-radius:16px !important;

object-fit:cover !important;

margin:0 !important;

}



/* INFO */

.product-info{

display:flex ;

flex-direction:column !important;

justify-content:center !important;

align-items:flex-start !important;

gap:4px !important;

}



.product h3{
    font-size:20px !important;
    margin:0 !important;
    color:#1f1f1f !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    letter-spacing:-0.3px !important;
}



.product p{

font-size:12px !important;

line-height:1.4 !important;

margin:0 !important;

color:#666 !important;

}



.product strong{

font-size:18px !important;

color:#7c0e43 !important;

margin-top:6px !important;

}



/* STOCK */

.product small{

font-size:11px !important;

color:#999 !important;

margin-top:2px !important;

}



/* BUTTON */

.product button{

width:100% !important;

height:46px !important;

border:none !important;

border-radius:14px !important;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

) !important;

color:white !important;

font-size:15px !important;

font-weight:700 !important;

margin:0 !important;

}



/* OUT OF STOCK */

.product button:disabled{

background:#c7c7c7 !important;

color:white !important;

}



/* DESKTOP */

@media(
min-width:1100px
){

.products{

display:grid;

grid-template-columns:

repeat(
2,
1fr
) !important;

}

}



/* ACCOUNT */




.header-account img{

width:20px;

height:20px;

object-fit:contain;

display:block;

}

/* STORE INFO CARD */

.selected-store{

display:flex;

align-items:center;

gap:12px;

padding:10px 12px;

margin-bottom:16px;

background:#f4f8f4;

border-radius:18px;

}



.selected-store img{

width:58px;

height:58px;

border-radius:14px;

object-fit:cover;

flex-shrink:0;

}



/* INFO */

.store-details{

flex:1;

}



.store-details small{

display:block;

font-size:11px;

color:#777;

margin-bottom:2px;

}



.store-details h2{

font-size:16px;

line-height:1.2;

margin:2px 0;

color:#111;

}



.store-details p{

margin-top:2px;

font-size:12px;

color:#555;

}



/* CHANGE BUTTON */

.change-store{

display:flex;

align-items:center;

justify-content:center;

height:38px;

padding:0 14px;

border-radius:12px;

background:white;

text-decoration:none;

font-weight:700;

font-size:13px;

color:#7c0e43;

border:

1px solid

rgba(
0,
0,
0,
.06

);

flex-shrink:0;

}

/* CLEAN PRODUCT LAYOUT */

.product{

grid-template-columns:

92px
1fr
74px !important;

}



.product-info{

display:flex;

flex-direction:column;

justify-content:center;

gap:8px;

}



.product-bottom{

display:flex;

align-items:center;

justify-content:space-between;

}



.product strong{
    font-size:26px !important;
    font-weight:700 !important;
    color:#8B004B !important;
    letter-spacing:-0.5px !important;
}



.product-action{

display:flex;

align-items:center;

justify-content:center;

}



.product button{

width:70px;

height:40px;

border-radius:12px;

font-size:14px;

}

/* QTY BOX */

.qty-box{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:6px 8px;

background:#f5f5f5;

border-radius:999px;

min-width:110px;

height:44px;

}



.qty-box button{

width:28px;

height:28px;

min-width:28px;

border:none;

border-radius:50%;

background:#8b004b;

color:white;

font-size:22px;

font-weight:900;

display:flex;

align-items:center;

justify-content:center;

padding:0;

line-height:1;

}



.qty-number{

min-width:18px;

text-align:center;

font-weight:700;

font-size:15px;

color:#111;

}

/* DESKTOP FLOATING CART */

@media(
min-width:1100px
){

.floating-cart{

left:auto;

right:24px;

bottom:24px;

width:320px;

border-radius:24px;

padding:18px;

box-shadow:

0 12px 40px

rgba(
0,
0,
0,
.18

);

}



.floating-cart{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:14px;

}



.view-cart{

width:100%;

justify-content:center;

}



}

/* DESKTOP STORE CARD */

@media(
min-width:1100px
){

.selected-store{

padding:22px 28px;

border-radius:28px;

gap:20px;

}



.selected-store img{

width:96px;

height:96px;

border-radius:22px;

}



.store-details small{

font-size:15px;

}



.store-details h2{

font-size:38px;

line-height:1.1;

margin:6px 0;

}



.store-details p{

font-size:20px;

margin-top:6px;

}



.change-store{

height:56px;

padding:0 26px;

font-size:18px;

border-radius:18px;

}

}


/* CLEAN CART UI */

/* CLEAN CART UI */

#cartItems{

display:flex;
flex-direction:column;
padding:18px;

}



.cart-card{

display:flex;

align-items:center;

gap:16px;

padding:18px 0;

border-bottom:
1px solid rgba(0,0,0,.08);

}



.cart-card img{

width:100px;

height:100px;

border-radius:20px;

object-fit:cover;

}



.cart-info{

display:flex;

flex-direction:column;

justify-content:center;

min-width:0;

}



.cart-info h3{

font-size:18px;
font-weight:700;

margin-bottom:6px;

}



.cart-info p{

font-size:18px;
font-weight:700;

color:#7c0e43;

margin-bottom:12px;

}



/* QTY */

.cart-qty{

display:flex;

align-items:center;

gap:18px;

padding:6px 14px;

border:
1px solid rgba(0,0,0,.08);

border-radius:14px;

width:max-content;

margin-left:auto;

}



.cart-qty button{

border:none;

background:none;

font-size:28px;

font-weight:700;

color:#7c0e43;

line-height:1;

padding:0;

}



.cart-qty span{

font-size:18px;

font-weight:700;

min-width:16px;

text-align:center;

}



/* REMOVE */

.remove-btn{

display:none;

}



/* SUMMARY */

#cartSummary{

padding:
0 18px 120px;

}



.cart-summary{

background:white;

border-radius:24px;

padding:22px;

box-shadow:
0 4px 14px rgba(0,0,0,.05);

}



.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:17px;

}



.summary-total{

margin-top:18px;

padding-top:18px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:24px;

font-weight:700;

}



/* CHECKOUT */

.checkout-btn{

position:fixed;

left:18px;
right:18px;
bottom:18px;

height:58px;

border-radius:18px;

background:
linear-gradient(
90deg,
#7c0e43,
#95004d
);

color:white !important;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:700;

box-shadow:
0 10px 30px rgba(124,14,67,.25);

}



/* DESKTOP */

@media(min-width:1100px){

#cartItems,
#cartSummary{

max-width:760px;

margin:auto;

}



.checkout-btn{

max-width:760px;

left:0;
right:0;

margin:auto;

}

}



/* REMOVE */

.remove-btn{

display:none;

}



/* SUMMARY */

#cartSummary{

padding:

0 18px 140px;

}



.cart-summary{

padding:22px;

background:white;

border-radius:24px;

box-shadow:

0 4px 14px

rgba(
0,
0,
0,
.05

);

margin-bottom:110px;

}



.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:18px;

font-size:24px;

color:#222;

}



.summary-total{

margin-top:24px;

padding-top:24px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:42px;

font-weight:800;

color:#111;

}



/* CHECKOUT */
.checkout-btn{

position:fixed;

left:18px;

font-size:26px;

right:18px;

bottom:18px;

height:68px;

border-radius:22px;

background:

linear-gradient(

90deg,

#7c0e43,

#9d004d

);

color:white !important;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:700;

box-shadow:

0 10px 30px

rgba(
124,
14,
67,
.28

);

z-index:100;

}



/* DESKTOP */

@media(
min-width:1100px
){

#cartItems,
#cartSummary{

max-width:700px;

margin:auto;

}



.checkout-btn{

max-width:700px;

margin:auto;

left:0;

right:0;

}

}

/* DESKTOP CART LAYOUT */

@media(
min-width:1100px
){

.cart-layout{

display:grid !important;

grid-template-columns:
1fr 520px !important;

gap:64px !important;

max-width:1500px !important;

padding:
40px 60px 140px !important;

align-items:center !important;

min-height:calc(100vh - 160px);

}



/* LEFT */

#cartItems{

width:100%;

}



.cart-card{

display:grid;

grid-template-columns:

100px
1fr
auto;

align-items:center;

gap:22px;

padding:24px;

border-radius:28px;

background:white;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



/* RIGHT */

#cartSummary{

padding:0;

position:sticky;

top:110px;

}



/* SUMMARY CARD */

.cart-summary{

background:white;

border-radius:32px;

padding:36px;

box-shadow:

0 8px 28px

rgba(
0,
0,
0,
.05

);

}



/* CHECKOUT BUTTON */

.checkout-btn{

position:static;

width:100%;

margin-top:18px;

}



}

/* FINAL DESKTOP CART FIX */

@media(min-width:1100px){

.cart-layout{

display:grid !important;

grid-template-columns:
1fr 520px !important;

gap:64px !important;

max-width:1500px !important;

padding:
40px 60px 140px !important;

}



#cartItems{

max-width:none !important;

width:100% !important;

padding:0 !important;

margin:0 !important;

}



#cartSummary{

width:100% !important;

max-width:none !important;

padding:0 !important;

margin:0 !important;

align-self:center;

}



.cart-summary{

width:100% !important;

padding:42px !important;

border-radius:36px !important;

}



.summary-row{

font-size:22px !important;

margin-bottom:18px !important;

}



.summary-total{

font-size:36px !important;

margin-top:24px !important;

padding-top:24px !important;

}



.checkout-btn{

width:100% !important;

height:68px !important;

font-size:22px !important;

border-radius:22px !important;

margin-top:22px !important;

}

}

/* MOBILE STICKY SUMMARY */

@media(
max-width:1099px
){

#cartSummary{

position:fixed;

left:0;

right:0;

bottom:0;

z-index:120;

padding:14px;

background:

linear-gradient(
180deg,
transparent,
rgba(255,255,255,.92)
20%
);

backdrop-filter:
blur(10px);

}



.cart-summary{

margin-bottom:0 !important;

border-radius:24px;

padding:18px 18px 90px;

box-shadow:

0 -8px 30px

rgba(
0,
0,
0,
.08

);

}



/* SMALLER TEXT */

.summary-row{

font-size:16px !important;

margin-bottom:10px !important;

}



.summary-total{

font-size:28px !important;

margin-top:14px !important;

padding-top:14px !important;

}



/* BUTTON */

.checkout-btn{

left:14px !important;

right:14px !important;

bottom:14px !important;

height:58px !important;

font-size:20px !important;

border-radius:18px !important;

}





}

/* MOBILE CART CARD FIX */

@media(
max-width:768px
){

.cart-card{

display:grid;

grid-template-columns:

72px
1fr
auto;

gap:8px;

padding:2px 0;

border-radius:0;

background:transparent;

box-shadow:none;

border-bottom:
1px solid rgba(0,0,0,.05);

}



.cart-card img{

width:72px;

height:72px;

border-radius:14px;

margin-left:2px;

}

#cartItems{

padding:

0 0 240px;

gap:0;

}

@media(max-width:768px){

#cartItems .cart-card:last-child{

border-bottom:none;

}

}



/* INFO */

.cart-info{

display:flex;

flex-direction:column;

justify-content:center;

min-width:0;

}






/* QTY RIGHT */

.cart-qty{

margin-left:auto;

align-self:center;

}



/* SMALLER TITLE */

.cart-info h3{

font-size:16px;

line-height:1.15;

margin-bottom:4px;

}



/* PRICE */

.cart-info p{

font-size:15px;

margin-bottom:8px;

}

}


/* BOTTOM ACTIONS */

.bottom-actions{

position:fixed;

left:14px;
right:14px;
bottom:14px;

display:grid;

grid-template-columns:
140px 1fr;

gap:14px;

z-index:200;

}



/* BACK */

.back-menu-btn{

height:58px;

border-radius:18px;

background:white;

border:
1px solid rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

color:#111;

box-shadow:
0 6px 20px rgba(0,0,0,.06);

}



/* CHECKOUT */

.bottom-actions .checkout-btn{

position:static !important;

width:100%;

margin:0 !important;

}



/* DESKTOP */

@media(min-width:1100px){

.bottom-actions{

position:static;

display:flex;

flex-direction:column-reverse;

gap:16px;

margin-top:24px;

}



.back-menu-btn{

width:100%;

height:64px;

border-radius:22px;

}



.bottom-actions .checkout-btn{

height:82px;

}

}

/* AUTH */

.auth-page{

max-width:420px;

margin:auto;

padding:

40px 20px;

}



.auth-page h1{

font-size:36px;

margin-bottom:24px;

color:#111;

}



.auth-form{

display:flex;

flex-direction:column;

gap:14px;

}



.auth-form input{

height:56px;

padding:0 18px;

border:none;

border-radius:16px;

background:white;

font-size:16px;

box-shadow:

0 4px 14px

rgba(
0,
0,
0,
.04

);

}



.auth-form button{

height:58px;

border:none;

border-radius:18px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

margin-top:8px;

}



.auth-link{

display:block;

margin-top:20px;

text-align:center;

color:#7c0e43;

font-weight:700;

text-decoration:none;

}



.auth-error{

padding:14px;

background:#ffe7e7;

color:#b00020;

border-radius:14px;

margin-bottom:16px;

}

/* AUTH UI */

.auth-container{

min-height:

calc(100vh - 76px);

display:flex;

align-items:center;

justify-content:center;

padding:24px;

}



.auth-card{

width:100%;

max-width:460px;

background:white;

border-radius:32px;

padding:34px 28px;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.06

);

}



.auth-top{

text-align:center;

margin-bottom:28px;

}



.auth-logo{

height:72px;

width:auto;

margin-bottom:18px;

}



.auth-top h1{

font-size:36px;

line-height:1.1;

margin-bottom:8px;

color:#111;

}



.auth-top p{

font-size:15px;

color:#777;

}



/* FORM */

.auth-form{

display:flex;

flex-direction:column;

gap:18px;

}



.input-group{

display:flex;

flex-direction:column;

gap:8px;

}



.input-group label{

font-size:14px;

font-weight:700;

color:#333;

}



.auth-form input{

height:58px;

padding:0 18px;

border:none;

border-radius:18px;

background:#f7f7f7;

font-size:16px;

outline:none;

transition:.2s;

}



.auth-form input:focus{

background:#f1f1f1;

}



.auth-form button{

height:60px;

border:none;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:18px;

font-weight:700;

margin-top:6px;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



/* FOOTER */

.auth-bottom{

margin-top:22px;

text-align:center;

font-size:15px;

color:#666;

}



.auth-bottom a{

color:#7c0e43;

font-weight:700;

text-decoration:none;

margin-left:6px;

}



/* ERROR */

.auth-error{

padding:14px 16px;

border-radius:16px;

background:#ffe5e8;

color:#b00020;

margin-bottom:18px;

font-size:14px;

font-weight:600;

}



/* MOBILE */

@media(
max-width:768px
){

.auth-container{

padding:18px;

align-items:flex-start;

padding-top:30px;

}



.auth-card{

padding:28px 20px;

border-radius:28px;

}



.auth-top h1{

font-size:30px;

}



.auth-logo{

height:64px;

}

}

/* ACCOUNT PAGE */

.account-page{

max-width:700px;

margin:auto;

padding:24px;

}



.account-card{

background:white;

border-radius:32px;

padding:32px 24px;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.05

);

}



/* TOP */

.account-top{

text-align:center;

margin-bottom:32px;

}



.account-avatar{

width:96px;

height:96px;

border-radius:50%;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:42px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

margin:

0 auto
18px;

}



.account-top h1{

font-size:34px;

margin-bottom:6px;

color:#111;

}



.account-top p{

color:#777;

font-size:15px;

}



/* INFO */

.account-section{

margin-bottom:28px;

}



.account-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-bottom:
1px solid rgba(0,0,0,.06);

}



.account-row span{

color:#777;

font-size:15px;

}



.account-row strong{

font-size:16px;

color:#111;

}



/* BUTTONS */

.account-actions{

display:flex;

flex-direction:column;

gap:14px;

}



.account-actions a{

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:17px;

font-weight:700;

background:#f5f5f5;

color:#111;

}



.logout-btn{

background:

#ffe7ea !important;

color:#b00020 !important;

}



/* MOBILE */

@media(
max-width:768px
){

.account-page{

padding:16px;

}



.account-card{

padding:26px 18px;

border-radius:26px;

}



.account-avatar{

width:82px;

height:82px;

font-size:34px;

}



.account-top h1{

font-size:28px;

}

}

/* CHECKOUT */

.checkout-page{

max-width:760px;

margin:auto;

padding:

18px
18px
220px;

}



/* CARD */

.checkout-card{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.checkout-card h3{

font-size:28px;

margin-bottom:18px;

color:#111;

}



/* ORDER TYPE */

.order-types{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}



.order-type-btn{

height:140px;

border:
2px solid rgba(0,0,0,.08);

border-radius:24px;

background:white;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

font-size:18px;

font-weight:700;

}



.order-type-btn.active{

border-color:#7c0e43;

box-shadow:

0 0 0 3px

rgba(
124,
14,
67,
.08

);

}



/* PICKUP */

.checkout-select{

width:100%;

height:64px;

border:none;

border-radius:18px;

background:#f5f5f5;

padding:0 18px;

font-size:18px;

}



.checkout-date{

margin-top:14px;

font-size:15px;

color:#777;

}



/* CUSTOMER */

.customer-box{

margin-bottom:16px;

}



.customer-box label{

display:block;

font-size:14px;

font-weight:700;

margin-bottom:8px;

color:#666;

}



.customer-value{

height:62px;

border-radius:18px;

background:#f5f5f5;

display:flex;

align-items:center;

padding:0 18px;

font-size:18px;

font-weight:700;

}



/* BOTTOM */

.checkout-bottom{

background:white;

padding:18px;

border-radius:28px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

margin-top:18px;

margin-bottom:30px;

}



/* SUMMARY */

.checkout-summary{

margin-bottom:18px;

}



.checkout-summary .summary-row{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-size:18px;

}



.checkout-summary .summary-total{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:14px;

margin-top:14px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:28px;

font-weight:800;

color:#111;

}



/* ACTIONS */

.checkout-actions{

display:grid;

grid-template-columns:
120px 1fr;

gap:14px;

}



.cart-btn{

height:62px;

border-radius:20px;

background:white;

border:
1px solid rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:22px;

font-weight:700;

color:#111;

}



.place-order-btn{

height:62px;

border:none;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:22px;

font-weight:700;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



/* DESKTOP */

@media(
min-width:1100px
){

.checkout-page{

max-width:1200px;

padding:
40px
40px
260px;

}

}

/* COMPACT MOBILE CHECKOUT */

@media(
max-width:768px
){

.checkout-page{

padding:

10px
10px
30px;

}



/* STORE */

.selected-store{

padding:12px;

border-radius:22px;

margin-bottom:12px;

}



.selected-store img{

width:72px;

height:72px;

border-radius:16px;

}



.store-details h2{

    font-size:24px !important;
    line-height:1.1;
    color:#1b1b1b;

    letter-spacing:-1.5px;
}



.store-details p{

font-size:14px;

}



/* CARD */

.checkout-card{

padding:16px;

border-radius:22px;

margin-bottom:12px;

}



.checkout-card h3{

font-size:22px;

margin-bottom:12px;

}



/* ORDER TYPE */

.order-type-btn{

height:108px;

border-radius:20px;

font-size:16px;

gap:8px;

}



/* SELECT */

.checkout-select{

height:54px;

font-size:16px;

border-radius:16px;

}



/* CUSTOMER */

.customer-box{

margin-bottom:12px;

}



.customer-value{

height:54px;

font-size:16px;

border-radius:16px;

}



/* BOTTOM */

.checkout-bottom{

padding:14px;

border-top-left-radius:24px;

border-top-right-radius:24px;

}



/* SUMMARY */

.checkout-summary{

margin-bottom:14px;

}



.checkout-summary .summary-row{

font-size:16px;

margin-bottom:8px;

}



.checkout-summary .summary-total{

font-size:28px;

padding-top:12px;

margin-top:12px;

}



/* BUTTONS */

.checkout-actions{

grid-template-columns:
100px 1fr;

gap:10px;

}



.cart-btn{

height:54px;

font-size:18px;

border-radius:16px;

}



.place-order-btn{

height:54px;

font-size:18px;

border-radius:16px;

}

}

/* SUCCESS PAGE */

.success-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

}



.success-card{

width:100%;

max-width:420px;

background:white;

border-radius:36px;

padding:34px 24px;

text-align:center;

box-shadow:

0 10px 40px

rgba(
0,
0,
0,
.06

);

}



/* IMAGE */

.success-image-wrap{

position:relative;

width:220px;

height:220px;

margin:
0 auto
10px;

}



.success-circle{

position:absolute;

top:10px;
left:50%;

transform:
translateX(-50%);

width:110px;

height:110px;

border-radius:50%;

background:#ffdbe3;

display:flex;

align-items:center;

justify-content:center;

font-size:56px;

font-weight:800;

color:#7c0e43;

z-index:1;

}



.success-image{

position:absolute;

bottom:0;
left:50%;

transform:
translateX(-50%);

width:180px;

height:180px;

object-fit:cover;

border-radius:24px;

z-index:2;

}



/* TEXT */

.success-card h1{

font-size:44px;

margin-bottom:10px;

color:#111;

}



.success-text{

font-size:18px;

color:#666;

margin-bottom:24px;

}



.success-order{

font-size:20px;

margin-bottom:20px;

color:#444;

}



.success-order strong{

display:block;

font-size:28px;

margin-top:8px;

color:#111;

}



.success-time{

font-size:18px;

color:#666;

margin-bottom:34px;

}



.success-time strong{

display:block;

font-size:28px;

margin-top:8px;

color:#111;

}



/* BUTTONS */

.success-primary{

display:flex;

align-items:center;

justify-content:center;

height:62px;

border-radius:20px;

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

font-size:20px;

font-weight:700;

text-decoration:none;

margin-bottom:14px;

box-shadow:

0 10px 24px

rgba(
124,
14,
67,
.22

);

}



.success-secondary{

display:flex;

align-items:center;

justify-content:center;

height:62px;

border-radius:20px;

border:
2px solid rgba(124,14,67,.14);

background:white;

color:#7c0e43;

font-size:18px;

font-weight:700;

text-decoration:none;

}



/* MOBILE */

@media(
max-width:768px
){

.success-card{

padding:28px 20px;

border-radius:28px;

}



.success-image-wrap{

width:180px;

height:180px;

}



.success-image{

width:150px;

height:150px;

}



.success-circle{

width:92px;

height:92px;

font-size:44px;

}



.success-card h1{

font-size:38px;

}



.success-order strong,
.success-time strong{

font-size:24px;

}

}

/* ORDERS */

.orders-page{

max-width:760px;

margin:auto;

padding:20px;

}



.orders-page h1{

font-size:38px;

margin-bottom:24px;

}



/* TABS */

.orders-tabs{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;

margin-bottom:24px;

}



.orders-tab{

height:52px;

border:none;

border-radius:16px;

background:#f3f3f3;

font-size:18px;

font-weight:700;

}



.orders-tab.active{

background:#7c0e43;

color:white;

}



/* CARD */

.order-card{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



/* TOP */

.order-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:18px;

}



.order-top h2{

font-size:28px;

margin-bottom:6px;

}



.order-top p{

font-size:14px;

color:#777;

}



/* STATUS */

.status-badge{

padding:
8px 14px;

border-radius:999px;

font-size:14px;

font-weight:700;

}



.status-pending,
.status-preparing{

background:#fff1da;

color:#d47a00;

}



.status-ready,
.status-completed{

background:#e7f8ea;

color:#15803d;

}



/* STORE */

.order-store{

font-size:17px;

font-weight:700;

margin-bottom:8px;

}



.order-type-line{

font-size:16px;

color:#666;

margin-bottom:18px;

}



/* ITEMS */

.order-items-preview{

border-top:
1px solid rgba(0,0,0,.06);

border-bottom:
1px solid rgba(0,0,0,.06);

padding:
16px 0;

margin-bottom:18px;

}



.preview-row{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-size:16px;

}



.more-items{

font-size:14px;

font-weight:700;

color:#7c0e43;

}



/* TOTAL */

.order-total{

display:flex;

justify-content:space-between;

align-items:center;

font-size:22px;

font-weight:800;

margin-bottom:18px;

}



/* BUTTON */

.view-order-btn{

height:56px;

border-radius:18px;

border:
2px solid rgba(124,14,67,.16);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

color:#7c0e43;

background:white;

}

/* TRACK PAGE */

.track-page{

max-width:760px;

margin:auto;

padding:20px;

}



/* TOP CARD */

.track-card{

background:white;

border-radius:28px;

padding:24px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}

.track-status-card{

background:#fff8f2;

border:1px solid #f2d9c7;

padding:16px;

margin-top:16px;

border-radius:12px;

text-align:center;

}

.track-status-card h3{

margin:0 0 8px;

font-size:18px;

color:#7c0e43;

}

.track-status-card h4{

margin:0 0 8px;

font-size:16px;

color:#7c0e43;

}

.track-status-card p{

margin:0;

color:#555;

line-height:1.6;

}

.track-status-card small{

display:block;

margin-top:8px;

color:#777;

line-height:1.5;

}



.track-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px;

}



.track-top h1{

font-size:30px;

text-align:center;

width:100%;

}



.track-status{

padding:
10px 16px;

border-radius:999px;

background:#fff1da;

color:#d47a00;

font-size:14px;

font-weight:700;

}



.track-store{

font-size:18px;

font-weight:700;

margin-bottom:8px;

}



.track-meta{

font-size:16px;

color:#666;

}



/* ITEMS */

.track-items{

background:white;

border-radius:28px;

padding:20px;

margin-bottom:18px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.track-item{

display:flex;

align-items:center;

gap:16px;

padding:14px 0;

border-bottom:
1px solid rgba(0,0,0,.06);

}



.track-item:last-child{

border-bottom:none;

}



.track-item img{

width:78px;

height:78px;

object-fit:cover;

border-radius:18px;

}



.track-item-info{

flex:1;

}



.track-item-info h3{

font-size:18px;

margin-bottom:6px;

}



.track-item-info p{

font-size:14px;

color:#777;

}



/* SUMMARY */

.track-summary{

background:white;

border-radius:28px;

padding:22px;

margin-bottom:20px;

box-shadow:

0 4px 18px

rgba(
0,
0,
0,
.04

);

}



.track-row{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:17px;

}



.track-total{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:16px;

margin-top:16px;

border-top:
1px solid rgba(0,0,0,.08);

font-size:28px;

font-weight:800;

}



/* BUTTONS */

.track-actions{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}



.track-primary,
.track-secondary{

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:700;

}



.track-primary{

background:

linear-gradient(

90deg,

#7c0e43,

#95004d

);

color:white;

}



.track-secondary{

background:white;

border:
2px solid rgba(124,14,67,.14);

color:#7c0e43;

}

.track-type{

font-size:18px;

font-weight:700;

color:#7c0e43;

margin-top:10px;

text-align:center;

}

.product{

    grid-template-columns:
    110px
    1fr
    100px !important;

    min-height:140px !important;

    padding:18px !important;

    border-radius:28px !important;

    box-shadow:
    0 6px 18px rgba(0,0,0,.04) !important;
}

.product img{

    width:110px !important;
    height:110px !important;

    border-radius:22px !important;
}

.product-info{

    gap:10px !important;
}

.product h3{

    font-size:18px !important;

    font-weight:700 !important;

    line-height:1.2 !important;

    color:#1d1d1d !important;
}

.product strong{

    font-size:20px !important;

    font-weight:700 !important;

    color:#8B004B !important;
}

.product button{

    height:52px !important;

    width:86px !important;

    border-radius:18px !important;

    font-size:17px !important;

    font-weight:700 !important;
}

/* =========================
   TOAST NOTIFICATION
========================= */

#toast{

position:fixed;

top:20px;

left:50%;

transform:
translateX(-50%)
translateY(-20px);

min-width:280px;

max-width:90vw;

padding:18px 24px;

border-radius:18px;

font-size:16px;

font-weight:700;

text-align:center;

color:#fff;

opacity:0;

z-index:99999;

pointer-events:none;

transition:
all .3s ease;

box-shadow:
0 15px 40px rgba(0,0,0,.25);

}

#toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);

}

#toast.success{

background:
linear-gradient(
135deg,
#16a34a,
#15803d
);

}

#toast.error{

background:
linear-gradient(
135deg,
#ef4444,
#dc2626
);

}

@media(min-width:768px){

#toast{

top:24px;

right:24px;

left:auto;

transform:
translateX(40px);

min-width:340px;

max-width:420px;

padding:20px 26px;

font-size:17px;

text-align:left;

}

#toast.show{

transform:
translateX(0);

}

}

.progress-tracker{

display:flex;

align-items:center;

justify-content:space-between;

margin:24px 0;

}

.progress-step{

display:flex;

flex-direction:column;

align-items:center;

width:80px;

}

.circle{

width:36px;

height:36px;

border-radius:50%;

background:#ddd;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}

.progress-step.active .circle{

background:#7c0e43;

}

.progress-line{

flex:1;

height:4px;

background:#ddd;

margin:0 6px;

}

.progress-line.active{

background:#7c0e43;

}

.label{

margin-top:8px;

font-size:13px;

font-weight:600;

text-align:center;

}

.track-cancel-box{

margin-top:20px;

padding:16px;

border-radius:12px;

background:#fff4f4;

border:1px solid #f3bcbc;

text-align:center;

}

.feedback-btn{

width:100%;

padding:14px;

border:none;

border-radius:10px;

background:#7c0e43;

color:#fff;

font-weight:700;

cursor:pointer;

margin-bottom:12px;

}

.feedback-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.5);

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.feedback-box{

background:#fff;

width:420px;

max-width:92%;

padding:24px;

border-radius:14px;

}

.rating-stars{

display:flex;

justify-content:center;

gap:8px;

margin:18px 0;

}

.rating-stars span{

font-size:34px;

cursor:pointer;

color:#d5d5d5;

transition:.2s;

}

.rating-stars span.active{

color:#ffc107;

}

#feedbackMessage{

width:100%;

height:140px;

resize:none;

padding:12px;

border:1px solid #ddd;

border-radius:10px;

margin-top:10px;

}

.feedback-actions{

display:flex;

justify-content:flex-end;

gap:12px;

margin-top:20px;

}

.feedback-actions button{

padding:12px 22px;

border:none;

border-radius:10px;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.feedback-actions button:first-child{

background:#ececec;

color:#444;

}

.feedback-actions button:first-child:hover{

background:#dddddd;

}
.feedback-actions button:last-child{

background:#7c0e43;

color:#fff;

}

.feedback-actions button:last-child:hover{

background:#5f0932;

}


.feedback-success-btn{

padding:12px 28px;

border:none;

border-radius:10px;

background:#7c0e43;

color:#fff;

font-weight:600;

cursor:pointer;

}

.feedback-success-btn:hover{

background:#5f0932;

}

.feedback-error{

display:none;

margin:12px 0;

padding:10px 14px;

border-radius:8px;

background:#fff4f4;

border:1px solid #f3bcbc;

color:#c62828;

font-size:14px;

font-weight:600;

}

.cart-limit-info{

margin-top:16px;

padding:12px;

border-radius:10px;

background:#f7f7f7;

font-size:13px;

line-height:1.6;

color:#666;

}

.limit-error{

background:#fff4f4;

border:1px solid #f3bcbc;

color:#c62828;

font-weight:600;

}

.checkout-btn.disabled{

opacity:.55;

pointer-events:none;

cursor:not-allowed;

}

/* ==========================================
   EMPTY CART LAYOUT OVERRIDE
   (Place at the very bottom of cart.css)
========================================== */

.cart-layout.cart-empty{

    display:grid !important;

    grid-template-columns:1fr 380px;

    align-items:flex-start !important;

    justify-content:center !important;

    column-gap:60px;

    min-height:calc(100vh - 120px);

}

.cart-layout.cart-empty #cartItems{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    width:100%;

    padding-top:80px;

}

.cart-layout.cart-empty .empty-cart{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    width:100%;

    max-width:700px;

    margin:0 auto;

    height:auto;

    min-height:auto;

    padding:0 40px;

    box-sizing:border-box;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:95px;

    margin-bottom:22px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:18px;

}

.cart-layout.cart-empty .empty-cart p{

    max-width:480px;

    font-size:21px;

    line-height:1.65;

}

/* RIGHT SIDE */

.cart-layout.cart-empty #cartSummary{

    position:sticky;

    top:110px;

    align-self:flex-start;

}



/* ==========================================
   MOBILE EMPTY CART (FINAL)
========================================== */

@media (max-width:768px){

.cart-layout.cart-empty{

    display:flex !important;

    flex-direction:column;

    height:calc(100vh - 78px);

    overflow:hidden;

}

/* LEFT */

.cart-layout.cart-empty #cartItems{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    padding-bottom:360px;

}

/* EMPTY */

.cart-layout.cart-empty .empty-cart{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    width:100%;

    margin:0;

    padding:0;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:62px;

    margin-bottom:14px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:36px;

    line-height:1.1;

    margin-bottom:14px;

}

.cart-layout.cart-empty .empty-cart p{

    max-width:300px;

    font-size:17px;

    line-height:1.55;

}

/* FLOATING CARD */

.cart-layout.cart-empty #cartSummary{

    position:fixed !important;

    left:12px;

    right:12px;

    bottom:12px;

    top:auto !important;

    z-index:999;

    padding:0;

    background:none;

    align-self:auto;

}

.cart-layout.cart-empty .cart-summary{

    background:#fff;

    border-radius:30px;

    padding:20px;

    margin:0;

    box-shadow:

    0 -10px 35px rgba(0,0,0,.10);

}

/* BUTTONS */

.cart-layout.cart-empty .bottom-actions{

    position:static;

    display:grid;

    grid-template-columns:120px 1fr;

    gap:12px;

    margin-top:18px;

}

.cart-layout.cart-empty .back-menu-btn{

    height:58px;

    border-radius:18px;

}

.cart-layout.cart-empty .checkout-btn{

    position:static !important;

    width:100%;

    height:58px;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:430px){

.cart-layout.cart-empty #cartItems{

    padding-bottom:340px;

}

.cart-layout.cart-empty .empty-cart-icon{

    font-size:54px;

}

.cart-layout.cart-empty .empty-cart h2{

    font-size:30px;

}

.cart-layout.cart-empty .empty-cart p{

    font-size:15px;

    max-width:250px;

}

}

.store-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-weight:700;

    font-size:14px;

    padding:5px 10px;

    border-radius:20px;

}

.store-status.open{

    color:#198754;

    background:#eaf8ef;

}

.store-status.closed{

    color:#dc3545;

    background:#fdecec;

}



/* =========================================================
   CHECKOUT PRO COMPACT DESKTOP PASS — 2026-08-10
   Keeps checkout within the viewport on common desktop sizes.
   ========================================================= */

.checkout-body{
    background:#f6f7f8;
}

.checkout-body header{
    height:72px;
}

.checkout-body .header-container{
    padding:0 22px;
}

.checkout-body .logo img{
    height:42px;
}

.checkout-body .header-account{
    width:44px;
    height:44px;
}

.checkout-body .header-account img{
    width:23px;
    height:23px;
}

.checkout-body .checkout-page{
    width:min(960px, calc(100vw - 36px));
    max-width:none;
    margin:0 auto;
    padding:18px 0 28px;
}

.checkout-body .selected-store{
    min-height:78px;
    padding:10px 16px;
    margin-bottom:12px;
    border-radius:18px;
    gap:14px;
    box-shadow:0 4px 18px rgba(0,0,0,.04);
}

.checkout-body .selected-store img{
    width:58px;
    height:58px;
    border-radius:14px;
}

.checkout-body .store-details small{
    font-size:11px;
}

.checkout-body .store-details h2{
    font-size:22px !important;
    line-height:1.1;
    margin:2px 0;
    letter-spacing:-.4px;
}

.checkout-body .store-details p{
    font-size:12px;
    margin-top:2px;
}

/* Customer information becomes compact and scannable. */
.checkout-body .checkout-card{
    padding:16px 18px;
    margin-bottom:12px;
    border-radius:20px;
    box-shadow:0 4px 18px rgba(0,0,0,.04);
}

.checkout-body .checkout-card h3{
    font-size:21px;
    margin-bottom:12px;
}

.checkout-body .checkout-card:has(.customer-box){
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:14px;
    row-gap:4px;
}

.checkout-body .checkout-card:has(.customer-box) h3{
    grid-column:1 / -1;
}

.checkout-body .customer-box{
    margin-bottom:8px;
}

.checkout-body .customer-box:nth-of-type(3){
    grid-column:1 / -1;
}

.checkout-body .customer-box label{
    font-size:11px;
    margin-bottom:5px;
    color:#777;
}

.checkout-body .customer-value{
    height:46px;
    border-radius:13px;
    padding:0 14px;
    font-size:15px;
    font-weight:650;
}

/* Bottom payment card: compact, clean, one visual unit. */
.checkout-body .checkout-bottom{
    margin-top:12px;
    margin-bottom:0;
    padding:15px 16px 16px;
    border-radius:22px;
    box-shadow:0 5px 22px rgba(0,0,0,.05);
}

.checkout-body .checkout-summary{
    margin-bottom:12px;
    background:#fafafa;
    padding:13px 15px;
    border-radius:16px;
}

.checkout-body .checkout-summary .summary-row{
    font-size:15px;
    margin-bottom:6px;
}

.checkout-body .checkout-summary .summary-total{
    font-size:25px;
    padding-top:10px;
    margin-top:9px;
}

.checkout-body .checkout-actions{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.checkout-body .cart-btn{
    width:100%;
    height:52px;
    border-radius:14px;
    font-size:16px;
}

.checkout-body .place-order-btn{
    width:100%;
    height:52px;
    border-radius:14px;
    font-size:17px;
    box-shadow:0 8px 18px rgba(124,14,67,.16);
}

/* For very short desktop viewports, tighten the same layout further. */
@media (min-width:769px) and (max-height:760px){
    .checkout-body .checkout-page{
        padding-top:10px;
    }

    .checkout-body .selected-store{
        min-height:68px;
        padding:8px 14px;
    }

    .checkout-body .selected-store img{
        width:50px;
        height:50px;
    }

    .checkout-body .checkout-card{
        padding:13px 16px;
    }

    .checkout-body .customer-value{
        height:42px;
    }

    .checkout-body .checkout-bottom{
        padding:12px 14px;
    }

    .checkout-body .checkout-summary{
        padding:10px 13px;
    }
}

/* =========================================================
   CHECKOUT PRO COMPACT v4 — TRUE FULL-WIDTH PAYMENT ACTIONS
   Back-to-cart action is intentionally placed below payments.
   ========================================================= */
/* Keep the entire payment action stack at the same content width as the
   checkout card. No legacy percentage/max-width rules should narrow it. */
.checkout-body .checkout-bottom .checkout-actions{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box;
}
.checkout-body .checkout-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.checkout-body .checkout-actions > .place-order-btn,
.checkout-body .checkout-actions > #paypal-button-container,
.checkout-body .checkout-actions > .online-payment-label,
.checkout-body .checkout-actions > .cart-btn{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    justify-self:auto;
    box-sizing:border-box;
    flex:0 0 auto;
}

.checkout-body .checkout-actions > .place-order-btn{
    order:1;
}

.checkout-body .checkout-actions > .online-payment-label{
    order:2;
    margin:2px 0 0 !important;
    text-align:center;
    font-weight:700;
    color:#555;
    font-size:15px;
    line-height:1.2;
}

.checkout-body .checkout-actions > #paypal-button-container{
    order:3;
}

.checkout-body .checkout-actions > .cart-btn{
    order:4;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    height:48px;
    margin-top:4px !important;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
}

.checkout-body #paypal-button-container,
.checkout-body #paypal-button-container > div,
.checkout-body #paypal-button-container .paypal-buttons{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
}

.checkout-body #paypal-button-container iframe{
    max-width:100% !important;
}

@media (max-width:768px){
    .checkout-body .checkout-actions{
        gap:10px;
    }

    .checkout-body .checkout-actions > .place-order-btn{
        height:50px;
    }

    .checkout-body .checkout-actions > .cart-btn{
        min-height:48px;
        height:48px;
        margin-top:4px !important;
    }
}


/* Customer Email OTP + Account Status */
.verification-choice{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 18px;
    border:1px solid rgba(124,14,67,.12);
    border-radius:16px;
    background:#fff8fb;
}
.verification-choice > span{font-size:13px;color:#777;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.verification-choice strong{font-size:16px;color:#7c0e43}
.verification-choice small,.otp-note{font-size:13px;line-height:1.5;color:#777}
.auth-success{margin-bottom:18px;padding:14px 16px;border-radius:14px;background:#ecfdf3;color:#166534;font-weight:600}
.otp-card .auth-top p{line-height:1.5}
.otp-resend-form{margin-top:10px}
.secondary-action{width:100%;height:52px;border-radius:16px;border:1px solid #ddd;background:#fff;color:#111;font-weight:700;cursor:pointer}
.otp-note{text-align:center;margin:16px 4px 0}
.account-status{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;margin-bottom:24px}
.account-status-icon{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.account-status-good{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534}
.account-status-good .account-status-icon{background:#22c55e;color:#fff}
.account-status-bad{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.account-status-bad .account-status-icon{background:#dc2626;color:#fff}
.account-status strong{font-size:15px;letter-spacing:.03em}
.account-status p{margin:5px 0 0;font-size:13px;line-height:1.5}
.verified-badge{font-style:normal;font-size:12px;color:#166534;background:#ecfdf3;padding:4px 7px;border-radius:999px;white-space:nowrap}
@media(max-width:768px){
    .account-status{padding:15px}
    .account-row{align-items:flex-start;gap:14px}
    .account-row strong{text-align:right;max-width:65%;overflow-wrap:anywhere}
    .verified-badge{display:inline-block;margin-top:4px}
}

.checkout-restricted-notice{display:flex;flex-direction:column;gap:4px;margin:14px 0;padding:14px 16px;border-radius:14px;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.checkout-restricted-notice strong{font-size:14px}
.checkout-restricted-notice span{font-size:13px;line-height:1.45}
.place-order-btn:disabled{opacity:.55;cursor:not-allowed}


/* =========================================================
   WINCHELL'S GUAM BRAND THEME — APP/CHECKOUT VISUAL ONLY
   ========================================================= */
body{
    background:var(--winchells-page);
}

.checkout-body{
    background:var(--winchells-page) !important;
}

.checkout-body .selected-store,
.checkout-body .checkout-card,
.checkout-body .checkout-bottom{
    border:1px solid rgba(0,0,0,.045);
}

.checkout-body .place-order-btn{
    background:linear-gradient(135deg,var(--winchells-burgundy),#a8005a) !important;
}

.checkout-body .cart-btn{
    border-color:#ddd;
}

.secondary-action{
    color:var(--winchells-burgundy);
}

.account-status-good{
    background:#effaf3;
}

.account-status-bad{
    background:#fff1f2;
}

/* =========================================================
   STORE PICKER — DESKTOP TWO-PANE LAYOUT
   Mobile layout remains unchanged.
   ========================================================= */
@media (min-width: 1100px) {
    html, body {
        overflow: hidden;
    }

    main {
        width: min(1280px, calc(100vw - 48px));
        max-width: 1280px;
        height: calc(100vh - 70px);
        min-height: 0;
        margin: 0 auto;
        padding: 18px 22px 22px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .desktop-left {
        display: block;
        flex: 0 0 auto;
    }

    .hero {
        text-align: center;
        margin: 0 0 14px;
        padding: 0 4px;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
    }

    .hero h1 {
        font-size: 30px;
        line-height: 1.1;
        margin: 0;
    }

    .hero p {
        font-size: 14px;
        margin: 0;
    }

    .desktop-right {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
        grid-template-areas: "stores map";
        gap: 20px;
        align-items: stretch;
    }

    .stores-panel {
        grid-area: stores;
        min-width: 0;
        min-height: 0;
    }

    .map-panel {
        grid-area: map;
        min-width: 0;
        min-height: 0;
        position: relative;
    }

    .map-panel .map {
        height: 100%;
        max-width: none;
        margin: 0;
        border-radius: 22px;
        overflow: hidden;
    }

    .stores-panel .stores {
        height: 100%;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 14px;
        max-width: none;
        margin: 0;
        padding: 2px 5px 2px 2px;
        box-sizing: border-box;
    }

    .stores-panel .store {
        position: relative;
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 14px;
        align-items: center;
        width: 100%;
        min-height: 0;
        height: 100%;
        margin: 0;
        padding: 14px;
        border: 2px solid transparent;
        border-radius: 20px;
        text-align: left;
        box-shadow: 0 7px 22px rgba(0,0,0,.055);
        overflow: hidden;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .stores-panel .store:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,.08);
    }

    .stores-panel .store.active {
        border-color: #7c0e43;
        transform: none;
        box-shadow: 0 10px 28px rgba(124,14,67,.14);
    }

    .stores-panel .store-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 104px;
        height: 104px;
        border-radius: 16px;
    }

    .stores-panel .store-info {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        min-width: 0;
        margin: 0;
        padding-right: 2px;
        justify-content: center;
        gap: 7px;
        transition: padding-right .25s ease;
    }

    .stores-panel .store-info h3 {
        font-size: 18px;
        line-height: 1.2;
        color: #5f0c31;
    }

    .stores-panel .store-address {
        font-size: 12px;
        line-height: 1.4;
        color: #666;
    }

    .stores-panel .store-hours {
        font-size: 11px;
        margin-top: 2px;
    }

    /* Desktop: no separate bottom Continue. The selected store owns its action. */
    .continue-panel {
        display: none !important;
    }

    /* Modern selected-store action: translucent pill slides in from the right. */
    .stores-panel .store-continue {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 12px;
        bottom: 12px;
        min-width: 94px;
        height: 38px;
        padding: 0 16px;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 999px;
        background: rgba(124,14,67,.88);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 8px 20px rgba(124,14,67,.20);
        pointer-events: none;
        opacity: 0;
        transform: translateX(28px);
        transition: opacity .24s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    }

    .stores-panel .store.active .store-continue {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        cursor: pointer;
    }

    .stores-panel .store.active .store-info {
        padding-right: 76px;
    }
}

/* Keep the existing mobile picker behavior. */
@media (max-width: 1099px) {
    .desktop-right {
        display: block;
    }

    .map-panel {
        display: block;
    }

    .stores-panel {
        display: block;
    }

    .store-continue {
        display: none !important;
    }

    .continue-panel {
        display: block;
    }
}


/* =========================================================
   CUSTOMER PAGE SCROLL SAFETY
   The desktop store-picker needs a locked viewport, but that
   rule must never lock normal customer pages such as My Orders.
   ========================================================= */
@media (min-width:1100px) {
    html:not(:has(.desktop-right)),
    body:not(:has(.desktop-right)) {
        overflow:auto !important;
    }

    body:not(:has(.desktop-right)) main {
        height:auto !important;
        min-height:0 !important;
        display:block !important;
        overflow:visible !important;
    }

    .orders-page {
        width:min(920px, calc(100vw - 48px));
        max-width:920px;
        margin:0 auto;
        padding:30px 24px 90px;
    }

    .orders-page .order-card {
        overflow:visible;
    }
}

/* My Orders: always allow the page to grow naturally and scroll. */
.orders-page {
    overflow:visible !important;
    height:auto !important;
    min-height:0 !important;
}