:root { --ink:#14213a; --muted:#68758c; --line:#e4e9f1; --blue:#245fe7; --blue-dark:#173da8; --purple:#682fd3; --orange:#ff8236; --surface:#f5f7fb; --white:#fff; --content-max:1880px; font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--white); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:linear-gradient(180deg,#fff 0,#f8faff 100%); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.site-header { height:86px; padding:0 max(28px,calc((100vw - var(--content-max))/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(229,233,240,.8); background:rgba(255,255,255,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.brand img { width:58px; height:58px; object-fit:contain; border-radius:14px; box-shadow:0 8px 24px rgba(35,72,180,.12); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:20px; letter-spacing:.02em; }
.brand small { color:var(--muted); margin-top:4px; font-size:12px; }
.header-actions { display:flex; align-items:center; gap:10px; }
.language-button { border:1px solid #ccd6e8; background:#fff; color:var(--blue-dark); border-radius:999px; padding:10px 15px; font-weight:800; }
.selection-button { border:0; border-radius:999px; padding:11px 17px; background:var(--ink); color:#fff; font-weight:750; }
.selection-button b { display:inline-grid; place-items:center; min-width:23px; height:23px; padding:0 6px; margin-left:5px; border-radius:99px; background:var(--orange); }
main { min-height:calc(100vh - 160px); }
.carousel { width:min(var(--content-max),calc(100vw - 48px)); height:480px; margin:24px auto 0; border-radius:34px; overflow:hidden; position:relative; color:#fff; background:linear-gradient(125deg,#183fab,#3273ef 62%,#714ee9); box-shadow:0 24px 65px rgba(31,74,182,.17); }
#carousel-slides,.carousel-slide { width:100%; height:100%; }
.carousel-slide { display:none; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; gap:42px; padding:62px clamp(42px,7vw,100px); position:relative; background:radial-gradient(circle at 90% 0,rgba(255,255,255,.2),transparent 38%); }
.carousel-slide.active { display:grid; animation:slide-in .45s ease; }
.carousel-slide::after { content:""; width:500px; height:500px; position:absolute; right:-180px; bottom:-280px; border:74px solid rgba(255,255,255,.07); border-radius:50%; }
@keyframes slide-in { from { opacity:.25; transform:translateX(18px); } to { opacity:1; transform:none; } }
.carousel-copy { position:relative; z-index:2; max-width:720px; }
.eyebrow { display:block; font-size:12px; font-weight:850; letter-spacing:.17em; color:#8e9ab0; text-transform:uppercase; }
.carousel .eyebrow { color:#c7d8ff; }
.carousel h1 { margin:14px 0 22px; max-width:760px; font-size:clamp(42px,5.3vw,72px); line-height:1.08; letter-spacing:-.04em; }
.carousel p { margin:0 0 28px; max-width:650px; line-height:1.8; color:#e0e9ff; font-size:17px; }
.carousel-copy a,.carousel-actions button { display:inline-flex; border:0; border-radius:13px; padding:12px 20px; color:var(--blue-dark); background:#fff; text-decoration:none; font-weight:800; }
.carousel-actions { display:flex; gap:10px; }
.carousel-actions button:last-child { color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); }
.carousel-product-image { width:min(380px,100%); aspect-ratio:1/1; justify-self:end; position:relative; z-index:2; display:grid; place-items:center; padding:18px; border:1px solid rgba(255,255,255,.28); border-radius:30px; background:rgba(255,255,255,.13); backdrop-filter:blur(15px); }
.carousel-product-image img { width:100%; height:100%; object-fit:cover; border-radius:19px; }
.carousel-product-image .logo-fallback { width:70%; height:70%; }
.brand-watermark { position:relative; z-index:2; justify-self:end; width:290px; height:360px; border:1px solid rgba(255,255,255,.3); border-radius:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.13); }
.brand-watermark img { width:210px; height:210px; border-radius:25px; object-fit:contain; }
.brand-watermark strong { font-size:46px; margin-top:6px; }
.brand-watermark span { color:#dbe7ff; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(13,34,89,.25); font-size:34px; line-height:1; }
.carousel-arrow.previous { left:17px; } .carousel-arrow.next { right:17px; }
.carousel-dots { position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:8px; }
.carousel-dots button { width:9px; height:9px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.45); transition:.2s; }
.carousel-dots button.active { width:28px; background:#fff; }
.catalog-section { width:min(var(--content-max),calc(100vw - 48px)); margin:0 auto; padding:58px 0 76px; }
.catalog-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.catalog-heading h2 { margin:6px 0 0; font-size:40px; }
.catalog-heading p { margin:0; color:var(--muted); font-size:13px; }
.filters { display:flex; align-items:center; gap:20px; margin:30px 0 28px; }
.search-box { width:min(430px,100%); height:52px; display:flex; align-items:center; gap:9px; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:.2s; }
.search-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(35,91,228,.1); }
.search-box input { border:0; outline:0; width:100%; color:var(--ink); }
.categories { flex:1; min-width:0; overflow-x:auto; padding:2px; scrollbar-width:thin; }
.category-level { display:flex; align-items:center; gap:8px; min-width:max-content; }
.category-secondary { margin-top:9px; padding:8px 10px; border-radius:12px; background:#eef4ff; }
.category-level-label { margin-right:4px; color:var(--blue-dark); font-size:12px; font-weight:800; }
.category { white-space:nowrap; border:1px solid var(--line); color:var(--muted); background:#fff; border-radius:999px; padding:9px 15px; }
.category.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.category.subcategory { padding:7px 13px; font-size:12px; }
.status { color:var(--muted); padding:40px 0; text-align:center; }
.status:empty { display:none; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.load-more { display:block; min-width:220px; margin:30px auto 0; padding:12px 22px; border:1px solid #cbd6ed; border-radius:999px; color:var(--blue); background:#fff; font-weight:800; }
.product-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:21px; overflow:hidden; background:#fff; transition:transform .2s,box-shadow .2s,border-color .2s; }
.product-card:hover { transform:translateY(-4px); border-color:#cbd6ed; box-shadow:0 18px 42px rgba(22,40,80,.1); }
.product-image { aspect-ratio:1/.82; position:relative; background:#f5f7fb; overflow:hidden; }
.product-image>img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.image-placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(145deg,#f0f4ff,#f8f2ff); }
.image-placeholder img { width:55%; height:55%; object-fit:contain; opacity:.58; }
.featured-badge { position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--blue-dark); font-size:11px; font-weight:850; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.product-body { flex:1; display:flex; flex-direction:column; padding:18px; }
.product-category { color:var(--blue); font-weight:800; font-size:11px; letter-spacing:.04em; }
.product-body h3 { margin:8px 0 10px; min-height:48px; font-size:17px; line-height:1.45; }
.product-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-sku { color:var(--muted); font-size:12px; }
.product-variant-count { flex:0 0 auto; padding:4px 7px; border-radius:999px; color:var(--blue); background:#edf3ff; font-size:11px; font-weight:750; }
.product-pricing { min-height:82px; margin-top:12px; padding:10px 12px; border:1px solid #ffe1cf; border-radius:12px; background:linear-gradient(135deg,#fffaf6,#fff4ec); }
.comparison-price,.current-price { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.comparison-price { color:#8a94a8; font-size:12px; }
.comparison-price del { text-decoration-thickness:2px; text-decoration-color:#f05a3c; }
.current-price { margin-top:4px; color:#dc4829; }
.current-price span { color:#6d7688; font-size:12px; }
.current-price strong { font-size:20px; letter-spacing:.01em; }
.product-pricing>small { display:block; margin-top:4px; color:#e45b33; font-size:11px; font-weight:750; text-align:right; }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; padding-top:17px; }
.card-actions button { min-height:40px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; font-weight:750; }
.card-actions .add { border-color:var(--blue); background:var(--blue); color:#fff; }
.card-actions .add.added { border-color:#bed0ff; background:#edf3ff; color:var(--blue); }
footer { padding:36px max(28px,calc((100vw - var(--content-max))/2)); display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); color:var(--muted); background:#fff; }
footer img { width:50px; height:50px; object-fit:contain; border-radius:12px; } footer strong,footer div span { display:block; }
.footer-meta { margin-left:auto; text-align:right; font-size:12px; }
.icp-record { display:inline-block; margin-top:7px; color:var(--muted); text-decoration:none; }
.icp-record:hover { color:var(--blue); text-decoration:underline; }
.overlay,.drawer-shell { position:fixed; inset:0; z-index:50; background:rgba(8,18,39,.58); display:grid; place-items:center; padding:24px; backdrop-filter:blur(5px); }
.modal { width:min(1240px,96vw); max-height:92vh; overflow:auto; background:#fff; border-radius:24px; padding:30px; position:relative; box-shadow:0 30px 90px rgba(0,0,0,.25); }
.close { border:0; background:#eff2f7; color:var(--ink); border-radius:50%; width:36px; height:36px; font-size:24px; line-height:1; }
.modal>.close { position:absolute; right:16px; top:16px; z-index:2; }
.detail-layout { display:grid; grid-template-columns:minmax(300px,.95fr) minmax(340px,1.05fr); gap:34px; }
.detail-wide { grid-column:1/-1; min-width:0; }
.detail-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; }
.detail-gallery img,.detail-gallery>.image-placeholder { width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:15px; background:#f6f7fa; border:1px solid var(--line); }
.detail-gallery img:first-child { grid-column:1/-1; aspect-ratio:1/.68; }
.detail-copy { padding:18px 8px; }
.detail-copy h2 { margin:9px 0 5px; font-size:32px; }
.detail-en { color:var(--muted); margin:0 0 20px; }
.detail-description { color:#4e5d74; line-height:1.75; white-space:pre-wrap; }
.details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0; }
.detail-field { padding:12px; border-radius:12px; background:var(--surface); }
.detail-field small,.detail-field strong { display:block; } .detail-field small { color:var(--muted); margin-bottom:5px; } .detail-field strong { word-break:break-word; }
.detail-add,.submit-button { width:100%; border:0; border-radius:12px; padding:13px 18px; background:var(--blue); color:#fff; font-weight:850; }
.sku-variants { margin:0 0 8px; padding-top:22px; border-top:1px solid var(--line); }
.sku-variants-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.sku-variants-heading h3 { margin:0 0 4px; font-size:24px; }
.sku-variants-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.sku-variants-heading>strong { flex:0 0 auto; padding:7px 11px; border-radius:999px; color:var(--blue); background:#edf3ff; font-size:12px; }
.sku-variant-table { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.sku-variant-header,.sku-variant-row { display:grid; grid-template-columns:42px minmax(260px,1.8fr) minmax(140px,.8fr) minmax(155px,.75fr) 128px; align-items:center; gap:14px; padding:10px 16px; }
.sku-variant-header { color:#66748a; background:#f3f6fb; font-size:11px; font-weight:750; }
.sku-variant-row { min-height:82px; border-top:1px solid var(--line); background:#fff; }
.sku-variant-row.selected { background:#edf4ff; box-shadow:inset 3px 0 0 var(--blue); }
.sku-variant-index { color:#8b97aa; text-align:center; }
.sku-variant-name { min-width:0; display:flex; align-items:center; gap:9px; }
.sku-variant-name img,.sku-variant-name i { width:58px; height:58px; flex:0 0 auto; object-fit:contain; display:grid; place-items:center; border-radius:9px; background:#f5f7fb; color:#8995a7; font-style:normal; }
.sku-variant-name strong,.sku-variant-code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sku-variant-code { color:#55637a; font-size:12px; }
.sku-variant-price { color:#d94b2c; font-size:17px; white-space:nowrap; }
.sku-variant-action { min-height:36px; border:1px solid var(--blue); border-radius:9px; color:#fff; background:var(--blue); font-weight:750; }
.sku-variant-row.selected .sku-variant-action { color:var(--blue); background:#fff; }
.drawer-shell { display:block; padding:0; }
.drawer-backdrop { position:absolute; inset:0; width:100%; border:0; background:transparent; }
.selection-drawer { position:absolute; right:0; top:0; bottom:0; width:min(590px,100vw); padding:28px; overflow:auto; background:#fff; box-shadow:-20px 0 70px rgba(0,0,0,.2); }
.drawer-header { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:18px; }
.drawer-header h2 { margin:6px 0 0; }
.selection-items { padding:18px 0; }
.selection-item { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.selection-item>img,.selection-item>.image-placeholder { width:72px; height:72px; border-radius:10px; object-fit:contain; background:var(--surface); }
.selection-item strong,.selection-item small { display:block; } .selection-item small { color:var(--muted); margin-top:4px; }
.remove-item { border:0; color:#c44; background:transparent; }
.qty-row { display:flex; align-items:center; gap:4px; margin-top:8px; }
.qty-row button { width:28px; height:28px; border:1px solid var(--line); background:#fff; border-radius:7px; }
.qty-row input { width:62px; height:28px; text-align:center; border:1px solid var(--line); border-radius:7px; }
.selection-quote { margin-top:8px; padding:8px 10px; border-radius:9px; background:#fff6ee; color:#d64b28; }
.selection-quote span,.selection-quote strong,.selection-quote small { display:block; }
.selection-quote strong { margin:3px 0; }
.selection-quote small { color:#775c51; line-height:1.45; }
.selection-quote.loading { color:var(--muted); background:var(--surface); }
.empty-selection { padding:30px; text-align:center; color:var(--muted); background:var(--surface); border-radius:14px; }
.inquiry-form { border-top:1px solid var(--line); padding-top:18px; }
.inquiry-form h3 { margin:0 0 5px; } .inquiry-form>p { margin:0 0 18px; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inquiry-form label { display:block; color:#526077; font-size:13px; }
.inquiry-form input,.inquiry-form textarea { width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; outline:0; }
.inquiry-form input:focus,.inquiry-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(35,91,228,.08); }
.inquiry-form>label { margin-top:12px; }
.submit-button { margin-top:16px; } .submit-button:disabled { opacity:.55; }
.form-message { min-height:22px; padding-top:10px; color:#1f8a4c; } .form-message.error { color:#c44; }
.trap { position:absolute; left:-9999px; }
@media (min-width:1550px) { .product-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1100px) { .carousel,.catalog-section { width:auto; margin-left:22px; margin-right:22px; } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px) {
  .site-header { height:72px; padding:0 12px; }
  .brand { gap:9px; } .brand img { width:46px; height:46px; } .brand small { display:none; }
  .language-button { padding:8px 11px; } .selection-button { padding:9px 12px; }
  .carousel { width:auto; height:465px; margin:12px 10px 0; border-radius:22px; }
  .carousel-slide { grid-template-columns:1fr; gap:12px; padding:35px 24px 28px; }
  .carousel h1 { margin:9px 0 13px; font-size:34px; } .carousel p { font-size:14px; line-height:1.65; margin-bottom:14px; }
  .carousel-product-image { width:175px; height:175px; padding:10px; justify-self:center; border-radius:21px; }
  .brand-watermark { height:175px; width:100%; } .brand-watermark img { width:100px; height:100px; }
  .carousel-arrow { width:38px; height:38px; font-size:28px; }
  .catalog-section { width:auto; margin:0; padding:35px 12px 55px; }
  .catalog-heading { display:block; } .catalog-heading h2 { font-size:32px; } .catalog-heading p { margin-top:8px; }
  .filters { align-items:stretch; flex-direction:column; gap:11px; margin:20px 0; }
  .categories { width:100%; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-body { padding:12px; } .product-body h3 { min-height:auto; font-size:15px; } .card-actions { grid-template-columns:1fr; }
  .overlay { place-items:end center; padding:0; }
  .modal { width:100vw; max-height:94dvh; padding:54px 14px 24px; border-radius:24px 24px 0 0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .modal>.close { position:fixed; right:14px; top:calc(6dvh + 12px); width:42px; height:42px; background:#f1f4fa; box-shadow:0 4px 16px rgba(22,40,80,.13); }
  .detail-layout { display:flex; flex-direction:column; gap:8px; }
  .detail-gallery { display:flex; width:100%; gap:10px; overflow-x:auto; align-items:stretch; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:0 0 8px; touch-action:pan-x pan-y; }
  .detail-gallery img,.detail-gallery>.image-placeholder,.detail-gallery img:first-child { flex:0 0 min(82vw,360px); width:min(82vw,360px); aspect-ratio:1/1; grid-column:auto; scroll-snap-align:center; }
  .detail-copy { padding:10px 2px 4px; } .detail-copy h2 { font-size:27px; }
  .details { margin:14px 0; }
  .sku-variants { padding-top:18px; }
  .sku-variants-heading { align-items:flex-start; }
  .sku-variants-heading h3 { font-size:21px; }
  .sku-variant-table { overflow:visible; border:0; border-radius:0; }
  .sku-variant-header { display:none; }
  .sku-variant-row { grid-template-columns:minmax(0,1fr) 104px; grid-template-areas:"name action" "code action" "price action"; gap:4px 10px; min-width:0; min-height:0; margin-bottom:10px; padding:12px; border:1px solid var(--line); border-radius:13px; }
  .sku-variant-index { display:none; }
  .sku-variant-name { grid-area:name; }
  .sku-variant-code { grid-area:code; padding-left:67px; }
  .sku-variant-price { grid-area:price; padding-left:67px; font-size:16px; }
  .sku-variant-action { grid-area:action; align-self:stretch; min-height:72px; }
  .selection-drawer { padding:20px 14px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  footer { align-items:flex-start; flex-wrap:wrap; padding:28px 14px; }
  .footer-meta { width:100%; margin:8px 0 0 64px; text-align:left; }
}
@media (max-width:480px) { .brand strong { font-size:15px; } .selection-button>span { display:none; } .product-grid { grid-template-columns:1fr; } .form-grid,.details { grid-template-columns:1fr; } }