/* Contact controls share the existing Qihang navy / white palette. */
.contact-icon { width:22px; height:22px; flex:none; fill:currentColor; }
.nav-whatsapp { display:inline-flex; align-items:center; gap:7px; color:#12613c; font-weight:750; white-space:nowrap; text-decoration:none; }
.nav-whatsapp .contact-icon { width:19px; height:19px; }
.social-links { display:flex; align-items:center; gap:8px; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-size:14px; font-weight:700; }
.social-links .instagram-icon { fill:none; stroke:currentColor; stroke-width:1.8; }
.social-links .instagram-dot { fill:currentColor; stroke:none; }
.social-links .nav-instagram { color:var(--ink,#0b347e); }
.social-links a:focus-visible { outline:3px solid #e2a500; outline-offset:3px; }
.social-links--header a { width:40px; height:40px; border:1px solid #dce4ec; border-radius:50%; }
.social-links--header a span { display:none; }
.social-links--header .nav-whatsapp:hover { background:#12613c; color:white; }
.social-links--header .nav-instagram:hover { background:linear-gradient(135deg,#833ab4,#c13584,#e16732); color:white; }
.social-links--mobile { flex-wrap:wrap; padding:8px 0; gap:12px; }
.social-links--mobile a { min-height:44px; }
.desktop-actions { gap:16px; }
.contact-links a[href*="wa.me"] { gap:10px; }
.qr-grid, .detail-qr-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.box-contact .qr-card, .detail-qr-card { margin:0; padding:16px; border:4px solid #fff; border-radius:16px; box-shadow:6px 7px 0 #063b92; transform:none; min-width:0; }
.qr-card img, .detail-qr-card img { display:block; width:100%; max-width:160px; height:auto; aspect-ratio:1; object-fit:contain; padding:8px; border-radius:0; margin:auto; background:white; }
.qr-card figcaption, .detail-qr-card figcaption { min-width:0; }
.box-contact .qr-card b, .detail-qr-card figcaption b { white-space:normal; font-size:16px; }
.qr-card figcaption span, .detail-qr-card figcaption span { font-size:12px; line-height:1.6; }
.whatsapp-qr-link { display:block; align-self:center; }
.contact-dock { position:fixed; right:18px; bottom:32px; z-index:90; display:flex; align-items:center; gap:4px; padding:5px; background:#fff; color:#0b347e; border:1px solid #dce4ec; border-radius:30px; box-shadow:0 4px 18px #061b4630; }
.contact-dock__chat { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 16px; border-radius:25px; background:#12613c; color:white; text-decoration:none; font-size:14px; font-weight:750; }
.contact-dock details { position:relative; }
.contact-dock summary { display:flex; min-height:48px; min-width:48px; padding:5px 8px; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; border-radius:22px; list-style:none; }
.contact-dock summary::-webkit-details-marker { display:none; }
.contact-dock summary small { font-size:10px; line-height:1.3; }
.contact-dock__qr summary > span { font-size:26px; line-height:24px; }
.contact-dock summary:hover, .contact-dock details[open] summary { background:#eaf0fc; }
.contact-popover { position:absolute; right:0; bottom:calc(100% + 14px); display:grid; gap:9px; width:216px; max-width:calc(100vw - 32px); padding:18px; background:white; color:#0b347e; border:1px solid #dce4ec; border-radius:16px; box-shadow:0 8px 30px #061b4630; text-align:center; }
.contact-popover img { display:block; width:160px; height:160px; padding:8px; margin:auto; background:white; }
.contact-popover span { font-size:12px; }
.contact-popover a { padding:10px; color:white; background:#12613c; border-radius:20px; font-weight:700; font-size:13px; text-decoration:none; }
.contact-dock :focus-visible, .nav-whatsapp:focus-visible { outline:3px solid #e2a500; outline-offset:3px; }
.contact-qr-rail { position:fixed; right:18px; top:52%; transform:translateY(-50%); z-index:80; display:grid; gap:12px; width:118px; margin:0; padding:0; filter:drop-shadow(0 16px 26px rgba(8,40,99,.24)); }
.contact-qr-rail__card { display:grid; justify-items:center; padding:9px; background:rgba(255,255,255,.96); color:var(--ink,#0b347e); border:2px solid rgba(8,40,99,.12); border-radius:18px; text-align:center; text-decoration:none; backdrop-filter:blur(12px); transition:transform 180ms ease,box-shadow 180ms ease; }
.contact-qr-rail__card:hover, .contact-qr-rail__card:focus-visible { transform:translateY(-4px) rotate(-1deg); box-shadow:7px 8px 0 var(--select-yellow,#ffd43b); }
.contact-qr-rail__card b { margin:1px 0 7px; color:var(--accent,#0b5bd3); font-size:12px; font-weight:950; letter-spacing:.08em; line-height:1.4; }
.contact-qr-rail__card img { display:block; width:96px; height:96px; padding:0; border-radius:10px; object-fit:contain; background:#fff; }
.contact-qr-rail__card small { margin-top:6px; color:var(--nav-muted,#68758b); font-size:10px; font-weight:800; line-height:1.4; }
.contact-qr-rail__card:focus-visible { outline:3px solid #e2a500; outline-offset:3px; }
.rfq-panel { grid-column:1 / -1; margin-top:34px; padding:clamp(22px,4vw,44px); color:#0b347e; background:#fff; border:2px solid #dce4ec; border-radius:24px; box-shadow:10px 12px 0 #063b92; }
.rfq-panel__head { max-width:820px; }
.rfq-panel__head h3 { margin:8px 0 10px; font-size:clamp(28px,4vw,48px); line-height:1.08; }
.rfq-panel__head > p:last-child { color:#56657a; line-height:1.75; }
.rfq-form { margin-top:28px; }
.rfq-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rfq-form label, .rfq-form fieldset { display:grid; gap:8px; min-width:0; margin:0; }
.rfq-form label > span, .rfq-form legend { color:#263b60; font-size:13px; font-weight:850; letter-spacing:.04em; }
.rfq-form input, .rfq-form select, .rfq-form textarea { width:100%; min-height:48px; padding:12px 14px; color:#10264a; background:#f7f9fc; border:1px solid #cbd6e4; border-radius:12px; font:inherit; box-sizing:border-box; }
.rfq-form textarea { resize:vertical; line-height:1.55; }
.rfq-form input:focus, .rfq-form select:focus, .rfq-form textarea:focus { outline:3px solid #ffd43b; border-color:#0b5bd3; }
.rfq-form fieldset { padding:0; border:0; }
.rfq-form__wide { grid-column:1 / -1; }
.rfq-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.rfq-options label { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 12px; background:#f1f5fb; border:1px solid #d8e1ed; border-radius:12px; cursor:pointer; }
.rfq-options input { width:18px; min-height:18px; height:18px; padding:0; }
.rfq-form__note { margin:18px 0 0; color:#56657a; font-size:13px; line-height:1.7; }
.rfq-form__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.rfq-form__actions .button { min-height:48px; padding:12px 22px; cursor:pointer; font:inherit; }
.rfq-form__actions .button-light { color:#fff; background:#0b5bd3; border:2px solid #0b5bd3; }
.rfq-form__actions .button-outline { color:#0b347e; background:#fff; border:2px solid #0b347e; }
.rfq-form__actions .button:hover { transform:translateY(-2px); }
/* The 1480px content shell needs room for the 118px rail and its side gap. */
@media (min-width:1801px) { .contact-dock { display:none; } }
@media (max-width:1800px) { .contact-qr-rail { display:none; } }
@media (min-width:921px) and (max-width:1300px) { .nav-phone { display:none; } .desktop-actions { gap:12px; } .nav-whatsapp span { font-size:12px; } }
@media (max-width:1180px) { .qr-grid, .detail-qr-grid { gap:10px; } .box-contact .qr-card, .detail-qr-card { padding:12px; } }
@media (max-width:640px) {
  .rfq-panel { margin-top:24px; padding:20px 16px; border-radius:18px; box-shadow:6px 7px 0 #063b92; }
  .rfq-form__grid { grid-template-columns:1fr; gap:15px; }
  .rfq-form__wide { grid-column:auto; }
  .rfq-options { grid-template-columns:1fr 1fr; }
  .rfq-form__actions { display:grid; grid-template-columns:1fr; }
  .rfq-form__actions .button { width:100%; }
  .qr-grid, .detail-qr-grid { grid-template-columns:1fr; gap:16px; }
  .box-contact .qr-card, .detail-qr-card { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:14px; padding:12px; }
  .qr-card img, .detail-qr-card img { width:120px; height:120px; max-width:none; }
  .contact-dock { right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); }
  body:has(.mobile-product-actions) .contact-dock { bottom:calc(88px + env(safe-area-inset-bottom)); }
  .contact-dock__qr { display:none; }
  .contact-dock__chat { min-height:44px; font-size:13px; padding:0 12px; }
  .contact-dock summary { min-height:44px; }
  .contact-popover { width:210px; }
  .site-footer, .detail-footer { padding-bottom:100px; }
}
