/* ==========================================================================
   LEAFERRY QUIET LUXURY SITE HEADER & TOPBAR
   Frosted Porcelain Glass Texture, Refined Spacing & Minimal Enhancements
   Blocksy-Native Architecture: Zero !important Overrides
   ========================================================================== */

/* 1. Header Surface & Frosted Glass Texture (Enhancement) */
.ct-header,
.ct-sticky-container {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Topbar Micro-Polish */
[data-row="top"] a {
  transition: color 0.2s ease;
}

/* 3. Site Branding Polish (100% Customizer-driven Typography) */
.site-branding {
  text-decoration: none;
}

.site-branding .site-logo-container {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.site-branding .site-title a {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 26px;
  letter-spacing: 0.22em;
  font-weight: 400;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-branding .site-description {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-top: 2px;
  line-height: 1;
}

/* 4. Primary Navigation Polish */
.header-menu-1 .ct-menu-link {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* Submenu Indicator Caret Animation */
.ct-header .menu > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-header .menu > li.menu-item-has-children > a svg {
  transition: transform 0.25s ease;
  width: 10px;
  height: 10px;
  opacity: 0.6;
}

.ct-header .menu > li.menu-item-has-children:hover > a svg {
  transform: rotate(180deg);
  opacity: 1;
}

/* 5. Dropdown Menu: Frosted Porcelain Texture & Quiet Luxury Navigation */
.header-menu-1 [data-sub-menu],
.header-menu-1 ul.sub-menu,
.ct-header [data-sub-menu],
.ct-header ul.sub-menu {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 84, 65, 0.08);
  border-radius: 10px;
  box-shadow: 
    0 16px 44px -6px rgba(24, 51, 38, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.03);
  padding: 8px 0;
  min-width: 230px;
  animation: lfSubmenuFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lfSubmenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Submenu Items: Clean Dividers (No Dashed Lines) */
.ct-header .sub-menu .menu-item,
.header-menu-1 .sub-menu .menu-item {
  border-top: none;
  border-bottom: 1px solid rgba(0, 84, 65, 0.04);
}
.ct-header .sub-menu .menu-item:last-child,
.header-menu-1 .sub-menu .menu-item:last-child {
  border-bottom: none;
}

/* Submenu Links: High-contrast Typography with Expanding Theme Green Underline */
.header-menu-1 .sub-menu li a,
.ct-header .sub-menu li a,
.sub-menu .ct-menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-family: var(--theme-font-family, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: #1A3326;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 20px;
  text-decoration: none;
  background: transparent;
  box-sizing: border-box;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Theme Green Expanding Underline on Hover */
.header-menu-1 .sub-menu li a::after,
.ct-header .sub-menu li a::after,
.sub-menu .ct-menu-link::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 20px;
  width: calc(100% - 40px);
  height: 1.5px;
  background-color: var(--theme-palette-color-1, #005441);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Submenu Link Hover: Emerald Text + Expanding Underline (No Background Fill) */
.header-menu-1 .sub-menu li a:hover,
.ct-header .sub-menu li a:hover,
.sub-menu .ct-menu-link:hover {
  background: transparent;
  color: var(--theme-palette-color-1, #005441);
}

.header-menu-1 .sub-menu li a:hover::after,
.ct-header .sub-menu li a:hover::after,
.sub-menu .ct-menu-link:hover::after {
  transform: scaleX(1);
}

/* Submenu Active Link: Clean Emerald Text (No Initial Hover Tint or Dot) */
.ct-header .sub-menu li.current-menu-item > a,
.ct-header .sub-menu li[class*="current-menu-"] > a,
.header-menu-1 .sub-menu li[class*="current-menu-"] > a {
  color: var(--theme-palette-color-1, #005441);
  background: transparent;
}

/* 6. Header Cart Dynamic Badge & Capsule */
.ct-header-cart {
  position: relative;
  display: flex;
  align-items: center;
}

.ct-header-cart .ct-cart-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bag-count-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 67, 31, 0.65), 0 2px 6px rgba(200, 67, 31, 0.35);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(200, 67, 31, 0), 0 2px 6px rgba(200, 67, 31, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 67, 31, 0), 0 2px 6px rgba(200, 67, 31, 0.35);
  }
}

.ct-header-cart .ct-dynamic-count-cart {
  background: #BA4F18;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: bag-count-pulse 2.8s infinite;
}

.ct-header-cart .ct-dynamic-count-cart[data-count="0"],
.ct-header-cart .ct-dynamic-count-cart:empty {
  display: none;
}

/* 7. Mobile Offcanvas Drawer Texture */
#offcanvas .ct-panel-inner {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* 8. Suppress Legacy / Unused Elements */
@media (min-width: 1025px) {
  .ct-shortcuts-bar,
  .ct-drawer-inner:has(.ct-shortcuts-bar),
  [data-drawer*="shortcuts"],
  .ct-drawer-canvas[data-type="shortcuts-bar"],
  .pls-bottom-navbar,
  .lf-mobile-bottom-bar {
    display: none;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }
}

/* Hide Blocksy dropdown mini-cart if CheckoutWC Side Cart is the authoritative cart */
.ct-cart-content,
.ct-cart-popup,
.woocommerce-message.popup-message,
.alukas-cart-popup,
.added_to_cart_notification {
  display: none;
}

.badge-sale,
.onsale,
.product-label.sale {
  display: none;
}

.ct-wishlist-button,
.header-wishlist,
.pls-header-wishlist,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-button,
a[href*="wishlist"],
[class*="wishlist"] {
  display: none;
}

/* 9. 账号弹窗社交登录可见性兜底（Nextend Social Login）
   --------------------------------------------------------------------------
   NSL 的 below/above 系列布局默认把 .nsl-container 写成 display:none，再由模板
   自带的内联 <script> 在弹窗实例化时改回 block。那段脚本位于 Blocksy 的
   <template id="ct-account-modal-template"> 内，只有点开弹窗、Blocksy 用
   executeScripts() 重建它时才会执行。这一环一旦被延迟 JS / 缓存 / 时序打断，
   Google 登录按钮整块消失，而后台配置看起来完全正常。

   这里以更高的选择器优先级直接点亮，并用纯 CSS 画出 OR 分隔线，
   不再依赖脚本是否执行；脚本正常执行时视觉完全一致（幂等）。

   改这里之前先确认：NSL → Global Settings → WooCommerce 的登录布局
   仍是 below-separator 一类的「先隐藏后点亮」布局。若改成 default，
   本段需同步复核，否则会多出一条 OR 分隔线。 */
#account-modal [id^="nsl-custom-login-form"] .nsl-container {
  display: block;
  clear: both;
}

/* NSL 由脚本插入的分隔线让位给下面这条，保证两条路径只呈现一种视觉 */
#account-modal [id^="nsl-custom-login-form"] .nsl-separator {
  display: none;
}

#account-modal [id^="nsl-custom-login-form"]::before {
  content: "OR";
  display: block;
  margin: 20px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #72777c;
  background-image: linear-gradient(#dddddd, #dddddd), linear-gradient(#dddddd, #dddddd);
  background-size: calc(50% - 24px) 1px, calc(50% - 24px) 1px;
  background-position: left center, right center;
  background-repeat: no-repeat;
}
