/* ============================================
   Dakzhou Theme - Navigation
   通知栏 + 导航栏 + 搜索框 + 移动端菜单
   修改导航栏只需要改这个文件
   ============================================ */

/* ===== 通知栏 (Topbar / Announce Bar) ===== */
.topbar{background:var(--ink);color:#cbd5e1;font-size:.78rem;padding:8px 0;font-weight:500;position:fixed;top:0;left:0;right:0;z-index:9998;}
.topbar .container{display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap;}
.topbar-left,.topbar-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.topbar-meta{display:inline-flex;align-items:center;gap:7px;color:#cbd5e1;line-height:1;}
.topbar-meta svg{width:14px;height:14px;opacity:.85;flex-shrink:0;}
.topbar-meta a{color:#cbd5e1;transition:color .2s;}
.topbar-meta a:hover{color:#fff;}

/* 通知栏社媒图标 */
.announce-bar .dz-social-icons{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;}
.announce-bar .dz-social-icons a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin:0;}
.announce-bar .dz-social-icons svg{width:16px;height:16px;display:block;}

/* ===== 主导航栏 (Category Nav) ===== */
.cat-nav{background:var(--forest);padding:0;position:fixed;top:36px;left:0;right:0;z-index:9997;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.cat-nav .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;max-width:1180px;width:88%;margin:0 auto;padding:0;}
.cat-nav .nav-list{display:flex;justify-content:center;gap:0;flex-wrap:nowrap;flex:1;min-width:0;overflow:visible;}
.cat-nav .nav-list > li{position:relative;}

/* Logo */
.cat-nav .brand-stacked{flex-direction:row;justify-content:flex-start;flex-shrink:0;gap:12px;}
.cat-nav .brand-stacked .brand-tag{display:none;}
.cat-nav .brand-stacked .brand-logo{height:40px;max-width:120px;flex-shrink:0;width:auto;object-fit:contain;}

/* 菜单链接 */
/* 高度 36px：与 .cat-nav .icon-btn / 搜索框统一，整条导航栏的悬停高亮高度一致 */
.cat-nav li > a,.cat-nav .nav-toggle{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;color:rgba(255,255,255,.88);font-size:.85rem;font-weight:600;letter-spacing:.2px;background:transparent;border:none;border-radius:8px;cursor:pointer;font-family:inherit;line-height:1.2;transition:all .2s var(--ease);white-space:nowrap;}
.cat-nav li > a:hover,.cat-nav li > a.active,.cat-nav .nav-toggle:hover,.cat-nav .nav-toggle.active{background:var(--emerald-deep);color:#fff;}

/* 下拉箭头 */
.cat-nav .caret{font-size:.7rem;opacity:.8;transition:transform .2s var(--ease);display:inline-block;}
.cat-nav .has-submenu:hover > .nav-toggle .caret,.cat-nav .has-submenu.open > .nav-toggle .caret{transform:rotate(180deg);}

/* 子菜单 */
.cat-nav .submenu{position:absolute;top:100%;left:0;min-width:200px;margin:0;padding:6px;background:#fff;border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-card);opacity:0;visibility:hidden;transform:none;transition:opacity .12s var(--ease),visibility 0s linear .12s;list-style:none;z-index:var(--z-dropdown);}
.cat-nav .has-submenu:hover > .submenu,.cat-nav .has-submenu:focus-within > .submenu,.cat-nav .has-submenu.open > .submenu{opacity:1;visibility:visible;transform:none;transition:opacity .12s var(--ease),visibility 0s;}
.cat-nav .submenu li{position:relative;}
.cat-nav .submenu a{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.82rem;font-weight:500;color:var(--ink-2);border-radius:6px;transition:background .15s var(--ease),color .15s var(--ease);}
.cat-nav .submenu a:hover,.cat-nav .submenu a:focus-visible{background:var(--mint);color:var(--emerald-deep);outline:none;}

/* 多级子菜单 */
.cat-nav .submenu li.has-submenu.flyout{position:relative;}
.cat-nav .submenu .flyout-menu{position:absolute;top:-8px;left:100%;min-width:220px;border-radius:var(--radius);box-shadow:var(--shadow-card);opacity:0;visibility:hidden;transition:opacity .12s var(--ease),visibility 0s linear .12s;z-index:60;}
.cat-nav .submenu li.has-submenu.flyout:hover > .flyout-menu,
.cat-nav .submenu li.has-submenu.flyout:focus-within > .flyout-menu{opacity:1;visibility:visible;transition:opacity .12s var(--ease),visibility 0s;}
.cat-nav .caret-right{margin-left:auto;font-size:.95rem;opacity:.55;}
.cat-nav .submenu li.has-submenu.flyout > a{justify-content:flex-start;padding-right:28px;}
.cat-nav .submenu li.has-submenu.flyout > a:hover .caret-right{opacity:1;}

/* 产品飞出菜单（叶子分类显示产品图片+名称） */
.cat-nav .flyout-menu.product-flyout{min-width:240px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:2px;}
.cat-nav .flyout-product{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--ink);transition:background .12s var(--ease);}
.cat-nav .flyout-product:hover{background:var(--mint);}
.cat-nav .flyout-product img{width:40px;height:40px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#f0f0f0;}
.cat-nav .flyout-product-name{font-size:.8rem;line-height:1.3;color:var(--ink-2);}
.cat-nav .flyout-viewall{display:block;text-align:center;padding:8px;margin-top:4px;font-size:.78rem;font-weight:600;color:var(--emerald-deep);text-decoration:none;border-top:1px solid var(--border);border-radius:0 0 6px 6px;transition:background .12s var(--ease);}
.cat-nav .flyout-viewall:hover{background:var(--mint);}

/* ===== 搜索框 ===== */
.cat-nav .search-bar{position:relative;width:190px;max-width:none;}
/* height 固定 36px：与 .cat-nav .icon-btn 的 36×36 对齐，避免搜索框比图标按钮高一头 */
.cat-nav .search-bar input{width:100%;height:36px;padding:0 16px 0 40px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.88rem;line-height:1;outline:none;transition:all .2s;}
.cat-nav .search-bar input::placeholder{color:rgba(255,255,255,.6);}
.cat-nav .search-bar input:focus{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);box-shadow:none;}
.cat-nav .search-bar::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7;pointer-events:none;z-index:1;}

/* ===== 工具按钮（心愿单、购物车、登录） ===== */
.cat-nav .nav-tools{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:0;}
.cat-nav .header-actions{display:flex;align-items:center;gap:6px;}
.cat-nav .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:rgba(255,255,255,.9);text-decoration:none;transition:all .2s;position:relative;background:transparent;border:none;padding:0;}
.cat-nav .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.cat-nav .icon-btn svg{width:18px;height:18px;}
.cat-nav .cart-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange);color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:none;}

/* 登录按钮（文字+图标） */
.cat-nav .icon-btn-text{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;color:rgba(255,255,255,.9);text-decoration:none;background:transparent;border:none;transition:all .2s;width:auto;height:auto;}
.cat-nav .icon-btn-text:hover{background:rgba(255,255,255,.1);color:#fff;}
.cat-nav .icon-btn-text svg{width:18px;height:18px;}
.cat-nav .icon-btn-text .icon-btn-label{font-size:.8rem;font-weight:600;white-space:nowrap;}

/* ===== 汉堡菜单（移动端） ===== */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:transparent;border:0;cursor:pointer;padding:8px;flex-shrink:0;}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:1px;transition:transform .25s var(--ease),opacity .25s var(--ease);}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== 首页 Hero 叠加效果 ===== */
.hero-top{position:absolute;top:0;left:0;right:0;z-index:62;transition:background .3s var(--ease), box-shadow .3s var(--ease);}
.hero-top .topbar{background:transparent;color:rgba(255,255,255,.85);border-bottom:none;}
.hero-top .topbar .container{justify-content:flex-end;}
.hero-top .topbar-meta{color:rgba(255,255,255,.85);}
.hero-top .topbar-meta a{color:rgba(255,255,255,.85);}
.hero-top .topbar-meta a:hover{color:#fff;}
.hero.scrolled .hero-top{background:#fff;box-shadow:0 2px 14px rgba(15,23,42,.10);}
.hero.scrolled .topbar-meta{color:var(--muted);}
.hero.scrolled .topbar-meta a{color:var(--ink-2);}

/* ===== 响应式 ===== */
@media (max-width:1100px){
  .cat-nav .brand-stacked .brand-tag{display:none;}
}
@media (max-width:768px){
  .cat-nav{position:fixed;top:36px;left:0;right:0;z-index:9997;}
  .nav-tools .search-bar{display:none;}
  .menu-toggle{display:flex;}
}


/* ============================================
   Customer change requests (FR-*)
   从style.css迁移，待整理
   ============================================ */
/* FR-T02 — topbar carries contact details only, larger and higher contrast */
.topbar-inner{display:flex;align-items:center;justify-content:flex-end;gap:28px;}
.topbar .topbar-meta{font-size:1rem;font-weight:600;}
.topbar .topbar-meta a{color:#fff;}
.topbar .topbar-meta svg{width:16px;height:16px;}

/* FR-T04 — announcement bar */
.announce-bar{background:#000;color:#fff;padding:8px 0;font-size:.85rem;position:fixed;top:0;left:0;right:0;z-index:9998;}
.announce-bar .dz-topcontact{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:nowrap;}
.announce-bar .dz-topcontact-left{display:flex;align-items:center;gap:28px;}
.announce-bar .dz-topcontact-right{display:flex;align-items:center;justify-content:center;}
.announce-bar .dz-social-icons{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;}
.announce-bar .dz-social-icons a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin:0;}
.announce-bar .dz-social-icons svg{width:16px;height:16px;display:block;}

/* 页脚社媒图标 */
.dz-social-footer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;margin-top:16px;}
.dz-social-footer a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);text-decoration:none;transition:all .2s;}
.dz-social-footer a:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px);}
.dz-social-footer svg{width:18px;height:18px;display:block;}

/* Top contact bar (centered email + phone) */
.dz-topcontact{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;}
.dz-topcontact-item{display:inline-flex;align-items:center;gap:7px;color:#fff;line-height:1;font-size:.92rem;font-weight:600;}
.dz-topcontact-item svg{width:14px;height:14px;opacity:.85;flex-shrink:0;}
.dz-topcontact-item a{color:#fff;transition:opacity .2s;}
.dz-topcontact-item a:hover{opacity:.75;}
.announce-inner{text-align:center;min-height:22px;}
.announce-item{display:block;}
.announce-item a,.announce-item span{color:#fff;text-decoration:none;font-weight:500;}
.announce-item a:hover{text-decoration:underline;}

/* FR-N02/N03 — primary nav on the green bar, with search + icons */
/* Single row: logo (fixed) | menu (centered, flex-grows) | search+icons (right).
   Compression order when tight: menu label shortened, search shrinks, font & gaps shrink,
   logo NEVER shrinks. Last-resort: nav-list scrolls horizontally instead of wrapping. */
.cat-nav .container{gap:16px;flex-wrap:nowrap;}
.cat-nav .nav-list{justify-content:center;flex:1 1 auto;min-width:0;}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-tools .search-bar{width:180px;flex:0 1 auto;}
/* Narrow desktops: hide the decorative tagline (logo image stays) so logo+menu+tools
   fit on one row without horizontal scroll. */
@media (max-width:1100px){
  .cat-nav .brand-stacked .brand-tag{display:none;}
}
.nav-tools .search-bar input{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);}
.nav-tools .search-bar input::placeholder{color:rgba(255,255,255,.72);}
.nav-tools .search-bar input:focus{background:rgba(255,255,255,.22);border-color:#fff;}

/* 导航栏搜索框 - 白色透明风格 */
.cat-nav .search-bar{position:relative;width:190px;max-width:none;}
.cat-nav .search-bar input{width:100%;padding:10px 16px 10px 40px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.88rem;outline:none;transition:all .2s;}
.cat-nav .search-bar input::placeholder{color:rgba(255,255,255,.6);}
.cat-nav .search-bar input:focus{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);box-shadow:none;}
.cat-nav .search-bar::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7;pointer-events:none;z-index:1;}


/* FR-T03 / AC-35 — tap targets at least 44x44 */
.icon-btn{width:44px;height:44px;}
.icon-btn svg{width:20px;height:20px;}
.cat-nav .icon-btn,.nav-tools .icon-btn{color:#fff;border-color:transparent;}
.cat-nav .icon-btn:hover,.nav-tools .icon-btn:hover{background:rgba(255,255,255,.16);color:#fff;}
/* Sign in button with text */
.icon-btn.icon-btn-text{width:auto;padding:0 14px;gap:8px;}
.icon-btn-label{font-size:.85rem;font-weight:500;white-space:nowrap;}
/* 文字胶囊按钮在 .nav-tools（桌面端真正生效的工具栏）里也必须成立：
   之前只有 .cat-nav 作用域写了 padding/border-radius，且没有任何 height，
   于是「Sign in / Register」被撑成 156×20 的细长条 —— 悬停高亮与旁边
   36×36 的圆形图标按钮明显不一致（用户报告的「阴影大小不一致」）。
   这里对齐 .cat-nav .icon-btn 的 36px 高度，圆角改成全圆胶囊。 */
.nav-tools .icon-btn.icon-btn-text{display:inline-flex;align-items:center;justify-content:center;height:36px;width:auto;padding:0 14px;gap:8px;border-radius:999px;}
@media (max-width:768px){.icon-btn-label{display:none;}.icon-btn.icon-btn-text{width:44px;padding:0;justify-content:center;}}
/* 移动端隐藏文字后，登录按钮要退回和旁边图标按钮一样的 36×36 圆形（特异性需与上一段一致） */
@media (max-width:768px){.nav-tools .icon-btn.icon-btn-text{width:36px;height:36px;padding:0;border-radius:50%;justify-content:center;}}
.qty-btn{width:44px;height:44px;}

/* ============================================
   结账页导航栏搜索框统一（仅此一处，不动其他元素）
   根因：checkout.css 的 `.woocommerce-checkout input[type="text"]`（!important）
   会把导航栏里的搜索框 input 也套上「白底灰边方角」的结账表单样式，
   导致结账页搜索框与普通页面（绿栏上的白色半透明圆角药丸）不一致。
   仅把「结账页的导航栏搜索框」还原为与其他页面完全一致的样式。

   注意：下面取值必须与 :170 的 `.cat-nav .search-bar input` 一致。
   .nav-tools 位于 .cat-nav 之内，:164 的 `.nav-tools .search-bar input`
   与 :170 同特异性、后写者赢 —— 真正在普通页面生效的是 :170 那组
   （background .1 / border .2 / placeholder .6 / focus .15+.3）。
   早先此处误抄了 :164 那组（.14 / .35 / .72 / .22+#fff），
   所以结账页搜索框看起来比别的页面更白更亮。
   ============================================ */
.woocommerce-checkout .nav-tools .search-bar input,
.woocommerce-checkout .cat-nav .search-bar input{
  width:100% !important;
  height:36px !important;
  padding:0 16px 0 40px !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.1) !important;
  color:#fff !important;
  font-size:.88rem !important;
  outline:none;
  transition:all .2s;
}
.woocommerce-checkout .nav-tools .search-bar input::placeholder,
.woocommerce-checkout .cat-nav .search-bar input::placeholder{
  color:rgba(255,255,255,.6) !important;
}
.woocommerce-checkout .nav-tools .search-bar input:focus,
.woocommerce-checkout .cat-nav .search-bar input:focus{
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(255,255,255,.3) !important;
  box-shadow:none !important;
}

/* ============================================
   Round 9 · 移动端顶部联系栏换行溢出修复
   根因：`.announce-bar` 是 `position:fixed;top:0`（z-index 9998），而
   `.cat-nav` 固定在 `top:36px`，`body` 的 `padding-top:94px` —— 整个头部
   布局都假定这条栏高 36px。但 `.dz-topcontact-item` 是 inline-flex，
   里面的 `<a>` 会被当成可压缩的 flex 项：390px 下手机号
   “+86 178 4121 6195” 被压成一个数字一行（4 行），整条栏撑到约 75px，
   溢出部分盖住下方导航栏，且每页都出现（线上同样存在，属既有缺陷）。
   修复：窄屏禁止换行 + 收紧字号/间距；≤430px 隐藏邮箱项（保留可点击的
   电话与社媒图标，电话在移动端价值最高），保证这条栏恒为 36px。
   回滚：删除本段即可，不影响其他规则。
   ============================================ */
@media (max-width:768px){
  .announce-bar.dz-topcontact-bar{padding:8px 0;}
  .announce-bar .dz-topcontact{gap:14px;}
  .announce-bar .dz-topcontact-left{gap:14px;}
  .announce-bar .dz-topcontact-item{font-size:.78rem;line-height:1;gap:5px;}
  .announce-bar .dz-topcontact-item a{white-space:nowrap;}
  .announce-bar .dz-topcontact-item svg{width:12px;height:12px;}
  .announce-bar .dz-social-icons{gap:8px;}
  .announce-bar .dz-social-icons a{width:20px;height:20px;}
  .announce-bar .dz-social-icons svg{width:14px;height:14px;}
}
@media (max-width:430px){
  .announce-bar .dz-topcontact-left .dz-topcontact-item:nth-child(2){display:none;}
}

/* ============================================
   Round 9 · 手机端导航图标被挤出屏幕修复
   根因：style.css 末尾「2026-09-22 新增功能样式」里有一条
   `.nav-tools .search-bar{display:block !important;width:140px !important;flex:0 0 auto !important}`
   强制在 ≤768px 显示一个 140px 的搜索框；而 `.nav-tools` 本身是
   `flex-shrink:0`，于是一行需要 42(汉堡)+122(logo)+140(搜索)+3×36(图标) ≈ 448px，
   在 390px 手机上一行放不下 → 心愿单/购物车/账户三个图标被推到屏幕右侧之外，
   完全点不到（线上同样存在，属既有缺陷，非本轮引入）。
   修复原则（图标优先于搜索）：
     1. ≤768px 让工具区可收缩，搜索框弹性变窄，图标缩到 34px；
     2. ≤520px 隐藏导航栏内的搜索框（手机上仍可经店铺页侧栏/菜单搜索），
        确保心愿单、购物车、账户三个图标始终完整落在屏幕内。
   回滚：删除本段即可恢复原状。
   ============================================ */
@media (max-width:768px){
  .cat-nav .nav-tools{flex-shrink:1;min-width:0;gap:8px;}
  .cat-nav .nav-tools .search-bar{flex:0 1 auto !important;width:130px !important;min-width:0 !important;max-width:130px !important;}
  .cat-nav .nav-tools .icon-btn{width:34px;height:34px;flex:0 0 auto;}
  .cat-nav .nav-tools .icon-btn svg{width:17px;height:17px;}
}
@media (max-width:520px){
  .cat-nav .nav-tools .search-bar{display:none !important;}
  .cat-nav .brand-stacked .brand-logo{height:34px !important;max-width:108px !important;}
}
@media (max-width:400px){
  .cat-nav .brand-stacked .brand-logo{height:32px !important;max-width:96px !important;}
}

/* ≤360px（iPhone SE / 小屏安卓）：一行要放下 汉堡 + Logo + 放大镜 + 心愿单/购物车/账户，
   实测 320px 会溢出 8px 导致账户图标被裁，这里再收一档，保证三个图标始终完整可点。 */
@media (max-width:360px){
  .cat-nav .brand-stacked .brand-logo{height:30px !important;max-width:84px !important;}
  .cat-nav .nav-tools{gap:6px;}
  .cat-nav .header-actions{gap:4px;}
  .cat-nav .nav-tools .icon-btn{width:32px;height:32px;}
}

/* ============================================
   Round 10 · 当前页导航高亮（设计语言统一）
   用户诉求：「点击跳转到某页面，导航栏对应项显示阴影；删掉页面标题，
   只用导航栏阴影来替代页面标题」。
   内置导航由 header.php 按 dz_nav_is_current() 输出 `.active`，
   这里再补上 WP 后台菜单输出的 `.current-menu-item` / `.current_page_item`，
   两者共用同一套（与 :hover 完全相同）样式。
   回滚：删除本段 + header.php 里的 `$dz_act` 判断即可。
   ============================================ */
.cat-nav .nav-list > li.active > a,
.cat-nav .nav-list > li.active > .nav-toggle,
.cat-nav .nav-list > li.current-menu-item > a,
.cat-nav .nav-list > li.current_page_item > a,
.cat-nav .nav-list > li.current-menu-ancestor > a,
.cat-nav .nav-list > li.current-menu-parent > a{
  background:var(--emerald-deep);
  color:#fff;
}

/* ============================================
   Round 21 · 窄屏搜索：放大镜 + 展开整行
   需求：搜索框在导航栏上可达，不必点开汉堡菜单；搜索范围含 SKU。
   全宽段最终行为（改前是「≤520 隐藏 / 521–768 显示 / 769–1000 隐藏 /
   ≥1001 显示」的非单调状态，769–1000 完全没有搜索入口）：
     · 521–768px 与 ≥1001px：保持原样（常驻输入框，桌面端零改动）；
     · ≤520px 与 769–1000px：34px 放大镜按钮，点击后在导航栏下方展开整行输入框。
   依据（实测）：
     · 390px 一行余量为 0（汉堡 42 + Logo 122 + 工具区 114，间隙各 44），
       放 140px 常驻输入框会把三个图标推出屏幕 62px 并被 overflow 裁掉；
     · 769–1000px 是「横向完整菜单」布局，放 140px 常驻输入框实测菜单只剩
       3/6 项可见；34px 放大镜在 850px 以上菜单 6/6 全可见（与放搜索框前一致）。
   注意：769–1000px 的常驻输入框由 style.css 的 `@media(max-width:1000px)`
   关掉，本段只负责把放大镜这个入口补上——不再改动其它文件。
   回滚：删除本段 + header.php 的 .dz-search-toggle/.dz-search-panel
        + js/theme.js 的 initMobileSearch()。
   ============================================ */
/* 注意：按钮同时带 .icon-btn（.cat-nav .icon-btn 会把它设成 inline-flex），
   所以这里必须用 (0,2,0) 的权重，否则桌面端会多出一个放大镜按钮。 */
.nav-tools .dz-search-toggle,
.dz-search-panel{display:none;}

/* 769–900px：这一档导航栏是「横向完整菜单」，同时还要放 34px 放大镜，
   实测菜单只剩 4/6 项可见（Home、Product 被挤出可视区）。把菜单项内边距与
   字号再收一档即可恢复 6/6 全可见（实测 769px 需要 416px / 可用 416px；
   901px 起用回默认字号也能放下）。
   回滚：删除本段即可（只影响 769–900px 的菜单字号与内边距）。 */
@media (min-width:769px) and (max-width:900px){
  .cat-nav li > a,
  .cat-nav .nav-toggle{padding:10px 5px !important;font-size:.74rem !important;}
}

@media (max-width:520px), (min-width:769px) and (max-width:1000px){
  /* 这两个区间不再放常驻输入框，改由放大镜展开 */
  .cat-nav .nav-tools .search-bar{display:none !important;}

  .nav-tools .dz-search-toggle{display:inline-flex;flex:0 0 auto;}

  /* 展开的整行搜索：相对 .cat-nav（position:fixed）定位到导航栏下方，
     不占用导航栏那一行的高度，因此不挤压 Logo 与购物车。 */
  .dz-search-panel{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:10px 12px;
    background:var(--forest);
    box-shadow:0 10px 20px rgba(0,0,0,.28);
    z-index:6;
  }
  .dz-search-panel.open{display:block;}

  .dz-search-panel form{position:relative;display:block;margin:0;}
  /* 提高一级选择器权重：forms.css 的 input[type="search"]:focus 与本段同为
     (0,2,1)，而 forms.css 入队更晚，不加 [type] 会被它的白色/绿色 focus 覆盖。 */
  .dz-search-panel input[type="search"]{
    width:100%;
    height:38px;
    box-sizing:border-box;
    padding:0 16px 0 40px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:.9rem;
    line-height:1;
    outline:none;
    transition:all .2s;
  }
  .dz-search-panel input[type="search"]::placeholder{color:rgba(255,255,255,.72);}
  .dz-search-panel input[type="search"]:focus{background:rgba(255,255,255,.22);border-color:#fff;box-shadow:none;}
  .dz-search-panel form::before{
    content:'';
    position:absolute;
    left:14px;top:50%;
    width:16px;height:16px;
    transform:translateY(-50%);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity:.75;
    pointer-events:none;
  }
}