/* Shared styles for Kaarving site */

:root {
  --beige-bg: #F5F5DC;
  --beige-soft: #EFE8D8;
  --maroon-primary: #800000;
  --maroon-dark: #5C0000;
  --maroon: #6b0f1a;
  --maroon-darker: #4f0b13;
  --nav-maroon: #2c0a12;
  --gold: #C6A75E;
  --nav-h: 84px; /* updated by JS */
}

/* Navbar consistent theme across all pages */
#navbar {
  background-color: var(--nav-maroon) !important;
}

#navbar a,
#navbar button {
  color: #ffffff !important;
}

/* Full-screen mega menu panel */
#megaMenu {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--nav-h) !important;
  width: 100vw !important;
  height: calc(100vh - var(--nav-h)) !important;
  overflow-y: auto;
  border-radius: 0 !important;
  padding: 28px 28px;
  z-index: 9999;

  background-color: var(--beige-soft) !important;
  border-top: 1px solid rgba(128, 0, 0, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Keep content nicely centered on big screens */
#megaMenu .mega-grid {
  max-width: 1300px;
  margin: 0 auto;
}

/* Make all links readable */
#megaMenu a {
  color: var(--maroon-primary) !important;
}

#megaMenu a:hover {
  background-color: rgba(128, 0, 0, 0.05);
  color: var(--maroon-dark) !important;
}

/* Vertical separators between main columns */
#megaMenu .mega-col {
  padding-left: 18px;
}

#megaMenu .mega-col:first-child {
  padding-left: 0;
}

@media (min-width: 768px) {
  #megaMenu .mega-col + .mega-col {
    border-left: 1px solid rgba(128, 0, 0, 0.14);
  }
}

/* Divider between the two God-statue inner columns */
#megaMenu .god-split {
  border-left: 1px solid rgba(128, 0, 0, 0.14);
}

/* When mega menu is open: hide logo + lock background scroll */
body.menu-open {
  overflow: hidden;
}

body.menu-open .site-logo {
  display: none !important;
}

/* -------------------- Product page card frames -------------------- */
.product-card{
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84));
  border: 1px solid rgba(107, 15, 26, 0.14);
  box-shadow: 0 10px 30px rgba(44,10,18,0.10);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.product-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(198,167,94,0.55), rgba(107,15,26,0.22), rgba(198,167,94,0.30));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

.product-card:hover{
  transform: translateY(-6px);
  border-color: rgba(198, 167, 94, 0.70);
  box-shadow: 0 18px 45px rgba(44,10,18,0.18);
}

.product-img{
  background: radial-gradient(circle at 30% 10%, rgba(198,167,94,0.18) 0%, rgba(239,232,216,0.35) 50%, rgba(245,245,220,0.95) 100%);
}

.product-title{
  color: var(--maroon);
}


/* ===================================== */
/*      ROYAL GOLD BROAD FRAME STYLE     */
/* ===================================== */

.product-card {
    position: relative !important;
    background: #f3d9dc !important; /* Light maroon background */
    border-radius: 20px !important;
    padding: 25px !important;
    text-align: center;
    transition: 0.4s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-shadow: 0 20px 45px rgba(0,0,0,0.18) !important;
}

/* Broad Golden Outer Frame */
.product-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 26px !important;
    background: linear-gradient(
        135deg,
        #f9e27d,
        #d4af37,
        #b8860b,
        #d4af37,
        #f9e27d
    ) !important;
    z-index: -1 !important;
}

/* Inner subtle gold line */
.product-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 14px !important;
    border: 2px solid rgba(212,175,55,0.6) !important;
    pointer-events: none !important;
}

/* Hover effect */
.product-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.28) !important;
}

/* Image Styling */
.product-card img {
    width: 100% !important;
    height: 320px !important;
    object-fit: contain !important;
    transition: 0.4s ease !important;
}

.product-card:hover img {
    transform: scale(1.05) !important;
}

/* Statue Name */
.product-card h3 {
    margin-top: 18px !important;
    color: #7a1e2c !important;
    font-size: 21px !important;
    letter-spacing: 0.5px !important;
}

.product-card p {
    font-size: 8px !important;
    color: #F5F5DC !important;
    line-height: 1.2 !important;
}

/* Footer same as navbar */
footer {
    background-color: #2c0a12 !important;
    color: white !important;
}

/* ================================
   Simple highlighted image popup (like your reference screenshot)
   Focus: image + arrows + caption + Ask for price
   Used on collections/ganesh-ji.html
   ================================ */
.img-popup { position: fixed; inset: 0; display: none; z-index: 9999; }
.img-popup.is-open { display: block; }
.img-popup__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.72);
}

.img-popup__viewer{
  position: relative;
  width: min(980px, 94vw);
  margin: 5vh auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.img-popup__imageWrap{
  position: relative;
  width: min(760px, 92vw);
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.85);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.35);
}

.img-popup__imageWrap img{
  width: 100%;
  height: min(72vh, 640px);
  object-fit: contain;
  background: rgba(0,0,0,0.9);
  display:block;
}

.img-popup__nav{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 34px;
  line-height: 54px;
  text-align:center;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.10);
  transition: transform .15s ease, background .15s ease;
  user-select:none;
}
.img-popup__nav:hover{ transform: scale(1.06); background: rgba(255,255,255,0.16); }

.img-popup__close{
    position:absolute;
    top:15px;
    right:15px;
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.75);
    color:white;
    font-size:30px;
    font-weight:bold;
    cursor:pointer;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
}

.img-popup__caption{
  position: relative;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  background: #f5f0e6;
}

.img-popup__captionText{
  display:flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  color: #6b0f1a;
  font-family: Georgia, serif;
}

.img-popup__code{ font-size: 14px; opacity: 0.9; }
.img-popup__name{ font-size: 16px; font-weight: 700; }

.img-popup__ask{
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.35);
  cursor:pointer;
  background: #117a2a;
  color: #fff;
  font-weight: 800;
}
.img-popup__ask:hover{ filter: brightness(1.05); }

@media (max-width: 640px){
  .img-popup__viewer{ gap: 10px; }
  .img-popup__nav{ width: 44px; height: 44px; font-size: 28px; line-height: 44px; }
  .img-popup__close{ bottom: -52px; }
}

/* =============================
   About Us Modal (scroll + premium look)
   ============================= */
.about-modal{ display:flex; align-items:flex-start; justify-content:center; }
.about-modal .about-overlay{ transition: opacity 180ms ease; }
.about-modal .about-card{ transform: translateY(14px) scale(0.98); opacity: 0; transition: transform 200ms ease, opacity 200ms ease; }

.about-modal.about-open .about-overlay{ opacity: 1; }
.about-modal.about-open .about-card{ transform: translateY(0) scale(1); opacity: 1; }

/* Scrollable content area */
.about-scroll{ max-height: calc(88vh - 92px); /* header approx */ -webkit-overflow-scrolling: touch; }

/* Subtle beige pattern (very light) */
.about-pattern{
  background-image:
    radial-gradient(circle at 20px 20px, rgba(107,15,26,0.20) 1px, transparent 1.5px),
    radial-gradient(circle at 60px 60px, rgba(215,178,106,0.22) 1px, transparent 1.5px);
  background-size: 80px 80px;
}

/* Nice scrollbar (WebKit) */
.about-scroll::-webkit-scrollbar{ width: 10px; }
.about-scroll::-webkit-scrollbar-track{ background: rgba(107,15,26,0.06); border-radius: 999px; }
.about-scroll::-webkit-scrollbar-thumb{ background: rgba(107,15,26,0.35); border-radius: 999px; border: 2px solid rgba(246,239,226,0.9); }
.about-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(107,15,26,0.50); }