/* ===== MEJA MAHJONG — theme: Silver, White, Green, Red ===== */
:root{
  --green-dark:#154A20;
  --green:#2E8B3D;
  --green-light:#3AA34F;
  --red:#C0392B;
  --red-dark:#7B2116;
  --white:#FFFFFF;
  --ivory:#F5F6F7;
  --silver:#C0C4C9;
  --silver-dark:#9AA0A6;
  --ink:#1F2A1F;
  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.15);
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ivory);color:var(--ink);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ---- Top strip ---- */
.top-strip{
  background:var(--ivory);
  text-align:center;
  padding:8px 0;
  font-weight:700;
  font-size:.9rem;
  color:var(--green-dark);
  letter-spacing:.03em;
}

/* ---- Nav ---- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,var(--green-dark),var(--green) 50%,var(--green-dark));
  border-bottom:3px solid var(--silver);
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1200px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:52px;}
.brand-tag{color:var(--ivory); font-size:.95rem; font-weight:600;}
.nav-links{display:flex; gap:32px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem;}
.nav-links a{color:var(--ivory); transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--red);}
.nav-cta{
  background:var(--red); color:var(--ivory); font-weight:700;
  padding:10px 20px; border-radius:999px; font-size:.9rem;
  box-shadow:var(--shadow);
}
.burger{display:none; background:none; border:none; color:var(--ivory); font-size:1.6rem; cursor:pointer;}
@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:block;}
}

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden;}
.hero img{width:100%; height:auto; display:block;}
.hero-caption{
  position:absolute; left:6%; top:50%; transform:translateY(-50%);
  color:var(--ivory); max-width:420px;
}
.hero-caption h1{font-size:2.4rem; font-weight:900; line-height:1.15; margin:0 0 12px;}
.hero-caption h1 span{color:var(--red);}
.hero-caption p{font-size:1.05rem; margin:0 0 20px; opacity:.92;}
@media (max-width:760px){
  .hero-caption{position:static; transform:none; padding:24px 20px; background:var(--green-dark);}
}

/* ---- Buttons ---- */
.btn{
  display:inline-block; padding:12px 26px; border-radius:999px;
  font-weight:700; font-size:.95rem; box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-red{background:var(--red); color:var(--ivory);}
.btn-green{background:var(--green); color:var(--ivory);}
.btn-outline{background:transparent; border:2px solid var(--silver); color:var(--ink);}

/* ---- Section headings ---- */
.section{padding:56px 0;}
.section-title{
  text-align:center; font-size:1.8rem; font-weight:900; margin-bottom:36px;
  color:var(--green-dark);
}

/* ---- Collections grid ---- */
.grid{display:grid; gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-4,.grid-2{grid-template-columns:1fr;}}

.collection-card{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.collection-card:hover{transform:translateY(-4px);}

/* ---- Feature cards ---- */
.feature-card{
  background:linear-gradient(160deg,var(--green) -10%,var(--green-dark) 120%);
  border-radius:var(--radius); padding:52px 20px 24px; text-align:center; color:var(--ivory);
  position:relative; box-shadow:var(--shadow); border:1px solid var(--silver);
}
.feature-icon{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--red), var(--red-dark));
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--silver);
}
.feature-icon svg{width:32px; height:32px; stroke:var(--ivory);}
.feature-card h3{margin:0 0 10px; font-size:1.15rem;}
.feature-card p{margin:0; font-size:.92rem; opacity:.92;}

/* ---- Product / catalog cards ---- */
.product-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--silver);
  display:flex; flex-direction:column;
}
.product-card img{width:100%; aspect-ratio:300/220; object-fit:cover;}
.product-body{padding:16px; flex:1; display:flex; flex-direction:column; gap:6px;}
.product-tag{
  align-self:flex-start; background:var(--silver); color:var(--green-dark);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  padding:3px 10px; border-radius:999px;
}
.product-name{font-weight:800; font-size:1.05rem; margin:4px 0 0; color:var(--ink);}
.product-price{color:var(--red); font-weight:900; font-size:1.15rem;}
.product-actions{margin-top:auto; padding-top:10px;}
.product-actions a{display:block; text-align:center;}

/* ---- Filter tabs (catalog) ---- */
.filter-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px;}
.filter-tabs a{
  padding:9px 18px; border-radius:999px; font-weight:700; font-size:.88rem;
  border:2px solid var(--green); color:var(--green-dark);
}
.filter-tabs a.active, .filter-tabs a:hover{background:var(--green); color:var(--ivory);}

/* ---- CTA band ---- */
.cta-band{
  background:linear-gradient(90deg,var(--green-dark),var(--green));
  color:var(--ivory); text-align:center; padding:50px 24px; border-radius:var(--radius);
  margin:0 24px;
}
.cta-band h2{font-size:1.5rem; margin:0 0 8px;}
.cta-band p{margin:0 0 24px; opacity:.9;}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---- Community cards ---- */
.community-card{
  background:var(--green); border-radius:var(--radius); padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--ivory); box-shadow:var(--shadow); border:1px solid var(--silver);
}
.community-card .handle{font-weight:800; font-size:1.1rem;}
.ig-badge{background:var(--white); border-radius:8px; padding:8px; display:flex;}
.ig-badge svg{stroke:var(--green-dark);}

/* ---- About page ---- */
.about-hero{background:linear-gradient(120deg,var(--green-dark),var(--green)); color:var(--ivory); padding:60px 24px; text-align:center;}
.about-hero h1{font-size:2rem; margin:0 0 12px;}
.about-hero p{max-width:640px; margin:0 auto; opacity:.92;}
.timeline{max-width:760px; margin:0 auto; display:grid; gap:18px;}
.timeline .item{background:var(--white); border-left:5px solid var(--red); border-radius:10px; padding:18px 22px; box-shadow:var(--shadow);}
.timeline .item h4{margin:0 0 6px; color:var(--green-dark);}

/* ---- Footer ---- */
footer{background:var(--green-dark); color:var(--ivory); border-top:3px solid var(--silver); margin-top:60px;}
.footer-inner{
  max-width:1200px; margin:0 auto; padding:40px 24px 60px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{height:44px;}
.footer-links{display:grid; grid-template-columns:repeat(2,auto); gap:10px 40px; font-size:.95rem;}
.footer-links .icon-row{display:flex; align-items:center; gap:8px;}
.footer-links svg{width:18px; height:18px; stroke:var(--red);}

/* ---- Floating WhatsApp button ---- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); border:3px solid var(--white);
}
.wa-float svg{width:30px; height:30px; fill:var(--white);}