/* product-detail.html — page-specific styles */

.thumb-btn { border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
  .thumb-btn.active, .thumb-btn:hover { border-color: #235497; box-shadow: 0 0 0 2px rgba(35,84,151,0.12); }
  .size-opt { display: flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1.5px solid rgba(191,200,200,0.4); border-radius: 12px; font-size: 14px; font-weight: 700; color: #235497; cursor: pointer; transition: all 0.2s; font-family: 'Plus Jakarta Sans', sans-serif; }
  .size-opt:hover { border-color: #235497; background: rgba(35,84,151,0.03); }
  .size-opt.selected { border-color: #235497; background: #235497; color: #fff; }
  .spec-row { display: flex; padding: 12px 0; border-bottom: 1px solid rgba(191,200,200,0.12); }
  .spec-row:last-child { border-bottom: none; }
  .spec-label { width: 40%; font-size: 12px; font-weight: 600; color: #515f74; text-transform: uppercase; letter-spacing: 0.05em; }
  .spec-value { width: 60%; font-size: 13px; font-weight: 600; color: #235497; }
  .tab-btn { padding: 12px 0; font-size: 13px; font-weight: 700; color: #515f74; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; }
  .tab-btn:hover { color: #235497; }
  .tab-btn.active { color: #235497; border-bottom-color: #235497; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }
  .calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, #235497 var(--pct, 50%), #e6e8ea var(--pct, 50%)); outline: none; }
  .calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #235497; cursor: pointer; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #235497; cursor: pointer; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  /* v2.0.4: .sticky-bar styles removed — replaced by site-wide Contact Bar */
  .coa-doc { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 14px; border: 1px solid rgba(191,200,200,0.2); transition: all 0.2s; cursor: pointer; }
  .coa-doc:hover { border-color: #235497; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.quote-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1.5rem}
.quote-overlay.open{display:flex}
.quote-modal{background:#fff;border-radius:1.5rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.18);animation:quoteIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes quoteIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.quote-modal::-webkit-scrollbar{width:4px}
.quote-modal::-webkit-scrollbar-thumb{background:#bfc8c8;border-radius:2px}
.quote-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem 1.5rem 0;gap:1rem}
.quote-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(191,200,200,.3);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#515f74;transition:all .15s;flex-shrink:0}
.quote-close:hover{background:#235497;color:#fff;border-color:#235497}
.quote-product{display:flex;align-items:center;gap:14px;margin:1rem 1.5rem;padding:14px;background:#f2f4f6;border-radius:14px}
.quote-product img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.quote-product-info h4{font-size:14px;font-weight:700;color:#235497;margin:0 0 2px;font-family:'Plus Jakarta Sans',sans-serif}
.quote-product-info span{font-size:11px;color:#515f74}
.quote-form{padding:0 1.5rem 1.5rem}
.quote-form label{display:block;font-size:11px;font-weight:700;color:#235497;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:10px 14px;border:1.5px solid rgba(191,200,200,.4);border-radius:10px;font-size:13px;color:#235497;background:#fff;transition:border-color .2s;font-family:Inter,sans-serif;outline:none}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#235497;box-shadow:0 0 0 3px rgba(35,84,151,.08)}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#bfc8c8}
.quote-form select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23404848'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
.quote-form .field{margin-bottom:16px}
.quote-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.quote-form .row{grid-template-columns:1fr}}
.quote-submit{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s;font-family:Inter,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px}
.quote-submit:hover{opacity:.9}
.quote-submit:active{transform:scale(.98)}
.quote-success{display:none;text-align:center;padding:3rem 2rem}
.quote-success.show{display:block}
.quote-success .check-circle{width:64px;height:64px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.quote-success .check-circle .inn-icon{font-size:32px;color:#2196f3}
.quote-success h3{font-size:18px;font-weight:800;color:#235497;margin-bottom:8px;font-family:'Plus Jakarta Sans',sans-serif}
.quote-success p{font-size:13px;color:#515f74;line-height:1.6}
.quote-divider{display:flex;align-items:center;gap:12px;margin:4px 0 16px;color:#bfc8c8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.quote-divider::before,.quote-divider::after{content:'';flex:1;height:1px;background:rgba(191,200,200,.2)}