:root{
  --bg:#F7F3EE;
  --card:#FFFFFF;
  --text:#1A1A1A;
  --muted:#6B6B6B;
  --gold:#B08D57;
  --dark:#111111;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #FCFCFC;
  color:var(--text);
}
/**************** Loader ***************************/

/* Loader overlay (simple, wedding-theme neutral white) */
   #loader {
     position: fixed;
     inset: 0;
     display: grid;
     place-items: center;
     background: var(--loader-bg);
     z-index: 9999;
     transition: opacity 0.6s ease;
   }
   #loader[data-hidden="true"] {
     opacity: 0;
     pointer-events: none;
   }

   .loader-inner {
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     text-align: center;
     background: #fff;
   }

   /* SVG inside the loader scales nicely on small screens */
   .loader-svg {
     width: 260px;
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto 8px;
   }

   /* Optional caption under the SVG (clean, subtle) */
   .loader-caption {
     font-family: 'Inter', system-ui, sans-serif;
     color: #1A1A1A;
     font-size: 16px;
     margin-top: 6px;
   }

   /* Small screens tweak */
   @media (max-width: 420px) {
     .loader-caption { font-size: 14px; }
   }
   /***********************************************/
/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:9990;
  background:#111111;
  color:#fff;
  padding:18px 20px;
  box-shadow:0 5px 30px rgba(0,0,0,.25);
}
header .wrap{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h1{font-size:18px;margin:0;letter-spacing:.5px}
header p{margin:0;font-size:12px;opacity:.75}
.logo-img{
  width: 200px;
}
.intro{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px 0;
}
.intro-img img{
  max-width: 100%
}
.intro-heading{
  margin: 0;
  margin-bottom: 10px;
  font-weight: normal !important;
}
.intro-text{
  margin: 0;
  margin-bottom: 20px;
}
/* LAYOUT */
.container{max-width:1200px;margin:auto;padding:30px 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}


/* CARD */
.card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.25s;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(176,141,87,.25);
}
.card:hover{transform:translateY(-5px)}

/* CAROUSEL */
.carousel{
  position:relative;
  overflow:hidden;
}

.carousel-track{
  display:flex;
  transition:transform 0.5s ease;
  will-change:transform;
}

.carousel img{
  width:100%;
  flex-shrink:0;
  object-fit:cover;
}
.carousel img.active{opacity:1}
.dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.05); /* glass tint */
  backdrop-filter:blur(10px);        /* blur effect */
  -webkit-backdrop-filter:blur(10px); /* Safari support */
}
.dots span{
  width:7px;height:7px;border-radius:50%;
  background:#6B6B6B;cursor:pointer
}
.dots span.active{background:#D4AF37}

/* CONTENT */
.content{padding:14px 16px 0 16px}
.title{font-size:16px;font-weight:700;margin-bottom:6px;color:#111}
.desc{font-size:13px;line-height: 15px;color:#6B6B6B;margin-bottom:12px;min-height: 46px;}
/* SIZE OPTIONS */
.sizes{
  display:grid;
  grid-template-columns:25% 75%;
  gap:8px;
  margin-bottom:14px;
  min-height: 58px;
}
.sizes-2{
  display:grid;
  grid-template-columns:15% 85%;
  gap:2px;
  margin-bottom:14px;
  min-height: 58px;
}
/* LEFT COLUMN TITLE */
.sizes-title{
  grid-row:span 1;
  border:1px solid rgba(176,141,87,.25);
  border-radius:12px;
  padding:8px 10px 8px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:left;
  font-size:12px;
  letter-spacing:.8px;
  color:#1E352F;
  background-color: #fff;
}
/* RIGHT GRID */
.sizes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.sizes-grid-2{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
/* SIZE BOX */
.size{
  background:#fff;
  border:1px solid rgba(137,59,72,.25);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}
.size-2{
  padding:12px 6px;
  gap:2px;
  font-size:11px;
}
.size .line{
  display:flex;
  align-items:center;
  gap:6px;
  color:#1A1A1A;
}
.size i{color:#517170; font-size: 15px}

/* BUTTONS FULL BLEED */
.buttons{
  display:flex;
  width:calc(100% + 32px);
  margin:12px -16px 0 -16px;
  gap:0;
}
.btn{
  flex:1;
  height:44px;
  border:none;
  cursor:pointer;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  color:#fff;
  text-decoration: none;
}
.btn.whatsapp{
  background:#D4AF37;
  border-bottom-left-radius:18px;
}
.fa-brands.fa-whatsapp{
  font-size: 17px;
}
.fa-regular.fa-circle-play{
  font-size: 14px;
}
.btn.video{
  background:#1E352F;
  border-bottom-right-radius:18px;
}
.fancybox__content>.carousel__button.is-close{
  right: 10px !important;
  top: 10px !important;
}

/* FOOTER */
footer{
  margin-top:40px;
  background:#111;
  color:#fff;
  text-align:center;
  padding:18px;
  font-size:12px;
}


/***********************/
/* ACTION AREA */
.actions{
  display:flex;
  margin:14px -16px 0 -16px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* PRIMARY BUTTON */
.btn.primary{
  width:50%;
  border:none;
  background:#111;
  color:#fff;
  height:58px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:11px;
  font-weight:600;

  cursor:pointer;
}

.btn.primary i{
  font-size:16px;
}

/* RIGHT SIDE MINI ACTIONS */
/* ACTION BUTTON ROW */
.mini-actions{
  width:100%;
  display:flex;
}

/* SMALL ICON BUTTONS */
.icon-btn{
  flex:1; /* equal width */
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  background-color: #FADADD;
  color:#111;
  font-size:10px;
  font-weight:500;
  border-right:1px solid rgba(0,0,0,.08);
  transition:.25s ease;
}

.icon-btn:nth-child(3),
.icon-btn:nth-child(4){
  border-bottom:none;
}

.icon-btn i{
  font-size:15px;
  color:#B08D57;
}

.icon-btn:hover{
  background:#E6C7B6;
}
/*************************************/
/********************** Petals ***********************/
/* Demo content */
.content{
    font-size:50px;
    color:#b56a82;
    position:relative;
    z-index:2;
}
#petals-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:9988;
}
.petal{
    position:absolute;
    top:-50px;
    border-radius:60% 0 60% 0;
    opacity:.75; /* reduced base opacity */
    animation-name:fall;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
}
@keyframes fall{
    0%{
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25%{
        transform: translateX(-20px) translateY(25vh) rotate(90deg);
    }
    50%{
        transform: translateX(15px) translateY(50vh) rotate(180deg);
    }
    75%{
        transform: translateX(-10px) translateY(75vh) rotate(270deg);
    }
    100%{
        transform: translateX(25px) translateY(110vh) rotate(360deg);
    }
}
/********************** End Petals ***********************/
@media (max-width: 768px) {
.container {
    padding: 30px 22px;
}
.intro-heading{
  line-height: 26px;
  margin-top: 4px;
}
.grid{gap:32px}
.fancybox__container {
  --fancybox-bg: #000;
  --fancybox-content-padding: 0px;
}
.fancybox__content {
  padding: 0 !important;
  width: 95vw !important;
  max-width: 95vw !important;
  height: 95vh !important;
}
.fancybox__html5video,
.fancybox__content video {
  width: 95vw !important;
  height: 95vh !important;
  object-fit: contain;
}
.fancybox__content>.carousel__button.is-close {
    top: 45px !important;
  }
}