.hq-wrap { --ac: #364b5f; --ac2: #2a3b4c; /* V1.7.60: was brown #6a563f, unified to navy */ --ac3: #8d806f; --bg: #f7f5f0; --card: #ffffff; --ctrl: #f3f1ec; --option-bg: var(--ctrl); --ctrl2: #e6e1d8; --text: #222831; --muted: #7d766c; --border: rgba(0,0,0,0.09); --bdact: rgba(0,0,0,0.48); --radius: 4px; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; } .hq-header, .hq-logo, .hq-logo-icon, .hq-logo-name, .hq-logo-sub, .hq-product-note { display:none !important; } .hq-hero { background:#fff; border-bottom:1px solid #eeeeee; padding:52px 40px 36px; text-align:center; } .hq-hero h2 { font-size:clamp(28px,4vw,52px); font-weight:800; line-height:1.15; margin:0 0 14px; letter-spacing:1.5px; text-transform:uppercase; } .hq-hero-dark { color:#1a2b3c; } .hq-hero-blue { color:#2878c8; } .hq-hero p { font-size:14px; color:#7d766c; max-width:480px; margin:0 auto 0; line-height:1.6; } .hq-grid { display:block; max-width:1200px; margin:0 auto; padding:24px 24px 60px; } @media(max-width:900px){ .hq-price-panel .hq-progress { display:block; } #hq-app .hq-grid { padding:12px 8px 40px !important; } #hq-app .hq-hero { padding:32px 12px 24px !important; } #hq-app .hq-grid .hq-steps { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; } #hq-app .hq-grid .hq-steps > .hq-price-panel { position:static !important; top:auto !important; float:none !important; } } .hq-steps { display:flex; flex-direction:column; gap:16px; } .hq-card { background:var(--card); border:1px solid #e4e4e4; border-radius:4px; overflow:hidden; } .hq-card.active { border-color:var(--ac, #364b5f); } .hq-card-head { padding:14px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #f0f0f0; background:#fafafa; } .hq-num { width:26px; height:26px; border-radius:50%; background:#eeeeee; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#6f6a60; flex-shrink:0; } .hq-card.active .hq-num, .hq-card.done .hq-num { background:#888; color:#fff; } .hq-title { font-size:13px; font-weight:600; color:#222831; letter-spacing:0.1px; } .hq-req { font-size:10px; color:#6f6a60; text-transform:uppercase; margin-left:auto; font-weight:500; } .hq-body { padding:18px 20px; } .hq-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .hq-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } @media(max-width:600px){ .hq-grid4,.hq-grid3 { grid-template-columns:repeat(2,1fr); } } .hq-opt { background:var(--ctrl); border:1px solid #e4e4e4; border-radius:4px; padding:11px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; color:#333; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:500; position:relative; overflow:hidden; } .hq-opt:hover { border-color:#9a9287; background:#ebebeb; } .hq-opt.sel { background:#fff; border-color:var(--ac, #364b5f); border-width:1.5px; color:#222831; } .hq-opt.sel::after { content:'✓'; position:absolute; top:5px; right:7px; font-size:9px; color:var(--ac, #364b5f); font-weight:700; } .hq-opt img { width:56px; height:56px; object-fit:contain; border-radius:4px; } .hq-opt-size-image { padding-top:10px; padding-bottom:10px; min-height:146px; } .hq-size-thumb { width:var(--hq-img-size,120px); height:auto; max-width:95%; max-height:none; object-fit:var(--hq-img-size-fit,contain); border-radius:0; display:block; } .hq-opt .lbl { font-size:12px; font-weight:500; line-height:1.3; } .hq-opt .sub { font-size:10px; color:var(--muted); } .hq-flag { font-size:9px; padding:1px 5px; border-radius:3px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; background:#eeeeee; color:#777; border:1px solid #ddd; } .hq-pills { display:flex; flex-wrap:wrap; gap:8px; } .hq-pill { background:var(--ctrl); border:1px solid #e4e4e4; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; color:#444; font-family:Arial,Helvetica,sans-serif; position:relative; } .hq-pill:hover { border-color:#9a9287; background:#ebebeb; } /* V1.7.14: thickness selected style follows Size/Material selected style: white background + active border. */ .hq-pill.sel { background:#fff; border-color:var(--ac, #364b5f); border-width:1.5px; color:#222831; font-weight:600; } .hq-pill.sel::after { content:'✓'; position:absolute; top:4px; right:6px; font-size:9px; color:var(--ac, #364b5f); font-weight:700; } .hq-pill-flag { display:inline-block; margin-left:8px; font-size:9px; padding:1px 5px; border-radius:3px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; background:#eeeeee; color:#777; border:1px solid #ddd; vertical-align:middle; } .hq-pill.sel .hq-pill-flag { background:#eeeeee; color:#777; border-color:#ddd; } .hq-plating-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media(max-width:700px){ .hq-plating-grid { grid-template-columns:repeat(4,1fr); } } @media(max-width:480px){ .hq-plating-grid { grid-template-columns:repeat(2,1fr); } } .hq-plat-btn { background:var(--ctrl); border:1px solid #e4e4e4; border-radius:4px; padding:12px 8px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; overflow:hidden; } .hq-plat-btn:hover { border-color:#9a9287; background:#f7f4ed; } .hq-plat-btn.sel { border-color:var(--ac, #364b5f); border-width:1.5px; background:#fff; } .hq-plat-btn.sel::after { content:'✓'; position:absolute; top:6px; right:8px; font-size:10px; color:var(--ac, #364b5f); font-weight:700; } .hq-swatch { width:76px; height:76px; object-fit:contain; display:block; border:0; flex-shrink:0; } .hq-pname { font-size:10px; color:#555; text-align:center; line-height:1.3; font-weight:500; } .hq-colors { display:none; margin-top:12px; } .hq-colors.show { display:block; } .hq-colors-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; } .hq-color-note { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; } .hq-qty-wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .hq-qty-ctrl { display:flex; align-items:center; border:1px solid #e4e4e4; border-radius:4px; overflow:hidden; background:var(--ctrl); } .hq-qty-btn { width:42px; height:42px; background:none; border:none; font-size:18px; color:#555; cursor:pointer; display:flex; align-items:center; justify-content:center; } .hq-qty-btn:hover { background:#ebebeb; } .hq-qty-input { width:72px; background:none; border:none; text-align:center; font-size:15px; font-weight:600; color:#222831; font-family:Arial,Helvetica,sans-serif; outline:none; } .hq-presets { display:flex; gap:6px; flex-wrap:wrap; } .hq-preset { padding:5px 12px; background:var(--ctrl); border:1px solid #e4e4e4; border-radius:3px; font-size:12px; cursor:pointer; color:var(--muted); font-family:Arial,Helvetica,sans-serif; } .hq-preset:hover { border-color:#9a9287; color:#444; } .hq-preset.sel { border-color:var(--ac, #364b5f); color:var(--ac, #364b5f); background:#f0f0f0; font-weight:600; } .hq-qty-tip { font-size:11px; color:var(--muted); margin-top:10px; line-height:1.5; } .hq-upload-zone { border:1.5px dashed #ccc; border-radius:4px; padding:28px; text-align:center; cursor:pointer; background:#fafafa; position:relative; } .hq-upload-zone:hover,.hq-upload-zone.over { border-color:#7d766c; background:#f4f4f4; } .hq-upload-zone input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; } .hq-up-icon { font-size:28px; margin-bottom:8px; opacity:0.4; } .hq-up-title { font-size:14px; color:#333; margin-bottom:3px; } .hq-up-sub { font-size:12px; color:var(--muted); } .hq-up-fmt { font-size:11px; color:var(--muted); margin-top:7px; opacity:0.7; } .hq-preview { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .hq-prev-item { background:#fff; border:1px solid #e4e4e4; border-radius:4px; padding:5px 10px; font-size:12px; display:flex; align-items:center; gap:6px; color:var(--muted); } .hq-prev-rm { cursor:pointer; color:#e74c3c; } .hq-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:500; margin-bottom:6px; display:block; } .hq-textarea { width:100%; background:var(--ctrl); border:1px solid #e4e4e4; border-radius:4px; padding:12px 14px; color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:14px; resize:vertical; min-height:85px; outline:none; } .hq-textarea:focus { border-color:#7d766c; } .hq-textarea::placeholder { color:#8c8c8c; } .hq-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; } @media(max-width:520px){ .hq-contact-grid { grid-template-columns:1fr; } } .hq-input-wrap { display:flex; flex-direction:column; gap:5px; } .hq-input { background:var(--ctrl); border:1px solid #e4e4e4; border-radius:4px; padding:11px 13px; color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:13px; outline:none; width:100%; } .hq-input:focus { border-color:#7d766c; } .hq-input::placeholder { color:#8c8c8c; } .hq-action-buttons { display:flex; gap:12px; width:100%; } .hq-submit { background:var(--ac, #364b5f); color:#fff; border:none; padding:15px 32px; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; width:100%; font-family:Arial,Helvetica,sans-serif; letter-spacing:0.2px; } .hq-submit:not(.is-disabled):hover { background:#2a3b4c; } .hq-quote-btn { background:var(--ac, #364b5f); color:#fff; border:1px solid var(--ac, #364b5f); } .hq-quote-btn:not(.is-disabled):hover { background:#2a3b4c; border-color:#2a3b4c; color:#fff; } .hq-submit.is-disabled, .hq-submit[aria-disabled="true"] { background:var(--ac, #364b5f); color:#ffffff; opacity:1; cursor:pointer; } /* V1.7.61: bullet-proof disabled label readability (beats base color + theme) */ #hq-app .hq-submit.is-disabled, #hq-app .hq-submit[aria-disabled="true"]{ background:var(--ac, #364b5f) !important; color:#ffffff !important; opacity:1 !important; } .hq-sticky-actions { display:none; } /* Quote-only layout: single centered button with a constrained width (not full-bleed) in the main flow. The narrow sticky panel keeps it full width. */ .hq-action-buttons.hq-quote-only { justify-content:center; } #hq-app .hq-contact-actions.hq-quote-only .hq-submit { flex:0 1 auto; width:auto; min-width:260px; max-width:340px; } #hq-app .hq-sticky-actions.hq-quote-only .hq-submit { flex:1 1 auto; width:100%; } @media (max-width:640px){ .hq-action-buttons { flex-direction:column; } #hq-app .hq-contact-actions.hq-quote-only .hq-submit { width:100%; min-width:0; max-width:none; } } .hq-tip-icon { width:17px; height:17px; border-radius:50%; background:var(--ctrl2); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); font-weight:700; } .hq-tip-box { display:none; position:absolute; top:22px; left:0; z-index:20; background:#fff; border:1px solid #e4e4e4; border-radius:4px; padding:10px 14px; font-size:12px; color:#444; width:220px; line-height:1.5; } .hq-price-panel { display:flex; flex-direction:column; gap:14px; } .hq-progress { background:#fff; border:1px solid #e4e4e4; border-radius:4px; padding:14px 16px; } .hq-prog-lbl { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:7px; text-transform:uppercase; } .hq-prog-bar { height:3px; background:var(--ctrl2); border-radius:2px; overflow:hidden; } .hq-prog-fill { height:100%; background:var(--ac, #364b5f); border-radius:2px; width:0%; } .hq-prog-steps { display:flex; justify-content:space-between; margin-top:8px; } .hq-ps { font-size:9px; color:#ccc; text-align:center; } .hq-ps.done { color:var(--ac, #364b5f); font-weight:600; } .hq-price-card { background:#fff; border:1px solid #e4e4e4; border-radius:4px; overflow:hidden; } .hq-pcard-head { background:var(--ac, #364b5f); padding:14px 18px; } .hq-pcard-head h3 { font-size:13px; font-weight:600; color:#fff; text-transform:uppercase; margin:0 0 3px; } .hq-pcard-head p { font-size:11px; color:rgba(255,255,255,0.5); margin:0; } .hq-pcard-body { padding:18px; display:flex; flex-direction:column; gap:10px; } .hq-tags { display:flex; flex-wrap:wrap; gap:5px; } .hq-tag { background:#f2f2f2; border:1px solid #e4e4e4; border-radius:4px; padding:2px 8px; font-size:11px; color:#555; } .hq-prow { display:flex; justify-content:space-between; align-items:center; font-size:13px; } .hq-prow-l { color:var(--muted); } .hq-prow-v { font-weight:500; color:var(--text); } .hq-div { height:1px; background:#f0f0f0; } .hq-price-block { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid #f0f0f0; } .hq-price-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; } .hq-price-val { font-size:28px; font-weight:700; color:#222831; letter-spacing:-0.5px; line-height:1; } .hq-price-sub { font-size:11px; color:var(--muted); text-align:right; margin-top:3px; } .hq-pnote { background:#f7f5f0; border:1px solid #eeeeee; border-radius:4px; padding:10px 13px; font-size:11px; color:#6f6a60; line-height:1.6; } .hq-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9999; align-items:center; justify-content:center; padding:20px; } .hq-modal-overlay.show { display:flex; } .hq-modal { background:#fff; border-radius:4px; max-width:500px; width:100%; overflow:hidden; } .hq-modal-head { background:var(--ac, #364b5f); padding:24px; text-align:center; } .hq-modal-icon { width:42px; height:42px; background:var(--ac, #364b5f); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin:0 auto 12px; } .hq-modal-head h3 { font-size:20px; font-weight:700; color:#fff; margin:0 0 6px; letter-spacing:-0.2px; } .hq-modal-head p { font-size:13px; color:rgba(255,255,255,0.55); margin:0; } .hq-modal-body { padding:22px; } .hq-sum-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; } .hq-sum-item { background:#f7f7f7; border-radius:4px; border:1px solid #eee; padding:10px; } .hq-sum-l { font-size:10px; color:#6f6a60; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; } .hq-sum-v { font-size:13px; font-weight:600; color:#222831; } .hq-modal-total { background:#f7f7f7; border:1px solid #eeeeee; border-radius:4px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .hq-modal-total-stack { display:block; } .hq-modal-total-row { display:flex; justify-content:space-between; align-items:center; gap:18px; } .hq-modal-final-row { margin-top:12px; padding-top:12px; border-top:1px solid #e2e2e2; } .hq-mt-label { font-size:12px; color:#7d766c; } .hq-mt-sub { font-size:11px; color:#6f6a60; margin-top:2px; } .hq-mt-price { font-size:24px; font-weight:700; color:#222831; letter-spacing:-0.5px; } .hq-mt-final { color:#111827; font-size:26px; } .hq-modal-footer { display:flex; gap:10px; } .hq-btn-pri { flex:1; padding:13px; background:var(--ac, #364b5f); color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; font-family:Arial,Helvetica,sans-serif; } .hq-btn-pri:hover { background:#2a3b4c; } .hq-btn-sec { padding:13px 18px; background:#f4f4f4; color:#333; border:1px solid #ddd; border-radius:4px; font-size:13px; cursor:pointer; font-family:Arial,Helvetica,sans-serif; } .hq-btn-sec:hover { background:#eee; } /* V1.6.2: friendly center validation notice */ .hq-center-notice { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100000; background: rgba(0,0,0,0.22); padding: 20px; } .hq-center-notice.show { display: flex; } .hq-center-notice-card { position: relative; width: min(460px, calc(100vw - 40px)); background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,0.18); padding: 22px 24px 20px; text-align: left; animation: hqNoticeIn .16s ease-out; } @keyframes hqNoticeIn { from { transform: translateY(8px); opacity: .65; } to { transform: translateY(0); opacity: 1; } } .hq-center-notice-title { font-size: 16px; line-height: 1.35; font-weight: 700; color: #222831; margin-right: 28px; margin-bottom: 8px; } .hq-center-notice-text { font-size: 13px; line-height: 1.7; color: #5f6b76; } .hq-center-notice-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: 0; background: transparent; color: #8a929a; font-size: 22px; line-height: 1; cursor: pointer; } .hq-center-notice.is-error .hq-center-notice-card { border-top: 4px solid #b32d2e; } .hq-center-notice.is-warn .hq-center-notice-card { border-top: 4px solid var(--ac, #364b5f); } #hq-app .hq-field-error { border-color: #b32d2e !important; box-shadow: 0 0 0 2px rgba(179,45,46,0.08) !important; } #hq-app .hq-card.hq-field-error { animation: hqFieldPulse 1.4s ease-in-out 1; } @keyframes hqFieldPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(179,45,46,0.08); } 45% { box-shadow: 0 0 0 4px rgba(179,45,46,0.16); } } #hq-app .hq-submit.needs-contact:not(.is-disabled) { opacity: .92; } @media (max-width: 600px) { .hq-action-buttons { flex-direction: column; } .hq-center-notice-card { padding: 20px 18px 18px; } } /* V1.6.9: per-product option thumbnail display sizes from backend settings */ #hq-app [data-field="material"] .hq-opt img { width: var(--hq-img-material, 70px); height: var(--hq-img-material, 70px); object-fit: var(--hq-img-material-fit, contain); background: transparent !important; } #hq-app [data-field="plating"] .hq-swatch { width: var(--hq-img-plating, 82px); height: var(--hq-img-plating, 82px); object-fit: var(--hq-img-plating-fit, contain); background: transparent !important; } #hq-app [data-field="enamel"] .hq-opt img { width: var(--hq-img-enamel, 70px); height: var(--hq-img-enamel, 70px); object-fit: var(--hq-img-enamel-fit, contain); background: transparent !important; } #hq-app [data-field="packaging"] .hq-opt img { width: var(--hq-img-packaging, 76px); height: var(--hq-img-packaging, 76px); object-fit: var(--hq-img-packaging-fit, contain); background: transparent !important; } #hq-app [data-field="backing"] .hq-opt img { width: var(--hq-img-backing, 76px); height: var(--hq-img-backing, 76px); object-fit: var(--hq-img-backing-fit, contain); background: transparent !important; } /* V1.7.1: visually remove white pads from option thumbnails in Coloring / Packaging / Back Attachment. Some uploaded/source JPG/WebP thumbnails contain a white rectangle inside the image file itself. CSS cannot truly delete pixels, but multiply blending makes white areas merge with the card background. */ #hq-app [data-field="enamel"] .hq-opt img, #hq-app [data-field="packaging"] .hq-opt img, #hq-app [data-field="backing"] .hq-opt img { background: transparent !important; mix-blend-mode: multiply; } #hq-app .hq-opt.sel [data-field="enamel"] img, #hq-app .hq-opt.sel [data-field="packaging"] img, #hq-app .hq-opt.sel [data-field="backing"] img { mix-blend-mode: multiply; } #hq-app [data-field="enamel"] .hq-opt.sel img, #hq-app [data-field="packaging"] .hq-opt.sel img, #hq-app [data-field="backing"] .hq-opt.sel img { mix-blend-mode: multiply; } /* V1.7.84: blend the baked-in white pads out of Size and Plating thumbnails too, matching the Coloring / Packaging / Backing behaviour above. Material thumbnails are full-bleed textures with no white pad, so they are intentionally left untouched. */ #hq-app [data-field="size"] .hq-opt img, #hq-app .hq-size-thumb, #hq-app [data-field="plating"] .hq-swatch { background: transparent !important; mix-blend-mode: multiply; } /* V1.7.18: Option Card Background Color must apply consistently to all unselected option cards. */ .hq-wrap .hq-opt:not(.sel), .hq-wrap .hq-pill:not(.sel), .hq-wrap .hq-plat-btn:not(.sel), .hq-wrap .hq-preset:not(.sel) { background: var(--ctrl, #f3f1ec) !important; } .hq-wrap .hq-opt.sel, .hq-wrap .hq-pill.sel, .hq-wrap .hq-plat-btn.sel, .hq-wrap .hq-preset.sel { background: #fff !important; color: #222831 !important; } .hq-wrap .hq-opt.sel *, .hq-wrap .hq-pill.sel *, .hq-wrap .hq-plat-btn.sel *, .hq-wrap .hq-preset.sel * { color: inherit !important; } /* V1.7.27: Desktop-only sticky price summary. Mobile/tablet keeps the original single-column layout. */ @media (min-width: 1024px) { #hq-app .hq-grid { max-width: 1280px; padding: 24px 24px 70px; } #hq-app .hq-steps { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px 22px; align-items: start; } #hq-app .hq-steps > .hq-card { grid-column: 1; min-width: 0; } /* Important: override the inline order used by the mobile/single-column flow. Without this, the price panel can appear low in the normal flow and scroll away. */ #hq-app .hq-steps > .hq-price-panel { order: -999 !important; grid-column: 2 !important; grid-row: 1 / span 999 !important; position: sticky !important; top: 96px !important; align-self: start !important; z-index: 20; width: 360px; max-width: 360px; max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; } #hq-app .hq-price-panel .hq-progress { display: block; } #hq-app .hq-price-panel .hq-price-card { box-shadow: 0 10px 24px rgba(34, 40, 49, 0.08); } #hq-app .hq-sticky-actions { display: flex !important; margin-top: 6px; } #hq-app .hq-contact-actions { display: none !important; } } @media (max-width: 1023px) { #hq-app .hq-steps { display: flex !important; flex-direction: column !important; } #hq-app .hq-steps > .hq-price-panel { order: inherit; grid-column: auto !important; grid-row: auto !important; position: static !important; top: auto !important; width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; } #hq-app .hq-sticky-actions { display: none !important; } #hq-app .hq-contact-actions { display: flex !important; } } /* V1.7.28: extra guard to prevent duplicate action buttons on mobile. Sticky actions are desktop-only; contact actions are the only mobile buttons. */ #hq-app .hq-sticky-actions { display: none; } @media (min-width: 1024px) { #hq-app .hq-price-panel .hq-sticky-actions { display: flex !important; } #hq-app .hq-contact-actions { display: none !important; } } @media (max-width: 1023px) { #hq-app .hq-price-panel .hq-sticky-actions { display: none !important; } #hq-app .hq-contact-actions { display: flex !important; } } /* V1.7.29: desktop fixed fallback for price panel. Some themes/builders wrap content with overflow containers, which can break CSS sticky. JS adds this class only on desktop while the quote form is being scrolled. */ @media (min-width: 1024px) { #hq-app { overflow-x: visible !important; } #hq-app .hq-steps { position: relative; } #hq-app .hq-price-panel.hq-price-fixed-active { position: fixed !important; top: 96px !important; z-index: 9990 !important; width: 360px !important; max-width: 360px !important; max-height: calc(100vh - 116px) !important; overflow-y: auto !important; will-change: auto; } #hq-app .hq-price-panel.hq-price-bottom-active { position: absolute !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 360px !important; max-width: 360px !important; max-height: calc(100vh - 116px) !important; overflow-y: auto !important; z-index: 20 !important; } } @media (max-width: 1023px) { #hq-app .hq-price-panel.hq-price-fixed-active, #hq-app .hq-price-panel.hq-price-bottom-active { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; } } /* V1.7.31: per-option grid columns and larger size display images */ #hq-app #sizeGroup { grid-template-columns: repeat(var(--hq-size-cols-desktop, 3), minmax(0, 1fr)) !important; } #hq-app .hq-material-grid { grid-template-columns: repeat(var(--hq-material-cols-desktop, 3), minmax(0, 1fr)) !important; } #hq-app .hq-plating-grid { grid-template-columns: repeat(var(--hq-plating-cols-desktop, 4), minmax(0, 1fr)) !important; } #hq-app .hq-enamel-grid { grid-template-columns: repeat(var(--hq-enamel-cols-desktop, 3), minmax(0, 1fr)) !important; } #hq-app .hq-packaging-grid { grid-template-columns: repeat(var(--hq-packaging-cols-desktop, 3), minmax(0, 1fr)) !important; } #hq-app .hq-backing-grid { grid-template-columns: repeat(var(--hq-backing-cols-desktop, 3), minmax(0, 1fr)) !important; } #hq-app .hq-opt img { object-fit: contain; } #hq-app .hq-material-grid .hq-opt img { width: var(--hq-img-material,70px); height: var(--hq-img-material,70px); object-fit: var(--hq-img-material-fit,contain); } #hq-app .hq-enamel-grid .hq-opt img { width: var(--hq-img-enamel,70px); height: var(--hq-img-enamel,70px); object-fit: var(--hq-img-enamel-fit,contain); } #hq-app .hq-packaging-grid .hq-opt img { width: var(--hq-img-packaging,76px); height: var(--hq-img-packaging,76px); object-fit: var(--hq-img-packaging-fit,contain); } #hq-app .hq-backing-grid .hq-opt img { width: var(--hq-img-backing,76px); height: var(--hq-img-backing,76px); object-fit: var(--hq-img-backing-fit,contain); } #hq-app .hq-plating-grid .hq-swatch { width: var(--hq-img-plating,82px); height: var(--hq-img-plating,82px); object-fit: var(--hq-img-plating-fit,contain); } #hq-app .hq-opt-size-image { min-height: auto; } #hq-app .hq-size-thumb { width: var(--hq-img-size,120px); height: auto; max-width: 95%; object-fit: var(--hq-img-size-fit,contain); } @media(max-width:1023px){ #hq-app #sizeGroup { grid-template-columns: repeat(var(--hq-size-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-material-grid { grid-template-columns: repeat(var(--hq-material-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-plating-grid { grid-template-columns: repeat(var(--hq-plating-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-enamel-grid { grid-template-columns: repeat(var(--hq-enamel-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-packaging-grid { grid-template-columns: repeat(var(--hq-packaging-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-backing-grid { grid-template-columns: repeat(var(--hq-backing-cols-mobile, 2), minmax(0, 1fr)) !important; } #hq-app .hq-wrap, #hq-app.hq-wrap { padding-left:10px; padding-right:10px; } #hq-app .hq-size-thumb { max-width: 92%; height:auto; } } /* V1.7.32: mobile width and full-image display fixes */ @media (max-width: 767px) { #hq-app.hq-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; } #hq-app .hq-grid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box !important; } #hq-app .hq-steps, #hq-app .hq-card, #hq-app .hq-body { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #hq-app .hq-card-head { padding-left: 12px !important; padding-right: 12px !important; } #hq-app .hq-body { padding-left: 8px !important; padding-right: 8px !important; } #hq-app .hq-opt, #hq-app .hq-plat-btn { overflow: visible !important; min-width: 0 !important; box-sizing: border-box !important; } #hq-app .hq-grid3, #hq-app .hq-grid4, #hq-app .hq-material-grid, #hq-app .hq-enamel-grid, #hq-app .hq-packaging-grid, #hq-app .hq-backing-grid, #hq-app .hq-plating-grid { gap: 8px !important; width: 100% !important; } } /* V1.7.32: make option images show complete image instead of being cropped by fixed square boxes. */ #hq-app .hq-material-grid .hq-opt img, #hq-app .hq-enamel-grid .hq-opt img, #hq-app .hq-packaging-grid .hq-opt img, #hq-app .hq-backing-grid .hq-opt img, #hq-app .hq-opt-size-image img, #hq-app .hq-size-thumb { height: auto !important; max-width: 92% !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; } #hq-app .hq-material-grid .hq-opt img { width: min(var(--hq-img-material,70px), 92%) !important; } #hq-app .hq-enamel-grid .hq-opt img { width: min(var(--hq-img-enamel,70px), 92%) !important; } #hq-app .hq-packaging-grid .hq-opt img { width: min(var(--hq-img-packaging,76px), 92%) !important; } #hq-app .hq-backing-grid .hq-opt img { width: min(var(--hq-img-backing,76px), 92%) !important; } #hq-app .hq-size-thumb { width: min(var(--hq-img-size,120px), 92%) !important; } /* V1.7.33: on mobile, let option images scale up to fill each card so the small fixed pixel sizes (e.g. 76px) no longer leave large empty margins on both sides of every option. Images grow to ~90% of the cell width while keeping aspect ratio (height:auto + object-fit:contain). */ @media (max-width: 767px) { #hq-app .hq-opt { padding-left: 4px !important; padding-right: 4px !important; } #hq-app .hq-material-grid .hq-opt img, #hq-app .hq-enamel-grid .hq-opt img, #hq-app .hq-packaging-grid .hq-opt img, #hq-app .hq-backing-grid .hq-opt img { width: 90% !important; max-width: 90% !important; height: auto !important; } #hq-app .hq-plating-grid .hq-swatch { width: 86% !important; max-width: 86% !important; height: auto !important; } #hq-app .hq-size-thumb { width: 94% !important; max-width: 94% !important; height: auto !important; } } /* V1.7.34: FULL-BLEED on mobile. The form lives inside Elementor/WoodMart containers that add their own horizontal padding + centered max-width, so width:100% only filled the *padded* area, leaving large side gutters on phones. Break the form out to the full viewport width regardless of the parent container padding. Verified live: this pulls #hq-app to left:0 and width:100vw. Page overflow-x is hidden/clip so no sideways scroll. */ @media (max-width: 767px) { #hq-app.hq-wrap { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 6px !important; padding-right: 6px !important; box-sizing: border-box !important; overflow-x: hidden !important; } #hq-app .hq-grid { padding-left: 4px !important; padding-right: 4px !important; } } /* ============================================================ V1.7.35 — DESKTOP-ONLY refinements. Mobile (<=767px) is deliberately LEFT UNTOUCHED: every rule below is gated behind min-width:1024px (or 1240px), so phones keep the exact v1.7.34 layout. Do not move any of these out of the media queries. ============================================================ */ @media (min-width: 1024px) { /* #7 phantom empty space fix: the steps grid used grid-row:1/span 999 which combined with row-gap produced a ~16000px tall ghost column. Zero the row-gap and restore spacing with per-card margin instead. */ #hq-app .hq-steps { row-gap: 0 !important; } #hq-app .hq-steps > .hq-card { margin-bottom: 16px !important; } /* #2 move the action buttons OUT of the right sticky price panel and show them below Contact Info in the left main flow instead. */ #hq-app .hq-price-panel .hq-action-buttons.hq-sticky-actions, #hq-app .hq-action-buttons.hq-sticky-actions { display: none !important; } #hq-app .hq-card .hq-action-buttons.hq-contact-actions, #hq-app .hq-action-buttons.hq-contact-actions { display: flex !important; } /* #4 lower the sticky price panel z-index so it no longer covers the theme's sticky top menu bar (WoodMart header sits at z-index ~391). */ #hq-app .hq-price-panel, #hq-app .hq-price-fixed-active, #hq-app .hq-price-bottom-active { z-index: 30 !important; } /* #5 put "per coin" on the same line as the unit price. */ #hq-app .hq-price-block > div:last-child { display: flex !important; align-items: baseline !important; justify-content: flex-end !important; gap: 6px !important; } #hq-app .hq-price-val, #hq-app .hq-price-sub { display: inline-block !important; } /* #3 tighten the price area vertical spacing (~15-20% shorter). */ #hq-app .hq-price-panel { gap: 10px !important; } #hq-app .hq-pcard-head { padding: 11px 16px !important; } #hq-app .hq-pcard-body { padding: 13px 14px !important; gap: 7px !important; } #hq-app .hq-price-block { padding: 8px 0 !important; } } /* #1 desktop content width 1150 -> 1200 (only on wide screens). */ @media (min-width: 1240px) { #hq-app.hq-wrap { width: 1200px !important; max-width: 1200px !important; margin-left: calc(50% - 600px) !important; margin-right: calc(50% - 600px) !important; } } /* ============================================================ V1.7.36 — selected-state highlight (Plan A) + keyboard focus - Uses BOX-SHADOW instead of a thicker real border so there is ZERO layout shift on selection (shadows don't reflow). Both mobile and desktop get the same visual treatment. - :focus-visible adds a visible keyboard-only outline so Tab / Enter / Space navigation is discoverable. Mouse / touch users see no change. ============================================================ */ #hq-app .hq-opt.sel, #hq-app .hq-pill.sel, #hq-app .hq-plat-btn.sel, #hq-app .hq-preset.sel { border-color: var(--ac, #364b5f) !important; box-shadow: 0 0 0 1px var(--ac, #364b5f), 0 0 0 4px rgba(54,75,95,0.18) !important; } #hq-app .hq-opt:focus-visible, #hq-app .hq-pill:focus-visible, #hq-app .hq-plat-btn:focus-visible, #hq-app .hq-preset:focus-visible, #hq-app .hq-qty-btn:focus-visible, #hq-app .hq-action-btn:focus-visible, #hq-app .hq-submit:focus-visible, #hq-app .hq-input:focus-visible, #hq-app .hq-textarea:focus-visible { outline: 2px solid var(--ac, #364b5f) !important; outline-offset: 2px !important; } /* ============================================================ V1.7.39 — hero title size fix. Themes (e.g. WoodMart / Astra / Elementor pages) inject their own h2 rules that win against `.hq-hero h2` because of higher specificity or `!important`, which is what shrinks the hero to small body-text size in some pages. We force the hero typography with the #hq-app selector + !important so that "CUSTOM COIN PRICE CALCULATOR" always renders large, the way it does on a stock WordPress page. Mobile uses the same clamp so it still scales down on phones. ============================================================ */ #hq-app .hq-hero { padding: 52px 40px 36px !important; text-align: center !important; } #hq-app .hq-hero h2 { font-size: clamp(32px, 4.4vw, 56px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin: 0 0 14px !important; color: #1a2b3c !important; } #hq-app .hq-hero h2 .hq-hero-dark { color: #1a2b3c !important; } #hq-app .hq-hero h2 .hq-hero-blue { color: #2878c8 !important; } #hq-app .hq-hero p { font-size: 14px !important; color: #7d766c !important; max-width: 480px !important; margin: 0 auto !important; line-height: 1.6 !important; } @media (max-width: 767px) { #hq-app .hq-hero { padding: 32px 12px 24px !important; } #hq-app .hq-hero h2 { font-size: clamp(26px, 7vw, 40px) !important; letter-spacing: 0.8px !important; } } /* ============================================================ V1.7.40 — center-notice modal polish. 1. Anchor the notice to the TOP of the viewport so it never covers the contact form (which is usually below the fold). 2. Force position:relative on the card so the ✕ button sits at the card's top-right corner even when the theme overrides positioning. 3. Bigger, easier-to-tap ✕. ============================================================ */ #hq-center-notice.hq-center-notice { align-items: flex-start !important; padding-top: 60px !important; } #hq-center-notice .hq-center-notice-card { position: relative !important; width: min(460px, calc(100vw - 40px)) !important; padding: 22px 56px 20px 24px !important; box-shadow: 0 18px 60px rgba(0,0,0,0.22) !important; } #hq-center-notice .hq-center-notice-close { position: absolute !important; top: 8px !important; right: 10px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(0,0,0,0.04) !important; color: #555 !important; font-size: 20px !important; line-height: 30px !important; padding: 0 !important; text-align: center !important; cursor: pointer !important; border: 0 !important; z-index: 2 !important; } #hq-center-notice .hq-center-notice-close:hover { background: rgba(0,0,0,0.10) !important; color: #222 !important; } @media (max-width: 600px) { #hq-center-notice.hq-center-notice { padding-top: 30px !important; } #hq-center-notice .hq-center-notice-card { padding: 20px 50px 18px 18px !important; } } /* ============================================================ V1.7.44 — Estimated Price card: prevent the last row from being clipped on narrow screens. Allow flex rows to wrap to a second line if needed, tighten labels on very small viewports. ============================================================ */ #hq-app .hq-price-card { overflow: visible !important; } #hq-app .hq-pcard-body { overflow-x: hidden; } #hq-app .hq-prow { flex-wrap: wrap !important; row-gap: 2px; } #hq-app .hq-prow-l { word-break: break-word; } #hq-app .hq-prow-v { white-space: nowrap; } #hq-app #hq-total-wrap .hq-prow { gap: 6px; } #hq-app #hq-qty-line, #hq-app #hq-qty-line2 { font-size: 10px !important; max-width: 60%; } #hq-app #hq-grand, #hq-app #hq-grand-total { font-size: 14px !important; } @media (max-width: 600px) { #hq-app #hq-qty-line, #hq-app #hq-qty-line2 { font-size: 9px !important; max-width: 55%; line-height: 1.4; } #hq-app #hq-grand, #hq-app #hq-grand-total { font-size: 13px !important; } #hq-app .hq-pcard-body { padding: 14px 12px !important; } } /* ============================================================ V1.7.45 — progress bar layout polish - Replaces space-between (which left big gaps when items were few) with gap-based flex. Items are auto-sized and centered. Wraps if there are truly more than the row can fit, but with the default 7 fields it should always stay on one line. - Smaller, monochrome typography. ============================================================ */ #hq-app .hq-prog-steps { display: flex !important; justify-content: center !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 6px 10px !important; margin-top: 8px !important; } #hq-app .hq-ps { flex: 0 0 auto !important; font-size: 10px !important; color: #b5b3ae !important; text-align: center !important; white-space: nowrap !important; line-height: 1.4 !important; } #hq-app .hq-ps.done { color: var(--ac, #364b5f) !important; font-weight: 600 !important; } /* ============================================================ V1.7.45 — hide the chip row above the Estimated Price details. The chips ("30mm | Iron | Matte 24K Gold | ...") duplicate every value that's already listed below (Size: 30mm, Material: Iron, ...). We keep the DOM element so any future JS that touches #hq-tags still works — only the visual rendering is suppressed. ============================================================ */ #hq-app .hq-tags { display: none !important; } /* ============================================================ V1.7.45 — Order Total visible on laptops The sticky right panel can be taller than the viewport on small laptops. We: 1. Strengthen overflow-y:auto so the user can scroll inside the panel when content exceeds available height. 2. Style the scrollbar so it's discoverable. 3. For very short viewports (height < 720px), bail out of sticky and let the panel flow naturally so Order Total is reachable below it. ============================================================ */ @media (min-width: 1024px) { #hq-app .hq-price-panel { overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: rgba(54, 75, 95, 0.25) transparent; } #hq-app .hq-price-panel::-webkit-scrollbar { width: 6px; } #hq-app .hq-price-panel::-webkit-scrollbar-thumb { background: rgba(54, 75, 95, 0.25); border-radius: 3px; } #hq-app .hq-price-panel::-webkit-scrollbar-thumb:hover { background: rgba(54, 75, 95, 0.45); } } /* V1.7.46: short-viewport sticky-disable from v1.7.45 was reverted — it made the price panel scroll out of view while customers selected options, which is the opposite of what we want. The panel now stays sticky on every desktop viewport height. To keep Order Total reachable, v1.7.46 compacts the panel and adds an internal scroll with a clear bottom-edge gradient hint. See the V1.7.46 compact rules below. */ /* ============================================================ V1.7.46 — Compact price panel (Plan 1) Goal: panel stays sticky on every viewport AND its complete content (Unit Price, line items, Order Total, Mold fee, Grand Total) fits in a 700-720px laptop viewport without forcing a scroll. Strategy: tighten every vertical dimension by ~25-30%, smaller fonts for low-priority rows, and keep the big "Final Total" number readable. ============================================================ */ @media (min-width: 1024px) { /* Outer panel — tighten gap between progress card and price card */ #hq-app .hq-price-panel { gap: 8px !important; } /* Configuration progress card */ #hq-app .hq-progress { padding: 10px 14px !important; } #hq-app .hq-prog-lbl { font-size: 10px !important; margin-bottom: 5px !important; } #hq-app .hq-prog-bar { height: 2px !important; } #hq-app .hq-prog-steps { margin-top: 6px !important; gap: 4px 8px !important; } #hq-app .hq-ps { font-size: 9.5px !important; } /* Price card */ #hq-app .hq-pcard-head { padding: 9px 14px !important; } #hq-app .hq-pcard-head h3 { font-size: 12px !important; margin: 0 0 2px !important; } #hq-app .hq-pcard-head p { font-size: 10px !important; } #hq-app .hq-pcard-body { padding: 10px 14px 12px !important; gap: 5px !important; } #hq-app .hq-prow { font-size: 12px !important; } #hq-app .hq-prow-l { font-size: 11.5px !important; } #hq-app .hq-prow-v { font-size: 12px !important; } #hq-app .hq-price-block { padding: 6px 0 !important; } #hq-app .hq-price-lbl { font-size: 10px !important; } #hq-app .hq-price-val { font-size: 22px !important; line-height: 1 !important; } #hq-app .hq-price-sub { font-size: 10px !important; } #hq-app #hq-total-wrap .hq-prow { margin-top: 2px !important; } #hq-app #hq-grand, #hq-app #hq-grand-total { font-size: 13px !important; font-weight: 700 !important; } #hq-app #hq-qty-line, #hq-app #hq-qty-line2 { font-size: 9.5px !important; line-height: 1.4 !important; } #hq-app .hq-pnote { padding: 7px 10px !important; font-size: 10px !important; line-height: 1.5 !important; margin-top: 4px !important; } #hq-app .hq-div { margin: 2px 0 !important; } /* Sticky action buttons in panel — slimmer */ #hq-app .hq-sticky-actions .hq-submit, #hq-app .hq-sticky-actions .hq-action-btn { padding: 10px 18px !important; font-size: 12px !important; } } /* ============================================================ V1.7.46 — Bottom-edge fade + visible scrollbar ============================================================ */ @media (min-width: 1024px) { /* Wrap the panel so we can layer a fade element via ::after on it */ #hq-app .hq-price-panel { position: sticky !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable; } /* Slightly bigger, clearer scrollbar so customers see they can scroll */ #hq-app .hq-price-panel::-webkit-scrollbar { width: 8px; } #hq-app .hq-price-panel::-webkit-scrollbar-track { background: transparent; } #hq-app .hq-price-panel::-webkit-scrollbar-thumb { background: rgba(54, 75, 95, 0.30); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } #hq-app .hq-price-panel::-webkit-scrollbar-thumb:hover { background: rgba(54, 75, 95, 0.55); background-clip: padding-box; border: 2px solid transparent; } } /* The bottom-edge fade hint lives on a sibling wrapper since position:sticky elements can't have their own pseudo-element pinned to viewport bottom. Instead we put the fade inside .hq-price-card, anchored to its bottom. */ @media (min-width: 1024px) { #hq-app .hq-price-card { position: relative; } /* Only show the fade when the panel actually overflows. The hint is safe to render unconditionally because it sits just inside the card's bottom edge — when content fits, it's not over any cut-off text. */ #hq-app .hq-price-panel.hq-has-overflow .hq-price-card::after { content: ""; position: sticky; bottom: 0; left: 0; right: 0; display: block; height: 22px; margin-top: -22px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%); } } /* ============================================================ V1.7.62 — guarantee action-button label visibility. Some themes (WoodMart/WooCommerce) colour