/* =========================================================
   NRI Candles — project overrides on top of the Anvogue theme
   ========================================================= */

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); }

/* WhatsApp brand green for buttons (theme .bg-green may differ) */
.whatsapp-btn.bg-green,
.button-main.bg-green { background-color: #25d366 !important; border-color: #25d366 !important; }
.whatsapp-btn.bg-green:hover,
.button-main.bg-green:hover { background-color: #1fb457 !important; }
.bg-green.cta-block, .cta-block.bg-green { background-color: #1faa52 !important; }

/* Active nav link */
.menu-main a.active { color: #000; font-weight: 700; }

/* Mobile slide-in menu */
.menu-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 200;
}
.menu-mobile-overlay.open { opacity: 1; visibility: visible; }
.menu-mobile-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 80%;
  max-width: 320px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.menu-mobile-overlay.open .menu-mobile-panel { transform: translateX(0); }

/* Product detail tabs */
.menu-tab .tab-item { transition: all 0.25s ease; }
.menu-tab .tab-item.active { background: #000; color: #fff; }

/* Prose content on pages / product description */
.rte h1, .rte h2, .rte h3 { font-weight: 600; margin: 1.2em 0 0.5em; line-height: 1.3; }
.rte h2 { font-size: 1.5rem; }
.rte h3 { font-size: 1.25rem; }
.rte p { margin: 0 0 1em; }
.rte ul, .rte ol { margin: 0 0 1em 1.25em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li { margin-bottom: 0.4em; }
.rte a { color: #1faa52; text-decoration: underline; }
.rte a.button-main, .rte .button-main, .rte .button-main:hover { text-decoration: none; color: #fff; }
.rte img { border-radius: 12px; margin: 1em 0; }

/* Utility fallbacks (in case theme build lacks them) */
.text-success { color: #1faa52; }

/* Product grid — defined here so it never depends on purged Tailwind utilities */
.nri-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 640px) {
  .nri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .nri-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
}

/* Product card image (overlapping hover-swap, fixed 3:4 ratio) */
.product-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
}
.product-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.product-card-img .img-hover { opacity: 0; }
.product-thumb:hover .product-card-img .img-hover { opacity: 1; }
.product-thumb:hover .product-card-img img { transform: scale(1.04); }

/* Gallery thumbnails */
.thumb-item { transition: border-color 0.2s ease; }
.thumb-item:hover { border-color: #999 !important; }

/* Keep hero readable if theme display sizes are large */
@media (max-width: 767px) {
  .text-display { font-size: 2.25rem; }
}