/*
Theme Name: Shangxian LED Display Pro
Theme URI: https://example.com/shangxian-led-display-pro
Author: ChatGPT for Shenzhen Shangxian Technology Co., Ltd.
Author URI: https://example.com
Description: A lightweight B2B WordPress theme for LED display manufacturers, inspired by modern LED display supplier websites. Built for Hostinger WordPress Hosting, product inquiry conversion, SEO-friendly product pages, solutions, cases and contact sections.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shangxian-led-pro
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns, responsive-layout, business, e-commerce
*/

:root {
  --sx-blue: #1062ff;
  --sx-blue-2: #003bb8;
  --sx-cyan: #00b7ff;
  --sx-orange: #ff8a00;
  --sx-dark: #06111f;
  --sx-navy: #0b1a33;
  --sx-muted: #64748b;
  --sx-light: #f5f8ff;
  --sx-border: #e2e8f0;
  --sx-white: #ffffff;
  --sx-radius: 18px;
  --sx-shadow: 0 20px 45px rgba(9, 30, 66, 0.12);
  --sx-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
  --sx-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--sx-dark);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #fff;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { padding-left: 1.2rem; }
button, input, textarea, select { font: inherit; }

.sx-container { width: min(var(--sx-container), calc(100% - 36px)); margin: 0 auto; }
.sx-section { padding: 78px 0; }
.sx-section-tight { padding: 56px 0; }
.sx-kicker { color: var(--sx-blue); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin-bottom: 10px; }
.sx-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; margin: 0 0 16px; color: var(--sx-dark); letter-spacing: -0.03em; }
.sx-subtitle { font-size: 17px; color: var(--sx-muted); margin: 0 auto 34px; max-width: 800px; }
.sx-center { text-align: center; }
.sx-grid { display: grid; gap: 24px; }
.sx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sx-topbar {
  background: var(--sx-navy);
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.sx-topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 14px; }
.sx-topbar a { color: #fff; font-weight: 700; }
.sx-topbar .sx-contact-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.sx-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226,232,240,.8); }
body.admin-bar .sx-header { top: 32px; }
.sx-header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.sx-logo-wrap { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.sx-logo-mark { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--sx-blue), var(--sx-cyan)); display:flex; align-items:center; justify-content:center; color:white; font-weight:900; letter-spacing:-.06em; box-shadow: 0 10px 22px rgba(16,98,255,.25); }
.sx-logo-text strong { display:block; line-height:1.1; font-size: 18px; color: var(--sx-dark); }
.sx-logo-text span { display:block; font-size: 12px; color: var(--sx-muted); margin-top:2px; }

.sx-nav { display: flex; align-items: center; gap: 4px; }
.sx-nav > a, .sx-nav > .sx-nav-item > a { display: inline-flex; align-items: center; padding: 12px 13px; color: #14213d; font-weight: 800; font-size: 14px; border-radius: 999px; }
.sx-nav > a:hover, .sx-nav > .sx-nav-item:hover > a { background: var(--sx-light); color: var(--sx-blue); }
.sx-nav-item { position: relative; }
.sx-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(16px); width: min(920px, calc(100vw - 36px)); background: #fff; border: 1px solid var(--sx-border); border-radius: 22px; box-shadow: var(--sx-shadow); opacity: 0; visibility: hidden; transition: .2s ease; padding: 24px; }
.sx-nav-item:hover .sx-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(8px); }
.sx-mega-grid { display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; }
.sx-mega h4 { margin: 0 0 10px; font-size: 15px; color: var(--sx-blue); }
.sx-mega a { display:block; padding: 8px 0; font-size: 14px; color: #334155; font-weight: 700; border-bottom: 1px dashed #eef2f7; }
.sx-mega a:hover { color: var(--sx-blue); }

.sx-header-cta { display:flex; align-items:center; gap: 10px; }
.sx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 900; border: 1px solid transparent; cursor:pointer; transition: .18s ease; }
.sx-btn-primary { color:#fff; background: linear-gradient(135deg, var(--sx-blue), var(--sx-blue-2)); box-shadow: 0 12px 24px rgba(16,98,255,.25); }
.sx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(16,98,255,.32); }
.sx-btn-outline { border-color: rgba(255,255,255,.28); color:#fff; background: rgba(255,255,255,.1); }
.sx-btn-outline:hover { background: #fff; color: var(--sx-blue); }
.sx-btn-dark-outline { border-color: var(--sx-border); color: var(--sx-dark); background: #fff; }
.sx-btn-dark-outline:hover { border-color: var(--sx-blue); color: var(--sx-blue); }
.sx-menu-toggle { display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--sx-border); background:#fff; }
.sx-menu-toggle span { display:block; width:20px; height:2px; background:var(--sx-dark); margin:5px auto; }

.sx-hero { background:
    radial-gradient(circle at top right, rgba(0,183,255,.22), transparent 30%),
    radial-gradient(circle at 20% 0%, rgba(255,138,0,.14), transparent 24%),
    linear-gradient(135deg, #06111f 0%, #0b1a33 56%, #103a78 100%);
  color:#fff; overflow:hidden; position:relative; padding: 88px 0 70px; }
.sx-hero::after { content:""; position:absolute; inset:auto -10% -35% -10%; height: 55%; background: linear-gradient(90deg, rgba(16,98,255,.25), rgba(0,183,255,.2)); filter: blur(70px); }
.sx-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items:center; }
.sx-hero h1 { font-size: clamp(40px, 6vw, 68px); line-height:1.02; margin: 0 0 22px; letter-spacing:-.06em; }
.sx-hero p { color: rgba(255,255,255,.78); font-size: 18px; margin: 0 0 28px; max-width: 680px; }
.sx-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 28px; }
.sx-hero-badges { display:flex; gap:10px; flex-wrap:wrap; }
.sx-badge { padding:8px 12px; background: rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); border-radius:999px; font-size:13px; font-weight:800; }
.sx-hero-stage { position:relative; min-height: 470px; }
.sx-screen-wall { position:absolute; inset: 0 0 68px 0; border-radius: 30px; background: linear-gradient(135deg, #09172d, #0a2150); border:1px solid rgba(255,255,255,.12); box-shadow: 0 35px 90px rgba(0,0,0,.36); overflow:hidden; transform: perspective(900px) rotateY(-8deg) rotateX(3deg); }
.sx-screen-wall::before { content:""; position:absolute; inset:18px; border-radius: 20px; background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 30% 28%, #00d0ff 0 8%, transparent 18%),
    radial-gradient(circle at 72% 35%, #ff8a00 0 8%, transparent 20%),
    linear-gradient(135deg, #2b7cff, #7d3cff 48%, #ff8a00);
  background-size: 26px 26px, 26px 26px, auto, auto, auto; }
.sx-floating-card { position:absolute; background: #fff; color:var(--sx-dark); border-radius: 18px; padding: 16px; box-shadow: var(--sx-shadow); min-width: 180px; }
.sx-floating-card strong { font-size: 28px; display:block; line-height:1; color: var(--sx-blue); }
.sx-floating-card span { color: var(--sx-muted); font-size:13px; font-weight:800; }
.sx-float-1 { left: -6px; bottom: 60px; }
.sx-float-2 { right: 6px; bottom: 0; }

.sx-warehouse { background:#fff; margin-top:-30px; position:relative; z-index:3; }
.sx-warehouse-card { border-radius: 26px; background:#fff; box-shadow: var(--sx-shadow); border: 1px solid var(--sx-border); padding: 28px; display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:22px; align-items:center; }
.sx-warehouse-card h3 { margin:0 0 4px; font-size:22px; }
.sx-mini-feature { display:flex; gap:12px; align-items:flex-start; }
.sx-icon { width:46px; height:46px; border-radius:14px; background: var(--sx-light); color:var(--sx-blue); display:flex; align-items:center; justify-content:center; font-weight:900; flex: 0 0 auto; }
.sx-mini-feature strong { display:block; }
.sx-mini-feature span { color:var(--sx-muted); font-size:14px; }

.sx-card { background:#fff; border:1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-soft); overflow:hidden; transition:.2s ease; }
.sx-card:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.sx-media { min-height: 210px; background: var(--sx-light); position:relative; overflow:hidden; }
.sx-media::before { content:""; position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(135deg, var(--sx-blue), #6a32ff 55%, var(--sx-orange)); background-size:22px 22px,22px 22px,auto; opacity:.92; }
.sx-media::after { content:""; position:absolute; left:14%; right:14%; top:26%; bottom:22%; border-radius:14px; border:10px solid rgba(6,17,31,.7); box-shadow:0 22px 48px rgba(0,0,0,.25); background: rgba(255,255,255,.06); }
.sx-card-body { padding: 24px; }
.sx-card h3 { margin:0 0 10px; font-size:21px; line-height:1.25; }
.sx-card p { color:var(--sx-muted); margin:0 0 16px; }
.sx-link { color: var(--sx-blue); font-weight:900; }
.sx-link:hover { text-decoration: underline; }

.sx-dark-section { background: var(--sx-navy); color:#fff; }
.sx-dark-section .sx-title { color:#fff; }
.sx-dark-section .sx-subtitle { color: rgba(255,255,255,.72); }
.sx-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-top: 34px; }
.sx-stat { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 28px; }
.sx-stat strong { display:block; font-size: clamp(32px, 5vw, 52px); color:#fff; line-height:1; letter-spacing:-.04em; }
.sx-stat span { color:rgba(255,255,255,.72); font-weight:800; }

.sx-product-strip { display:grid; grid-template-columns: .92fr 1.08fr; gap:34px; align-items:start; }
.sx-product-list { display:grid; gap:16px; }
.sx-product-row { display:grid; grid-template-columns: 86px 1fr auto; gap:16px; align-items:center; background:#fff; border:1px solid var(--sx-border); border-radius:18px; padding:14px; box-shadow: var(--sx-shadow-soft); }
.sx-product-thumb { width:86px; height:70px; border-radius:14px; background:linear-gradient(135deg, #dbeafe, #93c5fd); position:relative; overflow:hidden; }
.sx-product-thumb::after { content:""; position:absolute; inset:12px; border:5px solid rgba(6,17,31,.65); border-radius:7px; background:linear-gradient(135deg, #1062ff, #00b7ff); }
.sx-product-row h3 { margin:0 0 3px; font-size:18px; }
.sx-product-row p { margin:0; color:var(--sx-muted); font-size:14px; }
.sx-label { color: var(--sx-blue); background: var(--sx-light); padding: 6px 10px; border-radius:999px; font-size:12px; font-weight:900; }

.sx-custom-card { background: linear-gradient(135deg, #0b1a33, #103a78); color:#fff; border-radius: 28px; padding: 40px; overflow:hidden; position:relative; }
.sx-custom-card::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(0,183,255,.2); right:-80px; top:-120px; filter:blur(10px); }
.sx-custom-card .sx-title { color:#fff; }
.sx-custom-options { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; position:relative; z-index:1; }
.sx-custom-option { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px; }
.sx-custom-option h3 { margin:0 0 8px; }
.sx-custom-option p { color:rgba(255,255,255,.72); margin:0; }

.sx-application-card { position:relative; min-height: 230px; border-radius:22px; overflow:hidden; color:#fff; background:linear-gradient(135deg, #0b1a33, #103a78); padding:24px; display:flex; align-items:flex-end; box-shadow:var(--sx-shadow-soft); }
.sx-application-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 15%, rgba(0,183,255,.42), transparent 30%), radial-gradient(circle at 85% 30%, rgba(255,138,0,.28), transparent 30%); opacity:.95; }
.sx-application-card > div { position:relative; z-index:1; }
.sx-application-card h3 { margin:0 0 8px; font-size:22px; }
.sx-application-card p { margin:0; color:rgba(255,255,255,.78); }

.sx-case-card { display:grid; grid-template-columns: 180px 1fr; gap:0; min-height:180px; }
.sx-case-card .sx-media { min-height:180px; }
.sx-case-meta { color: var(--sx-blue); font-size:13px; font-weight:900; text-transform:uppercase; }

.sx-testimonials { background:var(--sx-light); }
.sx-quote { background:#fff; border:1px solid var(--sx-border); border-radius:22px; padding:28px; box-shadow:var(--sx-shadow-soft); }
.sx-quote p { margin:0 0 16px; color:#475569; }
.sx-quote strong { display:block; }
.sx-quote span { color:var(--sx-muted); font-size:14px; }

.sx-cta { background: linear-gradient(135deg, var(--sx-blue), var(--sx-blue-2)); color:#fff; border-radius: 28px; padding: 42px; display:grid; grid-template-columns: 1fr auto; gap:26px; align-items:center; box-shadow: var(--sx-shadow); }
.sx-cta h2 { margin:0 0 8px; font-size: clamp(28px, 4vw, 44px); line-height:1.1; letter-spacing:-.04em; }
.sx-cta p { margin:0; color:rgba(255,255,255,.78); }

.sx-page-hero { background: linear-gradient(135deg, #06111f, #103a78); color:#fff; padding: 74px 0; }
.sx-page-hero h1 { font-size: clamp(38px, 5vw, 60px); line-height:1.05; margin:0 0 16px; letter-spacing:-.05em; }
.sx-page-hero p { max-width: 820px; color:rgba(255,255,255,.75); font-size:18px; margin:0; }
.sx-breadcrumb { color:rgba(255,255,255,.65); font-weight:800; font-size:13px; margin-bottom:14px; }

.sx-content { padding: 70px 0; }
.sx-content h2 { font-size: clamp(28px, 4vw, 42px); line-height:1.12; letter-spacing:-.03em; }
.sx-content p { color:#475569; }
.sx-rich-card { background:#fff; border:1px solid var(--sx-border); border-radius:24px; padding:32px; box-shadow:var(--sx-shadow-soft); }

.sx-form { display:grid; gap:14px; }
.sx-field { display:grid; gap:6px; }
.sx-field label { font-size:13px; font-weight:900; color:#334155; }
.sx-field input, .sx-field textarea, .sx-field select { border:1px solid var(--sx-border); border-radius:14px; padding:13px 14px; width:100%; background:#fff; }
.sx-field textarea { min-height:132px; resize:vertical; }
.sx-form-note { font-size:13px; color:var(--sx-muted); margin-top:8px; }

.sx-footer { background:#06111f; color:rgba(255,255,255,.76); padding: 64px 0 24px; }
.sx-footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:34px; }
.sx-footer h3 { color:#fff; margin:0 0 16px; font-size:18px; }
.sx-footer a { display:block; margin:9px 0; color:rgba(255,255,255,.74); }
.sx-footer a:hover { color:#fff; }
.sx-footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:38px; padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; }

.sx-floating-whatsapp { position:fixed; right:22px; bottom:22px; z-index:60; background:#25d366; color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:0 16px 34px rgba(37,211,102,.35); }

@media (max-width: 1024px) {
  .sx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sx-hero-inner, .sx-product-strip, .sx-warehouse-card, .sx-cta { grid-template-columns: 1fr; }
  .sx-hero-stage { min-height: 360px; }
  .sx-warehouse-card { margin-top: 0; }
  .sx-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .sx-custom-options { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.admin-bar .sx-header { top: 46px; }
  .sx-menu-toggle { display:block; }
  .sx-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--sx-border); padding:16px 18px 22px; box-shadow: var(--sx-shadow-soft); }
  .sx-nav.is-open { display:block; }
  .sx-nav > a, .sx-nav > .sx-nav-item > a { display:block; border-radius:12px; }
  .sx-nav-item .sx-mega { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; width:100%; padding:10px 14px; border-radius:16px; display:none; }
  .sx-nav-item:hover .sx-mega { transform:none; }
  .sx-nav-item.is-open .sx-mega { display:block; }
  .sx-mega-grid { grid-template-columns:1fr; }
  .sx-header-cta .sx-btn { display:none; }
  .sx-grid-2, .sx-grid-3, .sx-stats { grid-template-columns: 1fr; }
  .sx-case-card { grid-template-columns: 1fr; }
  .sx-footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sx-container { width: min(100% - 26px, var(--sx-container)); }
  .sx-section { padding: 54px 0; }
  .sx-topbar-inner { align-items:flex-start; flex-direction:column; padding:9px 0; }
  .sx-header-inner { height:72px; }
  .sx-logo-text span { display:none; }
  .sx-hero { padding: 60px 0 52px; }
  .sx-hero-stage { min-height: 290px; }
  .sx-floating-card { min-width: 150px; padding:13px; }
  .sx-float-1 { bottom: 38px; }
  .sx-product-row { grid-template-columns: 70px 1fr; }
  .sx-product-row .sx-label { grid-column: 2; justify-self:start; }
  .sx-cta { padding: 28px; }
}

/* Floating WhatsApp button icon */
.sx-floating-whatsapp {
  font-size: 0 !important;
  line-height: 1 !important;
}
.sx-floating-whatsapp::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M16.03%203.2c-7.02%200-12.72%205.68-12.72%2012.68%200%202.23.58%204.41%201.69%206.33L3.2%2028.8l6.78-1.78a12.7%2012.7%200%200%200%206.05%201.54h.01c7.02%200%2012.72-5.68%2012.72-12.68S23.05%203.2%2016.03%203.2Zm0%2023.2h-.01a10.55%2010.55%200%200%201-5.38-1.47l-.39-.23-4.02%201.05%201.07-3.9-.25-.4a10.49%2010.49%200%200%201-1.6-5.57c0-5.82%204.75-10.55%2010.59-10.55%202.83%200%205.49%201.1%207.49%203.09a10.48%2010.48%200%200%201%203.1%207.46c0%205.82-4.75%2010.55-10.6%2010.55Zm5.8-7.9c-.32-.16-1.87-.92-2.16-1.02-.29-.11-.5-.16-.71.16-.21.32-.82%201.02-1.01%201.23-.18.21-.37.24-.68.08-.32-.16-1.34-.49-2.55-1.57-.94-.84-1.58-1.87-1.76-2.19-.18-.32-.02-.49.14-.65.14-.14.32-.37.48-.55.16-.18.21-.32.32-.53.11-.21.05-.4-.03-.55-.08-.16-.71-1.71-.98-2.34-.26-.62-.52-.53-.71-.54h-.61c-.21%200-.55.08-.84.4-.29.32-1.1%201.07-1.1%202.61%200%201.54%201.13%203.03%201.29%203.24.16.21%202.23%203.4%205.4%204.76.75.32%201.34.51%201.8.65.76.24%201.45.2%201.99.12.61-.09%201.87-.76%202.13-1.5.26-.74.26-1.37.18-1.5-.08-.13-.29-.21-.61-.37Z%22%2F%3E%3C%2Fsvg%3E");
}


/* MIRUN-SITE-QUALITY-20260711 */
@media (max-width: 700px) {
  img[alt="Mirun Hailian LED display project showcase"] { left: 0 !important; top: 0 !important; }
  body.page-id-130 table { display: block; width: 100% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.page-id-130 table tbody { display: table; min-width: 680px; width: 100%; }
}
/* END MIRUN-SITE-QUALITY-20260711 */