/* ===============================
   HOJON Auto Parts - Main Stylesheet
   Four brands share this base
   =============================== */

/* ====== CSS VARIABLES ====== */
:root {
  --brand-primary: #0d1137;
  --brand-accent: #f57c00;
  --brand-accent-bg: rgba(245,124,0,0.12);
  --text-dark: #111;
  --text-body: #555;
  --text-muted: #888;
  --text-light: #999;
  --bg-light: #f8f9ff;
  --bg-white: #fff;
  --border-light: #f0f0f0;
  --border-card: #eee;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 24px rgba(13,17,55,0.15);
  --max-width: 1120px;
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ROUVADA theme */
[data-brand="rouvada"] {
  --brand-primary: #3a2a1a;
  --brand-accent: #c9a84c;
  --brand-accent-bg: rgba(201,168,76,0.15);
}

/* R theme */
[data-brand="r"] {
  --brand-primary: #2c2c2c;
  --brand-accent: #e53935;
  --brand-accent-bg: rgba(229,57,53,0.12);
}

/* EXOVO theme */
[data-brand="exovo"] {
  --brand-primary: #1565c0;
  --brand-accent: #78909c;
  --brand-accent-bg: rgba(120,144,156,0.15);
}

/* ====== RESET ====== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family); color: var(--text-dark); background: var(--bg-white); -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ====== LAYOUT ====== */
.wrap { max-width:var(--max-width); margin:0 auto; padding:0 32px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ====== NAV ====== */
.nav { display:flex; justify-content:space-between; align-items:center; padding:12px 28px; background:var(--brand-primary); border-bottom:2px solid var(--brand-accent); gap:24px; }
.nav-l { display:flex; align-items:center; gap:12px; }
.nav-l .mark { width:36px; height:36px; background:var(--brand-accent); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; line-height:1; }
.nav-l .t { font-weight:800; font-size:18px; color:#fff; letter-spacing:-0.3px; }
.nav-l .logo-svg { display:flex; align-items:center; line-height:0; }
.nav-l .logo-svg img { display:block; height:55px; width:auto; }
.nav-l .t small { font-weight:400; font-size:11px; color:rgba(255,255,255,0.7); display:block; margin-top:-2px; letter-spacing:0; }
.nav-r { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.nav-r a { font-size:13px; color:rgba(255,255,255,0.85); font-weight:500; padding:6px 14px; border-radius:6px; transition:all .2s; }
.nav-r a:hover { background:rgba(255,255,255,0.1); color:#fff; }
.nav-r a.active { color:#fff; background:rgba(245,124,0,0.2); font-weight:600; }
.nav-r .nav-cta { background:var(--brand-accent); color:#fff!important; padding:8px 20px; font-size:12px; font-weight:600; }
.nav-r .nav-cta:hover { background:#e67100; transform:translateY(-1px); }
.lang-switch { display:inline-flex; gap:2px; margin-left:8px; font-size:12px; }
.lang-switch a { padding:4px 8px; font-size:11px; color:rgba(255,255,255,0.7); }
.lang-switch a.active { font-weight:700; color:#fff; }


/* HOJON Brand Secondary (cyan from real logo) */
:root {
  --brand-secondary: #1E9FE3;
  --brand-secondary-bg: rgba(30,159,227,0.12);
  --brand-secondary-dark: #0d1137;
}

/* Apply brand-secondary to strategic elements */
.btn:hover { background:var(--brand-secondary); border-color:var(--brand-secondary); color:#fff; }
.btn-o:hover { background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); }

.section-divider .text { color:var(--brand-secondary); }

.featured h2 { color:var(--brand-primary); }
.featured .info { padding:32px 36px; }
.featured h2 span { color:var(--brand-secondary); }

.product-page h1 { color:var(--brand-primary); border-bottom:3px solid var(--brand-secondary); padding-bottom:14px; display:inline-block; }
.product-page .sku { color:var(--brand-secondary); font-weight:600; }
.product-page .sku strong { color:var(--brand-primary); }

.quick-specs .pill { background:var(--brand-secondary-bg); }
.quick-specs .pill .v { color:var(--brand-secondary); }

.product-specs .label { color:var(--brand-primary); font-weight:700; }
.product-specs .value { color:var(--brand-primary); border-left:3px solid transparent; padding-left:10px; }

.page-header h1 { color:var(--brand-primary); }
.page-header h1 span { color:var(--brand-secondary); }

.product-cta .btn { background:var(--brand-primary); }
.product-cta .btn:hover { background:var(--brand-secondary); }

.contact-form-col h2 { color:var(--brand-primary); border-bottom:2px solid var(--brand-secondary); padding-bottom:8px; }

.gallery-main:hover { border:2px solid var(--brand-secondary); }

.product-info h3 { color:var(--brand-secondary); }

.breadcrumb a { color:var(--brand-secondary); }

.gallery-thumbs .thumb.active { border-color:var(--brand-accent); background:var(--brand-secondary-bg); }

.featured .tag { color:var(--brand-accent); }
.product-page { border-top: 1px solid var(--brand-secondary-bg); }


/* ====== SUB-BRAND SWITCHER (HOJON / ROUVADA / R / EXOVO) ====== */
.brand-switcher { position:relative; display:inline-block; }
.brand-switcher-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; }
.brand-switcher-btn::after { content:'v'; font-size:9px; opacity:0.6; }
.brand-switcher-menu { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:var(--shadow-md); min-width:160px; z-index:100; overflow:hidden; }
.brand-switcher:hover .brand-switcher-menu { display:block; }
.brand-switcher-menu a { display:block; padding:8px 12px; font-size:12px; color:var(--text-body); font-weight:500; text-decoration:none; border-bottom:1px solid #f0f0f0; }
.brand-switcher-menu a:last-child { border-bottom:none; }
.brand-switcher-menu a:hover { background:var(--bg-light); color:var(--brand-primary); }
.brand-switcher-menu a.active { color:var(--brand-primary); font-weight:700; background:var(--brand-secondary-bg); }
/* ====== BREADCRUMB ====== */
.breadcrumb { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--text-light); padding:20px 0 8px; }
.breadcrumb a { color:var(--brand-primary); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { color:#ddd; }

/* ====== PAGE HEADER ====== */
.page-header { padding:40px 0 32px; text-align:center; }
.page-header h1 { font-size:36px; font-weight:800; color:var(--brand-primary); }
.page-header h1 span { color:var(--brand-accent); position:relative; }
.page-header p { font-size:15px; color:var(--text-muted); margin-top:10px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6; }

/* ====== HERO ====== */
.hero { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:48px 0 56px; }
.hero-left .pre { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--brand-accent); text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; }
.hero-left .pre .dot { width:6px; height:6px; border-radius:50%; background:var(--brand-accent); }
.hero-left h1 { font-size:36px; font-weight:800; line-height:1.1; color:var(--brand-primary); }
.hero-left h1 span { color:var(--brand-accent); position:relative; }
.hero-left h1 span::after { content:''; position:absolute; bottom:2px; left:0; right:0; height:8px; background:var(--brand-accent-bg); border-radius:2px; z-index:-1; }
.hero-left p { font-size:14px; color:var(--text-body); line-height:1.6; margin-top:12px; max-width:440px; }
.hero-left .btn-wrap { display:flex; gap:12px; margin-top:20px; }
.hero-left .btn { display:inline-flex; align-items:center; gap:8px; background:var(--brand-primary); color:#fff; padding:13px 28px; border-radius:var(--radius-sm); text-decoration:none; font-weight:600; font-size:13px; transition:all .25s; }
.hero-left .btn:hover { opacity:0.92; transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.hero-left .btn-o { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--brand-primary); padding:13px 28px; border-radius:var(--radius-sm); text-decoration:none; font-weight:600; font-size:13px; border:1.5px solid #ddd; transition:all .25s; }
.hero-left .btn-o:hover { border-color:var(--brand-primary); }
.hero-right { position:relative; }
.hero-right .img-wrap { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-light); }
.hero-right .img-wrap img { width:100%; display:block; transition:transform .4s; }
.hero-right .img-wrap:hover img { transform:scale(1.02); }
.hero-right .badge { position:absolute; bottom:-10px; left:-10px; background:var(--bg-white); border-radius:10px; padding:8px 12px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:8px; }
.hero-right .badge .n { font-size:18px; font-weight:800; color:var(--brand-primary); line-height:1; }
.hero-right .badge .l { font-size:10px; color:var(--text-light); line-height:1.3; }

/* ====== SECTION DIVIDER ====== */
.section-divider { display:flex; align-items:center; gap:20px; margin:36px 0 24px; }
.section-divider .line { flex:1; height:1px; background:linear-gradient(to right,transparent,#e0e0e0,transparent); }
.section-divider .text { font-size:12px; font-weight:600; color:#bbb; text-transform:uppercase; letter-spacing:3px; white-space:nowrap; }

/* ====== FEATURED PRODUCT ====== */
.featured { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--bg-light); border-radius:var(--radius-lg); overflow:hidden; }
.featured .img-side { position:relative; overflow:hidden; }
.featured .img-side img { width:100%; height:100%; min-height:300px; object-fit:cover; transition:transform .4s; }
.featured .img-side:hover img { transform:scale(1.03); }
.featured .info { padding:32px 36px 32px 32px; display:flex; flex-direction:column; justify-content:center; }
.featured .tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--brand-accent); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; }
.featured h2 { font-size:22px; font-weight:700; color:var(--brand-primary); line-height:1.2; }
.featured .spec { font-size:13px; color:var(--text-muted); margin-top:6px; }
.featured .desc { font-size:14px; color:var(--text-body); line-height:1.7; margin-top:14px; }
.featured .brands { display:flex; flex-wrap:wrap; gap:4px; margin-top:16px; }
.featured .brands span { background:var(--bg-white); border:1px solid #e0e0e0; font-size:11px; padding:4px 10px; border-radius:4px; color:var(--text-body); transition:all .2s; }
.featured .brands span:hover { border-color:var(--brand-primary); color:var(--brand-primary); }

/* ====== PRODUCT GRID ====== */
.p-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.p-card { border:1px solid var(--border-card); border-radius:var(--radius-md); overflow:hidden; transition:all .25s; cursor:default; }
.p-card:hover { border-color:#d0d0d0; box-shadow:var(--shadow-md); transform:translateY(-2px); }
.p-card .img-wrap { background:#fafafa; padding:16px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.p-card .img-wrap img { width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.p-card:hover .img-wrap img { transform:scale(1.06); }
.p-card .info { padding:12px 16px 16px; }
.p-card .tag { font-size:10px; font-weight:600; color:var(--brand-accent); text-transform:uppercase; letter-spacing:1px; }
.p-card h3 { font-size:14px; font-weight:600; color:var(--brand-primary); margin-top:2px; }
.p-card .spec { font-size:11px; color:#aaa; margin-top:2px; }
.p-card .desc { font-size:12px; color:var(--text-body); margin-top:6px; line-height:1.5; }

/* ====== PRODUCT DETAIL ====== */
.prod-detail { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:32px 0 48px; }
.prod-detail .gallery { position:relative; }
.prod-detail .gallery img { width:100%; border-radius:var(--radius-md); background:#fafafa; }
.prod-detail .gallery .gallery-thumbs { display:flex; gap:8px; margin-top:12px; }
.prod-detail .gallery .gallery-thumbs img { width:64px; height:64px; object-fit:contain; border-radius:6px; border:2px solid transparent; cursor:pointer; background:#fafafa; padding:6px; }
.prod-detail .gallery .gallery-thumbs img.active { border-color:var(--brand-primary); }
.prod-detail .info-prod .tag { font-size:11px; font-weight:700; color:var(--brand-accent); text-transform:uppercase; letter-spacing:1.5px; }
.prod-detail .info-prod h1 { font-size:28px; font-weight:800; color:var(--brand-primary); margin-top:4px; }
.prod-detail .info-prod .spec { font-size:14px; color:var(--text-muted); margin-top:6px; }
.prod-detail .info-prod .desc { font-size:14px; color:var(--text-body); margin-top:14px; line-height:1.7; }
.prod-detail .info-prod .meta { margin-top:16px; display:flex; flex-wrap:wrap; gap:12px; }
.prod-detail .info-prod .meta .item { background:var(--bg-light); padding:8px 16px; border-radius:6px; font-size:12px; color:var(--text-body); }
.prod-detail .info-prod .meta .item strong { color:var(--brand-primary); display:block; font-size:13px; }
.prod-detail .lead-cta { margin-top:24px; }
.prod-detail .lead-cta a { display:inline-flex; align-items:center; gap:6px; background:var(--brand-primary); color:#fff; padding:13px 28px; border-radius:var(--radius-sm); font-weight:600; font-size:13px; transition:all .25s; }
.prod-detail .lead-cta a:hover { opacity:0.92; transform:translateY(-1px); box-shadow:var(--shadow-hover); }

/* ====== BRANDS STRIP ====== */
.brands-strip { margin:36px 0; padding:20px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); overflow:hidden; }
.brands-strip .inner { display:flex; gap:40px; animation:scroll 50s linear infinite; width:max-content; }
.brands-strip .inner span { white-space:nowrap; font-size:12px; color:var(--text-light); font-weight:500; letter-spacing:0.5px; }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ====== CONTACT / LEAD FORM ====== */
.contact { background:var(--bg-light); border-radius:var(--radius-lg); padding:28px; margin-bottom:28px; }
.contact-inner { display:flex; gap:32px; align-items:flex-start; }
.contact-form-col { flex:1; max-width:500px; }
.contact-form-col h2 { font-size:18px; font-weight:700; color:var(--brand-primary); }
.contact-form-col > p { font-size:13px; color:var(--text-muted); margin-top:4px; margin-bottom:14px; }
.contact-info-col { flex:0 0 auto; display:flex; flex-direction:column; gap:20px; align-items:flex-start; min-width:200px; }
.contact-info-col .item { text-align:left; }
.contact-info-col .item .v { font-size:14px; font-weight:600; color:var(--brand-primary); }
.contact-info-col .item .v a { color:var(--brand-primary); text-decoration:none; transition:color .2s; }
.contact-info-col .item .v a:hover { color:var(--brand-accent); }
.contact-info-col .item .l2 { font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.contact .btn-c { display:inline-flex; align-items:center; gap:6px; background:var(--brand-primary); color:#fff; padding:11px 24px; border-radius:var(--radius-sm); text-decoration:none; font-weight:600; font-size:13px; transition:all .25s; }
.contact .btn-c:hover { opacity:0.92; transform:translateY(-1px); box-shadow:var(--shadow-hover); }

/* ====== LEAD FORM ====== */
.lead-form { width:100%; }
.lead-form .form-row { margin-bottom:10px; }
.lead-form input,
.lead-form textarea { width:100%; border:1px solid #ddd; border-radius:var(--radius-sm); padding:12px; font-size:14px; font-family:var(--font-family); color:#333; background:var(--bg-white); outline:none; transition:border-color .2s, box-shadow .2s; }
.lead-form input:focus,
.lead-form textarea:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(13,17,55,0.08); }
.lead-form input::placeholder,
.lead-form textarea::placeholder { color:#bbb; font-size:13px; }
.lead-form textarea { resize:vertical; min-height:55px; }
.lead-form .form-submit { width:100%; background:var(--brand-primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:13px 24px; font-size:14px; font-weight:600; cursor:pointer; transition:all .25s; font-family:var(--font-family); }
.lead-form .form-submit:hover { opacity:0.92; transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.lead-form .form-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.lead-form .form-msg { margin-top:12px; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; display:none; }
.lead-form .form-msg.success { display:block; background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
.lead-form .form-msg.error { display:block; background:#ffebee; color:#c62828; border:1px solid #ffcdd2; }

/* ====== ABOUT PAGE ====== */
.about-content { max-width:800px; margin:0 auto; padding:0 0 48px; }
.about-content h2 { font-size:22px; font-weight:700; color:var(--brand-primary); margin-top:36px; margin-bottom:12px; }
.about-content p { font-size:15px; color:var(--text-body); line-height:1.8; margin-bottom:14px; }
.about-content ul { margin:12px 0; padding-left:20px; }
.about-content ul li { font-size:14px; color:var(--text-body); line-height:1.7; margin-bottom:6px; list-style:disc; }
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:32px 0; }
.about-stats .stat { text-align:center; background:var(--bg-light); padding:24px; border-radius:var(--radius-md); }
.about-stats .stat .num { font-size:32px; font-weight:800; color:var(--brand-primary); }
.about-stats .stat .lbl { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ====== FOOTER ====== */
.footer { text-align:center; padding:20px 0; font-size:12px; color:#ccc; border-top:1px solid var(--border-light); }
.footer .footer-links { display:flex; justify-content:center; gap:16px; margin-bottom:8px; }
.footer .footer-links a { font-size:12px; color:var(--text-light); transition:color .2s; }
.footer .footer-links a:hover { color:var(--brand-primary); }

/* ====== BRAND SECTION (for sub-brand pages) ====== */
.brand-hero { padding:48px 0; text-align:center; }
.brand-hero .brand-logo { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:28px; font-weight:800; color:#fff; }
.brand-hero h1 { font-size:36px; font-weight:800; color:var(--brand-primary); }
.brand-hero p { font-size:15px; color:var(--text-body); max-width:600px; margin:10px auto 0; line-height:1.6; }

/* ====== MODAL (product detail overlay) ====== */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(4px); }
.modal-overlay.show { display:flex; }
.modal { background:var(--bg-white); border-radius:var(--radius-lg); width:100%; max-width:700px; max-height:90vh; overflow-y:auto; padding:0; position:relative; animation:modalIn .3s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-close { position:sticky; top:16px; float:right; margin:16px; width:32px; height:32px; border-radius:50%; border:none; background:#eee; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-body); transition:all .2s; }
.modal-close:hover { background:#ddd; color:#111; }
.modal .m-img { width:100%; max-height:320px; object-fit:contain; background:#fafafa; padding:24px; }
.modal .m-body { padding:0 32px 32px; }
.modal .m-body .m-tag { font-size:11px; font-weight:700; color:var(--brand-accent); text-transform:uppercase; letter-spacing:1.5px; }
.modal .m-body h2 { font-size:22px; font-weight:700; color:var(--brand-primary); margin-top:4px; }
.modal .m-body .m-spec { font-size:13px; color:var(--text-muted); margin-top:4px; }
.modal .m-body .m-desc { font-size:14px; color:var(--text-body); margin-top:10px; line-height:1.7; }


/* ====== PRODUCT TREE SIDEBAR ====== */
.products-layout { display:grid; grid-template-columns:240px 1fr; gap:32px; padding:24px 0; align-items:flex-start; }
.prod-tree { background:var(--bg-light); border-radius:var(--radius-md); padding:16px 0; position:sticky; top:80px; }
.prod-tree .tree-root { display:block; padding:8px 16px; color:var(--brand-primary); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border-light); margin-bottom:8px; }
.prod-tree .tree-root:hover { color:var(--brand-accent); }
.prod-tree .tree-cat { display:flex; justify-content:space-between; align-items:center; padding:10px 16px 6px; color:var(--text-dark); font-weight:700; font-size:13px; }
.prod-tree .tree-cat-count { font-size:11px; color:var(--text-muted); font-weight:500; background:#fff; padding:2px 6px; border-radius:10px; }
.prod-tree .tree-items { padding:4px 0 4px 12px; border-left:2px solid var(--border-light); margin:0 16px; }
.prod-tree .tree-item { display:block; padding:5px 10px; color:var(--text-body); font-size:12px; line-height:1.4; border-left:3px solid transparent; margin-left:-15px; margin-top:2px; transition:all .2s; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.prod-tree .tree-item:hover { background:#fff; border-left-color:var(--brand-primary); color:var(--brand-primary); }
.prod-tree .tree-item.active { background:#fff; border-left-color:var(--brand-accent); color:var(--brand-primary); font-weight:600; }
.products-main { min-width:0; }


.product-bullets ul { list-style:disc; }
.product-bullets ul li { margin-bottom:6px; padding-left:4px; }
.product-bullets ul li::marker { color:var(--brand-secondary); }


/* ====== HOT BADGE (for popular products) ====== */
.hot-badge { position:absolute; top:10px; right:10px; background:var(--brand-accent); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:14px; z-index:10; box-shadow:0 2px 4px rgba(0,0,0,0.2); letter-spacing:0.5px; }
.hot-badge::before { content:'鈽?'; }

/* ====== TRUST BADGES (used in product page CTA area) ====== */
.trust-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.trust-badges .badge-item { background:#fff; padding:12px 8px; border-radius:6px; text-align:center; border:1px solid var(--border-light); }
.trust-badges .badge-item .icon { font-size:20px; color:var(--brand-secondary); display:block; margin-bottom:4px; }
.trust-badges .badge-item .label { font-size:10px; color:var(--text-body); font-weight:600; line-height:1.3; }

/* ====== FAQ ACCORDION (for product pages) ====== */
.faq-list { margin:32px 0; }
.faq-item { border-bottom:1px solid var(--border-light); padding:14px 0; cursor:pointer; }
.faq-q { font-weight:700; color:var(--brand-primary); font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.faq-q::after { content:'+'; font-size:20px; color:var(--text-muted); transition:transform .2s; }
.faq-a { color:var(--text-body); font-size:13px; line-height:1.7; max-height:0; overflow:hidden; transition:max-height .3s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-item.open .faq-a { max-height:200px; padding-top:8px; }

/* ====== INDUSTRY SECTORS (for homepage) ====== */
.sectors-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:24px 0; }
.sector-card { padding:20px; background:linear-gradient(135deg,#fff,#f8f9ff); border:1px solid var(--border-light); border-radius:8px; text-align:center; transition:all .25s; }
.sector-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand-secondary); }
.sector-card .emoji { font-size:32px; display:block; margin-bottom:8px; }
.sector-card .name { font-weight:700; color:var(--brand-primary); font-size:13px; }
.sector-card .count { color:var(--text-muted); font-size:11px; margin-top:2px; }


/* ====== STICKY WHATSAPP FLOATING BUTTON ====== */
.wa-sticky { position:fixed; bottom:20px; right:20px; z-index:1000; display:flex; align-items:center; gap:10px; }
.wa-sticky-btn { width:60px; height:60px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 4px 12px rgba(0,0,0,0.25); cursor:pointer; transition:all .25s; text-decoration:none; }
.wa-sticky-btn:hover { transform:scale(1.08); box-shadow:0 6px 16px rgba(37,211,102,0.4); }
.wa-sticky-btn svg { width:30px; height:30px; fill:#fff; }
.wa-sticky-tooltip { background:#fff; color:var(--text-body); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; box-shadow:var(--shadow-md); white-space:nowrap; opacity:0; transition:opacity .3s; pointer-events:none; }
.wa-sticky:hover .wa-sticky-tooltip { opacity:1; }

/* ====== COUNTER STATS (for homepage / about / brand homes) ====== */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:24px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); margin:24px 0; }
.stats-bar .stat { text-align:center; }
.stats-bar .num { font-size:32px; font-weight:800; color:var(--brand-primary); line-height:1; }
.stats-bar .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* ====== CUSTOMER LOGOS STRIP (used on homepage + brand homes) ====== */
.customer-logos { display:flex; gap:32px; align-items:center; flex-wrap:wrap; padding:24px 0; opacity:0.7; }
.customer-logos .logo-item { font-size:18px; font-weight:700; color:var(--text-muted); letter-spacing:1px; padding:8px 16px; border:1px dashed var(--border-card); border-radius:6px; }
/* ====== MOBILE SIDEBAR (collapsible) ====== */
@media (max-width:800px) {
  .products-layout { grid-template-columns:1fr; gap:16px; }
  .prod-tree { position:static; padding:12px 8px; }
  .prod-tree .tree-cat { padding:8px 12px 4px; }
  .prod-tree .tree-items { padding-left:8px; margin:0 12px; }
  .prod-tree .tree-item { padding:4px 8px; margin-left:-9px; font-size:11px; }
  .featured { grid-template-columns:1fr; }
  .featured .img-side img { min-height:240px; }
  .featured .info { padding:20px; }
}

/* ====== PRODUCT PAGE GALLERY + DETAILS ====== */
.product-page { display:grid; grid-template-columns:1.4fr 1fr; gap:32px; padding:24px 0 40px; }
.gallery-main { aspect-ratio:1; background:#fafafa; border-radius:var(--radius-md); overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.gallery-main img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s; }
.gallery-main img:hover { transform:scale(1.05); }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.gallery-thumbs .thumb { aspect-ratio:1; background:#fafafa; border:2px solid transparent; border-radius:6px; cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6px; transition:all .2s; }
.gallery-thumbs .thumb:hover { border-color:var(--brand-primary); }
.gallery-thumbs .thumb.active { border-color:var(--brand-accent); }
.gallery-thumbs .thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.product-info .breadcrumb-mini { font-size:11px; color:var(--text-muted); margin-bottom:12px; }
.product-info .breadcrumb-mini a { color:var(--brand-primary); text-decoration:none; }
.product-info .breadcrumb-mini a:hover { text-decoration:underline; }
.product-info h1 { font-size:28px; font-weight:800; color:var(--brand-primary); line-height:1.2; margin-bottom:8px; }
.product-info .sku { font-size:12px; color:var(--text-muted); margin-bottom:18px; }
.product-info .sku strong { color:var(--text-body); }
.product-specs { margin-top:8px; }
.product-specs .row { display:flex; padding:10px 0; border-bottom:1px solid var(--border-light); font-size:13px; align-items:flex-start; }
.product-specs .row:last-child { border-bottom:none; }
.product-specs .label { width:120px; font-weight:600; color:var(--text-body); flex-shrink:0; }
.product-specs .value { color:var(--text-dark); flex:1; }
.product-specs .value ul { margin:0; padding-left:18px; }
.product-specs .value ul li { margin-bottom:2px; }
.product-cta { display:flex; gap:10px; margin-top:24px; }
.product-cta .btn { display:inline-flex; align-items:center; gap:6px; background:var(--brand-primary); color:#fff; padding:12px 24px; border-radius:var(--radius-sm); text-decoration:none; font-weight:600; font-size:13px; transition:all .25s; }
.product-cta .btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.product-cta .btn-accent { background:var(--brand-accent); }
.product-cta .btn-accent:hover { background:#e67100; }
.product-cta .btn-outline { background:transparent; color:var(--brand-primary); border:1.5px solid #ddd; }
.product-cta .btn-outline:hover { border-color:var(--brand-primary); }
.quick-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0; }
.quick-specs .pill { background:var(--bg-light); padding:10px; border-radius:6px; text-align:center; font-size:11px; color:var(--text-muted); }
.quick-specs .pill .v { font-size:14px; font-weight:700; color:var(--brand-primary); margin-bottom:2px; }

/* Mobile product page */
@media (max-width:800px) {
  .product-page { grid-template-columns:1fr; gap:20px; }
  .product-info h1 { font-size:24px; }
  .product-specs .row { flex-direction:column; padding:8px 0; }
  .product-specs .label { width:auto; margin-bottom:2px; }
  .product-cta { flex-direction:column; }
  .product-cta .btn { width:100%; justify-content:center; }
}
/* ====== RESPONSIVE ====== */
@media (max-width:800px) {
  .hero { grid-template-columns:1fr; gap:32px; padding:32px 0; }
  .hero-left h1 { font-size:30px; }
  .featured { grid-template-columns:1fr; }
  .featured .img-side img { min-height:260px; }
  .featured .info { padding:20px; }
  .p-grid { grid-template-columns:1fr 1fr; }
  .contact { padding:24px 20px; }
  .contact-inner { flex-direction:column; gap:32px; align-items:stretch; }
  .contact-form-col { max-width:100%; }
  .contact-info-col { align-items:center; text-align:center; }
  .contact-info-col .item { text-align:center; }
  .nav-r { gap:2px; }
  .nav-r a { padding:4px 10px; font-size:12px; }
  .prod-detail { grid-template-columns:1fr; gap:24px; }
  .about-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:500px) {
  .p-grid { grid-template-columns:1fr; }
  .wrap { padding:0 20px; }
  .about-stats { grid-template-columns:1fr 1fr; gap:12px; }
  .about-stats .stat { padding:16px; }
  .about-stats .stat .num { font-size:24px; }
}


.in-stock-pill { display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#2e7d32;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600; }
.in-stock-pill::before { content:'';width:6px;height:6px;border-radius:50%;background:#2e7d32;display:inline-block; }


/* ====== P0 CONTACT v2 final · 2026-07-25 编译 · EN 站 ====== */
/* 5 个媒体查询:mobile-3ch / desktop-3ch / desktop-7f / mobile-4f / gdpr-consent */

/* 默认(移动端 < 768px) */
.contact-mobile-3ch { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.contact-mobile-3ch .ch-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 18px; border-radius:8px; font-weight:600; font-size:15px; text-decoration:none; transition:all .2s; }
.contact-mobile-3ch .ch-wa { background:#25D366; color:#fff; }
.contact-mobile-3ch .ch-email { background:var(--brand-primary); color:#fff; }
.contact-mobile-3ch .ch-form { background:var(--bg-white); color:var(--brand-primary); border:2px solid var(--brand-primary); }
.contact-mobile-3ch .ch-btn:hover { opacity:.92; transform:translateY(-1px); }

.contact-desktop-3ch { display:none; }

.contact-desktop-7f { display:none; }

.contact-mobile-4f { display:block; margin-top:8px; }
.contact-mobile-4f > summary { padding:14px 18px; background:var(--bg-white); border:2px solid var(--brand-primary); color:var(--brand-primary); border-radius:8px; font-weight:600; cursor:pointer; list-style:none; text-align:center; }
.contact-mobile-4f > summary::-webkit-details-marker { display:none; }
.contact-mobile-4f[open] > summary { margin-bottom:12px; }

.gdpr-consent { display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:12px; color:var(--text-muted); line-height:1.5; cursor:pointer; }
.gdpr-consent input[type="checkbox"] { margin-top:2px; flex-shrink:0; }

.product-interest { display:flex; flex-direction:column; gap:6px; padding:6px 0; }
.product-interest .pi-label { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.product-interest .pi-opt { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-body); cursor:pointer; }
.product-interest-inline { display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; padding:8px 0; }
.product-interest-inline .pi-opt { font-size:12px; }

.lead-form select { width:100%; border:1px solid #ddd; border-radius:var(--radius-sm); padding:12px; font-size:14px; font-family:var(--font-family); color:#333; background:var(--bg-white); outline:none; transition:border-color .2s, box-shadow .2s; }
.lead-form select:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(13,17,55,0.08); }

/* 桌面端 ≥ 768px 翻转 */
@media (min-width:768px) {
  .contact-mobile-3ch { display:none !important; }
  .contact-desktop-3ch { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .contact-desktop-3ch .ch-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:6px; font-weight:600; font-size:13px; text-decoration:none; transition:all .2s; }
  .contact-desktop-3ch .ch-wa { background:#25D366; color:#fff; }
  .contact-desktop-3ch .ch-email { background:var(--brand-primary); color:#fff; }
  .contact-desktop-3ch .ch-form { background:var(--bg-white); color:var(--brand-primary); border:2px solid var(--brand-primary); }
  .contact-desktop-3ch .ch-btn:hover { opacity:.92; transform:translateY(-1px); }
  .contact-desktop-7f { display:block; }
  .contact-mobile-4f { display:none !important; }
}

/* v18 升级 · 2026-07-25 11:30 BJ · RU 站 Telegram 按钮样式 (蓝色 · 临时 fallback 占位) */
.contact-mobile-3ch .ch-tg,
.contact-desktop-3ch .ch-tg {
  background:#0088cc;
  color:#fff;
}
.contact-mobile-3ch .ch-tg:hover,
.contact-desktop-3ch .ch-tg:hover {
  opacity:.92;
  transform:translateY(-1px);
}
/* RU 站 Telegram 占位标识 · 等老板建 bot 后可移除 */
.ch-tg[title*="placeholder"]::after {
  content: " (RU)";
  font-size:10px;
  opacity:.7;
  margin-left:4px;
}


/* ====== v25 P2 �� 2026-07-26 00:10 BJ �� GDPR consent ���� + ���������� ====== */

/* v25.3 GDPR consent �����Ű� �� �ϰ� 23:44 BJ �İ壨�ؼ� white-space: nowrap�� */
.gdpr-consent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  background: #f9f9f9;
  border-radius: 0.5rem;
  white-space: nowrap;       /* �ؼ� �� ����һ�� �� ��ǿ�ƶ��� */
  overflow-x: auto;          /* ��Ļխʱ������� */
  cursor: pointer;
}

.gdpr-consent input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.gdpr-label {
  white-space: nowrap;       /* �ؼ� �� ����һ�� */
  font-size: 0.9rem;
  color: var(--text-body, #333);
  cursor: pointer;
}

.gdpr-link {
  white-space: nowrap;       /* �ؼ� �� Privacy Policy ���� */
  color: #1F4E79;
  text-decoration: underline;
  cursor: pointer;
}

/* v25.3 �ƶ�����Ӧʽ �� С��Ļ������Ȼ���У����ƻ�������ͼ�� */
@media (max-width: 768px) {
  .gdpr-consent {
    white-space: normal;
    flex-wrap: wrap;
  }
  .gdpr-label {
    white-space: normal;
  }
  .gdpr-link {
    white-space: normal;
  }
}

/* v25.2 ���������� �� Trust Bar + Quick Channels + Cards */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
  margin: 24px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border-radius: 12px;
  border: 1px solid #e8e8e8;
}

.trust-bar .tb-item {
  text-align: center;
  padding: 12px 8px;
}

.trust-bar .tb-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
}

.trust-bar .tb-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.trust-bar .tb-value {
  font-size: 15px;
  font-weight: 700;
  color: #1F4E79;
  display: block;
}

@media (max-width: 768px) {
  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* v25.2 Quick Channels �� 3 ��ť���ۺ��� */
.quick-channels {
  display: flex;
  gap: 12px;
  padding: 16px;
  margin: 20px 0;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #1F4E79;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-channels .qc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
  min-width: 180px;
  flex: 1 1 auto;
}

.quick-channels .qc-wa { background: #25D366; color: #fff; }
.quick-channels .qc-email { background: #1F4E79; color: #fff; }
.quick-channels .qc-form { background: #fff; color: #1F4E79; border: 2px solid #1F4E79; }
.quick-channels .qc-btn:hover { opacity: 0.92; transform: translateY(-1px); }

/* v25.2 ��Ϣ��Ƭ �� 3 �� */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}

.info-cards .ic-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.2s;
}

.info-cards .ic-card:hover {
  border-color: #1F4E79;
  box-shadow: 0 4px 12px rgba(31, 78, 121, 0.1);
  transform: translateY(-2px);
}

.info-cards .ic-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}

.info-cards .ic-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

.info-cards .ic-value {
  font-size: 16px;
  font-weight: 700;
  color: #1F4E79;
  margin-bottom: 4px;
  display: block;
  word-break: break-all;
}

.info-cards .ic-value a {
  color: #1F4E79;
  text-decoration: none;
}

.info-cards .ic-value a:hover { color: #25D366; }

.info-cards .ic-sub {
  font-size: 13px;
  color: #666;
  display: block;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
}

/* v25.2 FAQ ���� */
.faq-quick {
  margin: 32px 0;
  padding: 24px;
  background: #fafbfc;
  border-radius: 12px;
}

.faq-quick h3 {
  font-size: 20px;
  color: #1F4E79;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.faq-quick .faq-item {
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 0;
}

.faq-quick .faq-item:last-child { border-bottom: none; }

.faq-quick .faq-q {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  font-size: 14px;
}

.faq-quick .faq-a {
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

/* v25.2 Lead Form �Ӿ����� */
.lead-form {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px;
}

.lead-form h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1F4E79;
  margin: 0 0 16px 0;
  border-bottom: 2px solid #1F4E79;
  padding-bottom: 8px;
}

.lead-form .form-row input,
.lead-form .form-row textarea,
.lead-form .form-row select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lead-form .form-row input:focus,
.lead-form .form-row textarea:focus,
.lead-form .form-row select:focus {
  border-color: #1F4E79;
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.08);
}

.form-submit {
  width: 100%;
  padding: 14px 24px;
  background: #1F4E79;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.form-submit:hover {
  background: #163d5e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31, 78, 121, 0.2);
}

.form-msg {
  margin-top: 12px;
  font-size: 13px;
  min-height: 18px;
}

/* v25.2 Section ������ */
.section-title {
  font-size: 22px;
  font-weight: 800;
  color: #1F4E79;
  margin: 32px 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid #1F4E79;
  display: inline-block;
}

.section-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0 0 20px 0;
  line-height: 1.6;
}


/* ====== v25 P2 fix �� 2026-07-26 00:25 BJ �� �޸� leadform �ֶα� !important ���ص� bug ====== */
.form-fields-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 600px) {
  .form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-fields-grid > .form-row-full {
    grid-column: 1 / -1;
  }
}


/* ====== v25 P2 fix �� form-row ͨ����ʽ ====== */
.form-fields-grid .form-row,
.lead-form .form-row {
  display: block;
  width: 100%;
}

.form-fields-grid .form-row input,
.form-fields-grid .form-row textarea,
.form-fields-grid .form-row select {
  width: 100%;
  box-sizing: border-box;
}