/* 1. 强行让手风琴的折叠层显示出来 */
.accordion--category .accordion-collapse.collapse {
    display: block !important;
}

/* 2. 隐藏那个用来折叠/展开的旋转小箭头（既然已经全展开了，隐藏它防止用户误点） */
.accordion--category .accordion-button {
    pointer-events: none; /* 禁用点击 */
}
.accordion--category .accordion-button::after {
    display: none !important; /* 隐藏 Bootstrap 默认的箭头图标 */
}
/* ==========================================================================
   Zhengzhou Lonsen Biotechnology - 导航栏 + 搜索框 + 方案一菜单全量重构代码
   ========================================================================== */

/* --------------------------------------------------------------------------
   PART 1: 顶部导航栏基础骨架与 Logo 约束
   -------------------------------------------------------------------------- */
.header-bottom {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02) !important;
    padding: 14px 0 !important;
    transition: all 0.3s ease;
}

/* 约束 300x300 的原始高宽，防止爆格，强制国际大牌流线高度 */
.header-bottom__logo {
    max-height: 50px; 
}

.header-bottom__logo img.logo {
    height: 44px !important; 
    width: auto !important;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.header-bottom__logo img.logo:hover {
    transform: scale(1.02);
}

/* 桌面端主菜单项排版 */
.ps-mainmenu__tree {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important; /* 增大留白 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.ps-mainmenu__tree-link {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #334155 !important; /* 优雅深碳灰 */
    text-decoration: none !important;
    letter-spacing: 0.3px;
    padding: 8px 0 !important;
    position: relative;
    transition: color 0.25s ease !important;
}

/* 悬停与当前激活页面的高亮状态（科技感薄荷绿） */
.ps-mainmenu__tree-link:hover,
.ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
    color: #0d9488 !important; 
}

/* 菜单项底部的微动下划线 */
.ps-mainmenu__tree-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2.5px;
    background-color: #0d9488;
    border-radius: 2px;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-mainmenu__tree-link:hover::after,
.ps-mainmenu__tree-item.current .ps-mainmenu__tree-link::after {
    width: 100%;
}

/* 右侧个人中心等辅助功能图标优化 */
.header-block__action-btn {
    color: #475569 !important;
    transition: color 0.2s ease;
}

.header-block__action-btn:hover {
    color: #0d9488 !important;
}


/* --------------------------------------------------------------------------
   PART 2: 胶囊式呼吸搜索框（强效拦截防遮挡）
   -------------------------------------------------------------------------- */
.ps-searchbar__form {
    position: relative !important; 
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 240px;
    height: 38px !important;
    overflow: hidden !important;
}

/* 搜索框聚焦伸缩 */
.ps-searchbar__form:focus-within {
    background: #ffffff !important;
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.08) !important;
    width: 280px; 
}

/* 高权重精准缩进：彻底解决文本被放大镜遮挡 */
form.ps-searchbar__form input.form-control.js-search-input.ps-searchbar__input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 35px 0 46px !important; /* 核心：撑开左边距让文字右移 */
    text-indent: 0 !important;
    z-index: 1 !important;
}

/* 锁定放大镜绝对位置，并开启穿透点击 */
form.ps-searchbar__form .ps-searchbar__magnifier {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important; 
}

/* 修复清除(X)按钮位置 */
.ps-searchbar__clear {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    z-index: 2 !important;
}


/* --------------------------------------------------------------------------
   PART 3: 方案一专属 - 精致独立下拉卡片菜单（含 Hover 隐形热区桥梁）
   -------------------------------------------------------------------------- */

/* 1. 撤销定位冲突，恢复原生 JS 坐标计算，防止主导航变形 */
.ps-mainmenu__tree-item {
    position: static !important; 
}

.ps-mainmenu__tree-item-wrapper {
    display: flex !important;
    align-items: center !important;
    position: relative;
}

/* 2. 隐藏右侧大量完全空白的分栏 */
.js-sub-menu.submenu .submenu__right {
    display: none !important;
}

/* 3. 独立下拉卡片核心外观：收紧宽度，加入轻奢投影 */
.js-sub-menu.submenu {
    width: auto !important;
    min-width: 265px !important; 
    max-width: 320px !important;
    left: auto !important; 
    right: auto !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 14px !important; /* 现代圆角美学 */
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 15px 40px rgba(15, 118, 110, 0.09) !important; /* 微带薄荷绿质感的环境阴影 */
    margin-top: 0 !important; 
}

/* 4. 左侧列表拉满卡片内部，取消多余分割线 */
.js-sub-menu.submenu .submenu__left {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    padding-right: 0 !important;
}

/* 5. 菜单项细节美化：移出生硬高亮，加入优雅的右弹交互 */
.js-sub-menu.submenu .submenu__left-item {
    display: block !important;
    margin-bottom: 5px !important;
    padding: 11px 16px !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 悬停与激活状态：微弹滑移 + 浅薄荷绿底色 */
.js-sub-menu.submenu .submenu__left-item:hover,
.js-sub-menu.submenu .submenu__left-item.active {
    color: #0d9488 !important;
    background-color: #f0fdfa !important; 
    padding-left: 24px !important; /* 平滑向右推出 8px */
    font-weight: 600 !important;
}

/* 6. 在卡片上方架设“隐形天桥”：填死文字到卡片间的几像素空隙，解决离开即消失问题 */
.js-sub-menu.submenu::before {
    content: "" !important;
    position: absolute !important;
    top: -32px !important;      /* 悬空向上延伸，精准对接 Products 文字下方 */
    left: 0 !important;
    width: 100% !important;     
    height: 35px !important;    /* 桥梁自身高度，捕获鼠标轨迹 */
    background: rgba(0, 0, 0, 0) !important; /* 必须完全透明 */
    display: block !important;
    z-index: -1 !important;     
}


/* --------------------------------------------------------------------------
   PART 4: 移动端（Mobile）抽屉菜单美化同步
   -------------------------------------------------------------------------- */
.menu-toggle.btn-link {
    color: #1e293b !important;
    text-decoration: none !important;
}

.ps-mainmenu--mobile.offcanvas {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 20px 0 50px rgba(0,0,0,0.05) !important;
}

.menu--mobile .menu__link {
    color: #334155 !important;
    font-weight: 600 !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease;
}

.menu--mobile .menu__link:hover {
    background-color: #f0fdfa !important;
    color: #0d9488 !important;
}
/* ==========================================================================
   Zhengzhou Lonsen Biotechnology - 页面整体视觉高级感重构
   ========================================================================== */

/* 1. 整体页面背景与字体平滑优化 */
body#category {
    background-color: #f9fbf9 !important; /* 极其柔和的微绿偏白底色，符合天然生物科技感 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   修正版 2. 左侧边栏分类树（全网格锚定 + 智能多态激活 + 滚动随行）
   ========================================================================== */

/* 1. 开启智能滚动跟随（Sticky） */
.ps-categorytree.left-block {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;

    /* 核心随行代码 */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px !important; /* 当页面向下滚动时，侧边栏悬停在距离视口顶部 100px 的位置，完美避开导航栏 */
    z-index: 20 !important;
    transition: top 0.3s ease;
}

/* 2. 头部主链接美化 */
.left-block__title {
    margin-bottom: 16px !important;
}

.left-block__title-link {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a2b20 !important; /* 深墨绿 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}

/* 3. 结构对齐组件（清除 Bootstrap 默认硬线条） */
.accordion--category, 
.accordion--category .accordion-item {
    border: none !important;
    background: transparent !important;
}

.category-tree__item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
}

/* 4. 一级大分类链接（如 Products） */
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header > .category-tree__item-link {
    font-weight: 600 !important;
    color: #2c3e35 !important;
    font-size: 0.98rem !important;
    padding: 8px 0 !important;
    transition: color 0.25s ease;
}

/* 5. 二级子分类列表壳（Gummies, Capsules 等） */
.category-tree__list[data-depth="1"] {
    padding-left: 12px !important;
    border-left: 1.5px solid #e2e8f0 !important; /* 左侧优雅垂直引导线 */
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    list-style: none !important;
}

.category-tree__list[data-depth="1"] .category-tree__item {
    padding: 2px 0 !important;
}

/* 子分类未激活链接基础样式 */
.category-tree__list[data-depth="1"] .category-tree__item-link {
    color: #64748b !important; /* 烟灰色 */
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important; /* 流线胶囊圆角 */
    display: block !important;
    width: 100% !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ==========================================================================
   核心拦截：天衣无缝的【多层级智能选中高亮状态】
   ========================================================================== */

/* 
   不管 PrestaShop 把激活类名丢在 li、div 还是 a 上，
   亦或是 Ajax 触发的 aria-current 属性，以下全路径选择器实行地毯式精准捕获
*/

/* 匹配一、二级 A 标签自身带有激活类名 */
.category-tree__item-link.active,
.category-tree__item-link.current,
.category-tree__item-link[aria-current="page"],
/* 匹配父级 li 带有激活类名 */
.category-tree__item.active .category-tree__item-link,
.category-tree__item.current .category-tree__item-link,
/* 匹配父级 div 头部带有激活类名 */
.category-tree__item-header.active .category-tree__item-link,
.category-tree__item-header.current .category-tree__item-link {
    color: #0d9488 !important; /* 强制染上品牌薄荷绿 */
    text-decoration: none !important;
}

/* 专属加强：针对【二级子分类】选中时，额外亮起高端的流线型浅绿底色 */
.category-tree__list[data-depth="1"] .category-tree__item-link.active,
.category-tree__list[data-depth="1"] .category-tree__item-link.current,
.category-tree__list[data-depth="1"] .category-tree__item-link[aria-current="page"],
.category-tree__list[data-depth="1"] .category-tree__item.active > .category-tree__item-header > .category-tree__item-link,
.category-tree__list[data-depth="1"] .category-tree__item.current > .category-tree__item-header > .category-tree__item-link {
    background-color: #f0fdfa !important; /* 医药级清爽淡绿底色 */
    font-weight: 600 !important; /* 优雅加粗 */
    padding-left: 16px !important; /* 激活时向右平滑微弹 4px，产生视觉焦点 */
}


/* --------------------------------------------------------------------------
   6. 折叠加减号/箭头按钮（Accordion Button）美化同步
   -------------------------------------------------------------------------- */
.category-tree__item-header .accordion-button {
    width: auto !important;
    padding: 0 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #64748b !important;
}

.category-tree__item-header .accordion-button:not(.collapsed) {
    color: #0d9488 !important; /* 展开时小箭头也同步变绿 */
}

/* 分类主入口链接 */
.category-tree__item-link {
    font-weight: 600 !important;
    color: #2c3e35 !important;
    font-size: 0.95rem !important;
    transition: color 0.25s ease;
}

/* 子分类列表优雅间距 */
.category-tree__list[data-depth="1"] {
    padding-left: 12px !important;
    border-left: 1.5px solid #e2e8f0; /* 左侧优雅引导线 */
    margin-top: 8px;
}

.category-tree__list[data-depth="1"] .category-tree__item {
    padding: 6px 0 !important;
}

.category-tree__list[data-depth="1"] .category-tree__item-link {
    color: #64748b !important; /* 次级分类采用优雅烟灰色 */
    font-size: 0.9rem !important;
    font-weight: 400 !important;
}

.category-tree__list[data-depth="1"] .category-tree__item-link:hover {
    color: #0d9488 !important; /* 悬停时变为科技薄荷绿 */
    text-decoration: none !important;
}

/* 3. 中间子分类圆形/方块卡片（Subcategory）美化 */
.subcategory__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
}

.subcategory__link--with-image {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.subcategory__link--with-image:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(13, 148, 136, 0.08) !important;
    border-color: rgba(13, 148, 136, 0.2) !important;
}

.subcategory__thumbnail {
    border-radius: 10px !important;
    transition: transform 0.3s ease !important;
}

.subcategory__link--with-image:hover .subcategory__thumbnail {
    transform: scale(1.04);
}

.subcategory__name {
    display: block;
    margin-top: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* 4. 产品网格与产品卡片（Product Miniature）全面轻奢化重构 */
/*
.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 24px !important;
}
*/

.product-miniature {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-miniature:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
}

/* 产品的角标（Flags）精致化 */
.product-flags {
    top: 12px !important;
    left: 12px !important;
    gap: 6px !important;
}

.product-flags .badge {
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-flags .badge.discount {
    background-color: #ef4444 !important; /* 柔和珊瑚红 */
    color: #ffffff !important;
}

.product-flags .badge.new {
    background-color: #0f766e !important; /* 极客深绿 */
    color: #ffffff !important;
}

/* 产品图片外框包裹 */
.product-miniature__image-container {
    padding: 12px !important;
    background: #fafafa;
}

.product-miniature__image-link {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* 产品文本与价格信息 */
.product-miniature__bottom {
    padding: 20px !important;
}

.product-miniature__title {
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    height: 2.8em !important; /* 限制两行高度，确保对齐 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    transition: color 0.2s ease;
}

.product-miniature__title:hover {
    color: #0d9488 !important;
}

/* 价格区块 */
.product-miniature__prices {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.product-miniature__price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f766e !important; /* 主价格换成极具生命力的深松石绿 */
}

.product-miniature__regular-price {
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* 评论星星美化 */
.product-list-review {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-bottom: 16px !important;
}

.star-content.star-full .star-on {
    color: #ffb800 !important; /* 高级质感的金色星星 */
}

/* 5. 底部按钮转化率优化（See Details 按钮） */
.product-miniature__actions .btn.product-miniature__details {
    width: 100% !important;
    background-color: #2563eb !important; /* 深邃的高级黑灰色 */
    color: #ffffff !important;
    border: none !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.3px;
}

.product-miniature__actions .btn.product-miniature__details:hover {
    background-color: #0d9488 !important; /* 悬停时切换为品牌绿 */
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}
/* 当屏幕宽度小于 767px（移动端）时隐藏该元素 */
@media (max-width: 767px) {
    #left-column.left-column {
        display: none !important;
    }
}