/* Motocam / 摩托咖 — bilingual static site. Brand: red #E60012, black, white. */
:root{
  --red:#e60012; --red-dark:#b4000e; --ink:#141414; --ink2:#333;
  --muted:#666; --line:#e5e5e5; --bg:#fff; --bg2:#f6f6f6; --dark:#111;
  --max:1180px; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px}
body:lang(en){font-family:Arial,Helvetica,"Segoe UI",sans-serif}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.35;margin:0 0 14px}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:0 0 14px}
.section{padding:56px 0}
.section.alt{background:var(--bg2)}
.section-title{font-size:1.6rem;margin-bottom:8px}
.section-sub{color:var(--muted);margin-bottom:28px}
.btn{display:inline-block;background:var(--red);color:#fff;padding:11px 26px;border-radius:6px;font-weight:700;border:0;cursor:pointer}
.btn:hover{background:var(--red-dark);text-decoration:none}
.btn.ghost{background:#fff;color:var(--red);border:1px solid var(--red)}
.btn.ghost:hover{background:var(--red);color:#fff}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .logo-mark{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-1px}
.brand small{display:block;font-size:.7rem;font-weight:400;color:var(--muted);line-height:1.2}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav a{color:var(--ink);font-weight:600}
.main-nav a.active,.main-nav a:hover{color:var(--red);text-decoration:none}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.lang-switch a{padding:5px 14px;font-size:.85rem;font-weight:700;color:var(--ink2)}
.lang-switch a.active{background:var(--red);color:#fff}
.lang-switch a:hover{text-decoration:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;width:42px;height:42px;font-size:1.3rem;cursor:pointer}

/* Hero */
.hero{background:linear-gradient(180deg,#171717 0%,#2a2a2a 100%);color:#fff;padding:64px 0}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero h1{font-size:2.4rem;margin-bottom:12px}
.hero h1 em{color:var(--red);font-style:normal}
.hero p.lead{color:#ddd;font-size:1.08rem}
.hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* Cards */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.card:hover{box-shadow:0 10px 26px rgba(0,0,0,.10)}
.card .thumb{background:#fafafa;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:14px}
.card .body{padding:18px;display:flex;flex-direction:column;flex:1}
.card .tag{display:inline-block;background:#fff0f1;color:var(--red);font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:20px;margin-bottom:8px}
.card .body p{color:var(--muted);font-size:.95rem;flex:1}
.card .body .more{font-weight:700;margin-top:8px}

/* Product detail */
.breadcrumb{font-size:.9rem;color:var(--muted);margin:18px 0 6px}
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding:18px 0 40px}
.product-gallery{background:#fafafa;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.product-gallery img{width:100%;object-fit:contain}
.product-gallery .thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.product-gallery .thumbs img{width:96px;height:72px;object-fit:contain;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#fff;padding:4px}
.product-gallery .thumbs img.active{border-color:var(--red);box-shadow:0 0 0 2px rgba(230,0,18,.25)}
.spec-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95rem}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.spec-table th{background:var(--bg2);width:32%;font-weight:700}
.spec-table tr.group td{background:#111;color:#fff;font-weight:700}
.feature-list{padding-left:20px}
.feature-list li{margin-bottom:8px}
.note{font-size:.9rem;color:var(--muted);border-left:3px solid var(--red);padding:6px 12px;background:#fff8f8;margin:16px 0}

/* News */
.news-item{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.news-item .date{flex:0 0 74px;text-align:center;background:var(--bg2);border-radius:8px;padding:10px 0}
.news-item .date b{display:block;font-size:1.5rem;line-height:1;color:var(--red)}
.news-item .date span{font-size:.8rem;color:var(--muted)}
.news-item h3{margin-bottom:6px}
.news-item p{color:var(--muted);font-size:.95rem;margin:0}
.news-item .thumb{flex:0 0 190px;border-radius:8px;overflow:hidden}
.news-item .thumb img{width:100%;height:120px;object-fit:cover}
.article-img{border-radius:var(--radius);margin:8px 0 20px;max-height:460px;width:100%;object-fit:cover}
.article-meta{color:var(--muted);font-size:.9rem;margin-bottom:16px}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem;font-family:inherit}
input:focus,textarea:focus{outline:2px solid rgba(230,0,18,.35);border-color:var(--red)}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start}
.contact-box{background:var(--bg2);border-radius:var(--radius);padding:24px}
.contact-box p{margin-bottom:10px}
.contact-box b{display:inline-block;min-width:88px}

/* Footer */
.site-footer{background:var(--dark);color:#bbb;padding:44px 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px}
.site-footer h4{color:#fff;margin-bottom:12px;font-size:1rem}
.site-footer a{color:#bbb}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.copyright{border-top:1px solid #2a2a2a;padding-top:16px;font-size:.85rem;text-align:center;color:#888}

/* Responsive */
@media(max-width:1024px){
  .grid.cols-4{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:2rem}
}
@media(max-width:900px){
  .nav-toggle{display:block}
  .main-nav{position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:12px 20px 18px;border-bottom:1px solid var(--line);display:none;gap:14px}
  .main-nav.open{display:flex}
  .header-inner{position:relative}
  .hero-inner{grid-template-columns:1fr}
  .product-hero{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  body{font-size:15px}
  .section{padding:38px 0}
  h1{font-size:1.55rem}
  .hero{padding:40px 0}
  .hero h1{font-size:1.7rem}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .news-item{flex-direction:column}
  .news-item .thumb{flex:none;width:100%}
  .news-item .thumb img{height:auto}
  .spec-table{display:block;overflow-x:auto;white-space:normal}
  .brand small{display:none}
  .lang-switch a{padding:5px 10px}
}

/* Accessories grid (MT1 what's-in-the-box) */
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 28px}
.acc-cell{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:#fff}
.acc-cell img{max-width:100%;height:150px;object-fit:contain}
.acc-cell p{margin:10px 0 0;font-weight:600}

/* Social links (EN contact) */
.social-list{list-style:none;padding:0;margin:12px 0}
.social-list li{padding:8px 0;border-bottom:1px solid var(--line)}
.social-list a{font-weight:700}
.social-list .todo{color:#888;font-size:.85rem;margin-left:6px}

@media(max-width:600px){
  .acc-grid{grid-template-columns:repeat(2,1fr)}
  .acc-cell img{height:110px}
}

/* QR codes (ZH contact) */
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.qr-cell{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:#fff}
.qr-cell img{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.qr-cell p{margin:8px 0 0}

@media(max-width:600px){
  .qr-grid{grid-template-columns:1fr}
}

/* language switcher */
.lang-select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff;font-size:14px;max-width:130px}

/* per-language fonts */
html[lang="ja"] body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","PingFang SC","Microsoft YaHei",Arial,sans-serif}
html[lang="ar"] body{font-family:Tahoma,Arial,"Segoe UI",sans-serif}
html[lang="ru"] body{font-family:"Segoe UI",Arial,"Helvetica Neue",sans-serif}

/* RTL (Arabic) */
[dir="rtl"] .spec-table th,[dir="rtl"] .spec-table td{text-align:right}
[dir="rtl"] .feature-list{padding-left:0;padding-right:20px}
[dir="rtl"] .note{border-left:none;border-right:3px solid var(--red)}
[dir="rtl"] .breadcrumb{text-align:right}

/* Nav: never wrap a menu item into two lines; shrink gaps instead */
.main-nav{flex-shrink:0}
.main-nav a{white-space:nowrap;flex-shrink:0}
.brand{flex-shrink:0}
.lang-select{flex-shrink:0}
@media(max-width:1280px){
  .brand small{display:none}
}
@media(max-width:1150px){
  .main-nav{gap:14px}
  .main-nav a{font-size:15px}
  .brand{font-size:1.1rem}
  .lang-select{max-width:110px;font-size:13px}
}