@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--noir:#0a0a0a;--charcoal:#1a1a1a;--graphite:#242424;--mist:#c8bfb2;--ivory:#f2ede7;--gold:#b8986a;--gold-light:#d4b896;--white:#fff;}
html{scroll-behavior:smooth;}
body{font-family:'Montserrat',sans-serif;background:var(--noir);color:var(--ivory);font-weight:300;letter-spacing:.04em;line-height:1.7;}
a{text-decoration:none;color:inherit;}

/* MENU FAB */
.menu-fab{position:fixed;top:1.1rem;right:1.3rem;z-index:600;width:48px;height:48px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 18px rgba(0,0,0,.55);transition:background .3s,transform .3s;}
.menu-fab:hover{background:var(--gold-light);transform:scale(1.07);}
.menu-fab span{display:block;width:18px;height:1.5px;background:var(--noir);transition:all .3s;}
.menu-fab.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-fab.open span:nth-child(2){opacity:0;}
.menu-fab.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.menu-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(2px);}
.menu-overlay.open{opacity:1;pointer-events:all;}
.side-menu{position:fixed;top:0;right:-300px;width:280px;height:100vh;z-index:500;background:rgba(12,10,8,.97);backdrop-filter:blur(20px);border-left:.5px solid rgba(184,152,106,.2);display:flex;flex-direction:column;justify-content:center;padding:2.5rem 2rem;transition:right .35s cubic-bezier(.4,0,.2,1);}
.side-menu.open{right:0;}
.menu-logo{width:58px;height:58px;border-radius:50%;object-fit:contain;margin-bottom:1.3rem;display:block;}
.menu-brand{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;letter-spacing:.25em;color:var(--ivory);margin-bottom:.2rem;}
.menu-brand span{color:var(--gold);}
.menu-divider{width:28px;height:.5px;background:var(--gold);margin:1.2rem 0 1.6rem;}
.menu-nav{list-style:none;}
.menu-nav a{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:.5px solid rgba(184,152,106,.08);color:var(--mist);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;transition:color .25s,padding-left .25s;}
.menu-nav a:hover{color:var(--gold-light);padding-left:.4rem;}
.menu-nav a svg{width:13px;height:13px;stroke:currentColor;fill:none;flex-shrink:0;opacity:.7;}
.menu-fb{display:inline-flex;align-items:center;gap:.6rem;margin-top:2rem;padding:.8rem 1.6rem;background:var(--gold);border:none;color:var(--noir);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;text-decoration:none;transition:background .3s;font-family:'Montserrat',sans-serif;}
.menu-fb:hover{background:var(--gold-light);}

/* UTILITIES */
.gl{display:block;width:34px;height:.5px;background:var(--gold);margin:1.3rem 0;}
.ey{font-size:.54rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;}
.st{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3vw,2.8rem);font-weight:300;line-height:1.15;color:var(--white);}
.btn-g{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border:.5px solid var(--gold);color:var(--gold-light);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;background:transparent;transition:background .3s,color .3s;font-family:'Montserrat',sans-serif;font-weight:400;}
.btn-g:hover{background:var(--gold);color:var(--noir);}
.btn-o{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border:.5px solid rgba(200,191,178,.28);color:var(--mist);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;background:transparent;transition:border-color .3s,color .3s;font-family:'Montserrat',sans-serif;font-weight:400;}
.btn-o:hover{border-color:var(--mist);color:var(--ivory);}
.btn-fb{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 2rem;background:var(--gold);border:none;color:var(--noir);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .3s;font-family:'Montserrat',sans-serif;}
.btn-fb:hover{background:var(--gold-light);}
.btn-wa{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 2rem;background:#25D366;border:none;color:#fff;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .3s;font-family:'Montserrat',sans-serif;}
.btn-wa:hover{background:#1da851;}

/* MARQUEE */
.mq{background:var(--gold);padding:.6rem 0;overflow:hidden;white-space:nowrap;}
.mq-inner{display:inline-flex;animation:mqs 30s linear infinite;gap:3rem;}
.mi{font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--noir);font-weight:500;padding:0 .8rem;}
.md{color:rgba(0,0,0,.3);}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== FOOTER — improved font visibility ===== */
footer{background:#050505;padding:2.5rem 3rem 1.5rem;border-top:.5px solid rgba(184,152,106,.2);}
.ft{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:2rem;margin-bottom:2rem;}
.fl-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;}
.fl-logo img{width:38px;height:38px;border-radius:50%;object-fit:contain;}
.fl-brand{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;letter-spacing:.2em;color:var(--ivory);}
.fl-brand b{color:var(--gold);font-weight:600;}
.fl-tag{font-size:.7rem;color:rgba(200,191,178,.75);line-height:1.9;font-weight:400;}
.fc-t{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:600;}
.fc-l{list-style:none;}
.fc-l li{margin-bottom:.6rem;}
.fc-l a{font-size:.72rem;color:rgba(200,191,178,.8);transition:color .3s;font-weight:400;}
.fc-l a:hover{color:var(--mist);}
.fb-soc{display:flex;gap:.8rem;margin-top:1.2rem;}
.fb-soc a{width:26px;height:26px;border:.5px solid rgba(184,152,106,.35);display:flex;align-items:center;justify-content:center;transition:border-color .3s;}
.fb-soc a:hover{border-color:var(--gold);}
.fb-soc svg{width:11px;height:11px;fill:none;stroke:rgba(200,191,178,.7);transition:stroke .3s;}
.fb-soc a:hover svg{stroke:var(--gold-light);}
.fbb{fill:rgba(200,191,178,.7)!important;stroke:none!important;}
.fb-soc a:hover .fbb{fill:var(--gold-light)!important;}
.fb-bot{border-top:.5px solid rgba(200,191,178,.12);padding-top:1rem;display:flex;align-items:center;justify-content:space-between;}
.fb-bot p{font-size:.62rem;color:rgba(200,191,178,.65);font-weight:400;}

/* HERO */
#home{min-height:100vh;display:grid;grid-template-columns:1fr 0.7fr;}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:5rem 3.5rem;}
.eyebrow{font-size:.54rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,4.5vw,4.8rem);font-weight:300;line-height:1.08;color:var(--white);}
.hero-title em{font-style:italic;color:var(--gold-light);}
.hero-sub{font-size:.66rem;color:var(--mist);line-height:2;max-width:32ch;margin-bottom:2.2rem;}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;}
.hero-right{position:relative;background:var(--charcoal);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-right-inner{width:100%;height:100%;min-height:100vh;background:linear-gradient(160deg,#1e1a17,#0f0d0b 60%,#1a1612);display:flex;align-items:center;justify-content:center;position:relative;}
.hero-right-inner::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(184,152,106,.03) 0,rgba(184,152,106,.03) 1px,transparent 1px,transparent 50px);}
.hero-logo{width:260px;height:260px;object-fit:contain;border-radius:50%;opacity:.85;position:relative;z-index:2;border:1px solid rgba(184,152,106,.2);padding:8px;background:rgba(0,0,0,.3);}
.hero-badge{position:absolute;bottom:2rem;right:2rem;border:.5px solid rgba(184,152,106,.4);padding:.8rem 1.2rem;text-align:center;z-index:3;}
.hero-badge b{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--gold-light);display:block;line-height:1;}
.hero-badge small{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);}

/* CATEGORIES */
#categories{background:var(--charcoal);padding:3.5rem 3rem;}
.cat-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.cat-card{aspect-ratio:3/4;position:relative;overflow:hidden;cursor:pointer;display:block;}
.cat-inner{width:100%;height:100%;display:flex;align-items:flex-end;padding:1.2rem;transition:transform .6s;}
.cat-card:hover .cat-inner{transform:scale(1.04);}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);z-index:1;}
.c1{background:linear-gradient(150deg,#13181f,#1a2230);}
.c2{background:linear-gradient(150deg,#1f1318,#2a1520);}
.c3{background:linear-gradient(150deg,#17160f,#221e10);}
.c4{background:linear-gradient(150deg,#0f1318,#151c26);}
.cat-content{position:relative;z-index:2;width:100%;height:100%;}
.cat-content img{
  border-radius: 5px;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.cat-label{font-size:.46rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem;}
.cat-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--gold);line-height:1.15;}
.cat-sub{font-size:.52rem;color:var(--mist);margin-top:.25rem;}

/* PRODUCTS */
#products{background:var(--noir);padding:3.5rem 3rem;}
.prod-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;}
.tab-nav{display:flex;border-bottom:.5px solid rgba(184,152,106,.2);margin-bottom:1.8rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tab-btn{padding:.6rem 1.2rem;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);background:transparent;border:none;border-bottom:1.5px solid transparent;margin-bottom:-.5px;cursor:pointer;white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:400;transition:all .3s;}
.tab-btn.active{color:var(--gold-light);border-bottom-color:var(--gold);}
.tab-btn:hover{color:var(--ivory);}
.product-tab{display:none;grid-template-columns:repeat(4,1fr);gap:1.5px;}
.product-tab.active{display:grid;}

/* PRODUCT CARD */
.p-card{background:var(--charcoal);overflow:hidden;transition:transform .25s;display:flex;flex-direction:column; margin-bottom: 10px;}
.p-card:hover{transform:translateY(-2px);}
.p-visual{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--graphite);}
.p-visual-bg{position:absolute;inset:0;transition:transform .5s;}
.p-card:hover .p-visual-bg{transform:scale(1.04);}
/* IMAGE: cover to fill card properly */
.p-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2;background:var(--charcoal);display:block;}
.p-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;}
.pv1{background:linear-gradient(145deg,#13181f,#1d2535);}
.pv2{background:linear-gradient(145deg,#151a22,#0f131a);}
.pv3{background:linear-gradient(145deg,#0e1318,#1a2130);}
.pv4{background:linear-gradient(145deg,#1e1014,#2a141c);}
.pv5{background:linear-gradient(145deg,#180f12,#200d14);}
.pv7{background:linear-gradient(145deg,#1c1a10,#252112);}
.pv8{background:linear-gradient(145deg,#17160e,#201e0f);}
.pv9{background:linear-gradient(145deg,#14130c,#1d1b0d);}
.pv10{background:linear-gradient(145deg,#111418,#191e28);}
.pv11{background:linear-gradient(145deg,#0f1216,#151a22);}
.pv12{background:linear-gradient(145deg,#131620,#0e1118);}
.p-tag{position:absolute;top:.6rem;left:.6rem;z-index:3;background:var(--gold);color:var(--noir);font-size:.42rem;letter-spacing:.16em;text-transform:uppercase;padding:.18rem .55rem;font-weight:500;}
.p-info{padding:.75rem .9rem .65rem;}
.p-name{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:300;color:var(--white);margin-bottom:.2rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-footer{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
.p-price{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:300;color:var(--gold-light);}
/* This adds the LKR automatically */
.p-price::before {
  content: "LKR ";
  font-size: 0.52rem !important; /* This controls the size */
  font-family: 'Montserrat', sans-serif;
  color: var(--mist);
  font-weight: 300;
  margin-right: 0.2rem;
  vertical-align: middle;
}
.p-price::after {
  content: "upwards ";
  font-size: 0.52rem !important; /* This controls the size */
  font-family: 'Montserrat', sans-serif;
  color: var(--mist);
  font-weight: 300;
  margin-left: 0.6rem;
  vertical-align: middle;
}
/* This hides the <span> if it still exists in your HTML */
.p-price span { display: none !important;}
.p-arrow{font-size:.9rem;color:rgba(184,152,106,.5);transition:color .3s,transform .3s;cursor:pointer;}
.p-card:hover .p-arrow{color:var(--gold-light);transform:translateX(3px);}
/* WhatsApp message button on product card */
.p-wa{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.55rem .9rem;background:#25D366;border:none;color:#fff;font-family:'Montserrat',sans-serif;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .3s;text-decoration:none;}
.p-wa:hover{background:#1da851;}
.p-wa svg{width:13px;height:13px;fill:#fff;flex-shrink:0;}

/* HOW TO ORDER */
#order{background:var(--graphite);padding:4rem 3rem;text-align:center;position:relative;overflow:hidden;border-top:.5px solid rgba(184,152,106,.15);border-bottom:.5px solid rgba(184,152,106,.15);}
#order::before{content:"PM";font-family:'Cormorant Garamond',serif;font-size:16rem;font-weight:300;color:rgba(184,152,106,.03);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap;letter-spacing:.3em;}
.steps{display:flex;justify-content:center;gap:0;margin:3rem 0;flex-wrap:wrap;position:relative;z-index:1;}
.step{flex:1;min-width:140px;max-width:200px;padding:1.5rem 1rem;border-right:.5px solid rgba(184,152,106,.15);}
.step:last-child{border-right:none;}
.step-n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;color:rgba(184,152,106,.2);line-height:1;margin-bottom:.5rem;}
.step-t{font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.35rem;}
.step-d{font-size:.62rem;color:rgba(200,191,178,.5);line-height:1.8;}
.fb-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.5rem;background:var(--gold);border:none;color:var(--noir);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .3s;font-family:'Montserrat',sans-serif;text-decoration:none;position:relative;z-index:1;}
.fb-btn:hover{background:var(--gold-light);}

/* TESTIMONIALS */
#testimonials{background:var(--noir);padding:4rem 3rem;text-align:center;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2.5rem;}
.testi{background:var(--charcoal);padding:2rem 1.5rem;position:relative;}
.testi::before{content:'"';font-family:'Cormorant Garamond',serif;font-size:4rem;color:var(--gold);opacity:.15;position:absolute;top:.3rem;left:1rem;line-height:1;}
.testi-text{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-style:italic;color:var(--ivory);line-height:1.7;margin-bottom:1rem;position:relative;z-index:1;}
.testi-author{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}

/* CONTACT */
#contact{background:var(--charcoal);padding:4rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.nl-form{display:flex;gap:0;margin-top:2rem;}
.nl-input{flex:1;padding:.8rem 1.2rem;background:var(--graphite);border:.5px solid rgba(184,152,106,.3);border-right:none;color:var(--ivory);font-family:'Montserrat',sans-serif;font-size:.66rem;letter-spacing:.08em;outline:none;}
.nl-input::placeholder{color:rgba(200,191,178,.3);}
.nl-input:focus{border-color:var(--gold);}
.nl-btn{padding:.8rem 1.6rem;background:var(--gold);border:none;color:var(--noir);font-family:'Montserrat',sans-serif;font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-weight:500;transition:background .3s;}
.nl-btn:hover{background:var(--gold-light);}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .product-tab.active{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .cat-grid{grid-template-columns:1fr 1fr;}
  .product-tab.active{grid-template-columns:repeat(2,1fr);}
  .ft{grid-template-columns:1fr 1fr;}
  footer{padding:2rem 1.5rem 1rem;}
}
@media(max-width:768px){
  #home{grid-template-columns:1fr;}
  .hero-left{padding:5rem 1.5rem 3rem;}
  .hero-right{display:none;}
  #categories,#products,#order,#testimonials{padding:2.5rem 1.2rem;}
  #contact{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.2rem;}
  .testi-grid{grid-template-columns:1fr;}
  .steps{flex-direction:column;align-items:center;}
  .step{border-right:none;border-bottom:.5px solid rgba(184,152,106,.15);padding:1rem;}
  .step:last-child{border-bottom:none;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .cat-card{aspect-ratio:2/3;}
  .nl-form{flex-direction:column;}
  .nl-input{border-right:.5px solid rgba(184,152,106,.3);border-bottom:none;}
  .product-tab.active{grid-template-columns:repeat(2,1fr);}
  .ft{grid-template-columns:1fr;}
  .fb-bot{flex-direction:column;gap:.4rem;text-align:center;}
  .tab-nav{gap:0;}
  .tab-btn{padding:.6rem .8rem;font-size:.48rem;}
}
@media(max-width:480px){
  .product-tab.active{grid-template-columns:repeat(2,1fr);gap:1px;}
  .hero-title{font-size:2.2rem;}
  .cat-grid{grid-template-columns:1fr 1fr;gap:2px;}
  .hero-left{padding:4.5rem 1.2rem 2.5rem;}
  #products{padding:2rem 1rem;}
  footer{padding:2rem 1rem 1rem;}
}