/* ===== Base & Layout ===== */
:root{
  --accent:#f0a500;
  --dark:#222;
  --muted:#666;
  --bg:#fafafa;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:#222;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  line-height:1.5;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== Header / Nav ===== */
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}
.logo{font-size:1.25rem; font-weight:700; margin:0}
nav{display:flex;gap:14px;align-items:center}
.nav-link{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:8px 6px;
  border-bottom:3px solid transparent;
  transition:color .18s, border-bottom .18s;
}
.nav-link:hover{color:var(--accent)}
.nav-link.active{border-bottom-color:var(--accent)}

/* ===== Hero ===== */
.hero-section {
  position: relative;
  background: url('https://images.unsplash.com/photo-1503342394128-c104d54dba01?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.hero-inner{max-width:900px;margin:0 auto}
.hero h2{font-size:2.1rem;margin-bottom:12px}
.hero p{font-size:1.05rem;margin-bottom:18px}
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:12px 22px;
  border-radius:30px;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{background:#d18e00}

/* ===== Sections ===== */
.section{
  padding:60px 20px;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}

/* Fade animation helper (JS toggles .visible) */
.fade{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.fade.visible{opacity:1;transform:none}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:28px;
}
.item{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(18,18,18,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}
.item:hover{transform:translateY(-6px); box-shadow:0 10px 30px rgba(18,18,18,0.09)}
.item img{width:100%;height:230px;object-fit:cover;display:block}
.item figcaption{padding:12px 14px;color:var(--muted);font-weight:600;text-align:left}

/* ===== Map ===== */
.map-wrap{max-width:900px;margin:20px auto;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.08)}

/* ===== Footer ===== */
footer{background:var(--dark);color:#fff;padding:18px 0;text-align:center;font-size:.95rem;margin-top:30px}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.85);z-index:2000;opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92%;max-height:78vh;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.lb-close{
  position:absolute;top:24px;right:24px;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;padding:8px;
}
.lb-caption{color:#fff;margin-top:12px;font-size:0.95rem}

.buy-section {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.yard-input {
  width: 60px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.add-cart-btn {
  background: #000;
  color: #fff;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.add-cart-btn:hover {
  background: #222;
}

.cart-section {
  text-align: center;
}

#cart-items {
  margin-top: 20px;
}

.cart-item {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
/* Modern Hero Style */
.modern-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
}

.modern-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-inner h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero-inner p {
  font-size: 1.2rem;
  margin-bottom: 25px;
}
/* Navigation Bar (Transparent to Solid Effect) */
#mainHeader {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 0;
  transition: 0.3s ease;
  z-index: 9999;
  background: transparent;
}

body {
  padding-top: 80px;
}
#mainHeader.scrolled {
  background: #000;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

nav .nav-link {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  font-weight: 500;
  transition: 0.3s;
}

nav .nav-link:hover {
  color: var(--accent);
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {

  .nav-container {
    flex-direction: column;
    gap: 10px;
  }

  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav .nav-link {
    margin: 5px 0;
  }

  .hero-inner h1 {
  font-size: 2.1rem;
}
  .hero-inner p {
    font-size: 1rem;
  }

#whatsappCheckout {
  display: block;
  margin: 15px auto 0;
}
/* MOBILE MENU */

.menu-toggle{
  display:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}

/* Mobile layout */
@media (max-width:768px){

  .menu-toggle{
    display:block;
  }

  #navMenu{
    display:none;
    flex-direction:column;
    width:100%;
    background:#000;
    margin-top:10px;
    padding:10px 0;
  }

  #navMenu a{
    padding:10px 0;
  }

  #navMenu.show{
    display:flex;
  }
}