:root { --ink:#17212b; --muted:#61707d; --canvas:#f5f7f8; --surface:#fff; --line:#dce3e6; --teal:#0f766e; --teal-dark:#115e59; --amber:#b45309; --amber-soft:#ffedd5; --red:#b42318; --radius:6px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font:15px/1.5 "Microsoft YaHei","PingFang SC",Arial,sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:60px; padding:0 max(20px, calc((100% - 1280px) / 2)); display:flex; align-items:center; gap:28px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { color:var(--ink); font-size:20px; font-weight:800; text-decoration:none; white-space:nowrap; }
.brand span { color:var(--teal); }
.topnav { display:flex; gap:22px; flex:1; }
.topnav a { color:var(--muted); text-decoration:none; font-size:14px; }
.topnav a:hover { color:var(--teal); }
.icon-button { width:36px; height:36px; display:inline-grid; place-items:center; position:relative; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.icon-button svg { width:18px; height:18px; }
.inquiry-count { min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; position:absolute; top:-7px; right:-7px; color:#fff; background:var(--red); border-radius:10px; font-size:10px; font-weight:700; }
main { max-width:1280px; margin:0 auto; padding:28px 20px 56px; }
.catalog-header { padding:0 0 22px; display:flex; align-items:end; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 5px; color:var(--teal); font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:7px; font-size:28px; line-height:1.25; }
h2 { margin-bottom:0; font-size:18px; line-height:1.35; }
.catalog-note { margin:0; color:var(--muted); }
.service-strip { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.service-strip span { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; color:#7c2d12; background:var(--amber-soft); border:1px solid #fed7aa; border-radius:4px; font-size:12px; font-weight:700; white-space:nowrap; }
.service-strip svg { width:14px; height:14px; }
.catalog-layout { padding-top:24px; }
.product-toolbar,.card-meta,.card-footer,.drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.product-toolbar { min-height:28px; margin-bottom:12px; color:var(--muted); font-size:13px; }
.product-toolbar strong { color:var(--teal-dark); }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.product-card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .16s,transform .16s; }
.product-card:hover { border-color:#94a3b8; transform:translateY(-2px); }
.product-image-button { width:100%; aspect-ratio:4/3; padding:0; display:block; background:#eef2f3; border:0; overflow:hidden; }
.product-image-button img { width:100%; height:100%; object-fit:cover; transition:transform .22s; }
.product-card:hover img { transform:scale(1.025); }
.product-card-body { padding:13px; }
.card-meta { margin-bottom:8px; color:var(--muted); font-size:11px; }
.category-badge { padding:2px 6px; color:var(--teal-dark); background:#ccfbf1; border-radius:3px; font-weight:700; }
.product-card h3 { min-height:44px; margin-bottom:5px; font-size:16px; line-height:1.38; }
.tagline { min-height:42px; margin-bottom:13px; color:var(--muted); font-size:13px; }
.card-footer { padding-top:11px; border-top:1px solid var(--line); }
.card-footer strong,.card-footer small { display:block; }
.price-hint { color:var(--amber); font-size:13px; }
.delivery { color:var(--muted); font-size:11px; }
.card-action { width:30px; height:30px; display:grid; place-items:center; color:var(--teal); background:#f0fdfa; border:1px solid #99f6e4; border-radius:4px; }
.card-action svg { width:16px; height:16px; }
.process-section { margin-top:52px; padding-top:22px; display:flex; justify-content:space-between; gap:34px; border-top:1px solid var(--line); }
.process-list { margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:22px; list-style:none; }
.process-list li { display:grid; grid-template-columns:34px 1fr; column-gap:10px; }
.process-list span { grid-row:span 2; color:var(--amber); font-weight:800; }
.process-list strong { font-size:14px; }.process-list small { color:var(--muted); font-size:12px; }
.product-dialog { width:min(880px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:var(--radius); box-shadow:0 20px 60px #0f172a55; }
.product-dialog::backdrop { background:#0f172a88; }.dialog-close { position:absolute; top:12px; right:12px; z-index:2; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr); }.detail-media { padding:28px; background:#eef2f3; }.detail-media img { width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; }.detail-content { padding:30px; }.detail-content h2 { margin:5px 0 8px; font-size:24px; }.detail-tagline { color:var(--muted); }.detail-fulfillment { margin:18px 0; padding:10px; color:var(--teal-dark); background:#f0fdfa; border-left:3px solid var(--teal); font-size:13px; }.spec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }.spec-grid div { min-height:54px; padding:8px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.spec-grid dt { color:var(--muted); font-size:11px; }.spec-grid dd { margin:3px 0 0; font-size:13px; }.spec-source { display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-size:13px; }.spec-source svg { width:15px; }.detail-actions { display:flex; gap:10px; margin-top:20px; }.primary-button,.secondary-button { min-height:40px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:4px; font-weight:700; }.primary-button { flex:1; color:#fff; background:var(--teal); border:1px solid var(--teal); }.secondary-button { color:var(--teal-dark); background:#fff; border:1px solid var(--teal); }.primary-button svg,.secondary-button svg { width:16px; }
.inquiry-drawer { width:min(410px,calc(100vw - 24px)); min-height:100vh; padding:22px; display:flex; flex-direction:column; position:fixed; right:0; top:0; z-index:30; background:#fff; box-shadow:-16px 0 40px #0f172a22; transform:translateX(105%); transition:transform .2s; }.inquiry-drawer.is-open { transform:translateX(0); }.drawer-backdrop { position:fixed; inset:0; z-index:25; background:#0f172a55; opacity:0; visibility:hidden; transition:.2s; }.drawer-backdrop.is-open { opacity:1; visibility:visible; }.drawer-heading { padding-bottom:16px; border-bottom:1px solid var(--line); }.drawer-heading h2 { font-size:21px; }.inquiry-items { flex:1; padding:12px 0; overflow:auto; }.inquiry-item { padding:12px 0; display:grid; grid-template-columns:1fr auto; gap:10px; border-bottom:1px solid var(--line); }.inquiry-item p { margin:0 0 4px; font-weight:700; font-size:14px; }.inquiry-item small { color:var(--muted); }.quantity-control { display:flex; align-items:center; gap:4px; }.quantity-control button { width:24px; height:24px; border:1px solid var(--line); background:#fff; border-radius:3px; }.quantity-control output { width:25px; text-align:center; font-size:13px; }.remove-item { color:var(--red); background:none; border:0; font-size:12px; }.empty-inquiry { margin:40px 0; color:var(--muted); text-align:center; }#inquiry-form { display:grid; gap:11px; padding-top:14px; border-top:1px solid var(--line); }#inquiry-form label { display:grid; gap:4px; font-size:12px; font-weight:700; }#inquiry-form input,#inquiry-form textarea { width:100%; padding:9px; resize:vertical; border:1px solid var(--line); border-radius:4px; outline:0; }#inquiry-form input:focus,#inquiry-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 2px #ccfbf1; }.form-status { min-height:20px; margin:9px 0 0; color:var(--teal-dark); font-size:12px; }.form-status.error { color:var(--red); }
@media (max-width:900px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-layout { grid-template-columns:1fr; }.detail-media { max-height:300px; }.process-section { display:grid; }.process-list { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .topbar { padding:0 16px; gap:14px; }.topnav { display:none; }main { padding:22px 16px 42px; }.catalog-header { display:block; }.service-strip { margin-top:16px; justify-content:flex-start; }.product-grid { grid-template-columns:1fr; }.product-card h3,.tagline { min-height:0; }.process-list { grid-template-columns:1fr; gap:14px; }.product-toolbar { align-items:start; }.product-dialog { width:calc(100% - 18px); }.detail-content { padding:22px; }.spec-grid { grid-template-columns:1fr; }.detail-actions { flex-direction:column; }.primary-button,.secondary-button { width:100%; }.inquiry-drawer { padding:18px; } }

/* Product detail gallery: the image area remains separate from copy and parameters. */
.card-reference { display:flex; align-items:center; gap:7px; min-width:0; }
.photo-count { color:var(--teal-dark); font-size:11px; white-space:nowrap; }
.sku { white-space:nowrap; }

.product-dialog { width:min(1120px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; background:var(--surface); }
.detail-dialog-bar { min-height:62px; padding:11px 18px 11px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); }
.detail-dialog-bar .eyebrow { margin-bottom:1px; }
.detail-dialog-bar strong { font-size:14px; }
.detail-layout { display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(350px,.92fr); align-items:start; }
.detail-gallery { min-width:0; padding:28px; background:#eff4f4; border-right:1px solid var(--line); }
.gallery-stage { width:100%; min-height:390px; max-height:620px; aspect-ratio:1 / 1; display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid #d4dddd; }
.gallery-stage img { width:100%; height:100%; display:block; object-fit:contain; }
.gallery-caption { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.gallery-caption #gallery-counter { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.gallery-navigation { min-height:32px; display:flex; align-items:center; gap:4px; }
.gallery-control { width:30px; height:30px; display:grid; place-items:center; color:var(--teal-dark); background:#fff; border:1px solid #a8bab9; border-radius:50%; }
.gallery-control:hover { color:#fff; background:var(--teal); border-color:var(--teal); }
.gallery-control svg { width:17px; height:17px; }
.gallery-thumbs { display:grid; grid-auto-flow:column; grid-auto-columns:74px; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-color:#aab9ba transparent; }
.gallery-thumb { width:74px; height:74px; padding:0; overflow:hidden; background:#fff; border:1px solid #cdd7d8; border-radius:3px; }
.gallery-thumb:hover,.gallery-thumb.is-selected { border-color:var(--teal); box-shadow:0 0 0 2px #b9ece7; }
.gallery-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.detail-content { min-width:0; padding:30px 32px 34px; background:var(--surface); }
.detail-content h2 { margin:5px 0 8px; font-size:25px; line-height:1.3; }
.detail-tagline { margin-bottom:0; color:var(--muted); }
.detail-price { margin-top:18px; display:flex; align-items:baseline; gap:7px; }
.detail-price span { color:var(--muted); font-size:12px; }
.detail-price strong { color:var(--amber); font-size:26px; line-height:1; letter-spacing:0; }
.detail-price small { color:var(--muted); font-size:12px; }
.detail-fulfillment { margin:20px 0; padding:11px 12px; color:var(--teal-dark); background:#effcfb; border-left:3px solid var(--teal); font-size:13px; }
.spec-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; }
.detail-actions { margin-top:22px; }

@media (max-width:900px) {
  .product-dialog { width:min(680px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); }
  .detail-layout { grid-template-columns:1fr; }
  .detail-gallery { padding:24px; border-right:0; border-bottom:1px solid var(--line); }
  .gallery-stage { height:min(72vw,350px); min-height:0; max-height:none; aspect-ratio:auto; }
  .detail-content { padding:26px 28px 30px; }
}

@media (max-width:640px) {
  .product-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .detail-dialog-bar { min-height:56px; padding:9px 12px 9px 18px; }
  .detail-gallery { padding:16px; }
  .gallery-stage { height:min(76vw,330px); }
  .gallery-thumbs { grid-auto-columns:64px; gap:7px; }
  .gallery-thumb { width:64px; height:64px; }
  .detail-content { padding:22px 18px 26px; }
  .detail-content h2 { font-size:21px; }
  .gallery-caption { min-height:38px; }
}

.drawer-checkout { margin:16px 0 4px; padding:12px 0 4px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); }
.drawer-checkout small,.drawer-checkout strong { display:block; }.drawer-checkout small { color:var(--muted); font-size:11px; }.drawer-checkout strong { color:var(--amber); font-size:18px; }
.drawer-checkout .primary-button { flex:0 0 auto; }

.checkout-dialog,.payment-dialog { width:min(920px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0; overflow:auto; background:var(--surface); border:0; border-radius:var(--radius); box-shadow:0 20px 60px #0f172a55; }
.checkout-dialog::backdrop,.payment-dialog::backdrop { background:#0f172a88; }
.checkout-header,.payment-header { min-height:62px; padding:11px 18px 11px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.checkout-header .eyebrow,.payment-header .eyebrow { margin-bottom:1px; }.checkout-header h2,.payment-header h2 { margin:0; font-size:19px; }
.checkout-layout { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(380px,1.15fr); align-items:start; }
.checkout-summary { min-height:100%; padding:28px; background:#eff4f4; border-right:1px solid var(--line); }.checkout-summary h3 { margin-bottom:18px; font-size:17px; }
.checkout-item { padding:11px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:3px; border-top:1px solid #d4dddd; }.checkout-item:first-child { border-top:0; }.checkout-item div { min-width:0; }.checkout-item strong,.checkout-item small { display:block; }.checkout-item strong { font-size:13px; }.checkout-item small { margin-top:2px; color:var(--muted); font-size:11px; }.checkout-item span { color:var(--muted); font-size:12px; }.checkout-item b { grid-column:2; color:var(--amber); font-size:13px; text-align:right; }
.checkout-total { margin-top:17px; padding-top:14px; display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid #b9c9c9; }.checkout-total span { color:var(--muted); font-size:12px; }.checkout-total strong { color:var(--amber); font-size:25px; letter-spacing:0; }.checkout-note { margin:9px 0 0; color:var(--muted); font-size:12px; }
.checkout-form { padding:28px 30px 30px; display:grid; gap:13px; }.checkout-form label { display:grid; gap:5px; color:var(--ink); font-size:12px; font-weight:700; }.checkout-form input,.checkout-form textarea { width:100%; padding:10px; color:var(--ink); resize:vertical; border:1px solid var(--line); border-radius:4px; outline:0; }.checkout-form textarea { min-height:76px; }.checkout-form input:focus,.checkout-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 2px #ccfbf1; }.checkout-submit { margin-top:4px; }.checkout-form button:disabled { cursor:wait; opacity:.7; }

.payment-dialog { width:min(420px,calc(100vw - 28px)); }.payment-content { padding:26px 28px 30px; display:grid; justify-items:center; text-align:center; }.payment-order { margin-bottom:7px; color:var(--muted); font-size:12px; }.payment-amount { color:var(--amber); font-size:30px; letter-spacing:0; }.payment-qr { width:244px; min-height:244px; margin:22px 0 14px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); }.payment-qr img,.payment-qr canvas { max-width:220px; max-height:220px; }.payment-qr svg { width:28px; color:var(--amber); }.payment-status { min-height:40px; margin:0 0 16px; color:var(--muted); font-size:13px; }.payment-status.is-paid { color:var(--teal-dark); font-weight:700; }.payment-status.is-error { color:var(--red); }.payment-content .secondary-button { width:100%; }

@media (max-width:700px) {
  .checkout-dialog,.payment-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .checkout-header,.payment-header { min-height:56px; padding:9px 12px 9px 18px; }
  .checkout-layout { grid-template-columns:1fr; }.checkout-summary { padding:20px 18px; border-right:0; border-bottom:1px solid var(--line); }.checkout-form { padding:22px 18px 26px; }.payment-content { padding:22px 18px 26px; }
}