@charset "UTF-8";
/* ==========================================================================
   站头与主导航 —— 对应设计稿 Header（高 72，底部 1px 分隔线）
   主题：PROFORGE 五金外贸主题（muban）
   ========================================================================== */

.pf-header {
    position: relative;
    z-index: 60;
    height: var(--pf-header-h);
    background: var(--pf-bg-alt);
    /* 用内阴影代替 border-bottom，保证整块高度正好 72（设计稿 Header Divider 是独立 1px 元素） */
    box-shadow: inset 0 -1px 0 var(--pf-line-strong);
}
.pf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: var(--pf-header-h);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.pf-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pf-logo__mark {
    width: 32px; height: 32px;
    border-radius: var(--pf-radius);
    background: var(--pf-accent);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.pf-logo__mark svg { width: 23px; height: 26.7px; }
.pf-logo__text { display: flex; flex-direction: column; gap: 2px; }
.pf-logo__name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    color: var(--pf-fg);
}
.pf-logo__sub {
    font-family: var(--pf-font-mono);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--pf-fg-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   主导航
   -------------------------------------------------------------------------- */
.pf-nav { display: flex; align-items: center; gap: 32px; }
.pf-nav ul { display: flex; align-items: center; gap: 32px; }
.pf-nav li { position: relative; }
.pf-nav a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pf-fg-muted);
    transition: color .2s ease;
}
.pf-nav a:hover { color: var(--pf-fg); }
.pf-nav .current-menu-item > a,
.pf-nav .current-menu-parent > a,
.pf-nav .current-menu-ancestor > a,
.pf-nav .is-active > a { color: var(--pf-accent); }

/* 二级菜单 */
.pf-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 208px;
    display: block;
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    margin-top: 18px;
    background: var(--pf-bg-card);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pf-nav li:hover > .sub-menu,
.pf-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pf-nav .sub-menu li { width: 100%; }
.pf-nav .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    letter-spacing: .2px;
}
.pf-nav .sub-menu a:hover { background: rgba(249, 115, 22, .1); color: var(--pf-accent); }

/* --------------------------------------------------------------------------
   右侧：语言 + 询价 + 汉堡
   -------------------------------------------------------------------------- */
.pf-header__right { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.pf-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pf-font-mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--pf-fg-muted);
    white-space: nowrap;
}
.pf-lang:hover { color: var(--pf-fg); }

.pf-burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--pf-line-soft);
    border-radius: var(--pf-radius);
    cursor: pointer;
}
.pf-burger span {
    display: block; position: relative;
    width: 18px; height: 2px;
    background: var(--pf-fg);
}
.pf-burger span::before, .pf-burger span::after {
    content: ''; position: absolute; left: 0;
    width: 18px; height: 2px; background: var(--pf-fg);
}
.pf-burger span::before { top: -6px; }
.pf-burger span::after { top: 6px; }

/* --------------------------------------------------------------------------
   移动端导航
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .pf-burger { display: inline-flex; }
    .pf-nav {
        position: absolute;
        top: var(--pf-header-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px var(--pf-gutter) 20px;
        background: var(--pf-bg-alt);
        border-bottom: 1px solid var(--pf-line-strong);
    }
    .pf-nav.is-open { display: flex; }
    .pf-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .pf-nav li { border-bottom: 1px solid var(--pf-line-faint); }
    .pf-nav a { display: block; padding: 14px 0; }
    .pf-nav .sub-menu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        margin: 0 0 10px;
        border: 0; background: transparent;
        padding: 0 0 0 16px;
    }
    .pf-nav .sub-menu a { padding: 10px 0; }
}
/* --------------------------------------------------------------------------
   客户上传的 Logo 图片（外观 → 自定义 → 站点标识）
   没上传时回落主题自带 SVG 图标，所以这两条规则只在上传后才起作用。
   -------------------------------------------------------------------------- */
/*
 * 注意：这里必须用「两级选择器」(.pf-logo .pf-logo__img)。
 *
 * WooCommerce 在所有商城页（商品列表 / 单品 / 购物车 / 结算 / 账户）的 body 上
 * 加了 .woocommerce-page 类，并带一条 `.woocommerce-page img { height:auto;
 * max-width:100% }`（优先级 0,1,1）。如果这里只写 `.pf-logo__img`（0,1,0），
 * 就会被它盖掉 —— Logo 会恢复成图片原始尺寸（1104×212），把页头整个撑垮。
 */
.pf-logo .pf-logo__img,
.pf-footer__logo .pf-logo__img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.pf-footer__logo .pf-logo__img {
    height: 34px;
    max-width: 180px;
}
@media (max-width: 640px) {
    .pf-logo .pf-logo__img { height: 32px; max-width: 160px; }
}