/* 크리스마스 페이지/상품 전체에 눈 효과 (화면 전체) */
.hs-snow-xmas {
  position: relative;
}

/* 레이어 1: 작은 눈, 살짝 촘촘 */
.hs-snow-xmas::before,
.hs-snow-xmas::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999; /* 화면 맨 위 레이어 */
}

/* 작은 눈 + 중간 눈 (배경 전체) */
.hs-snow-xmas::before {
  background-image:
    /* 작은 눈들 */ radial-gradient(
      2px 2px at 10% 20%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 51%
    ),
    radial-gradient(
      2px 2px at 30% 0%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 51%
    ),
    radial-gradient(
      2px 2px at 80% 30%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 51%
    ),
    radial-gradient(
      2px 2px at 50% 80%,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 51%
    ),
    /* 중간 눈들 */
      radial-gradient(
        3px 3px at 20% 60%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 51%
      ),
    radial-gradient(
      3px 3px at 70% 10%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 51%
    );

  background-repeat: repeat;
  background-size: 260px 260px;
  animation: hs-snow-fall-small 22s linear infinite;
  opacity: 0.8;
  will-change: background-position;
}

/* 레이어 2: 큰 눈, 화면 전체를 느리게 가로지름 */
.hs-snow-xmas::after {
  background-image: radial-gradient(
      5px 5px at 15% 10%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 51%
    ),
    radial-gradient(
      6px 6px at 40% 30%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 51%
    ),
    radial-gradient(
      5px 5px at 75% 20%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 51%
    ),
    radial-gradient(
      6px 6px at 60% 70%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 51%
    );

  background-repeat: repeat;
  background-size: 420px 420px; /* 눈 간격 더 넓게 → 사진 위로 듬성듬성 */
  animation: hs-snow-fall-big 16s linear infinite;
  opacity: 0.9; /* 배경은 그대로, 눈만 또렷하게 */
}

/* 세로로 천천히 떨어지는 작은 눈 */
@keyframes hs-snow-fall-small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 260px;
  }
}

/* 대각선으로 화면 전체를 가로지르는 큰 눈 */
@keyframes hs-snow-fall-big {
  0% {
    transform: translate3d(-60px, -140px, 0);
  }
  100% {
    transform: translate3d(60px, 140px, 0);
  }
}

/* 모바일에서는 조금만 약하게 */
@media (max-width: 767px) {
  .hs-snow-xmas::before {
    background-size: 320px 320px;
    animation: hs-snow-fall-small-m 22s linear infinite;
  }
  .hs-snow-xmas::after {
    background-size: 360px 360px;
    animation: hs-snow-fall-big-m 20s linear infinite;
  }

  @keyframes hs-snow-fall-small-m {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 320px;
    }
  }

  @keyframes hs-snow-fall-big-m {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 360px 360px;
    }
  }
}

/* 모션 줄이기 옵션 */
@media (prefers-reduced-motion: reduce) {
  .hs-snow-xmas::before,
  .hs-snow-xmas::after {
    animation: none !important;
  }
}

/* ============================
   크리스마스 상품 페이지에서만
   Flatsome Top Bar(탑바)에 동일 그라데이션 적용
   ============================ */

body.hs-snow-xmas #top-bar.header-top {
  background: radial-gradient(
    circle at 50% 0%,
    #ffe4e6 0,
    #f97373 26%,
    #e11d48 52%,
    #7f1d1d 100%
  ) !important;

  color: #fff !important;
  border-bottom: none !important;
}

/* 탑바 안의 링크/텍스트도 흰색으로 */
body.hs-snow-xmas #top-bar.header-top a {
  color: #fff !important;
}

/* ============================
   크리스마스 상품 페이지 검색 영역
   - 외곽 테두리: 녹색
   - 안쪽 배경: 흰색
   ============================ */

/* 1) 검색바 전체 외곽(파란 테두리 있던 애) */
body.hs-snow-xmas ul.nav.nav-center.nav-small.nav-outline {
  border: 2px solid #0f5132 !important; /* 진한 녹색 테두리 */
  background: #ffffff !important; /* 흰 배경 */
  border-radius: 999px !important; /* 둥근 캡슐 느낌 */
}

/* 2) 안쪽 input 스타일 */
body.hs-snow-xmas ul.nav.nav-center.nav-small.nav-outline input[type='search'] {
  background: #ffffff !important; /* 흰 바탕 */
  color: #0f5132 !important; /* 녹색 글씨 */
  border: none !important; /* 내부 테두리는 제거 */
  box-shadow: none !important;
}

/* placeholder도 녹색으로 */
body.hs-snow-xmas
  ul.nav.nav-center.nav-small.nav-outline
  input[type='search']::placeholder {
  color: #0f5132 !important;
  opacity: 0.8;
}

/* 3) 포커스 시 효과 */
body.hs-snow-xmas
  ul.nav.nav-center.nav-small.nav-outline
  input[type='search']:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(15, 81, 50, 0.25) !important;
}

/* ============================
   크리스마스 상품 페이지 메뉴 색상
   ============================ */

/* 메뉴 기본 텍스트 */
body.hs-snow-xmas .header-nav a:not(.hs_kitbtn),
body.hs-snow-xmas .nav > li > a:not(.hs_kitbtn) {
  color: #0f5132 !important;
  font-weight: 700;
}

/* 메뉴 Hover 색상 */
body.hs-snow-xmas .header-nav a:not(.hs_kitbtn):hover,
body.hs-snow-xmas .nav > li:hover > a:not(.hs_kitbtn) {
  color: #198754 !important; /* 밝은 크리스마스 그린 */
}

/* 메뉴 활성 상태 (current page) */
body.hs-snow-xmas .nav li.active > a,
body.hs-snow-xmas .nav li.current_page_item > a {
  color: #198754 !important;
}

/* 서브메뉴 배경도 크리스마스 톤 */
body.hs-snow-xmas .nav-dropdown,
body.hs-snow-xmas .nav-dropdown-default {
  background: #ffffff !important;
  border: 1px solid #0f5132 !important;
}

/* 서브메뉴 텍스트 */
body.hs-snow-xmas .nav-dropdown a {
  color: #0f5132 !important;
}

/* 서브메뉴 Hover */
body.hs-snow-xmas .nav-dropdown li:hover > a {
  color: #198754 !important;
  background: rgba(15, 81, 50, 0.08) !important;
}

body.hs-snow-xmas a.nav-top-link:before {
  background-color: #198754 !important;
}

/* =============================
   크리스마스 KIT 버튼 스킨
   hs-snow-xmas가 있을 때만
   ============================= */

body.hs-snow-xmas .hs_kitbtn {
  --hs-kit-bg: #0f5132;
  --hs-kit-color: #ffffff;
}

/* 🎄 크리스마스 페이지에서 KIT 버튼 색상 강제 고정 */
body.hs-snow-xmas .hs_kitbtn {
  background-color: #0f5132 !important;  /* 진한 트리 초록 배경 */
  color: #ffffff !important;             /* 흰 글씨 */
  border-color: #ffffff !important;      /* 흰 테두리 */
}

/* Hover 시에도 흰 글씨 유지 + 약간 밝은 초록 */
body.hs-snow-xmas .hs_kitbtn:hover {
  background-color: #198754 !important;  /* 밝은 초록 */
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ======================================
   크리스마스 로그인/회원가입 버튼 Hover
   ====================================== */
body.hs-snow-xmas .nav-top-link.nav-top-not-logged-in:hover,
body.hs-snow-xmas .nav-top-link.nav-top:not(.hs_kitbtn):hover,
body.hs-snow-xmas .header-button a:hover,
body.hs-snow-xmas .button.round.is-outline.is-small:hover {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d) !important; /* 럭셔리 레드 */
  color: #fff !important;
  border-color: #7f1d1d !important;
}

/* 글씨는 항상 흰색 유지 */
body.hs-snow-xmas .nav-top-link.nav-top-not-logged-in,
body.hs-snow-xmas .button.round.is-outline.is-small {
  color: #fff !important;
  border-color: #ffffff44 !important;
}

/* ================================
   크리스마스: 계정 드롭다운 전용 스킨
   (내 정보 / 로그아웃 메뉴 뜨는 박스)
   ================================ */

/* 1) 계정 드롭다운 박스 배경/테두리 */
body.hs-snow-xmas li[class*="account"] .nav-dropdown {
  background: #0f5132 !important;
  border: 1px solid #0b3b25 !important;
}

/* 2) 드롭다운 안의 링크 글씨색 */
body.hs-snow-xmas li[class*="account"] .nav-dropdown li > a {
  color: #ffffff !important;
}

/* 3) 호버 시 살짝 밝게 */
body.hs-snow-xmas li[class*="account"] .nav-dropdown li:hover > a {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

/* ==============================
   크리스마스 시즌 로고 교체 (hs-snow-xmas 전용)
================================= */

/* 1) 기본 이미지 숨기기 */
body.hs-snow-xmas img.header_logo_header-logo {
  visibility: hidden !important; /* 🔥 핵심 */
  opacity: 0 !important;
}

/* 2) 로고 wrapper를 기준점으로 지정 */
body.hs-snow-xmas #logo {
  position: relative !important;
  max-width: 167px;  /* 필요 없으면 이 줄은 지워도 됨 */
}

/* 3) 크리스마스 로고 삽입 */
body.hs-snow-xmas #logo::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url('/wp-content/uploads/2025/11/logo-green.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 0 30px 0 24px !important;

  pointer-events: none; /* 클릭 방해 금지 */
}

/* 4) 패딩 때문에 밀리는 것 방지 (있으면) */
body.hs-snow-xmas #logo.flex-col.logo {
  padding: 0 !important;
}