/* ==========================================================================
   site-custom.css — SmartReadingPen 站点私有定制样式（唯一允许的自定义CSS）
   1. 产品详情页询盘按钮品牌化
   2. 产品长内容版块（.rp-* 渲染于 .ck-content 内）
   ========================================================================== */

:root {
    --rp-brand: var(--color-primary);
    --rp-brand-dark: #003d75;
    --rp-tint: #eef5fb;
    --rp-ink: #101828;
    --rp-muted: #667085;
    --rp-line: #e4e7ec;
}

/* H1 安全网（views/page.blade.php）：旧页面/首页无 H1 时的无障碍 H1 */
.srp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 1. Request Quote 按钮：直接复用 agon 原生按钮，仅做最小适配 ------------------------------ */
/* 列表卡片：原生 .btn-cart 小芯片（浅青底/8px 圆角/主色文字），去掉原生加号图标并居中文字 */
.btn-cart-inquiry {
    display: inline-flex;
    align-items: center;
    background-image: none !important;
    padding: 5px 16px !important;
    text-decoration: none;
}
/* 详情页：原生 .btn-black 深色箭头主按钮（与首页 Explore Products 同款），无需额外样式 */

/* 2. 产品长内容 ------------------------------------------------------------------------- */
.ck-content .rp-lead {
    font-size: 19px;
    line-height: 1.7;
    color: var(--rp-ink);
}
.ck-content .rp-lead strong {
    color: var(--rp-brand);
}
.ck-content h2 {
    font-size: 28px;
    line-height: 1.3;
    margin: 48px 0 20px;
    color: var(--rp-ink);
}
.ck-content h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 6px;
    color: var(--rp-ink);
}
.ck-content p {
    font-size: 16px;
    line-height: 1.75;
    color: #344054;
}
.ck-content ul li {
    font-size: 16px;
    line-height: 1.7;
    color: #344054;
    margin-bottom: 8px;
}

/* Feature 卡片栅格 */
.ck-content .rp-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0 8px;
}
.ck-content .rp-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--rp-line);
    border-radius: 14px;
    padding: 20px;
}
.ck-content .rp-feature p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--rp-muted);
}

/* 图标（CSS mask，24px 线性图标） */
.ck-content .rp-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: var(--rp-brand);
    -webkit-mask: var(--ico) center / 26px 26px no-repeat;
    mask: var(--ico) center / 26px 26px no-repeat;
}
.ck-content .rp-ico-oid { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ck-content .rp-ico-chip { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/svg%3E"); }
.ck-content .rp-ico-tip { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3Z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5Z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E"); }
.ck-content .rp-ico-storage { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6v14H3zM9 3h12v18H9'/%3E%3Cpath d='M14 6h2M14 10h2M14 14h2M14 18h2M6 11h0M6 16h0'/%3E%3C/svg%3E"); }
.ck-content .rp-ico-btn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 1 1 4 0v5'/%3E%3Cpath d='M13 11V4a2 2 0 1 1 4 0v9'/%3E%3Cpath d='M17 13V8a2 2 0 1 1 4 0v6a7 7 0 0 1-7 7h-2a7 7 0 0 1-6-3l-3-4a2 2 0 0 1 3-2.5L9 14'/%3E%3C/svg%3E"); }
.ck-content .rp-ico-battery { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 10l3 2-3 2v-4Z'/%3E%3C/svg%3E"); }

/* 内容配图 */
.ck-content .rp-shot {
    display: block;
    max-width: 560px;
    width: 100%;
    height: auto;
    margin: 28px auto 8px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 41, .10);
}
.ck-content .rp-shot-wide {
    max-width: 960px;
    margin-left: 0;
    margin-right: 0;
}

/* 规格表 */
.ck-content table.rp-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 12px;
    font-size: 15px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    overflow: hidden;
}
.ck-content .rp-spec-table th,
.ck-content .rp-spec-table td {
    text-align: left;
    padding: 13px 18px;
    border-bottom: 1px solid var(--rp-line);
    vertical-align: top;
}
.ck-content .rp-spec-table tr:last-child th,
.ck-content .rp-spec-table tr:last-child td {
    border-bottom: 0;
}
.ck-content .rp-spec-table th {
    width: 32%;
    background: var(--rp-tint);
    color: var(--rp-brand);
    font-weight: 700;
    white-space: nowrap;
}
.ck-content .rp-spec-table td {
    color: #344054;
    background: #fff;
}
.ck-content .rp-note {
    font-size: 14px;
    color: var(--rp-muted);
}

/* 应用场景卡片 */
.ck-content .rp-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0;
}
.ck-content .rp-app {
    border: 1px solid var(--rp-line);
    border-left: 4px solid var(--rp-brand);
    border-radius: 12px;
    padding: 18px 20px;
    background: #fff;
}
.ck-content .rp-app p {
    margin: 0;
    font-size: 14.5px;
    color: var(--rp-muted);
}

/* FAQ */
.ck-content .rp-faq h3 {
    font-size: 17px;
    margin: 22px 0 6px;
    padding-left: 14px;
    border-left: 3px solid var(--rp-brand);
}
.ck-content .rp-faq p {
    padding-left: 17px;
}

/* CTA 区块 */
.ck-content .rp-cta {
    margin: 48px 0 16px;
    padding: 40px 32px;
    text-align: center;
    background: linear-gradient(135deg, var(--rp-tint), #f8fafc);
    border: 1px solid #d8e8f5;
    border-radius: 18px;
}
.ck-content .rp-cta h2 {
    margin: 0 0 10px;
}
.ck-content .rp-cta p {
    max-width: 640px;
    margin: 0 auto 18px;
}
.ck-content .rp-cta-btn {
    display: inline-block;
    background: var(--rp-brand);
    color: #fff !important;
    border-radius: 50px;
    padding: 14px 34px;
    font-weight: 700;
    font-size: 16px;
    margin: 4px 8px;
    text-decoration: none;
}
.ck-content .rp-cta-btn:hover {
    background: var(--rp-brand-dark);
    color: #fff;
}
.ck-content .rp-cta-link {
    display: inline-block;
    margin: 4px 8px;
    font-weight: 600;
    color: var(--rp-brand);
    text-decoration: underline;
}

/* 相关指南 */
.ck-content ul.rp-guides {
    list-style: none;
    padding-left: 0;
}
.ck-content ul.rp-guides li {
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--rp-line);
    position: relative;
}
.ck-content ul.rp-guides li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    width: 14px;
    height: 14px;
    background-color: var(--rp-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 列表页侧栏 Popular models：询盘模式下隐藏 $0.00 价格与空星评（挂件自带模板） */
.list-products-sidebar .rating {
    display: none !important;
}

/* 响应式 */
@media (max-width: 767.98px) {
    .ck-content .rp-features,
    .ck-content .rp-apps {
        grid-template-columns: 1fr;
    }
    .ck-content .rp-spec-table th {
        width: 40%;
        white-space: normal;
    }
}

/* ==========================================================================
   3. B2B 主导航（2026-09-24）：头部 RFQ 按钮 + 六项导航紧凑化
   ========================================================================== */
.action-header-cta {
    display: inline-block;
}
.rfq-header-btn {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 18px;
    line-height: 1.2;
    white-space: nowrap;
}
.rfq-header-btn:hover {
    background-color: var(--rp-brand-dark, #003d75);
    border-color: var(--rp-brand-dark, #003d75);
    color: #fff;
}
.header-nav-right .box-search-top {
    vertical-align: middle;
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header .main-header .header-left .header-logo {
        margin-right: 10px;
        flex: 0 0 auto;
    }
    .header .main-header .header-left .header-logo img {
        max-height: 38px !important;
    }
    .header .main-header .header-left .header-nav {
        width: auto;
        flex: 0 1 auto;
    }
    .header .main-header .header-right {
        width: -webkit-fit-content;
        width: fit-content;
        max-width: none;
        flex: 0 0 auto;
    }
    .header .main-header .rfq-header-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}
@media (min-width: 1280px) and (max-width: 1399.98px) {
    .header .main-header .main-menu > li > a {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .header .main-menu li.has-children > a:after {
        margin-left: 3px;
        font-size: 12px;
    }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .header .main-header .main-menu > li > a {
        font-size: 13px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .header .main-menu li.has-children > a:after {
        margin-left: 2px;
        font-size: 11px;
    }
}
@media (min-width: 1400px) and (max-width: 1499.98px) {
    .header .main-header .header-left .header-logo {
        margin-right: 14px;
        flex: 0 0 auto;
    }
    .header .main-header .header-left .header-logo img {
        max-height: 38px !important;
    }
    .header .main-header .header-left .header-nav {
        width: auto;
        flex: 0 1 auto;
    }
    .header .main-header .header-right {
        width: -webkit-fit-content;
        width: fit-content;
        max-width: none;
        flex: 0 0 auto;
    }
    .header .main-header .rfq-header-btn {
        padding: 9px 16px;
        font-size: 14px;
    }
    .header .main-header .main-menu > li > a {
        font-size: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .header .main-menu li.has-children > a:after {
        margin-left: 3px;
        font-size: 12px;
    }
}
@media (min-width: 1500px) {
    .header .main-header .main-menu > li > a {
        font-size: 15px;
        padding-left: 14px;
        padding-right: 14px;
    }
}
@media (max-width: 575.98px) {
    .rfq-header-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    .header-nav-right .me-2 {
        margin-right: 0.4rem !important;
    }
}

/* ==========================================================================
   4. 博客文章末尾 B2B 转化带（views/post.blade.php 子主题覆盖）
   ========================================================================== */
.b2b-post-cta {
    margin-top: 40px;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef4ff 0%, #f7faff 100%);
    border: 1px solid #d8e4f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.b2b-post-cta__eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}
.b2b-post-cta__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #101828;
}
.b2b-post-cta__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #475467;
}
.b2b-post-cta__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 210px;
}
.b2b-post-cta__actions .btn {
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.b2b-post-cta__ghost {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}
.b2b-post-cta__ghost:hover {
    background: var(--color-primary);
    color: #fff;
}
@media (max-width: 767.98px) {
    .b2b-post-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .b2b-post-cta__actions {
        width: 100%;
    }
}

/* Header compaction breakpoints live with the other @media rules above. */

/* 2026-09-30 顶栏语言/用户下拉被首屏 Hero 大图遮挡：下拉自身 z-index:1000 困在
   .header-top-green（relative,z-index:2）层叠上下文内，而首屏 .banner-imgs
   大图 z-index:1 且 DOM 在后；下拉溢出 53px 顶栏盒进入 hero 区时被盖。
   将顶栏层叠上下文抬高一级（2→3）即压过 hero，无需 !important、不动下拉/hero。
   实测 elementFromPoint 两个检测点均命中菜单项，内页/移动端无副作用。 */
.header-top-green {
    z-index: 3;
}