/* ==========================================================================
   Yivahalo Mega Menu —— 巨幕面板样式
   驱动方式：菜单项上的 CSS 类
     .yv-mega        顶级项 → 它的 ul.sub-menu 变成横跨整条头部的巨幕面板
     .yv-mega-head   面板里的列标题（不跳转）
     .yv-mega-promo  面板里的黑五磁贴
   桌面规则全部关在 @media (min-width:922px) 里：手机端一条都不生效，
   Astra 自带的手风琴与二级下拉因此完全不受影响。
   面板的定位参照是 .ast-primary-header-bar（Astra 自带 position:relative），
   所以要把 ul 和 li 上的 position:relative 清掉，面板才能横跨整个头部。
   ========================================================================== */

@media (min-width: 922px) {

  /* 0) 给菜单腾宽度：头部主行原本是 418|443|418，而 LOGO 只占 187、右侧账户+购物车更窄，
        两侧各浪费 200 多像素。改成 auto|1fr|auto，菜单拿到剩下的全部宽度
        （1440 视口下从 443px 变成约 905px，才放得下 9 个顶级条目）。 */
  .ast-desktop .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: auto 1fr auto; }
  .ast-desktop .site-header-primary-section-center { justify-content: center; }

  /* 0b) 9 个条目在 1440 下共占 822px，而 1280 的菜单区只有 785px → 会折成两行、头部从 105 变 137。
        收窄内边距 + 略降字号把折行门槛推到 1100 以下；万一还是折了，让它居中折而不是左对齐折。 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu { flex-wrap: wrap; justify-content: center; }
  @media (max-width: 1440px) {
    .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
      padding-left: 9px !important;
      padding-right: 9px !important;
      font-size: 13.5px !important;
    }
  }

  /* 1) 清掉中间的定位祖先，让面板以整条头部为参照 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega { position: static; }

  /* 2) 顶级项的下拉 = 巨幕面板（3 列链接 + 1 列磁贴）
        面板做成**居中悬浮卡片**而不是贴边通栏：通栏那种从头部一路铺满整个视口宽度，
        视觉上像盖住半屏的板子（用户反馈"触发面积太广"）。收成 1280 宽 + 圆角 + 投影后，
        它读起来是一块菜单，而不是一层遮罩。 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    bottom: auto !important;
    width: min(1280px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    /* 「隐形桥接」直接做进面板自己的盒子里，而不是用 :before 伪元素 ——
       伪元素不参与命中测试（实测 elementFromPoint 在空档处命中的是导航 ul，面板会提前关掉）。
       做法：盒子往上长 48px（margin-top 6-48=-42），同时 padding-top 加 48（30+48=78），
       内容位置完全不变，但那 48px 空档变成了面板自己的可悬停区域。
       ⚠️ 48 这个数要跟着 li 的高度走（li 现高 38px，其下沿 111 到面板上沿 151 正好 40px）。 */
    margin: -48px 0 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 288px;
    column-gap: clamp(22px, 2.4vw, 40px);
    row-gap: 8px;
    padding: 84px 36px 34px !important;
    background: #fff !important;
    border: 1px solid #e7dbd2 !important;
    border-radius: 12px !important;
    box-shadow: 0 26px 54px rgba(40, 32, 27, .17) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }

  /* Shop All 面板：5 列（品类分 3 组 + 材质 + 颜色）+ 磁贴列。
     6 列在 1280 宽里排：内宽 1208，减磁贴 230、减 5 个 22px 间距 → 每列约 174px，
     字号收一档，否则「Ceiling Fans with Lights」会换行。 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega-shopall > ul.sub-menu {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 230px !important;
    column-gap: 22px !important;
    padding-bottom: 28px !important;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega-shopall > ul.sub-menu > li.yv-mega-head > ul.sub-menu > li > a.menu-link {
    font-size: 13.5px !important;
  }

  /* 3) 悬停 / 键盘聚焦展开；:before 当桥接，补上头部下内边距那段空隙
        触发范围：Astra 的顶级项是整行高（实测 60px），而文字只有约 20px ——
        用 `li:hover` 会让鼠标离文字还有 20px 就弹面板（用户实测反馈）。
        所以把 li 的高度收成内容高度（`align-self:center` + 把链接的行高从 60px 降回正常），
        li 的盒子就只剩文字 + 上下各 10px 的可点余量。面板是绝对定位、以头部为参照，
        所以收窄 li 不影响面板位置。 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega { align-self: center; }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > a.menu-link {
    height: auto;
    line-height: 1.35;
    /* 上下只留 2px 余量：用户要求「只有鼠标到 SHOPALL 文字上才展开」。
       留 10px 时盒子高 38px、而字高约 18px —— 鼠标在文字上方 10px 仍算在按钮上，
       看起来就是"还没到标题就弹出来了"。现在盒子≈22px，基本等于文字本身。 */
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega:hover > ul.sub-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega.focus > ul.sub-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega.ast-submenu-expanded > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
    /* 悬停意图延迟：鼠标「路过」时不弹，停住约 160ms 才展开（用户反馈"莫名奇妙就出现"）。
       注意 delay 只写在**展开态**这一条上：CSS 过渡取「变化后」那一侧的定义，
       所以展开会等 160ms，而移开时用收起态（无 delay）立刻收，不会拖泥带水。
       键盘聚焦（.focus）同样走这条，但键盘用户是主动操作，160ms 无感。 */
    transition-delay: .16s;
  }
  /* 4) 列标题：不可点，样式当小标题 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head {
    position: static;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > a.menu-link {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #e7dbd2 !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    color: #8b4513 !important;
    pointer-events: none;
    cursor: default;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > a.menu-link .ast-icon,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > a.menu-link .dropdown-menu-toggle {
    display: none !important;
  }

  /* 列里的链接常显，不做二级下拉 —— 这里**只留布局**，可见性/交互性交给下面「开合」那组规则 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* ⚠️⚠️ 2026-11-08 修（这是「点 ADD TO CART 总冒出巨幕面板」的真凶）
     原来上面那条规则里无条件写了 opacity:1 + visibility:visible + pointer-events:auto。
     关键点：**CSS 里子元素可以覆盖从父级继承来的 visibility:hidden** ——
     所以面板收起时（父级 visibility:hidden / opacity:0 / pointer-events:none），
     这几列链接依然可被鼠标命中，形成一层「看不见、但能接鼠标」的链接层，
     而它恰好铺满头部下方那一大片（1440 宽下是 x 80→1360、y 104→512）。
     实测：商品页 ADD TO CART 按钮正上方 elementFromPoint(912,416) 命中的
     就是面板里的 a.menu-link；鼠标一进那片区域就触发 li.yv-mega:hover →
     巨幕面板自己弹出来，还把点击吃掉。用户原话：「想点 ADD TO CART 的时候
     总是有 PLACE HOLDER」。
     现在：收起态强制 hidden + 不接鼠标；只有展开态（鼠标停在 Shop All 上、
     或键盘 focus）才放开列内容。 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega:hover > ul.sub-menu > li.yv-mega-head > ul.sub-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega.focus > ul.sub-menu > li.yv-mega-head > ul.sub-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega.ast-submenu-expanded > ul.sub-menu > li.yv-mega-head > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu > li {
    position: static;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu > li > a.menu-link {
    display: block !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    color: #5b5048 !important;
    transition: color .16s ease, padding-left .16s ease;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu > li > a.menu-link:hover,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-head > ul.sub-menu > li > a.menu-link:focus {
    color: #8b4513 !important;
    padding-left: 4px !important;
  }

  /* 5) 黑五磁贴 */
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-promo {
    position: static;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-promo > a.menu-link {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 226px;
    margin: 0 !important;
    padding: 22px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(158deg, #3d2b1e 0%, #241a13 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 178, 122, .34) !important;
    color: #f3f0ec !important;
    text-align: left;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-promo > a.menu-link:hover {
    box-shadow: inset 0 0 0 1px rgba(232, 178, 122, .78), 0 12px 26px rgba(40, 32, 27, .22) !important;
  }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-promo > a.menu-link .dropdown-menu-toggle,
  .ast-desktop .ast-builder-menu-1 .main-header-menu > li.yv-mega > ul.sub-menu > li.yv-mega-promo > a.menu-link .ast-icon {
    display: none !important;
  }

  /* 磁贴内部的四段文字（由插件把菜单项标题换成这组 span） */
  .yv-tile-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #e8b27a;
  }
  .yv-tile-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #fff;
  }
  .yv-tile-sub {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #d8ccbf;
  }
  .yv-tile-code {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 11px;
    border: 1px dashed rgba(245, 200, 148, .55);
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: .04em;
    color: #cbbfae;
  }
  .yv-tile-code b { color: #f5c894; letter-spacing: .12em; }
}

/* ==========================================================================
   移动端（≤921px）：上面那套一条都不生效，只补三件事
   ① 列标题不可点（href="#" 会跳回页首）
   ② 列里的链接直接展开 —— 手机上一列 6~8 个链接，如果还做二级手风琴，
      用户得先点「Shop by Style」再点列标题才看得到链接，两次点击太累
   ③ 磁贴的 span 需要基础排版，否则会挤成一行
   ========================================================================== */
@media (max-width: 921px) {
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > a.menu-link {
    pointer-events: none;
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b4513 !important;
  }
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > a.menu-link .ast-icon,
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > a.menu-link .dropdown-menu-toggle {
    display: none !important;
  }
  /* 去掉列标题的展开箭头，链接直接铺开 */
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > .ast-menu-toggle {
    display: none !important;
  }
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > ul.sub-menu {
    display: block !important;
    padding: 0 0 8px 30px !important;
  }
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > ul.sub-menu > li > a.menu-link {
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5b5048 !important;
  }
  /* Astra 会给移动端菜单链接塞一个 "›" 箭头；面板里的链接都是叶子，不需要 */
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > ul.sub-menu > li > a.menu-link .ast-icon,
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-head > ul.sub-menu > li > a.menu-link .dropdown-menu-toggle {
    display: none !important;
  }

  .ast-builder-menu-mobile .main-header-menu li.yv-mega-promo > a.menu-link {
    display: block;
    /* 左内边距跟列标题文字对齐（Astra 的行内缩进是 30px） */
    padding: 14px 16px 14px 30px !important;
    margin: 6px 0 10px;
    border-radius: 8px;
    background: linear-gradient(158deg, #3d2b1e 0%, #241a13 100%);
    color: #f3f0ec !important;
  }
  /* Astra 会给菜单链接塞一个箭头图标，磁贴上不需要 */
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-promo > a.menu-link .ast-icon,
  .ast-builder-menu-mobile .main-header-menu li.yv-mega-promo > a.menu-link .dropdown-menu-toggle {
    display: none !important;
  }
  .yv-tile-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e8b27a; }
  .yv-tile-title { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; color: #fff; }
  .yv-tile-sub { display: block; margin-top: 4px; font-size: 12px; color: #d8ccbf; }
  .yv-tile-code { display: block; margin-top: 8px; font-size: 12px; color: #cbbfae; }
  .yv-tile-code b { color: #f5c894; letter-spacing: .1em; }
}