/* =========================
   RESET (KEEP)
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #111;
  background: #fff;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

/* =========================
   HERO (INDEX)
========================= */
header {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('images/set1/background2.jpeg') center/cover no-repeat;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
}

/* hero content spacing (Bootstrap handles center) */
.hero-caption {
  font-size: 0.9rem; /* FIXED (was 0.15rem - too small) */
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

/* =========================
   REMOVE OLD CUSTOM NAVBAR STYLING
   (Bootstrap now handles it)
========================= */
/* DELETE conflict styles */
.navbar,
.nav-menu,
.nav-btn,
.logo {
  /* intentionally left minimal for Bootstrap */
}

.logo img {
  height: 60px;
  width: auto;
}

/* NAVBAR LINK STYLE */
.navbar {
  z-index: 1000;
}

/* underline (hidden initially) */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #f3ede0; /* soft luxury tone */
  transition: width 0.3s ease;
}

/* hover effect */
.navbar .nav-link:hover {
  color: #f3ede0;
}

.navbar .nav-link:hover::after {
  width: 100%;
}

.navbar .nav-link {
  position: relative;
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
}

.card-img-top {
  height: 220px;
  object-fit: cover;
}

.btn-outline-light {
  border: 1px solid rgba(255,255,255,0.7);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
}

.navbar-logo {
  height: 110px;   /* adjust this value */
  width: auto;
}

.img-box {
  width: 100%;
  height: 430px;
  overflow: hidden;
  border-radius: 6px;
}

.gallery-img {
  width: 100%;
  height: 100%;      /* makes all same height */
  object-fit: cover;  /* crops nicely */
  display: block;
}

.shop-btn {
  border: 1px solid rgba(255,255,255,0.8);
  color: rgb(245, 244, 239);
  background: transparent;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 4px;
  transition: 0.3s;
}

.shop-btn:hover {
  background: rgba(215, 203, 73, 0);
  color: #e3ce49;
  border: 1px solid rgba(211, 198, 53, 0.8);
}

/* =========================
   GEMS HERO
========================= */
.gems-hero {
  min-height: 60vh;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('images/set1/background2.jpeg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

/* =========================
   SECTIONS
========================= */
section {
  padding: 80px 0;
}

/* =========================
   GALLERY
========================= */
.product-gallery img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.product-gallery img:hover {
  transform: scale(1.03);
}

/* =========================
   BUTTON BASE (optional override)
========================= */
.btn {
  border-radius: 4px;
}

/* =========================
   GEMS PAGE CARDS (IF STILL USED)
   (Bootstrap now replaces most of this)
========================= */
.gem-card {
  transition: 0.3s;
}

.gem-card:hover {
  transform: translateY(-5px);
}

/* FIX: price was invisible before */
.price {
  font-weight: bold;
  color: #111;
}

/* =========================
   MOBILE FIXES
========================= */
@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  .hero-caption {
    font-size: 0.85rem;
  }

  .gallery-img {
    height: 200px;
  }
}

.offcanvas {
  --bs-offcanvas-width: 66.66vw; /* 2/3 screen */
  background-color: #dfd7a9; /* deep luxury black */
}

/* Default (mobile) */
.offcanvas-start {
  width: 66.66vw;   /* 2/3 of screen */
  max-width: 400px; /* prevents it getting too wide on tablets */
}

/* Small phones */
@media (max-width: 576px) {
  .offcanvas {
    --bs-offcanvas-width: 70vw;
  }
}

/* Tablets */
@media (min-width: 577px) {
  .offcanvas-start {
    width: 400px;
  }
}

.offcanvas .nav-link {
  font-size: 1.1rem;
  padding: 12px 0;
  color: white;
}

.offcanvas .nav-link:hover {
  color: #f3ede0;
}

.offcanvas-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push footer to bottom */
.menu-footer {
  margin-top: auto;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  padding-top: 20px;
}