body{
font-family: Arial;
margin:0;
background:#f5f2ed;
}


.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 80px;
background:white;
border-bottom:2px solid #f0ebe3;
position:sticky;
top:0;
z-index:100;
box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.navbar a{
margin-left:24px;
text-decoration:none;
color:#444;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
font-weight:500;
padding-bottom:4px;
border-bottom:2px solid transparent;
transition:color 0.2s, border-bottom 0.2s;
}

.navbar a:hover{
color:#c48b4f;
border-bottom:2px solid #c48b4f;
}

.logo{
color:#c48b4f;
font-size:1.5rem;
letter-spacing:2px;
}

.order-btn{
background:black !important;
color:white !important;
padding:10px 22px !important;
border-bottom:none !important;
font-size:13px;
letter-spacing:1px;
transition:background 0.2s !important;
}

.order-btn:hover{
background:#c48b4f !important;
color:white !important;
border-bottom:none !important;
}


.hero{
text-align:center;
margin-top:120px;
margin-bottom:120px;
}

.hero h1{
font-size:70px;
}

.hero span{
color:#c48b4f;
}

.small-text{
letter-spacing:3px;
}

.desc{
color:gray;
}

.buttons{
margin-top:30px;
}

.btn1{
background:black;
color:white;
padding:12px 30px;
border:none;
cursor:pointer;
}

.btn1:hover{
background:#c48b4f;
}

.btn2{
padding:12px 30px;
border:1px solid black;
background:white;
cursor:pointer;
}

.btn2:hover{
background:black;
color:white;
}

a.btn1, a.btn2{
text-decoration:none;
display:inline-block;
}


.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:999;
}

.popup-content{
background:white;
padding:30px;
width:300px;
margin:200px auto;
text-align:center;
position:relative;
border-radius:12px;
}

.popup-close{
position:absolute;
top:10px;
right:14px;
background:none;
border:none;
font-size:20px;
cursor:pointer;
color:gray;
}

.signup-btn{
display:inline-block;
background:#c48b4f;
color:white;
padding:10px 24px;
text-decoration:none;
margin-bottom:10px;
}

.popup-form{
display:flex;
flex-direction:column;
gap:10px;
margin:16px 0;
}

.captcha-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
background:#faf7f2;
border:1.5px solid #ddd;
}

.captcha-question{
font-size:14px;
font-weight:600;
color:#333;
}

.captcha-refresh{
background:none;
border:none;
color:#c48b4f;
font-family:Arial;
font-size:13px;
cursor:pointer;
}

.captcha-refresh:hover{
text-decoration:underline;
}

.popup-form input{
padding:11px 14px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:14px;
outline:none;
}

.popup-form input:focus{
border-color:#c48b4f;
}

.popup-form button{
background:black;
color:white;
padding:12px;
border:none;
font-family:Arial;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
}

.popup-form button:hover{
background:#c48b4f;
}

.popup-small{
font-size:12px;
color:gray;
margin-top:8px;
}

.popup-small a{
color:#c48b4f;
text-decoration:none;
}


.login-container{
width:300px;
margin:150px auto;
text-align:center;
}

.login-container input{
display:block;
width:100%;
padding:10px;
margin:10px 0;
}


.slideshow{
position:relative;
width:100%;
height:clamp(360px, 58vw, 520px);
overflow:hidden;
background:#20140d;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
transition:opacity 0.8s ease;
pointer-events:none;
}

.slide.active{
opacity:1;
pointer-events:all;
}

.slide img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
top:0;
left:0;
z-index:0;
display:block;
}

.slide::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:1;
}

.slide-text{
position:relative;
z-index:2;
text-align:center;
color:white;
padding:20px;
}

.slide-tag{
font-size:12px;
letter-spacing:4px;
color:#c48b4f;
margin-bottom:16px;
}

.slide-text h2{
font-size:52px;
font-weight:700;
line-height:1.1;
margin-bottom:16px;
}

.slide-text h2 span{
color:#c48b4f;
font-style:italic;
}

.slide-desc{
font-size:16px;
color:rgba(255,255,255,0.7);
max-width:400px;
margin:0 auto;
}

@media (max-width:768px){
.slideshow{
height:340px;
}

.slide img{
object-fit:contain;
}

.slide-text{
padding:18px;
}

.slide-text h2{
font-size:36px;
}
}

.slide-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.15);
color:white;
border:none;
font-size:22px;
padding:12px 18px;
cursor:pointer;
z-index:3;
}

.slide-arrow:hover{
background:#c48b4f;
}

.slide-arrow.left{ left:24px; }
.slide-arrow.right{ right:24px; }

.slide-dots{
position:absolute;
bottom:18px;
width:100%;
text-align:center;
z-index:3;
}

.dot{
display:inline-block;
width:10px;
height:10px;
margin:0 5px;
background:rgba(255,255,255,0.4);
border-radius:50%;
cursor:pointer;
}

.dot.active{
background:#c48b4f;
}


.why-us{
text-align:center;
padding:80px 40px;
background:white;
}

.why-tag{
font-size:12px;
letter-spacing:4px;
color:#c48b4f;
margin-bottom:10px;
}

.why-us h2{
font-size:36px;
margin-bottom:50px;
}

.why-cards{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.why-card{
width:250px;
padding:30px;
border-top:3px solid #c48b4f;
background:#f5f2ed;
transition:transform 0.2s, box-shadow 0.2s;
}

.why-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.why-card-img{
width:100%;
height:180px;
overflow:hidden;
margin-bottom:20px;
background:#f5f2ed;
display:flex;
align-items:center;
justify-content:center;
}

.why-card-img img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:10px;
display:block;
transition:transform 0.3s;
}

.why-card:hover .why-card-img img{
transform:scale(1.05);
}

.why-card h3{
font-size:18px;
margin-bottom:10px;
}

.why-card p{
color:gray;
font-size:14px;
line-height:1.7;
}


.stats-section{
display:flex;
justify-content:center;
gap:0;
background:#1a1410;
}

.stat{
flex:1;
text-align:center;
padding:50px 20px;
border-right:1px solid rgba(255,255,255,0.1);
}

.stat:last-child{
border-right:none;
}

.stat h2{
font-size:42px;
color:#c48b4f;
margin-bottom:8px;
}

.stat p{
color:rgba(255,255,255,0.6);
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
margin:0;
}


.featured{
text-align:center;
padding:80px 40px;
background:#f5f2ed;
}

.featured-tag{
font-size:12px;
letter-spacing:4px;
color:#c48b4f;
margin-bottom:10px;
}

.featured h2{
font-size:36px;
margin-bottom:50px;
}

.featured-cards{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-bottom:40px;
}

.featured-card{
width:260px;
background:white;
padding:30px;
border-top:3px solid #c48b4f;
text-align:center;
transition:transform 0.2s, box-shadow 0.2s;
}

.featured-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.featured-card-img{
width:100%;
height:200px;
overflow:hidden;
margin-bottom:16px;
display:flex;
align-items:center;
justify-content:center;
}

.featured-card-img img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:10px;
background:#f5f2ed;
display:block;
}

.featured-img{
font-size:48px;
margin-bottom:16px;
}

.featured-card h3{
font-size:18px;
margin-bottom:10px;
}

.featured-card p{
color:gray;
font-size:14px;
line-height:1.7;
}

.featured-price{
color:#c48b4f;
font-size:16px;
font-weight:bold;
margin-top:12px;
}

.featured-btn{
display:inline-block;
margin-top:16px;
background:black;
color:white;
padding:10px 24px;
text-decoration:none;
font-size:14px;
}

.featured-btn:hover{
background:#c48b4f;
}

.view-all{
display:inline-block;
margin-top:10px;
color:#c48b4f;
text-decoration:none;
font-size:15px;
letter-spacing:1px;
border-bottom:1px solid #c48b4f;
padding-bottom:2px;
}


.map-section{
text-align:center;
padding:80px 40px;
background:white;
}

.map-tag{
font-size:12px;
letter-spacing:4px;
color:#c48b4f;
margin-bottom:10px;
}

.map-section h2{
font-size:36px;
margin-bottom:50px;
}

.map-container{
display:flex;
justify-content:center;
align-items:flex-start;
gap:40px;
flex-wrap:wrap;
max-width:1000px;
margin:0 auto;
}

.map-info{
text-align:left;
min-width:220px;
}

.map-info h3{
font-size:20px;
margin-bottom:16px;
color:#c48b4f;
}

.map-info p{
color:gray;
font-size:15px;
line-height:2;
margin:0;
}

.map-frame{
flex:1;
min-width:300px;
}


.footer{
background:#1a1410;
color:rgba(255,255,255,0.7);
}

.footer-top{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
padding:60px 80px;
}

.footer-col h3{
color:#c48b4f;
font-size:20px;
margin-bottom:16px;
}

.footer-col h4{
color:white;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:16px;
}

.footer-col p{
font-size:14px;
line-height:2;
margin:0;
max-width:220px;
}

.footer-social{
display:flex;
gap:12px;
margin-top:18px;
}

.footer-social a{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border:1px solid rgba(255,255,255,0.18);
border-radius:50%;
color:#f5ede4;
line-height:1;
padding:0;
text-decoration:none;
transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-col .footer-social a{
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}

.footer-social a:hover{
background:#c48b4f;
color:#1a1410;
border-color:#c48b4f;
transform:translateY(-2px);
}

.footer-social svg{
width:18px;
height:18px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

.footer-col a{
display:block;
color:rgba(255,255,255,0.7);
text-decoration:none;
font-size:14px;
line-height:2;
}

.footer-col a:hover{
color:#c48b4f;
}

.footer-bottom{
text-align:center;
padding:20px;
border-top:1px solid rgba(255,255,255,0.1);
font-size:13px;
color:rgba(255,255,255,0.4);
}


.auth-wrapper{
min-height:80vh;
display:flex;
justify-content:center;
align-items:center;
padding:60px 20px;
background:#f5f2ed;
}

.auth-box{
background:white;
padding:48px 40px;
width:100%;
max-width:460px;
}

.auth-logo{
font-size:1.8rem;
text-align:center;
margin-bottom:6px;
color:black;
}

.auth-logo span{
color:#c48b4f;
}

.auth-sub{
text-align:center;
color:gray;
font-size:14px;
margin-bottom:28px;
}

.auth-tabs{
display:flex;
border-bottom:2px solid #ede8e0;
margin-bottom:24px;
}

.auth-tab{
flex:1;
padding:10px;
background:none;
border:none;
border-bottom:2px solid transparent;
margin-bottom:-2px;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
color:gray;
font-family:Arial;
}

.auth-tab.active{
color:black;
border-bottom-color:#c48b4f;
}

.auth-form{
display:none;
}

.auth-form.active{
display:block;
}

.offer-banner{
background:#fff8ee;
border-left:3px solid #c48b4f;
padding:12px 16px;
margin-bottom:22px;
font-size:13px;
color:#555;
}

.form-group{
margin-bottom:16px;
}

.form-group label{
display:block;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:6px;
font-weight:600;
}

.form-group input{
width:100%;
padding:11px 14px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:14px;
background:#faf7f2;
outline:none;
box-sizing:border-box;
}

.form-group input:focus{
border-color:#c48b4f;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.auth-submit{
width:100%;
background:black;
color:white;
padding:13px;
border:none;
font-family:Arial;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
margin-bottom:16px;
}

.auth-submit:hover{
background:#c48b4f;
}

.auth-switch{
text-align:center;
font-size:13px;
color:gray;
}

.auth-switch a{
color:#c48b4f;
text-decoration:none;
}


.page-header{
background:#f5f2ed;
padding:60px 80px;
border-bottom:1px solid #ede8e0;
}

.page-header h1{
font-size:48px;
margin-bottom:10px;
}

.page-desc{
color:gray;
font-size:15px;
}

.section-label{
font-size:12px;
letter-spacing:4px;
color:#c48b4f;
text-transform:uppercase;
margin-bottom:10px;
}


.coffee-section{
padding:80px;
background:#f5f2ed;
}

.coffee-section-alt{
background:white;
}

.coffee-section h2{
font-size:36px;
margin-bottom:40px;
}

.coffee-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}

.coffee-card{
background:white;
border-top:3px solid #c48b4f;
overflow:hidden;
transition:transform 0.2s, box-shadow 0.2s;
}

.coffee-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.coffee-section-alt .coffee-card{
background:#f5f2ed;
}

.coffee-icon{
font-size:40px;
margin-bottom:14px;
}

.coffee-card h3{
font-size:18px;
margin-bottom:8px;
}

.coffee-origin{
font-size:12px;
letter-spacing:1px;
color:#c48b4f;
text-transform:uppercase;
margin-bottom:10px;
}

.coffee-card p{
color:gray;
font-size:14px;
line-height:1.7;
}

.coffee-price{
color:#c48b4f;
font-size:16px;
font-weight:bold;
margin-top:12px !important;
}

.coffee-btn{
display:inline-block;
margin-top:16px;
background:black;
color:white;
padding:10px 22px;
text-decoration:none;
font-size:13px;
}

.coffee-btn:hover{
background:#c48b4f;
}

.product-actions{
display:flex;
align-items:end;
gap:12px;
margin-top:16px;
}

.product-actions .coffee-btn{
margin-top:0;
}

.qty-picker{
display:flex;
flex-direction:column;
gap:6px;
font-size:11px;
letter-spacing:1px;
text-transform:uppercase;
color:gray;
}

.qty-input{
width:78px;
padding:10px 12px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:14px;
background:white;
outline:none;
box-sizing:border-box;
}

.qty-input:focus{
border-color:#c48b4f;
}

.coffee-card-img{
width:100%;
height:220px;
overflow:hidden;
background:#f5f2ed;
display:flex;
align-items:center;
justify-content:center;
}

.coffee-card-img img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
padding:10px;
display:block;
transition:transform 0.3s;
}

.coffee-card:hover .coffee-card-img img{
transform:scale(1.05);
}

.product-page .coffee-card-img img{
transform:scale(1.28);
}

.product-page .coffee-card:hover .coffee-card-img img{
transform:scale(1.34);
}

.coffee-card-body{
padding:24px;
}

.coffee-card-body h3{
font-size:18px;
margin-bottom:8px;
}

.coffee-card-body p{
color:gray;
font-size:14px;
line-height:1.7;
}


.search-bar{
padding:30px 80px 0;
background:#f5f2ed;
display:flex;
justify-content:center;
}

.search-bar input{
width:50%;
height:45px;
padding:0 20px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:15px;
background:white;
outline:none;
box-sizing:border-box;
}

.search-bar input:focus{
border-color:#c48b4f;
}


.form-group select{
width:100%;
padding:11px 14px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:14px;
background:#faf7f2;
outline:none;
box-sizing:border-box;
}

.form-group select:focus{
border-color:#c48b4f;
}

.form-group textarea{
width:100%;
padding:11px 14px;
border:1.5px solid #ddd;
font-family:Arial;
font-size:14px;
background:#faf7f2;
outline:none;
box-sizing:border-box;
height:120px;
resize:vertical;
}

.form-group textarea:focus{
border-color:#c48b4f;
}


.cart-layout{
display:grid;
grid-template-columns:1fr 320px;
gap:48px;
align-items:start;
}

.cart-left h2{
font-size:28px;
margin-bottom:24px;
}

.cart-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
border-bottom:1px solid #ede8e0;
}

.cart-item-info h4{
font-size:16px;
margin-bottom:4px;
}

.cart-item-info p{
color:gray;
font-size:13px;
}

.cart-item-right{
display:flex;
align-items:center;
gap:16px;
}

.cart-qty-controls{
display:flex;
align-items:center;
gap:8px;
}

.qty-btn{
width:32px;
height:32px;
border:1px solid #d9d2c7;
background:white;
color:#333;
font-size:18px;
cursor:pointer;
}

.qty-btn:hover{
background:#c48b4f;
border-color:#c48b4f;
color:white;
}

.cart-qty-input{
width:58px;
height:32px;
padding:4px 8px;
border:1px solid #d9d2c7;
font-family:Arial;
font-size:14px;
text-align:center;
box-sizing:border-box;
}

.cart-price{
font-weight:600;
color:#c48b4f;
font-size:16px;
}

.remove-btn{
background:none;
border:none;
color:gray;
font-size:16px;
cursor:pointer;
}

.remove-btn:hover{
color:red;
}

.cart-summary{
background:white;
padding:36px;
border:1.5px solid #ede8e0;
position:sticky;
top:90px;
transition:box-shadow 0.2s;
}

.cart-summary:hover{
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.cart-summary h2{
font-size:22px;
margin-bottom:24px;
}

.summary-row{
display:flex;
justify-content:space-between;
margin-bottom:12px;
font-size:15px;
color:gray;
}

.summary-total{
display:flex;
justify-content:space-between;
font-size:18px;
font-weight:600;
border-top:1.5px solid #ede8e0;
padding-top:16px;
margin-top:16px;
}

.cart-note{
font-size:13px;
color:gray;
text-align:center;
margin-top:20px;
}

.cart-note a{
color:#c48b4f;
text-decoration:none;
}


.offer-card{
background:white;
padding:36px;
border:1.5px solid #ede8e0;
text-align:center;
transition:transform 0.2s, box-shadow 0.2s;
}

.offer-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.offer-featured{
border-color:#c48b4f;
background:#fff8ee;
}

.offer-badge{
font-size:12px;
letter-spacing:2px;
color:#c48b4f;
text-transform:uppercase;
margin-bottom:8px;
}

.offer-plan{
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
color:gray;
margin-bottom:8px;
}

.offer-price{
font-size:2rem;
font-weight:700;
margin-bottom:6px;
}

.offer-price span{
font-size:0.9rem;
font-weight:400;
color:gray;
}

.offer-list{
list-style:none;
padding:0;
color:gray;
font-size:14px;
line-height:2.2;
margin:20px 0 28px;
text-align:left;
}

.offer-list li::before{
content:"✓  ";
color:#c48b4f;
font-weight:bold;
}


.promo-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:28px;
}

.promo-card{
background:white;
padding:30px;
border-top:3px solid #c48b4f;
transition:transform 0.2s, box-shadow 0.2s;
}

.promo-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.1);
}

.promo-card h3{
font-size:18px;
margin-bottom:10px;
}

.promo-card p{
color:gray;
font-size:14px;
line-height:1.7;
}

.promo-code{
font-size:1.1rem;
font-weight:700;
color:#c48b4f;
margin:14px 0 !important;
}


.why-card,
.featured-card,
.coffee-card,
.offer-card,
.promo-card,
.why-us,
.featured,
.map-section,
.coffee-section,
.page-header{
opacity:0;
transform:translateY(30px);
transition:opacity 0.6s ease, transform 0.6s ease;
}

.animate{
opacity:1 !important;
transform:translateY(0) !important;
}


.active-link{
color:#c48b4f !important;
border-bottom:2px solid #c48b4f !important;
}


.events-hero{
background:#1a1410;
padding:100px 80px;
display:flex;
align-items:center;
}

.events-hero-text h1{
font-size:52px;
color:white;
margin-bottom:16px;
}

.events-hero-text p{
color:rgba(255,255,255,0.6);
font-size:16px;
max-width:500px;
}

.offers-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
align-items:stretch;
}

.offers-grid .offer-card{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}

.offers-grid .offer-list{
flex:1;
}

.page-header{
padding-bottom:30px !important;
}

.coffee-section{
padding-top:40px !important;
}


.read-more-btn{
background:none;
border:none;
color:#c48b4f;
font-size:13px;
cursor:pointer;
padding:0;
margin:0;
font-family:Arial;
display:inline;
}

.read-more-btn:hover{
text-decoration:underline;
}

.short-desc{
display:inline;
color:gray;
font-size:14px;
line-height:1.7;
}

.full-desc{
color:gray;
font-size:14px;
line-height:1.7;
}

@media (max-width:1024px){
.navbar,
.page-header,
.coffee-section,
.search-bar,
.footer-top,
.events-hero{
padding-left:32px;
padding-right:32px;
}

.coffee-grid,
.offers-grid{
grid-template-columns:repeat(2, 1fr);
}

.cart-layout{
grid-template-columns:1fr;
}

.cart-summary{
position:static;
}
}

@media (max-width:768px){
body{
overflow-x:hidden;
}

.navbar{
flex-direction:column;
align-items:flex-start;
gap:14px;
padding-top:18px;
padding-bottom:18px;
}

.navbar nav{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
width:100%;
}

.navbar a{
margin-left:0;
}

.hero{
margin-top:72px;
margin-bottom:72px;
padding:0 20px;
}

.hero h1,
.page-header h1,
.events-hero-text h1{
font-size:38px;
}

.why-us,
.featured,
.map-section,
.page-header,
.coffee-section,
.search-bar,
.footer-top,
.events-hero{
padding-left:20px;
padding-right:20px;
}

.why-us,
.featured,
.map-section,
.coffee-section{
padding-top:56px !important;
padding-bottom:56px;
}

.stats-section{
flex-direction:column;
}

.stat{
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.stat:last-child{
border-bottom:none;
}

.featured-cards,
.why-cards,
.map-container{
gap:24px;
}

.coffee-grid,
.offers-grid,
.promo-grid,
.form-row{
grid-template-columns:1fr;
}

.search-bar input{
width:100%;
}

.product-actions{
flex-direction:column;
align-items:stretch;
}

.qty-input,
.product-actions .coffee-btn{
width:100%;
box-sizing:border-box;
}

.cart-item{
flex-direction:column;
align-items:flex-start;
gap:14px;
}

.cart-item-right{
width:100%;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
}

.cart-qty-controls{
order:1;
}

.cart-price{
order:2;
margin-left:auto;
}

.remove-btn{
order:3;
}

.footer-top{
gap:28px;
}

.footer-col p{
max-width:none;
}
}

@media (max-width:480px){
.slide-text h2{
font-size:30px;
}

.slide-desc,
.page-desc,
.coffee-card p,
.map-info p{
font-size:13px;
}

.coffee-card-body,
.cart-summary,
.offer-card,
.promo-card{
padding:22px;
}

.cart-qty-controls{
width:100%;
justify-content:flex-start;
}

.cart-price{
margin-left:0;
}
}