/**
 * SIMPLife 2026 最终完工版 (Master V3)
 * --------------------------------------------------
 * 1. 字体策略：Speak Pro (西文+8%放大) + Noto Sans JP (日文)
 * 2. 品牌色：#0b76a0 (主色) / #085d80 (深交互色)
 * 3. 修复内容：
 * - [核心修复] 地址按钮回归“初稿逻辑”：flex:0 0 40px + 绝对定位 (彻底解决椭圆与跳动)
 * - [核心修复] 下拉框(Select)显示文字强制 13px
 * - [视觉优化] 搜索图标绝对定位，精准居中
 */

/* ==========================================================================
   1. 字体定义 (Fonts)
   ========================================================================== */
@font-face {
    font-family: 'Speak Pro';
    src: url('../fonts/SpeakPro-Bold.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    size-adjust: 115%; /* 西文视觉放大 15% */
}

@font-face {
    font-family: 'Speak Pro';
    src: url('../fonts/SpeakPro-Heavy.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 115%; /* 西文视觉放大 15% */
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. 全局基础 (Global)
   ========================================================================== */
body {
    font-family: 'Speak Pro', 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    color: #333333 !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* 链接交互 */
a, .btn-link {
    color: #333333 !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}
a:hover, .btn-link:hover {
    color: #0b76a0 !important;
}

/* 输入框聚焦 */
input:focus, .form-control:focus, textarea:focus, select:focus {
    border-color: #0b76a0 !important;
    box-shadow: 0 0 0 3px rgba(11, 118, 160, 0.15) !important;
    outline: none !important;
}

/* 复选框/单选框 */
.form-check-input:checked {
    background-color: #0b76a0 !important;
    border-color: #0b76a0 !important;
}

/* --- 全局图标微调 --- */
i.material-icons, .material-icons {
    font-size: 17px !important; 
    vertical-align: middle !important;
    line-height: 1 !important;
    position: relative !important;
    top: -1px !important; 
}
.btn i.material-icons { margin-right: 4px; }

/* ==========================================================================
   3. 按钮样式 (Buttons)
   ========================================================================== */
/* 全站按钮文字强制统一小号 (13px) */
/* 覆盖所有类型的按钮，确保精致感 */
.btn, 
.btn-primary, 
.btn-secondary, 
.btn-tertiary, 
.btn-link,
button.form-control-submit {
    font-size: 13px !important;
}

/* ==========================================================================
   解决实心青色按钮内，箭头/图标显示为灰色看不清的问题
   ========================================================================== */

/* 1. 强制所有实心主按钮 (.btn-primary) 内的图标变回纯白 */
/* 包括：<i> 标签、.material-icons 类、以及翻转的箭头 (.rtl-flip) */
.btn .material-icons,
.btn-primary .material-icons,
.btn-outline-primary .material-icons,
.btn-secondary .material-icons,
.js-cancel-address .material-icons,
a.btn .material-icons {
    font-size: 17px !important;
    vertical-align: middle !important; /* 确保垂直居中 */
    line-height: 1 !important;         /* 防止行高撑大布局 */
    position: relative !important;
/*    top: -1px !important; *//* 强制向上提 1px */
}

/* 2. 颜色控制 A：实心青色按钮 -> 图标必须是白色 */
.btn-primary .material-icons,
.btn-primary i {
    color: #ffffff !important;
}

/* 3. 颜色控制 B：线框/次级按钮 -> 图标保持原有颜色（通常是青色或灰色），不要变白 */
/* 这里我们不做强制设定，让它继承文字颜色，防止“白底白字”消失 */
.btn-outline-primary .material-icons,
.btn-secondary .material-icons {
    color: inherit !important; 
}

/* 4. 特殊修复：针对结账页可能出现的“继续”按钮 */
button[name="confirm-addresses"] .material-icons,
button[name="confirm-delivery-option"] .material-icons {
    font-size: 17px !important;
    color: #ffffff !important;
    position: relative !important;
/*    top: -1px !important; */
}

/* 实心青色添加购物车按钮 */
.btn-primary, 
.add-to-cart, 
button[data-button-action="add-to-cart"],
.page-customer .form-control-submit {
    background-color: #0b76a0 !important;
    border: 1px solid #0b76a0 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 10px 25px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.btn-primary i, .btn-primary span,
.add-to-cart i, button[data-button-action="add-to-cart"] i {
    color: #ffffff !important;
}
.btn-primary:hover, .add-to-cart:hover,
.page-customer .form-control-submit:hover {
    background-color: #085d80 !important;
    border-color: #085d80 !important;
    color: #ffffff !important;
}

/* 线框按钮 */
.btn-outline-primary, 
.all-product-link {
    background-color: #ffffff !important;
    border: 1px solid #0b76a0 !important;
    color: #0b76a0 !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
}
.btn-outline-primary:hover, 
.all-product-link:hover {
    background-color: #0b76a0 !important;
    color: #ffffff !important;
}
.btn-outline-primary:hover i, .all-product-link:hover i { color: #ffffff !important; }

/* 次级按钮 */
.btn-secondary, .modal-cancel {
    background-color: #f0f0f0 !important;
    border: 1px solid #e0e0e0 !important;
    color: #555555 !important;
}
.btn-secondary:hover, .modal-cancel:hover {
    background-color: #e0e0e0 !important;
    color: #333333 !important;
}

/* 移除链接 */
.remove-from-cart {
    display: inline-block !important;
    color: #999999 !important;
    font-size: 12px !important;
    border-bottom: 1px solid transparent !important;
}
.remove-from-cart:hover {
    color: #cc0000 !important;
    border-bottom-color: #cc0000 !important;
}

/* --- 【修复1】 新建地址按钮 (复原初稿逻辑) --- */
.addresses__new-address {
    border: 1px dashed #cccccc !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    min-height: 80px !important;
}

.addresses__new-address .new-address__icon {
    /* 核心复原：不使用 Flex 居中，而是回归相对定位+固定尺寸 */
    position: relative !important;
    display: block !important;
    
    /* 这里的 flex: 0 0 40px 是防止椭圆的关键 */
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    
    border-radius: 50% !important;
    background-color: rgba(11, 118, 160, 0.05) !important;
    margin-right: 15px !important;
    transition: all 0.4s ease !important;
    box-shadow: none !important;
}

/* 内部图标：回归绝对定位居中 */
.addresses__new-address .new-address__icon i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* 关键：使用 translate 居中 */
    transform: translate(-50%, -50%) !important;
    
    color: #0b76a0 !important;
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.4s ease, color 0.2s ease !important;
}

/* 悬停交互 */
.addresses__new-address:hover {
    border-color: #0b76a0 !important;
    border-style: solid !important;
}
.addresses__new-address:hover .new-address__icon {
    background-color: #0b76a0 !important;
    box-shadow: 0 0 0 4px rgba(11, 118, 160, 0.15) !important;
}

/* 悬停图标：保留 translate 居中，同时增加 rotate 旋转 */
.addresses__new-address:hover .new-address__icon i {
    color: #ffffff !important;
    /* 关键修复：必须带上 translate(-50%, -50%) 否则会跳到左上角 */
    transform: translate(-50%, -50%) rotate(90deg) !important;
}

.addresses__new-address:hover .new-address__text { color: #0b76a0 !important; }

/* ==========================================================================
   4. Header (顶部导航)
   ========================================================================== */
header {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    z-index: 1000;
}
header .header-top {
    padding: 8px 0 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0;
}
header .header-second-row-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px;
}
header #_desktop_top_menu { order: 1 !important; flex-grow: 1 !important; }
header #_desktop_search { order: 2 !important; flex-shrink: 0 !important; min-width: 300px !important; padding-right: 0 !important; }

.header-block__title { color: #333333 !important; }
.header-block__icon, .material-icons { color: #555555 !important; }
.header-block:hover .header-block__title,
.header-block:hover .header-block__icon,
.header-block:hover .material-icons {
    color: #0b76a0 !important;
}

/* 搜索框 (绝对定位居中图标) */
#search_widget form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f8f9fa !important;
    border: 1.5px solid #eeeeee !important;
    border-radius: 6px !important;
    height: 42px !important;
    padding: 0 15px !important;
    transition: all 0.3s ease !important;
}
#search_widget .js-search-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #444444 !important;
    width: 100% !important;
    font-size: 13px !important;
    padding-right: 30px !important;
}
/* 核心修复：绝对定位，物理垂直居中 */
#search_widget .search.js-search-icon { 
    color: #999999 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}
#search_widget form:focus-within {
    border-color: #0b76a0 !important;
    background: #ffffff !important;
    box-shadow: 0 0 12px rgba(11, 118, 160, 0.4) !important;
}
#search_widget form:focus-within .search.js-search-icon { color: #0b76a0 !important; }

/* 次级菜单（hummingbird) */
#top-menu .js-sub-menu {
    border: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 8px 8px !important;
    background: #ffffff !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
#top-menu .main-menu__tree__item:hover > .js-sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
#top-menu .dropdown-item:hover {
    color: #0b76a0 !important;
    background-color: transparent !important;
    padding-left: 0 !important;
}
#top-menu .dropdown-item { font-size: 13px !important; }

/* 用户下拉菜单 */
/* ==========================================================================
   [最终修复] 用户菜单 (Login Menu) - 纯淡入淡出版
   修复：彻底去除位移动画，解决“往下抖动/跳变”问题
   ========================================================================== */

/* 1. 关闭状态 (Hidden) */
.header-top .dropdown-menu[aria-labelledby="userMenuButton"] {
    display: block !important;
    /* 必须常驻，否则无法执行淡出动画 */

    /* 核心修复：锁定位置，不让它动 */
    margin-top: 10px !important;
    /* 用 margin 代替 transform 做定位 */
    transform: none !important;
    /* 禁用所有位移变换，防止抖动 */
    top: 100% !important;
    /* 确保在按钮正下方 */

    /* 状态：透明 + 不可见 */
    opacity: 0;
    visibility: hidden;

    /* 动画：只变透明度，消失时延迟 0.2s 改变 visibility */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;

    /* 样式维持 */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 3px solid #0b76a0 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    min-width: 180px !important;
    padding: 5px 0 !important;
    z-index: 10000 !important;
}

/* 2. 展开状态 (Show) */
.header-top .dropdown-menu[aria-labelledby="userMenuButton"].show {
    /* 状态：不透明 + 可见 */
    opacity: 1;
    visibility: visible;

    /* 位置保持完全一致 (margin-top: 10px)，确保纹丝不动 */
    margin-top: 10px !important;
    transform: none !important;

    /* 动画：立即开始 */
    transition: opacity 0.2s ease, visibility 0s linear 0s !important;
}

/* 3. 菜单项样式 (保持不变) */
.header-top .dropdown-menu[aria-labelledby="userMenuButton"] .dropdown-item {
    font-family: 'Speak Pro', 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
    padding: 10px 20px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}

.header-top .dropdown-menu[aria-labelledby="userMenuButton"] .dropdown-item:hover {
    color: #0b76a0 !important;
    background-color: #f8f9fa !important;
    padding-left: 25px !important;
}

/* 购物车角标 */
.header-block__badge {
    font-family: 'Speak Pro', sans-serif !important;
    font-size: 10px !important;
    line-height: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background-color: #cccccc !important;
    color: #ffffff !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
}
.header-block__action-btn[aria-label*="1"] .header-block__badge,
.header-block__action-btn[aria-label*="2"] .header-block__badge,
.header-block__action-btn[aria-label*="3"] .header-block__badge,
.header-block__action-btn[aria-label*="4"] .header-block__badge,
.header-block__action-btn[aria-label*="5"] .header-block__badge,
.header-block__action-btn[aria-label*="6"] .header-block__badge,
.header-block__action-btn[aria-label*="7"] .header-block__badge,
.header-block__action-btn[aria-label*="8"] .header-block__badge,
.header-block__action-btn[aria-label*="9"] .header-block__badge {
    background-color: #0b76a0 !important;
}
.header-block__action-btn[aria-label*="（0点）"] .header-block__badge {
    background-color: #cccccc !important;
}

/* ==========================================================================
   5. 表单字体修正 (Forms)
   ========================================================================== */
/* --- 【修复2】 下拉框(Select) 说明文字强制 13px --- */
input.form-control,
textarea.form-control,
select,
select.form-control,
.custom-select,
.form-control-label,
label,
.page-addresses .form-control-label,
.page-identity .form-control-label {
    font-size: 13px !important;
}

option {
    font-size: 13px !important;
}

/* ==========================================================================
   6. 个人中心
   ========================================================================== */
/* 文字部分：保持 13px 不变 */
.account-menu .account-menu__line .link-item {
    color: #555555 !important;
    font-size: 13px !important;
}

/* 图标部分：单独加大一号并上浮 */
.account-menu .account-menu__line i {
    color: #555555 !important;
    font-size: 16px !important;
    /* 从 13px 加大到 16px */
    position: relative !important;
    top: -1px !important;
    /* 上浮 1px */
    vertical-align: middle !important;
    margin-right: 5px !important;
    /* 确保图标和文字有间距 */
}

.account-menu .account-menu__line:hover .link-item, 
.account-menu .account-menu__line:hover i {
    color: #0b76a0 !important;
    text-decoration: none !important;
}
.account-menu a.active .link-item,
.account-menu a[class*="active"] .link-item {
    color: #0b76a0 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #0b76a0 !important;
    padding-bottom: 2px;
}
#content .customer-link__link .link-item,
#content #wishlist-link .link-item {
    background-color: #f9f9f9 !important;
    color: #555555 !important;
    border: 1px solid #f0f0f0 !important;
    transition: all 0.2s ease !important;
}
#content .customer-link__link:hover .link-item,
#content #wishlist-link:hover .link-item {
    background-color: #0b76a0 !important;
    color: #ffffff !important;
    border-color: #0b76a0 !important;
    transform: none !important;
    box-shadow: none !important;
}
#content .customer-link__link:hover i,
#content #wishlist-link:hover i { color: #ffffff !important; }

/* ==========================================================================
   7. 杂项
   ========================================================================== */
#search_filters, #search_filters_brands, #search_filters_suppliers { font-size: 13px !important; }
.search-filters-title { color: #333333 !important; font-weight: 700 !important; font-size: 14px !important; }
.facet-label, .facet-label a, .facet-label span { font-size: 13px !important; }
.search-filters-link:hover { color: #0b76a0 !important; }

.badge.new, .product-flag.new {
    background-color: #0b76a0 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.noUi-handle { background-color: #0b76a0 !important; border-color: #0b76a0 !important; }
.noUi-handle:active { background-color: #085d80 !important; transform: scale(1.1); }
.noUi-connect { background: #e0e0e0 !important; }

.variant-links .color:hover, .variant-links .color.active,
.color-variant label:hover .color, .color-variant:hover .color,
.color-variant input:checked + label .color {
    box-shadow: 0 0 0 1px #0b76a0 !important;
    border-color: #0b76a0 !important;
}

.thumbnails__list .thumbnail:hover img,
.thumbnails__list .thumbnail.active img {
    border-color: #0b76a0 !important;
    opacity: 1 !important;
}

.footer__main h3 { color: #ffffff !important; }
.footer__main, .footer__main p, .footer__main li, .footer__main a { color: #DDE3E8 !important; }
.footer__main a:hover { color: #0b76a0 !important; }

.modal-content .modal-title { color: #333333 !important; }
.wishlist-add-to-new.text-primary { color: #0b76a0 !important; }
.page-customer .h3, .page-customer h2.h3 {
    color: #333333 !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid #e0e0e0 !important;
}
.order__header .order__reference { color: #555555 !important; }

.page-customer label[for="field-password"]::before {
    content: "現在のパスワード" !important;
    display: block; margin-bottom: 5px; color: #333;
}
.page-customer label[for="field-password"]::after {
    content: "（変更を保存するには入力が必要です）" !important;
    font-size: 0.75rem !important; color: #cc0000 !important;
}
.page-customer .form-footer, .page-customer button[name="submitCreate"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 结账页勾选框 */
.form-check:has(input[id="conditions_to_approve[terms-and-conditions]"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin: 1rem 0 !important;
    border: none !important;
    background: transparent !important;
}
input[id="conditions_to_approve[terms-and-conditions]"] {
    order: -1 !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #0b76a0 !important;
}
label[for="conditions_to_approve[terms-and-conditions]"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    display: inline-block !important;
    color: #333333 !important;
}

/* 找回密码页 - 底部“返回”链接缩小 */
#back-to-login,
#back-to-login span {
    font-size: 13px !important;
    color: #444444 !important; /* 统一颜色 */
}
#back-to-login i {
    font-size: 16px !important; /* 图标微调适配 */
}
/* 悬停效果同步 */
#back-to-login:hover,
#back-to-login:hover span {
    color: #0b76a0 !important;
}
/* 去阴影，原因：<header> 标签可能继承了全站 Header 的阴影样式 */
.forgotten-password header {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}



/* ==========================================================================
   [视觉优化] 注册页底部 "已有账号？登录" 链接样式
   ========================================================================== */
.register-form__login-prompt {
    margin-top: 1.5rem;
    /* 与上方按钮拉开距离 */
    padding-top: 1rem;
    text-align: center;
    /* 居中显示 */
    font-size: 13px;
    color: #7a7a7a;
    /* 提示文字用灰色 */
}

.register-form__login-prompt a {
    color: var(--primary);
    /* 使用主题主色(青色)，如果没有变量，会自动回退到默认链接色 */
    font-weight: 700;
    /* 加粗，非常重要 */
    text-decoration: underline;
    /* 默认显示下划线，强调这是个链接 */
    margin-left: 5px;
    /* 与前面的文字拉开一点间距 */
    transition: all 0.2s ease;
}

/* 如果 var(--primary) 不生效，可以用下面这个强制指定您的青色 */
/* .register-form__login-prompt a { color: #2fb5d2 !important; } */

.register-form__login-prompt a:hover {
    filter: brightness(0.85);
    /* 悬停时自动变暗一点 */
    text-decoration: none;
    /* 悬停时去掉下划线 */
}

/* ==========================================================================
   [视觉优化] 结账页 "访客/登录" 切换标签 (精准狙击版)
   ========================================================================== */

/* 1. 默认状态 (未选中 - 深灰) */
/* 使用属性选择器，无视 ID 重复问题，权重极高 */
body #myTab button[data-bs-toggle="tab"] {
    color: #555555 !important;           /* 强制深灰 */
    font-family: 'Speak Pro', 'Noto Sans JP', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 12px 20px !important;
    box-shadow: none !important;         /* 去掉蓝色光晕 */
}

/* 2. 悬停状态 (浅灰背景 + 青色字) */
body #myTab button[data-bs-toggle="tab"]:hover {
    color: #0b76a0 !important;
    background-color: #f8f9fa !important;
    border-bottom-color: #e0e0e0 !important;
}

/* 3. 选中状态 (纯白背景 + 顶部青色横条) */
body #myTab button[data-bs-toggle="tab"].active {
    color: #0b76a0 !important;           /* 青色字 */
    font-weight: 700 !important;         /* 加粗 */
    background-color: #ffffff !important;
    
    /* 边框：上青、左右灰、下白 */
    border-color: #e0e0e0 #e0e0e0 #ffffff #e0e0e0 !important;
    border-top: 3px solid #0b76a0 !important; /* 顶部青色粗线 */
    
    opacity: 1 !important;
}

/* ==========================================================================
   [视觉修复] 结账页同意条款勾选框 (Terms Checkbox - 加大对齐版)
   ========================================================================== */
.form-check:has(input[id="conditions_to_approve[terms-and-conditions]"]) {
    display: flex !important;
    align-items: flex-start !important; 
    justify-content: flex-start !important;
    
    /* 【核心修正】大幅增加左侧间距，以对齐上方的支付选项 */
    margin-left: 20px !important; 
    padding-left: 0 !important;
    
    margin-top: 1.5rem !important; /* 增加一点顶部间距，区分更明显 */
    margin-bottom: 1rem !important;
    border: none !important;
    background: transparent !important;
}

input[id="conditions_to_approve[terms-and-conditions]"] {
    order: -1 !important;
    margin-right: 12px !important; /* 增加一点与文字的间距 */
    margin-top: 3px !important;    /* 微调垂直对齐 */
    
    width: 14px !important;        /* 保持小尺寸 */
    height: 14px !important;
    
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #0b76a0 !important;
}

label[for="conditions_to_approve[terms-and-conditions]"] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    display: inline-block !important;
    color: #333333 !important;
}

/* ==========================================================================
   [UI 锁定] 个人信息页面 - 强制锁死邮箱输入框样式
   ========================================================================== */
/* 针对 Hummingbird/Classic 主题的个人信息页 (body#identity) */
body#identity input[name="email"],
body#identity input[type="email"],
.page-identity input[name="email"] {
    background-color: #e9ecef !important;
    /* 强制灰色背景 */
    color: #6c757d !important;
    /* 强制灰色文字 */
    pointer-events: none !important;
    /* 【核心】禁止鼠标点击/输入 */
    cursor: not-allowed !important;
    /* 鼠标放上去显示禁止符号 */
    border-color: #dee2e6 !important;
    /* 边框变浅 */
    opacity: 1 !important;
    /* 防止某些浏览器变透明 */
    user-select: none !important;
    /* 禁止选中文字 */
}

/* ==========================================================================
   [注册/结账页] 邮箱不可修改提示 (CSS 注入版)
   仅在“注册页(#authentication)”和“结账页(#checkout)”显示
   ========================================================================== */
body#registration label[for="field-email"]::after,
body#checkout label[for="field-email"]::after {
    content: "※メールアドレスはログインIDとなります。登録後の変更はできません。";
    display: block;
    font-size: 12px;
    color: #cc0000;
    font-weight: normal;
    line-height: 1.5;
    margin-top: 4px;
}

/* ==========================================================================
   [布局修正] 纯菜单头部强制全宽平铺 (V2 强力修复版)
   适用：Surface、iPad Pro 及所有桌面电脑
   ========================================================================== */
@media (min-width: 992px) {
    
    /* 1. 强制重置菜单容器：解除所有宽度限制 */
    @media (min-width: 992px) {
        /* 强制容器全宽 */
        header #_desktop_top_menu, 
        .sf-contener {
            width: 100% !important; 
            flex: 0 0 100% !important; 
            max-width: 100% !important; 
            padding: 0 !important; 
            margin: 0 !important; 
            position: static !important; 
            float: none !important; 
        }
    }

    /* 2. 用户菜单列表 (UL)：强制 Flex 平铺 */
    header #top-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 强制不换行 */
        width: 100% !important;
        justify-content: space-between !important; /* 关键：两端对齐 */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 3. 屏蔽干扰：隐藏伪元素 (Clearfix)，防止它占据 Flex 空间 */
    header #top-menu::before,
    header #top-menu::after {
        display: none !important;
        content: none !important;
    }
    
    /* 4. 单个菜单项 (LI)：像地砖一样平分地盘 */
    header #top-menu > .category {
        flex: 1 1 auto !important;  /* 【核心】平分剩余空间 */
        width: auto !important;
        float: none !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-right: 1px solid transparent; /* 占位防止塌陷 */
    }
    
    /* 5. 链接 (A)：撑满整个格子 */
    header #top-menu > .category > .dropdown-item {
        display: flex !important;
        justify-content: center !important; /* 内部文字居中 */
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 12px 0 !important;         /* 增加一点垂直点击区域 */
        white-space: nowrap !important;     /* 防止文字折行 */
    }
}

/* ==========================================================================
   [修复] 数量加减按钮 (基于您提供的 HTML 结构)
   目标类名：.btn.increment (加) / .btn.decrement (减)
   ========================================================================== */

/* 基础样式：强制显示边框 */
button.btn.increment,
button.btn.decrement,
button.js-increment-button,
button.js-decrement-button {
    /* 强制定义实体边框，不透明 */
    border: 1px solid #e0e0e0 !important;
    
    /* 强制白底深灰字 */
    background-color: #ffffff !important;
    color: #333333 !important;
    
    /* 修正可能的圆角和阴影 */
    border-radius: 2px !important;
    box-shadow: none !important;
    
    /* 布局修正：防止高度塌陷 */
    height: 100% !important;
    min-height: 38px !important; /* 确保有最小高度 */
    
    /* 层级修正：防止被 Input 遮挡 */
    position: relative !important;
    z-index: 0 !important;
}

/* [微调] 完美居中修复：去除纯图标按钮的默认右边距
   覆盖范围：购物车按钮 + 数量加减按钮
*/
    button[data-button-action="add-to-cart"] i,
    button.btn.increment i,
    button.btn.decrement i {
        margin-right: 0 !important; /* 核心：杀掉全局的 4px 间距 */
        margin-left: 0 !important;  /* 双保险，确保左右无干扰 */
    }

/* 2. 悬停状态：变青色 */
button.btn.increment:hover,
button.btn.decrement:hover,
button.js-increment-button:hover,
button.js-decrement-button:hover {
    border-color: #0b76a0 !important;
    background-color: #f8f9fa !important;
    color: #0b76a0 !important;
    z-index: 20 !important; /* 悬停时浮在最上层 */
}

/* 3. 图标微调 (加号/减号) */
button.btn.increment i,
button.btn.decrement i {
    font-size: 14px !important;
    vertical-align: middle !important;
    color: inherit !important; /* 跟随文字颜色 */
}

/* [修复] 左侧筛选器字体强制 13px & 去除粗体 */
/* 针对您贴出的 .facet 结构 */
body .facet .accordion-button,
body .facet .facet-title,
body .facet .facet-label a,
body .facet .magnitude,
body .facet .form-check-label {
    font-size: 13px !important;
    font-weight: 400 !important; /* 强制覆盖 fw-bold */
    line-height: 1.5 !important;
}

/* 链接颜色微调 */
body .facet .facet-label a {
    color: #333333 !important;
}
body .facet .facet-label a:hover {
    color: #0b76a0 !important;
}

/* ==========================================================================
   [独立模块] 商品菜单 (blocktopdropdownmenu) 最终修缮版
   功能：全宽平铺、一级居中、二级左对齐、搜索框美化
   ========================================================================== */

/* 1. 菜单容器：纯白、去边框、两端对齐布局 */
.sf-menu {
    background: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important; /* 关键：两端拉开 */
    align-items: center !important;
    height: auto !important;
    width: 100% !important;
}

/* 2. 一级菜单项 (LI)：强制文字居中，且平分宽度 */
.sf-menu > li {
    background: transparent !important;
    border: none !important;
    position: relative !important;
    
    /* 【核心】一级菜单文字居中 + 自动平分空间 */
    text-align: left !important; 
    flex: 1 1 auto !important;     
    display: flex !important;
    justify-content: center !important;
}

/* 3. 一级菜单链接 (A)：撑满格子 */
.sf-menu > li > a {
    font-family: 'Speak Pro', 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    text-transform: none !important;
    padding: 15px 20px !important;
    line-height: 1.5 !important;
    border: none !important;
    display: flex !important;
    justify-content: left !important; /* 内容居中 */
    align-items: center !important;
    width: 100% !important;
    transition: color 0.2s ease !important;
}

/* 4. 一级菜单悬停交互 */
.sf-menu > li:hover, 
.sf-menu > li.sfHover, 
.sf-menu > li > a:hover {
    background-color: #ffffff !important;
    color: #0b76a0 !important;
    visibility: visible !important;
}

/* 5. 二级菜单 (下拉框) - 强制左对齐 */
.sf-menu ul {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 3px solid #0b76a0 !important; /* 顶部青色装饰线 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    padding: 10px 0 !important;
    width: 220px !important;
    
    /* 【核心】强制容器文字左对齐 */
    text-align: left !important;
    left: 0 !important;
}

.sf-menu ul li { 
    width: 100% !important; 
    background: transparent !important; 
}

/* 6. 二级菜单链接 - 高度压缩 + 悬停位移 */
.sf-menu ul li a {
    font-family: 'Speak Pro', 'Noto Sans JP', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
    border: none !important;
    font-weight: 400 !important;
    text-transform: none !important;
    
    /* 布局：左对齐 flex */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    
    /* 间距：压缩高度 (padding 6px) */
    padding: 6px 20px !important;
    line-height: 1.3 !important;
    
    transition: all 0.2s ease !important;
}

.sf-menu ul li a:hover {
    color: #0b76a0 !important;
    background-color: #f8f9fa !important;
    padding-left: 25px !important; /* 悬停时向右滑动特效 */
}

/* 隐藏原模块的小箭头 */
.sf-sub-indicator { display: none !important; }

/* 7. 搜索框美化 & 图标修复 */
li.sf-search {
    background: transparent !important;
    border: none !important;
    
    /* 【关键】搜索框不参与平分，强制靠右 */
    flex: 0 0 auto !important; 
    margin-left: auto !important; 
    
    display: flex !important;
    align-items: center !important;
    padding-right: 10px !important;
}

li.sf-search input {
    background-color: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    padding: 6px 15px 6px 35px !important; /* 左侧留给图标 */
    font-size: 13px !important;
    color: #333 !important;
    width: 200px !important;
    height: 36px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    
    margin-top: -3px !important; /* 整体上提 */
    margin-bottom: 0 !important;
}

li.sf-search input:focus {
    background-color: #ffffff !important;
    border-color: #0b76a0 !important;
    box-shadow: 0 0 0 3px rgba(11, 118, 160, 0.1) !important;
}

/* 搜索图标定位修复 */
li.sf-search #searchbox p::after {
    color: #999999 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    margin-top: -1px !important; /* 图标跟随上提 */
    
    left: 10px !important;
    right: auto !important;
    font-size: 18px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    pointer-events: none !important;
    
    z-index: 10 !important; /* 层级降级，防止遮挡用户菜单 */
}

/* ==========================================================================
   [最终修复] Quickview (小眼睛) - 位置锁死 & 变色
   修复：静态/悬停高度不一致导致的跳动问题
   ========================================================================== */

/* 1. 图标通用设置：变成“行内块”并向上微调 */
.product-miniature__quickview_button .material-icons {
    display: inline-block !important;
    /* 【核心】必须是块级，位移才稳 */
    transform: translateY(-1px) !important;
    /* 向上微调 1px */
    vertical-align: middle !important;
    /* 基准对齐 */

    /* 屏蔽旧的干扰属性 */
    position: static !important;
    top: auto !important;
    margin: 0 !important;

    transition: color 0.2s ease !important;
    /* 仅颜色过渡，不过渡位置 */
}

/* 2. 悬停状态：只变色，位置严格锁死 */
.product-miniature__quickview_button:hover .material-icons {
    color: #0b76a0 !important;
    transform: translateY(-1px) !important;
    /* 【关键】保持完全一样的位移 */
}

/* ==========================================================================
   [最终修复] 商品颜色选中状态
   目标：覆盖 theme.css 中的 .active 样式 (Specificity: 0,2,1)
   策略：使用更高权重的选择器 (0,3,1) 强行修改边框颜色
   ========================================================================== */

/* 1. 复制 theme.css 的选择器，但在前面加 body 提升权重 */
body .custom-checkbox input[type=checkbox]+span.color.active,
body .custom-checkbox input[type=checkbox]+span.color:hover,
body .custom-radio input[type=radio]+span.color.active,
/* 补充 radio 类型 */
body .custom-radio input[type=radio]+span.color:hover,
body .variant-links .color.active,
body .variant-links .color:hover,
body label .color.active,
body label .color:hover {
    /* 强制改为主题青色 */
    border: 2px solid #0b76a0 !important;

    /* 确保阴影也是青色 (双保险) */
    box-shadow: 0 0 0 1px #0b76a0 !important;
}

/* 2. 针对白色/浅色背景，防止看不清 */
body label .color.active[style*="#ffffff"],
body label .color.active[style*="#FFFFFF"],
body label .color.active[style*="background-color: #ffffff"] {
    /* 白色选中时，内部多加一圈灰色，更有层次感 */
    box-shadow: inset 0 0 0 1px #e0e0e0, 0 0 0 1px #0b76a0 !important;
}

/* ==========================================================================
   [修正] 分类页 Banner - 全图自适应模式 (方案 2)
   目的：解除 400px 高度限制，按原图比例完整显示图片
   ========================================================================== */
.block-category .category-cover img {
    width: 100% !important;
    height: auto !important;
    /* 【核心】高度随宽度自动计算，不再固定 400px */
    min-height: 0 !important;
    /* 清除可能存在的最小高度 */
    max-height: none !important;
    /* 清除最大高度限制 */
    object-fit: contain !important;
    /* 确保图片完整显示，绝不裁剪 */
    aspect-ratio: auto !important;
    /* 恢复图片原始比例 */
}