.storefront{
--store:#7b3455;
--store-font:Georgia,serif;
background:#fffaf7}
.demo-banner{
background:#1a1a1a;
color:white;
text-align:center;
font-size:.78rem;
padding:7px}
.demo-banner a{
color:#f2c26f;
margin-left:10px}
.store-header{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
background:#fffaf7;
position:sticky;
top:0;
z-index:15;
border-bottom:1px solid #ebddd5}
.store-logo{
font-family:var(--store-font);
font-size:1.35rem;
font-weight:700}
.store-header nav{
display:none}
.store-menu{
border:0;
background:transparent}
.cart-button{
border:0;
background:transparent}
.cart-button span{
display:inline-grid;
place-items:center;
background:var(--store);
color:white;
width:23px;
height:23px;
border-radius:50%;
margin-left:5px}
.store-hero{
min-height:620px;
display:grid}
.store-hero>div:first-child{
padding:65px 22px;
align-self:center}
.store-hero h1,.store-heading h2,.story h2{
font-family:var(--store-font);
font-weight:500}
.store-hero h1{
font-size:clamp(3.2rem,9vw,6.5rem);
max-width:700px}
.store-hero p{
max-width:570px}
.store-button{
display:inline-flex;
justify-content:center;
border:0;
background:var(--store);
color:white;
padding:13px 19px;
font-weight:700}
.fashion-art{
min-height:480px;
background:linear-gradient(145deg,#ecd1c1,#8a405f);
display:grid;
place-items:center}
.fashion-art span{
font:8rem var(--store-font);
color:#ffffff35}
.store-section{
padding:80px 18px;
max-width:1200px;
margin:auto}
.store-heading{
display:flex;
align-items:end;
justify-content:space-between}
.store-heading h2{
font-size:2.4rem}
.store-heading span{
color:#85756e}
.store-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px}
.store-product-image{
aspect-ratio:.75;
background:linear-gradient(145deg,#ead9d0,#c398a9);
display:grid;
place-items:center;
font:3rem var(--store-font);
color:#ffffff99}
.store-product-card h3{
font-family:var(--store-font);
margin:12px 0 3px}
.store-product-card p{
color:#766760;
margin-bottom:8px}
.add-cart{
border:0;
border-bottom:1px solid var(--store);
background:transparent;
color:var(--store);
padding:4px 0;
font-weight:700}
.product-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 16px;
margin-top:12px}
.product-enquiry{
border-bottom:1px solid #050505;
color:#050505;
font-size:.88rem;
font-weight:700}
.whatsapp-contact{
position:fixed;
right:18px;
bottom:calc(18px + env(safe-area-inset-bottom));
z-index:45;
display:flex;
align-items:center;
gap:9px;
min-height:48px;
padding:11px 16px;
border:1px solid #050505;
border-radius:999px;
background:#050505;
color:#fff;
box-shadow:0 14px 35px rgba(0,0,0,.22);
font-size:.88rem;
font-weight:750;
transition:transform .18s ease,background .18s ease}
.whatsapp-contact svg{
width:21px;
height:21px;
fill:currentColor}
.whatsapp-contact:hover,
.whatsapp-contact:focus-visible{
transform:translateY(-2px);
background:#242426}
.story{
display:grid;
background:#f1dfd5}
.story>div{
padding:70px 25px;
align-self:center}
.story-art{
background:var(--store)!important;
color:white;
font:4rem/1 var(--store-font);
min-height:430px;
display:grid;
place-items:center}
.store-footer{
border:0;
background:#251c20;
color:#cfc4c8;
width:100%;
padding:50px 22px}
.store-footer b{
color:white}
.cart-drawer{
position:fixed;
z-index:51;
right:0;
top:0;
bottom:0;
width:min(420px,90vw);
background:white;
padding:25px;
overflow-y:auto;
transform:translateX(105%);
transition:.25s;
box-shadow:var(--shadow)}
.cart-drawer.open{
transform:none}
.cart-overlay{
position:fixed;
inset:0;
background:#0008;
z-index:50;
display:none}
.cart-drawer.open+.cart-overlay{
display:block}
.cart-title{
display:flex;
justify-content:space-between}
.cart-title button{
border:0;
background:none;
font-size:2rem}
.cart-title .drawer-close{
width:44px;
height:44px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:14px;
background:#f1f1f3;
color:#050505;
-webkit-appearance:none;
appearance:none;
-webkit-tap-highlight-color:transparent;
font-size:1.8rem;
font-weight:400;
line-height:1}
.cart-title .drawer-close:hover,
.cart-title .drawer-close:focus-visible{
background:#e4e4e7;
color:#050505}
.cart-item{
display:grid;
grid-template-columns:1fr auto;
gap:7px;
padding:14px 0;
border-bottom:1px solid var(--line)}
.cart-item button{
grid-column:2;
border:0;
background:transparent;
color:#a23c3c}
.cart-total{
display:flex;
justify-content:space-between;
font-size:1.2rem;
padding:20px 0}
.secure-note{
text-align:center;
color:var(--muted);
font-size:.75rem}
@media(min-width:760px){
.store-menu{
display:none}
.store-header{
padding:0 4vw}
.store-header nav{
display:flex;
gap:30px}
.store-hero{
grid-template-columns:1.05fr .95fr;
min-height:calc(100vh - 107px)}
.store-hero>div:first-child{
padding:7vw}
.fashion-art{
min-height:auto}
.store-grid{
grid-template-columns:repeat(3,1fr);
gap:25px}
.story{
grid-template-columns:1fr 1fr}
.story>div{
padding:8vw}
.store-footer{
grid-template-columns:2fr 1fr}
.store-footer small{
grid-column:auto}
.whatsapp-contact{
right:28px;
bottom:28px}
}