:root{
  --brand-yellow: #FFD44D;   /* mature warm yellow */
  --brand-yellow-dark: #E4B33A;
  --muted: #6b7280;
  --card-radius: 12px;
  --max-hero-height: 100vh;
  --nav-height: 72px;
}

/* Body */
body{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f8f9fa;
  color: #222;
}

/* HERO SECTION (nav + carousel fill 100vh) */
.hero-100vh{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-height); /* ensures hero is not pushed down by fixed nav */
}

/* make carousel occupy full remaining height under navbar so navbar + carousel = 100vh */
.hero-carousel{
  flex: 1 1 auto;
  position: relative;
}

.hero-img{
  object-fit: cover;
  height: calc(100vh - var(--nav-height)) !important;
  width: 100%;
  filter: brightness(0.9);
}

.hero-overlay{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35));
}

/* caption sits centered vertically */
.hero-caption{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8%;
  text-align: left;
  color: #fff;
  z-index: 5;
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* Order/CTA button style */
.btn-warning{
  background: var(--brand-yellow);
  border-color: var(--brand-yellow-dark);
  color: #1f1f1f;
}
.btn-warning:hover, .btn-warning:focus{
  background: var(--brand-yellow-dark);
  color: #fff;
  border-color: var(--brand-yellow-dark);
}

/* NAVBAR (updated to remain fixed + mobile overlay) */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand .brand-mark{ width: 42px; height: 42px; }
.navbar .nav-link { color: #333; }
.navbar .nav-link i { font-size: 1.05rem; }
.hoverableLink:hover{ background-color: rgba(0,0,0,0.35); border-radius:5px; }

/* MOBILE NAV OVERLAY */
@media (max-width: 992px){
  .navbar-collapse {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    background: rgba(255,255,255,0.98);
    padding: 25px;
    overflow-y: auto;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
  }

  .navbar-collapse.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .navbar-nav .nav-link {
    padding: 12px 0;
    font-size: 1.15rem;
  }
}

/* PRODUCT CARD */
.product-card{
  border-radius: var(--card-radius);
  overflow: hidden;
}

.product-img-wrap{
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  position: relative;
  background: #f0f0f0; /* fallback background */
}

.product-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .35s ease;
  display: block;
  background: #fff;
}

/* overlay shows on hover */
.product-overlay{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .22s ease;
}

/* Keep hover only for pointer devices */
@media (hover: hover) {
  .product-card:hover .product-overlay { opacity: 1; }
  .product-card:hover .product-img { transform: scale(1.06); }
}

/* overlay icons */
.product-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, opacity .25s ease;
}

/* small shadow for icons */
.product-overlay .product-icon { 
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* ICON HOVER EFFECT */
.product-overlay:hover .product-icon {
  transform: translateY(-4px);
  opacity: 1;
}

/* Wishlist button */
.wishlist-btn{ border-radius: 8px; }

/* zoomed image animation */
.zoomed-image{
  transform: scale(.85);
  transition: transform .45s cubic-bezier(.2,.9,.2,1);
  max-height: 80vh;
}
.modal.show .zoomed-image{ transform: scale(1); }

/* view modal image */
.view-image{ object-fit: cover; height: auto; }

/* small responsive improvements */
@media (max-width: 767px){
  .hero-caption{
    left: 6%;
    right: 6%;
    text-align:center;
    transform: translateY(-50%);
    width: calc(100% - 12%);
    top: 46%;
  }
  .hero-caption h2{ font-size: 1.6rem; }
  .product-img{ height: 180px; }
}

/* accessibility focus */
button:focus, a:focus, .btn:focus{
  box-shadow: 0 0 0 0.2rem rgba(255,212,77,0.25);
  outline: none;
}