/* ============================================================
   Dr. Haneul — Immersive Hero · Minimal White Overlay
   ============================================================
   
   Hero image sources (priority order):
   1. Server-uploaded image (via /admin CRM → heroImageUrl)
   2. Admin panel base64 upload (.hero-lifestyle)
   3. Static fallback /assets/img/hero.jpg
   
   ============================================================ */

/* ── Hero: Full-Bleed ── */
.hero {
  background-color: #f7f3ec !important;
  background-image: url('/assets/img/hero.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ── Admin base64 Image → Full Hero (not 10% opacity) ── */
.hero-lifestyle {
  opacity: 1 !important;
  filter: none !important;
  z-index: 1 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ── Minimal White Overlay ── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(247, 243, 236, .70) 0%,
      rgba(247, 243, 236, .40) 25%,
      rgba(247, 243, 236, .08) 45%,
      transparent 58%
    ),
    linear-gradient(to top,
      rgba(247, 243, 236, .40) 0%,
      transparent 15%
    );
}

/* ── Kill Old Layers ── */
.hero-bg, .hero-grain, .hero-canvas {
  display: none !important;
}

/* ── HIDE Product Bottles ── */
.hero-visual,
.hero .hero-visual,
div.hero-visual {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

.hero-photo-glow {
  display: none !important;
}

/* ── Content: Full-Width Left-Aligned ── */
.hero-content {
  max-width: 100% !important;
  padding: 120px clamp(40px, 8vw, 160px) 100px !important;
  justify-content: flex-start !important;
}

/* ── Text: Original Dark Brand Colors ── */
.hero-text { max-width: 620px !important; }
.hero-ey { color: var(--gold, #B19561) !important; }
.hero-ey::before { background: var(--gold, #B19561) !important; }
.hero h1 { color: #2c2418 !important; text-shadow: none !important; }
.hero h1 em { color: var(--gold, #A28446) !important; }
.hero-sub { color: #756b5f !important; max-width: 480px !important; text-shadow: none !important; }

/* ── Buttons ── */
.hero-btn1 { box-shadow: 0 4px 20px rgba(163,132,70,.25) !important; }
.hero-btn2 { border-color: rgba(60,50,35,.25) !important; color: #3c3223 !important; }
.hero-btn2:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(177,149,97,.04) !important; }

/* ── Trust Bar ── */
.hero-trust-num { color: var(--gold, #B19561) !important; }
.hero-trust-lbl { color: #756b5f !important; }

/* ── Scroll ── */
.hero-scroll-txt { color: #756b5f !important; }
.hero-scroll-bar { background: linear-gradient(180deg, var(--gold, #B19561), transparent) !important; }
.hero-scroll-bar::after { background: var(--gold, #B19561) !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero { background-position: center right !important; }
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(247,243,236,.75) 0%, rgba(247,243,236,.40) 35%,
      rgba(247,243,236,.08) 55%, rgba(247,243,236,.45) 100%
    ) !important;
  }
  .hero-content {
    padding: 100px 24px 60px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .hero-text { max-width: 100% !important; display: flex; flex-direction: column; align-items: center; }
  .hero-sub { max-width: 100% !important; }
  .hero-btns { justify-content: center !important; }
  .hero-trust { justify-content: center !important; flex-wrap: wrap; gap: 20px !important; }
}

/* ── Large Screens ── */
@media (min-width: 1600px) {
  .hero-content { padding: 140px clamp(120px, 10vw, 240px) 120px !important; }
  .hero-text { max-width: 700px !important; }
}