/* ============================================================
   Learea 官网 - 全局样式
   深蓝色导航栏、白底产品卡片、PC端工业商务风格
   ============================================================ */

/* === Reset & Base === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; color:#333; background:#f5f6fa; line-height:1.6; }

a { color:#0d486b; text-decoration:none; }
a:hover { color:#e63946; }
img { max-width:100%; vertical-align:middle; }
ul, ol { list-style:none; }

/* === Container === */
.container { width:1200px; margin:0 auto; padding:0 15px; }

/* === Top Bar (深蓝背景) === */
.top-bar { background:#04375b; color:#fff; padding:12px 0; }
.top-bar-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo a { display:flex; align-items:center; gap:10px; color:#fff; }
.logo img { height:44px; width:auto; display:block; }
.logo-text { font-size:1.6rem; font-weight:700; letter-spacing:2px; }
.logo-text small { font-size:0.8rem; font-weight:400; color:#94a3b8; }
.top-right { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.contact-phone { font-size:0.95rem; }
.contact-phone .icon-phone { margin-right:4px; }
.contact-phone strong { font-size:1.1rem; color:#f8c630; }
.lang-switch a { color:#94a3b8; font-size:0.85rem; padding:0 4px; }
.lang-switch a.active { color:#fff; font-weight:600; }
.lang-switch .sep { color:#555; }
.search-box form { display:flex; }
.search-box input { padding:6px 10px; border:none; border-radius:3px 0 0 3px; outline:none; width:160px; font-size:0.85rem; }
.search-box button { padding:6px 10px; border:none; background:#f8c630; color:#04375b; border-radius:0 3px 3px 0; cursor:pointer; font-size:0.85rem; }

/* === Main Nav (深蓝色导航栏) === */
.main-nav { background:#0d486b; border-top:1px solid #105a86; }
.nav-inner { display:flex; align-items:center; }
.nav-toggle { display:none; }
.nav-list { display:flex; }
.nav-list > li { position:relative; }
/* 英文、西语使用完全一致的字号与间距 */
.nav-list > li > a { display:block; padding:14px 24px; color:#d1d9e8; font-size:1rem; font-weight:600; white-space:nowrap; transition:all 0.2s; }
.nav-list > li > a:hover { background:#105a86; color:#fff; }
.nav-list > li.active > a { background:#e63946; color:#fff; }

/* === Breadcrumb === */
.breadcrumb { background:#e8ecf1; padding:10px 0; font-size:0.9rem; color:#666; }
.breadcrumb a { color:#0d486b; }
.breadcrumb span { color:#999; }

/* === Page Layout (左右布局) === */
.page-layout { display:flex; gap:30px; padding-top:30px; padding-bottom:30px; min-height:500px; }

/* === Left Menu === */
.left-menu { width:220px; flex-shrink:0; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.08); overflow:hidden; }
.menu-header { display:flex; align-items:center; height:56px; background:#0d486b; color:#fff; padding:0 18px; font-size:1.1rem; font-weight:700; box-sizing:border-box; }
.menu-list li { border-bottom:1px solid #eee; }
.menu-list li a { display:block; padding:12px 18px; color:#333; font-size:0.95rem; transition:all 0.2s; }
.menu-list li a:hover { background:#f0f4ff; color:#0d486b; padding-left:22px; }
.menu-list li.active a { background:#e8ecf1; color:#e63946; font-weight:600; border-left:3px solid #e63946; }

/* === Main Content === */
.main-content { flex:1; min-width:0; }
.page-title { display:flex; align-items:center; height:56px; box-sizing:border-box; font-size:1.4rem; color:#0d486b; margin:0 0 10px; padding:0; border-bottom:2px solid #0d486b; }

/* === Section === */
.section { padding:50px 0; }
.section-title { text-align:center; font-size:1.8rem; color:#0d486b; margin-bottom:6px; }
.section-desc { text-align:center; color:#888; margin-bottom:30px; }

/* === Banner Carousel (全屏轮播) === */
.banner-carousel { position:relative; width:100%; height:420px; overflow:hidden; background:#ddd; }
.carousel-slides { position:relative; height:100%; }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 0.8s; }
.slide.active { opacity:1; }
.slide-text { position:absolute; bottom:80px; left:60px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.slide-text h2 { font-size:2.2rem; margin-bottom:8px; }
.slide-text p { font-size:1.1rem; }
.carousel-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.carousel-dots .dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
.carousel-dots .dot.active { background:#fff; }
.carousel-prev, .carousel-next { position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; color:#fff; background:rgba(0,0,0,0.3); width:44px; height:44px; line-height:44px; text-align:center; cursor:pointer; border-radius:50%; user-select:none; }
.carousel-prev:hover, .carousel-next:hover { background:rgba(0,0,0,0.6); }
.carousel-prev { left:20px; }
.carousel-next { right:20px; }

/* === Category Tabs === */
.category-tabs { text-align:center; margin-bottom:30px; }
.tab-btn { display:inline-block; padding:10px 30px; margin:0 6px; background:#e8ecf1; color:#333; border:none; border-radius:4px; font-size:1rem; cursor:pointer; transition:all 0.2s; }
.tab-btn:hover { background:#d1d9e8; }
.tab-btn.active { background:#0d486b; color:#fff; }

/* === Product Grid (产品卡片) === */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; margin-top:10px; }
.product-card { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform 0.2s,box-shadow 0.2s; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.12); }
.product-card .card-img { width:100%; height:200px; overflow:hidden; background:#f5f6fa; }
.product-card .card-img img { width:100%; height:100%; object-fit:contain; }
.product-card h3 { padding:12px 14px 4px; font-size:1.05rem; color:#0d486b; }
.product-card p { padding:0 14px 14px; font-size:0.85rem; color:#888; line-height:1.5; }

/* === Pagination === */
.pagination { margin-top:30px; text-align:center; }
.page-btn { display:inline-block; padding:8px 14px; margin:0 3px; background:#fff; border:1px solid #ddd; border-radius:3px; color:#333; font-size:0.9rem; cursor:pointer; transition:all 0.2s; }
.page-btn:hover { border-color:#0d486b; color:#0d486b; }
.page-btn.active { background:#0d486b; color:#fff; border-color:#0d486b; }

/* === Detail Page === */
.detail-layout { display:flex; gap:40px; padding-top:30px; padding-bottom:30px; min-height:400px; }
.detail-gallery { width:480px; flex-shrink:0; }
.gallery-main { width:100%; height:360px; background:#f5f6fa; border-radius:6px; overflow:hidden; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.detail-info { flex:1; min-width:0; }
.detail-info h1 { font-size:1.6rem; color:#0d486b; margin-bottom:16px; }
.detail-desc { background:#f9fafc; padding:16px; border-radius:6px; border:1px solid #e8ecf1; min-height:120px; margin-bottom:20px; }
.detail-desc p { line-height:1.8; color:#555; white-space:pre-line; }
.detail-meta p { margin-bottom:6px; font-size:0.95rem; color:#666; }
.detail-meta strong { color:#333; }

/* === 详情页图片切换（缩略图条） === */
.gallery-thumbs { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px; background:#f4f6f9; border:1px solid #e8ecf1; border-radius:6px; }
.gallery-thumbs[hidden] { display:none; }
.thumb-strip { display:flex; gap:10px; overflow-x:auto; flex:1; scroll-behavior:smooth; scrollbar-width:none; }
.thumb-strip::-webkit-scrollbar { display:none; }
.thumb-strip img { width:96px; height:72px; object-fit:contain; border-radius:4px; border:2px solid transparent; cursor:pointer; flex:0 0 auto; background:#fff; }
.thumb-strip img.active { border-color:#0d486b; }
.thumb-nav { width:32px; height:72px; flex:0 0 auto; border:1px solid #dfe4ec; background:#fff; border-radius:4px; color:#5b6b82; font-size:1.4rem; line-height:1; cursor:pointer; }
.thumb-nav:hover { background:#eef2f8; color:#0d486b; }

/* === 静态页面内容（服务与支持 / 关于我们，后台可编辑） === */
.static-content { max-width:900px; margin:0 auto; padding:8px 0 20px; color:#555; font-size:1.02rem; line-height:2; white-space:pre-line; }
.static-content p { margin-bottom:10px; }
.main-content .static-content { max-width:none; margin:18px 0 0; padding:0; }
.placeholder-text { color:#8b95a3; margin-bottom:14px; }
.contact-info p { display:flex; gap:12px; margin-bottom:14px; }
.contact-label { min-width:86px; flex:0 0 auto; color:#8b95a3; }

/* === Footer === */
.site-footer { background:#04375b; color:#94a3b8; padding:30px 0; text-align:center; margin-top:40px; }
.footer-links { margin-bottom:12px; }
.footer-links a { color:#94a3b8; font-size:0.9rem; margin:0 6px; }
.footer-links a:hover { color:#fff; }
.footer-links .sep { color:#555; margin:0 4px; }
.footer-info p { font-size:0.85rem; margin:4px 0; }
.footer-admin-link { margin-top:10px; }
.footer-admin-link a { color:#6d84ab; font-size:0.8rem; }
.footer-admin-link a:hover { color:#fff; }

/* === Loading & Empty Tip === */
.loading-tip, .empty-tip { text-align:center; padding:40px 0; color:#999; font-size:1rem; grid-column:1/-1; }
.empty-tip { color:#e63946; }

/* === Search === */
.search-summary { margin-bottom:14px; padding:10px 14px; background:#fff; border:1px solid #e8ecf1; border-radius:4px; color:#666; font-size:0.95rem; }

/* === Product Filter === */
.product-filter { margin:18px 0; padding:12px 16px; background:#fff; border:1px solid #e8ecf1; border-radius:4px; color:#666; font-size:0.95rem; }
.product-filter a { margin:0 8px; color:#0d486b; }
.product-filter a:hover { color:#e63946; }

/* === Pagination Ellipsis === */
.page-ellipsis { display:inline-block; padding:8px 6px; color:#999; font-size:0.9rem; }

/* === 响应式布局 === */
@media (max-width: 1200px) {
    .container { width:100%; }
}

/* 中等宽度：英文/西语一起收窄间距，避免西语换行（两种语言规则一致） */
@media (max-width: 1150px) {
    .nav-list > li > a { padding:14px 14px; font-size:0.92rem; }
}

@media (max-width: 900px) {
    .page-layout { flex-direction:column; }
    .left-menu { width:100%; }
    .detail-layout { flex-direction:column; }
    .detail-gallery { width:100%; }
    .main-nav { position:relative; }
    .nav-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:12px 14px; }
    .nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; }
    .nav-list { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#0d486b; z-index:100; box-shadow:0 8px 16px rgba(0,0,0,0.25); }
    .nav-list.open { display:flex; }
    .nav-list > li { flex-shrink:0; }
    .nav-list > li > a { white-space:nowrap; padding:13px 20px; }
    .banner-carousel { height:280px; }
    .slide-text { left:20px; bottom:40px; }
    .slide-text h2 { font-size:1.5rem; }
    .top-right { justify-content:space-between; width:100%; margin-top:8px; }
}

@media (max-width: 600px) {
    .top-bar-inner { flex-direction:column; align-items:flex-start; gap:8px; }
    .logo { width:100%; }
    .top-right { width:100%; justify-content:space-between; gap:10px; }
    .contact-phone { font-size:0.85rem; }
    .contact-phone strong { font-size:0.95rem; }
    .nav-list > li > a { padding:10px 14px; font-size:0.9rem; }
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
    .product-card .card-img { height:150px; }
    .product-card h3 { font-size:0.92rem; padding:10px 10px 2px; }
    .product-card p { padding:0 10px 10px; font-size:0.78rem; }
    .banner-carousel { height:200px; }
    .slide-text { left:14px; bottom:26px; right:14px; }
    .slide-text h2 { font-size:1.15rem; margin-bottom:4px; }
    .slide-text p { font-size:0.85rem; }
    .carousel-prev, .carousel-next { display:none; }
    .section { padding:30px 0; }
    .section-title { font-size:1.35rem; }
    .section-desc { font-size:0.9rem; margin-bottom:18px; }
    .category-tabs { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:20px; }
    .tab-btn { width:100%; padding:11px 16px; margin:0; font-size:0.95rem; }
    .search-box { display:none; }
    .breadcrumb { font-size:0.82rem; }
    .page-layout { padding-top:16px; padding-bottom:16px; }
    .detail-layout { padding-top:16px; padding-bottom:16px; }
    .gallery-main { height:260px; }
    .detail-info h1 { font-size:1.25rem; }
    .static-content { font-size:0.95rem; line-height:1.9; }
    .footer-links a { display:inline-block; margin:4px 4px; }
    .footer-info p { font-size:0.78rem; }
}

@media (max-width: 380px) {
    .product-grid { grid-template-columns:1fr; }
    .banner-carousel { height:170px; }
}
/* === 信息页左栏（每页专属） === */
.menu-body { padding:16px 18px 20px; }
.side-hint { color:#7b8698; font-size:0.88rem; line-height:1.7; margin:0; }

/* === 信息页主区域（带背景图） === */
/* 信息页：标题下方是带背景的正文区 */
.info-content { display:flex; flex-direction:column; }
.info-content .page-title { margin-bottom:0; }
.page-body.page-bg {
    flex: 1;
    padding: 26px 30px 30px;
    background-image: linear-gradient(rgba(255,255,255,0.80), rgba(255,255,255,0.84));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-body.page-bg .static-content { margin-top: 0; }
/* === 手机端细节 === */
@media (max-width: 600px) {

    .thumb-strip img { width:76px; height:58px; }
    .thumb-nav { height:58px; width:28px; font-size:1.2rem; }
}
@media (max-width: 600px) {
    .page-body.page-bg { padding: 18px 16px 22px; }
}
/* === 页脚联系方式（标签右对齐，冒号上下对齐） === */
.footer-info { display:inline-block; text-align:left; margin:2px 0 10px; }
.footer-line { display:flex; align-items:baseline; margin:4px 0; font-size:0.85rem; }
.footer-label { flex:0 0 56px; text-align:right; }
.footer-sep { flex:0 0 12px; text-align:center; }
.footer-value { flex:1 1 auto; white-space:nowrap; }
.lang-es .footer-label { flex-basis:112px; }
.footer-copyright p { margin:4px 0; font-size:0.85rem; }
@media (max-width: 600px) {
    .footer-label { flex-basis:86px; }
    .lang-es .footer-label { flex-basis:110px; }
    .footer-value { white-space:normal; }
}
/* === 详情页富文本描述 === */
.detail-desc { white-space:normal; }
.detail-desc p { margin:0 0 12px; }
.detail-desc h3 { margin:14px 0 8px; font-size:1.05rem; color:#0d486b; }
.detail-desc ul, .detail-desc ol { margin:0 0 12px; padding-left:22px; }
.detail-desc ul { list-style:disc; }
.detail-desc ol { list-style:decimal; }
.detail-desc li { margin:4px 0; }
.detail-desc img { max-width:100%; height:auto; border-radius:4px; margin:8px 0; display:block; }
.detail-desc a { color:#0d486b; text-decoration:underline; }
/* === 询盘（Inquiry） === */
.top-inquiry {
    display:inline-block; background:#f8c630; color:#04375b; font-weight:700;
    font-size:0.85rem; padding:7px 14px; border-radius:4px; text-decoration:none;
    white-space:nowrap; transition:background 0.2s;
}
.top-inquiry:hover { background:#ffd45e; color:#04375b; }

.inquiry-inline {
    margin-top:26px; padding:24px 26px 26px; background:#fff;
    border:1px solid #e6ebf2; border-radius:10px;
    box-shadow:0 4px 18px rgba(4,55,91,0.07);
}
.inquiry-inline-title { font-size:1.25rem; color:#0d486b; margin:0 0 6px; }
.inquiry-inline-sub { color:#6b7787; font-size:0.9rem; margin:0 0 16px; }

.inquiry-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.inquiry-field { display:flex; flex-direction:column; gap:5px; font-size:0.85rem; color:#4a5666; }
.inquiry-field em { color:#e63946; font-style:normal; }
.inquiry-field-full { grid-column:1 / -1; }
.inquiry-field input, .inquiry-field textarea {
    width:100%; padding:9px 11px; border:1px solid #d5dbe4; border-radius:5px;
    font-size:0.9rem; font-family:inherit; color:#222; background:#fff; outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.inquiry-field textarea { resize:vertical; min-height:96px; }
.inquiry-field input:focus, .inquiry-field textarea:focus {
    border-color:#0d486b; box-shadow:0 0 0 3px rgba(13,72,107,0.12);
}
.inquiry-field .is-invalid, .inquiry-field input.is-invalid, .inquiry-field textarea.is-invalid {
    border-color:#e63946; box-shadow:0 0 0 3px rgba(230,57,70,0.12);
}
.inquiry-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.inquiry-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.inquiry-btn {
    display:inline-block; background:#0d486b; color:#fff; border:none; border-radius:5px;
    padding:10px 22px; font-size:0.95rem; font-weight:600; cursor:pointer;
    font-family:inherit; transition:background 0.2s;
}
.inquiry-btn:hover { background:#105a86; }
.inquiry-btn:disabled { opacity:0.65; cursor:default; }
.inquiry-btn-lg { margin-top:18px; padding:12px 28px; font-size:1rem; }
.inquiry-privacy { color:#8b95a3; font-size:0.78rem; }
.inquiry-msg { margin:12px 0 0; font-size:0.85rem; color:#e63946; }
.inquiry-msg.error { color:#e63946; }

/* 弹窗 */
body.inquiry-open { overflow:hidden; }
.inquiry-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.inquiry-modal[hidden] { display:none !important; }
.inquiry-backdrop { position:absolute; inset:0; background:rgba(4,26,44,0.62); }
.inquiry-dialog {
    position:relative; background:#fff; border-radius:10px; width:100%; max-width:720px;
    max-height:92vh; overflow-y:auto; padding:26px 28px 24px;
    box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.inquiry-close {
    position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.7rem;
    line-height:1; color:#8b95a3; cursor:pointer; padding:0 6px;
}
.inquiry-close:hover { color:#0d486b; }
.inquiry-title { font-size:1.35rem; color:#0d486b; margin:0 0 6px; padding-right:28px; }
.inquiry-sub { color:#6b7787; font-size:0.9rem; margin:0 0 16px; }
.inquiry-product {
    background:#eef4fa; border-left:3px solid #0d486b; color:#33445c;
    font-size:0.88rem; padding:8px 12px; margin:0 0 16px; border-radius:4px;
}
.inquiry-success { text-align:center; padding:26px 10px 10px; }
.inquiry-success-icon {
    width:54px; height:54px; line-height:54px; margin:0 auto 14px; border-radius:50%;
    background:#e8f5ec; color:#1e7e46; font-size:1.6rem; font-weight:700;
}
.inquiry-success h3 { color:#0d486b; font-size:1.2rem; margin:0 0 8px; }
.inquiry-success p { color:#5a6a80; font-size:0.92rem; margin:0 0 20px; }

.inquiry-alert { border-radius:6px; padding:14px 16px; margin:0 0 18px; font-size:0.92rem; }
.inquiry-alert.ok { background:#e8f5ec; border-left:3px solid #1e7e46; color:#1c6b3e; }
.inquiry-alert.error { background:#fdf0ef; border-left:3px solid #e63946; color:#b0342f; }
.inquiry-alert strong { display:block; margin-bottom:4px; }

@media (max-width: 600px) {
    .inquiry-grid { grid-template-columns:1fr; }
    .inquiry-dialog { padding:22px 18px 20px; max-height:88vh; }
    .inquiry-title { font-size:1.15rem; }
    .top-inquiry { padding:6px 10px; font-size:0.8rem; }
}

.inquiry-turnstile { margin: 14px 0 4px; }
/* === 首页关键词介绍 === */
.home-intro { padding: 34px 0 4px; text-align: center; }
.home-intro-title { font-size: 1.65rem; color: #0d486b; margin: 0 0 10px; line-height: 1.4; }
.home-intro-text { max-width: 860px; margin: 0 auto; color: #5b6b82; font-size: 0.95rem; line-height: 1.9; }
@media (max-width: 600px) {
    .home-intro { padding: 20px 0 2px; }
    .home-intro-title { font-size: 1.2rem; padding: 0 12px; }
    .home-intro-text { font-size: 0.86rem; padding: 0 14px; }
}

/* === 分类页介绍 === */
.category-intro { color:#5b6b82; font-size:0.92rem; line-height:1.9; margin:8px 0 18px; max-width:920px; }
@media (max-width: 600px) { .category-intro { font-size:0.86rem; line-height:1.8; } }