/* =========================================================
   whiispart-mobile-toolbar.css
   独立手机端吸顶工具栏，与桌面端菜单完全无关联
   所有 SVG 图标固定为 #111（黑色），不受页头透明模式影响
   ========================================================= */

.ws-mobile-toolbar {
    display: none;
}

@media screen and (max-width: 959px) {
    .ws-mobile-toolbar {
        position: fixed;
        top: var(--mobile-header-sticky-top, 0px);
        right: 0;
        left: 0;
        z-index: 990;
        display: block;
        height: min(var(--ws-mobile-toolbar-height, 52px), 52px);
        background-color: rgb(248, 248, 248);
        border-bottom: 1px solid rgba(17, 17, 17, 0.08);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
        transform: translate3d(0, -100%, 0);
        transition: transform 0.36s cubic-bezier(0.25, 1, 0.5, 1);
        pointer-events: none;
        will-change: transform;
        backface-visibility: hidden;
    }

    .ws-mobile-toolbar.is-visible {
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
    }

    /* ---- 容器布局 ---- */
    .ws-mobile-toolbar__inner {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        box-sizing: border-box;
    }

    .ws-mobile-toolbar__group {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .ws-mobile-toolbar__group--left {
        justify-content: flex-start;
    }

    .ws-mobile-toolbar__group--right {
        justify-content: flex-end;
    }

    /* ---- 按钮基础样式 ---- */
    html .ws-mobile-toolbar .icon-button,
    html .ws-mobile-toolbar__button,
    html .ws-mobile-toolbar__item {
        position: relative;
        margin: 0;
        border: 0;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        cursor: pointer;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    html .ws-mobile-toolbar .icon-button:hover,
    html .ws-mobile-toolbar .icon-button:focus-visible {
        opacity: 0.6;
    }

    html .ws-mobile-toolbar summary {
        list-style: none;
    }

    html .ws-mobile-toolbar summary::-webkit-details-marker {
        display: none;
    }

    /* =========================================================
     核心：固定所有文字和 SVG 颜色为黑色 #111
     用 html 前缀提高特异性，确保不被 #shopline-section-header
     或其他主题 ID 选择器覆盖
     ========================================================= */

    /* 整个工具栏及所有后代强制黑色 */
    html .ws-mobile-toolbar,
    html .ws-mobile-toolbar * {
        color: #111 !important;
    }

    /* SVG 容器本身 */
    html .ws-mobile-toolbar svg {
        display: block;
        width: 28px;
        height: 28px;
        color: #111 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* SVG 所有描边元素 */
    html .ws-mobile-toolbar svg *,
    html .ws-mobile-toolbar path,
    html .ws-mobile-toolbar circle,
    html .ws-mobile-toolbar ellipse,
    html .ws-mobile-toolbar line,
    html .ws-mobile-toolbar polyline,
    html .ws-mobile-toolbar polygon {
        stroke: #111 !important;
        stroke-opacity: 1 !important;
    }

    /* 兼容 [stroke] 属性选择器 */
    html .ws-mobile-toolbar svg [stroke] {
        stroke: #111 !important;
        stroke-opacity: 1 !important;
    }

    /* 硬编码 fill 的颜色覆盖（如 cart 图标） */
    html .ws-mobile-toolbar svg [fill]:not([fill="none"]) {
        fill: #111 !important;
        fill-opacity: 1 !important;
    }

    /* ---- 购物车包装器 ---- */
    #ws-mobile-cart-wrapper {
        display: flex;
        width: 22px;
        height: 28px;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* ---- 购物车角标 ---- */
    html .ws-mobile-toolbar .header__cart-point {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 14px;
        min-width: 14px;
        padding: 0 4px;
        border-radius: 999px;
        line-height: 1;
        position: absolute;
        bottom: -4px;
        left: 14px;
        z-index: 1;
        background-color: #555555 !important;
        color: #ffffff !important;
    }
}