@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #333;
  margin: 0;
}

.font-playfair { font-family: 'Playfair Display', serif; }

.hero-section {
  background: url('banner.jpg') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}

.blob1 { width: 420px; height: 420px; top: -80px; right: -60px; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.55) 0%, rgba(255,180,210,0.3) 60%, transparent 80%); border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
.blob2 { width: 300px; height: 300px; top: 80px; right: 80px; background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.4) 0%, rgba(255,150,190,0.2) 60%, transparent 80%); border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
.blob3 { width: 200px; height: 350px; bottom: -40px; left: 180px; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.3) 0%, transparent 70%); border-radius: 50% 50% 40% 60% / 40% 60% 40% 60%; }
.blob4 { width: 350px; height: 250px; top: 20px; left: 20px; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.2) 0%, transparent 70%); border-radius: 70% 30% 50% 50% / 50% 50% 70% 30%; }

.hero-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.pill-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.85); border: 1.5px solid #ffb3cc;
  border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600;
  color: #d63384; letter-spacing: 0.04em;
}

.btn-primary {
  background: linear-gradient(135deg, #e8306a, #c91a5a);
  color: #fff; border: none; border-radius: 999px;
  padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 18px rgba(201,26,90,0.35);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(201,26,90,0.45); }

.btn-ghost {
  background: transparent; border: none; color: #555; font-size: 14px;
  cursor: pointer; padding: 12px 16px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}

.btn-ghost:hover { color: #e8306a; }

.hero-img-circle {
  border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.feature-card {
  background: #fff; border-radius: 16px; padding: 26px 22px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}

.feature-card:hover { box-shadow: 0 6px 28px rgba(232,48,106,0.12); transform: translateY(-2px); }

.form-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #888; text-transform: uppercase; margin-bottom: 6px; display: block;
}

.form-input {
  width: 100%; border: 1.5px solid #e8d0da; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; background: #fff;
}

.form-input:focus { border-color: #e8306a; box-shadow: 0 0 0 3px rgba(232,48,106,0.1); }

.product-card {
  border: 1.5px solid #e8d0da; border-radius: 12px; padding: 14px 16px;
  cursor: pointer; transition: all 0.2s; background: #fff;
}

.product-card:hover { border-color: #e8306a; }

.product-card.selected {
  border-color: #e8306a; background: #fff5f8;
  box-shadow: 0 0 0 3px rgba(232,48,106,0.1);
}

.qty-btn {
  width: 34px; height: 34px; border: 1.5px solid #e8d0da;
  border-radius: 8px; background: #fff; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; color: #555;
}

.qty-btn:hover { border-color: #e8306a; color: #e8306a; }

.upload-zone {
  border: 2px dashed #c8e6c9; border-radius: 12px;
  padding: 32px 20px; text-align: center; cursor: pointer;
  background: #f9fdf9; transition: all 0.2s;
}

.upload-zone:hover, .upload-zone.dragover { border-color: #4caf50; background: #f1fdf1; }
.upload-zone.has-file { border-color: #4caf50; background: #f1fdf1; }

.total-box {
  border: 1.5px solid #f0d8e0; border-radius: 14px;
  padding: 18px 22px; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
}

.review-card {
  background: #fff; border-radius: 16px; padding: 22px 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.star { color: #f59e0b; font-size: 14px; }

footer { background: #fff; border-top: 1px solid #f0e0e8; padding: 32px 20px 20px; text-align: center; }

#stickyOrderBtn {
  position: fixed; right: 24px; bottom: 28px; z-index: 999;
  background: #1a1a2e; color: #fff; border: none; border-radius: 999px;
  padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0e0e8; padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between;
}

.nav-logo { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #1a1a2e; }
.nav-logo span { color: #e8306a; }

.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: #e8306a; text-transform: uppercase; margin-bottom: 10px;
}

.italic-pink { font-style: italic; color: #e8306a; }

#successModal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
}

#successModal.show { display: flex; }

.modal-box {
  background: #fff; border-radius: 20px; padding: 40px 36px;
  max-width: 420px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.cropper-modal {
  background: rgba(15, 23, 42, 0.92);
}

.crop-preview-circle {
  border-radius: 9999px;
  overflow: hidden;
  border: 3px solid #e8306a;
}

@media (max-width: 768px) {
  .mobile-hide{
    display: none !important;
  }
  nav {
    padding: 14px 20px;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-section > div {
    padding: 70px 20px 60px !important;
    flex-direction: column !important;
  }

  .hero-section > div:last-child {
    align-items: center !important;
  }

  #order,
  #features,
  .reviews-section {
    padding: 72px 20px !important;
  }

  .total-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}