:root{
  --accent: #2f4f46;
  --gold: #c9a646;
  --bg: #ffffff;
  --muted: #6b7280;
}

@media (max-width: 768px) {
  /* Tablet styles */
  .container {
    flex-direction: column;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  /* Mobile styles */
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  h1 {
    font-size: 1.5rem;
  }
}


/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:var(--bg); color:var(--accent);}
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* Header */
.site-header{background:#fff;box-shadow:0 2px 10px rgba(15,23,36,0.04);position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem}
.logo{font-family:'Playfair Display', serif;font-size:1.4rem;color:var(--accent);text-decoration:none}
.nav a{margin-left:1rem;color:var(--accent);text-decoration:none;font-weight:600}

/* Buttons (hover highlight: theme green) */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.8rem 1.1rem;border-radius:10px;text-decoration:none;font-weight:600;border:none;transition:all .2s}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,36,.08);color:var(--accent);padding:.7rem .9rem;border-radius:8px;transition:all .2s}
.btn:hover, .btn.ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Hero */
/*.hero{padding:3rem 0}*/

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero h1{font-family:'Playfair Display',serif;font-size:2.2rem;margin:0;color:var(--accent)}
.hero h1 span{color:var(--gold);font-weight:700}
.hero p{color:var(--muted);margin-top:.75rem}
.hero-image img{width:100%;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,36,.08)}

/* -------- Carousel -------- */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}
.carousel-item {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 10px;
}
.carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ center everything horizontally */
  text-align: center;  /* ✅ center the caption */
}
.carousel-card img {
  width: 100%;
  height: 240px;       /* adjust per screen */
  object-fit: contain;  /* no cropping */
  border-radius: 10px;
  background: #f9f9f9;
  transition: transform 0.3s;
}
.carousel-item:hover .carousel-card img { transform: scale(1.05); }
.carousel-item:hover { box-shadow: 0 8px 28px rgba(201,166,70,0.12); }

.carousel-dots {
  text-align: center;
  margin-top: 15px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  margin: 0 5px;
  background: rgba(201,166,70,0.3);
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dots button.active { background: #c9a646; }

/* Carousel responsive */
@media (max-width: 900px) {
  .carousel-item { flex: 0 0 33.33%; }
}
@media (max-width: 600px) {
  .carousel-item { flex: 0 0 50%; }
}
@media (max-width: 400px) {
  .carousel-item { flex: 0 0 100%; }
}

/* Carousel - show 4 per view, advance by blocks 
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.carousel-item {
  flex: 0 0 25%; /* Show 4 per view */
  box-sizing: border-box;
  padding: 10px;
}

.carousel-card img {
  width: 100%;
  height: 260px;
 object-fit: cover
  border-radius: 10px;
}

/* Golden dots */
.carousel-dots {
  text-align: center;
  margin-top: 15px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  margin: 0 5px;
  background: rgba(201, 166, 70, 0.3); /* light gold */
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dots button.active {
  background: #c9a646; /* bright gold */
}
/* Hover effect */
.carousel-item:hover .carousel-card img{transform:scale(1.05)}
.carousel-item:hover{box-shadow:0 8px 28px rgba(201,166,70,0.12)}

*/

/* Products grid 
/* ✅ Product Grid — same height, no cutting, responsive */

/* --- FORCE 4 PER ROW PRODUCT GRID --- */
/* ✅ FIX: Force 4 products per row on laptop and same height for all */
.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.2rem !important;
  justify-items: center;
  padding: 1rem;
}

/* ✅ Card styling */
.product {
  background: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: none; /* remove fixed limit */
}

.product img {
  width: 100%;
  height: 280px;          /* ✅ consistent tall rectangular size */
  object-fit: contain;    /* ✅ no cropping */
  border-radius: 10px;
  background: #f9f9f9;
  transition: transform 0.3s ease;
border: 1px solid rgba(47, 79, 70, 0.25);  /* very light theme green */
  border-radius: 10px;
  padding: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.product h3 {
  margin-top: 0.8rem;
  color: var(--accent);
  font-size: 1.05rem;
}

/* ✅ Hover effects */
.product:hover {
  box-shadow: 0 12px 36px rgba(201,166,70,0.12);
  transform: translateY(-4px);
}
.product:hover img {
  transform: scale(1.03);
}

/* ✅ Make container a bit wider to fit 4 items nicely */
.container {
  max-width: 1300px !important;
}

/* ✅ Responsive columns */
@media (max-width: 1024px) {
  .products { grid-template-columns: repeat(3, 1fr) !important; }
  .product img { height: 240px; }
}

@media (max-width: 768px) {
  .products { grid-template-columns: repeat(2, 1fr) !important; }
  .product img { height: 200px; }
}

@media (max-width: 480px) {
  .products { grid-template-columns: 1fr !important; }
  .product img { height: 180px; }
}




/* About blurb */
.about-blurb{background:linear-gradient(180deg,#fff,#fafafa);padding:2.5rem 0}
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:center}
.bullets{list-style:none;padding:0;margin:0}
.bullets li{position:relative;padding-left:1.6rem;margin:.6rem 0;color:var(--muted)}
.bullets li::before{content:'●';position:absolute;left:0;top:0;color:var(--gold)}
.testimonial blockquote{font-style:italic;color:var(--muted);background:#fff;padding:1rem;border-radius:10px;box-shadow:0 4px 12px rgba(15,23,36,.04)}

/* Help & Contact (will be included on contact page) */
.help-contact{padding:48px 0;background:transparent}
.help-contact .container{max-width:1100px;margin:0 auto}
.help-contact h2{text-align:center;font-size:2rem;color:var(--accent);margin-bottom:6px}
.help-contact h3{text-align:center;font-size:1.2rem;margin-bottom:18px;color:var(--accent);font-weight:600}
.hc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center;text-align:center;border-top:1px solid #f3f3f3;padding-top:22px}
.hc-item{padding:18px 12px}
.hc-item h4{margin-top:12px;margin-bottom:6px;font-size:1.05rem;color:var(--accent)}
.hc-icon svg{width:52px;height:52px;color:var(--accent);display:block;margin:0 auto}
.hc-phone{color:var(--muted);margin-top:6px}
.hc-note{text-align:center;color:var(--muted);margin-top:18px;max-width:900px;margin-left:auto;margin-right:auto}

/* Footer */
.site-footer{padding:2rem 0;background:#fff;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


.copyright{ align-content: center;text-align:center}
/* Responsive */
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; text-align:center} .hero-image{order:-1} .hc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.hc-grid{grid-template-columns:1fr} .hc-item{border-bottom:1px solid #f3f3f3}}



/* Fix spacing below carousel on mobile */
.featured.container {
  padding-bottom: 1rem;
}

/* Prevent overlap and make below content visible */
main > section {
  overflow: visible;
}

.carousel-card img {
  width: 100%;
  height: 240px;          /* ✅ fixed uniform height */
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;     /* stack vertically */
    text-align: center;
  }

  .testimonial img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    margin: 1rem auto;
    display: block;
  }

  .bullets li {
    text-align: left;
    margin-left: 1rem;
  }
}

/* ✅ Center the 'Featured Products' heading */
.section-title {
  text-align: center;
}

@media (max-width: 768px) {
  .product img {
    max-width: 180px;
    height: 140px;
  }
}

@media (max-width: 480px) {
  .product img {
    max-width: 160px;
    height: 120px;
  }
}

/* ---------- Products page specific overrides (place at EOF of styles.css) ---------- */

/* Make this page's container wider so 4 cards comfortably fit on laptop */
.container.products-page {
  max-width: 1320px !important;   /* wide enough for 4 columns + gaps */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Real 4-column responsive grid that will always fit inside the container */
.container.products-page .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 equal columns */
  gap: 1.25rem !important;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  margin: 0 auto;
}

/* Allow cards to use full column width (no extra max-width that causes wrap) */
.container.products-page .product {
  max-width: none !important;
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
}

/* Uniform tall rectangular images, fully visible (no crop) */
.container.products-page .product img {
  display: block;
  width: 100%;
  height: 300px;          /* same height on desktop */
  object-fit: contain;    /* show full image, never cut */
  border-radius: 10px;
  background: #f9f9f9;
}

/* responsive adjustments */
@media (max-width: 1200px) {
  .container.products-page { max-width: 1100px !important; }
  .container.products-page .product img { height: 280px; }
  .container.products-page .products { gap: 1rem; }
  .container.products-page .products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } /* fall back to 3 */
}

@media (max-width: 900px) {
  .container.products-page .products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .container.products-page .product img { height: 220px; }
}

@media (max-width: 480px) {
  .container.products-page .products { grid-template-columns: 1fr !important; }
  .container.products-page .product img { height: 180px; }
}

/* small polish: center the section title and add spacing above grid */
.container.products-page .section-title {
  text-align: center;
  margin-bottom: 1rem;
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Stack menu items vertically */
    width: 100%;
    text-align: center;
  }

  nav li {
    margin: 10px 0; /* Add spacing between items */
  }

  nav {
    padding: 10px 0; /* Optional: extra padding */
  }
}

/* Center product images on mobile */
@media (max-width: 480px) {
  .products {
    display: flex;
    flex-direction: column;
    align-items: center; /* center all product items */
    gap: 1.5rem;
  }

  .product img {
    width: 90%;       /* adjust width to fit screen */
    max-width: 250px; /* optional max size */
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
}

/* Make images and containers fit properly */
img, .container, .products {
  max-width: 100%;
  box-sizing: border-box;
}

/* here*/
/* ---------------- Mobile & Image Fixes ---------------- */
html, body {
  overflow-x: hidden; /* prevent horizontal scroll */
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.products .product img {
  width: 100%;          /* responsive width */
  max-width: 250px;     /* optional max width */
  height: auto;         /* maintain aspect ratio */
  object-fit: contain;  /* prevent cropping */
  display: block;
  margin: 0 auto;       /* center image */
}

/* Mobile specific: one image per row, centered */
@media (max-width: 480px) {
  .products {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .products .product img {
    max-width: 90%; /* fit smaller screens */
  }
}
/*here*/
/* ✅ FINAL FIX — Perfect carousel image display for all devices */
.carousel-card img {
  width: 100%;
  height: auto;           /* keep aspect ratio */
  max-height: 320px;      /* limit height for laptop */
  object-fit: contain;    /* never crop vertically or horizontally */
  border-radius: 10px;
  background: #f9f9f9;
  transition: transform 0.3s ease;
}

/* ✅ Adjust per device for balance */
@media (max-width: 1024px) {
  .carousel-card img {
    max-height: 280px;
  }
}
@media (max-width: 768px) {
  .carousel-card img {
    max-height: 220px;
  }
}
@media (max-width: 480px) {
  .carousel-card img {
    max-height: 180px;
  }
}

/* ✅ Keep navigation menu in one horizontal line on all devices */

/* ===== Small-screen (360px) targeted fix — keeps logo unchanged ===== */
@media (max-width: 372px) {
  /* allow children to shrink if needed (doesn't change logo) */
  .header-inner,
  .header-inner > * {
    min-width: 0;          /* critical: allow flex children to shrink */
  }

  /* tighten header inner padding a touch so more room for nav */
  .header-inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.4rem;
  }

  /* make nav extremely compact but still tappable & scrollable */
  .nav {
    gap: 0.12rem;
    padding: 0.2rem 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    min-width: 0;
  }

  /* allow links to shrink a bit, reduce padding & font slightly */
  .nav a {
    flex: 0 1 auto;        /* ALLOW shrinking (important) */
    min-width: 0;          /* let them compress if needed */
    padding: 0.28rem 0.42rem;
    font-size: 0.88rem;
    line-height: 1;
    white-space: nowrap;
  }

  /* ensure ghost button follows same sizing */
  .nav .btn.ghost {
    padding: 0.28rem 0.42rem;
    height: auto;
    display: inline-flex;
    align-items: center;
  }

  /* if still slightly overflowing, reduce text transform/weight */
  .nav a span, .nav a i { display: inline; } /* no visual changes, safety */
}

/* new*/
/* ✅ Refined spacing for image & caption */
.carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.carousel-card img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  margin-bottom: 6px; /* tighter spacing */
}

.carousel-card h3,
.carousel-card p,
.carousel-card span {
  margin-top: 0; /* remove extra top gap */
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Optional – adjust on small devices */
@media (max-width: 768px) {
  .carousel-card h3,
  .carousel-card p,
  .carousel-card span {
    font-size: 0.9rem;
  }
}
/*here new code*/
/* =========================================
   RESPONSIVE HEADER (All Devices)
   ========================================= */

/* ---------- 1️⃣ Small Phones (up to 480px) ---------- */
@media (max-width: 480px) {
  .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 0.5rem;
  }

  .logo img {
    max-height: 85px;
    height: auto;
    width: auto;
  }

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav a {
    font-size: 0.9rem;
    padding: 0.3rem 0.55rem;
    flex: 0 0 auto;
  }

  .nav .btn.ghost {
    font-size: 0.9rem;
    padding: 0.
/*here*/
/* ==== Product caption size improvement ==== */
.products .product h3,
.carousel-caption h3,
.carousel .caption {
  font-size: 1.05rem;          /* slightly bigger text */
  font-weight: 600;            /* make it a bit bolder */
  letter-spacing: 0.3px;       /* clean, elegant spacing */
  color: var(--accent);        /* match your green theme */
}

/* optional: on larger screens, make them a bit bigger */
@media (min-width: 768px) {
  .products .product h3,
  .carousel-caption h3,
  .carousel .caption {
    font-size: 1.15rem;
  }
}