#quote {
  --guide-ink: #173234;
  --guide-muted: #688082;
  --guide-line: #dce7e5;
  --guide-soft: #f2f7f5;
  --guide-green: #127262;
  --guide-green-dark: #0b5549;
  --guide-mint: #dff3eb;
}
#quote.quote-guide-ready > .container > .quote-grid { display: none; }
#quote #quoteGuideMount:empty { display: none; }
#quote #quoteGuideMount { max-width: 1180px; margin: 0 auto; color: var(--guide-ink); }
#quote #quoteGuideMount [hidden] { display: none !important; }
#quote #quoteGuideMount button,
#quote #quoteGuideMount input,
#quote #quoteGuideMount select,
#quote #quoteGuideMount textarea { font: inherit; }

#quote .journey-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; padding: 7px; border: 1px solid var(--guide-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(31,71,69,.06); }
#quote .journey-tab { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border: 0; border-radius: 13px; text-align: left; background: transparent; cursor: pointer; transition: .2s ease; }
#quote .journey-tab:hover { background: var(--guide-soft); }
#quote .journey-tab.active { color: #fff; background: linear-gradient(135deg,var(--guide-green),var(--guide-green-dark)); box-shadow: 0 10px 24px rgba(18,114,98,.22); }
#quote .journey-number { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 10px; font-weight: 900; }
#quote .journey-tab > span:last-child { display: grid; gap: 3px; }
#quote .journey-tab strong { font-size: 14px; }
#quote .journey-tab small { color: var(--guide-muted); font-size: 11px; }
#quote .journey-tab.active small { color: rgba(255,255,255,.72); }

#quote .guide-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(310px,.5fr); gap: 16px; align-items: start; }
#quote .guide-card,
#quote .guide-preview,
#quote .sample-form-card,
#quote .shipping-card { border: 1px solid var(--guide-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(31,71,69,.1); }
#quote .guide-card { min-height: 650px; padding: 25px; }
#quote .guide-stepper { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--guide-line); }
#quote .guide-stepper > i { height: 1px; background: var(--guide-line); }
#quote .guide-step-dot { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; color: #96a6a5; background: none; cursor: pointer; }
#quote .guide-step-dot b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #cdd9d7; border-radius: 50%; font-size: 11px; }
#quote .guide-step-dot span { font-size: 12px; font-weight: 700; white-space: nowrap; }
#quote .guide-step-dot.active { color: var(--guide-green); }
#quote .guide-step-dot.active b { color: #fff; border-color: var(--guide-green); background: var(--guide-green); }
#quote .guide-step { display: none; padding-top: 25px; }
#quote .guide-step.active { display: block; animation: guide-reveal .25s ease both; }
@keyframes guide-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#quote .guide-heading > span { color: var(--guide-green); font-size: 11px; font-weight: 800; }
#quote .guide-heading h3 { margin: 5px 0 7px; color: var(--guide-ink); font-size: 24px; }
#quote .guide-heading p { margin: 0 0 21px; color: var(--guide-muted); font-size: 13px; }

#quote .guide-use-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
#quote .guide-use-card { position: relative; display: flex; min-width: 0; min-height: 166px; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--guide-line); border-radius: 14px; background: #fff; cursor: pointer; transition: .18s ease; }
#quote .guide-use-card:hover { transform: translateY(-2px); border-color: #91bdb4; box-shadow: 0 10px 24px rgba(31,71,69,.1); }
#quote .guide-use-card.selected { border-color: var(--guide-green); box-shadow: 0 0 0 2px rgba(18,114,98,.1); }
#quote .guide-use-card input { position: absolute; opacity: 0; pointer-events: none; }
#quote .guide-use-card img { width: 100%; height: 97px; object-fit: cover; }
#quote .guide-use-card > span { display: grid; gap: 3px; padding: 11px 12px; }
#quote .guide-use-card strong { color: var(--guide-ink); font-size: 13px; }
#quote .guide-use-card small { overflow: hidden; color: var(--guide-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#quote .guide-use-card > b { position: absolute; top: 8px; right: 8px; padding: 4px 7px; border-radius: 999px; color: #fff; background: var(--guide-green); font-size: 9px; }
#quote .sample-shortcut { justify-content: center; align-items: center; border-style: dashed; color: var(--guide-green-dark); }
#quote .sample-shortcut > span:last-child { text-align: center; }
#quote .sample-mark { display: grid !important; place-items: center; width: 50px; height: 50px; padding: 0 !important; border-radius: 15px; color: #fff; background: linear-gradient(145deg,var(--guide-green),#2d9f86); font-size: 20px; font-weight: 900; }

#quote .guide-actions { display: flex; justify-content: space-between; gap: 11px; margin-top: 25px; }
#quote .guide-actions.end { justify-content: end; }
#quote .guide-primary,
#quote .guide-secondary,
#quote .guide-result-contact { min-height: 46px; padding: 11px 19px; border-radius: 11px; font-weight: 800; cursor: pointer; transition: .18s ease; }
#quote .guide-primary,
#quote .guide-result-contact { border: 0; color: #fff; background: linear-gradient(135deg,var(--guide-green),var(--guide-green-dark)); box-shadow: 0 9px 20px rgba(18,114,98,.2); }
#quote .guide-secondary { border: 1px solid var(--guide-line); color: var(--guide-ink); background: #fff; }
#quote .guide-full-action { width: 100%; }

#quote .guide-config { margin-top: 16px; padding: 15px; border: 1px solid var(--guide-line); border-radius: 15px; background: #fbfdfc; }
#quote .guide-config-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#quote .guide-config-title strong { color: var(--guide-ink); font-size: 13px; }
#quote .guide-config-title span { color: var(--guide-muted); font-size: 10px; }
#quote .guide-presets { display: flex; flex-wrap: wrap; gap: 7px; }
#quote .guide-presets button { padding: 8px 10px; border: 1px solid var(--guide-line); border-radius: 9px; color: var(--guide-muted); background: #fff; font-size: 11px; cursor: pointer; }
#quote .guide-presets button.active { color: var(--guide-green-dark); border-color: #8fc4b7; background: var(--guide-mint); font-weight: 800; }
#quote .guide-inline-fields { display: flex; align-items: end; gap: 8px; margin-top: 11px; }
#quote .guide-inline-fields > span { padding-bottom: 11px; color: #93a3a1; }
#quote .guide-inline-fields label,
#quote .guide-custom-quantity,
#quote .guide-contact-grid label,
#quote .sample-field { display: grid; flex: 1; gap: 5px; color: var(--guide-muted); font-size: 10px; font-weight: 700; }
#quote .guide-inline-fields input,
#quote .guide-custom-quantity input,
#quote .guide-contact-grid input,
#quote .sample-field select,
#quote .sample-field textarea { width: 100%; padding: 10px 11px; border: 1px solid #d5e1df; border-radius: 9px; outline: 0; color: var(--guide-ink); background: #fff; }
#quote #quoteGuideMount input:focus,
#quote #quoteGuideMount select:focus,
#quote #quoteGuideMount textarea:focus { border-color: var(--guide-green); box-shadow: 0 0 0 3px rgba(18,114,98,.1); }

#quote .guide-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#quote .guide-choice-card,
#quote .guide-process-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--guide-line); border-radius: 11px; background: #fff; cursor: pointer; }
#quote .guide-choice-card input,
#quote .guide-process-card input,
#quote .guide-color-options input,
#quote .guide-segments input { position: absolute; opacity: 0; pointer-events: none; }
#quote .guide-choice-card.selected,
#quote .guide-process-card.selected,
#quote .guide-color-options label.selected,
#quote .guide-segments label.selected { border-color: var(--guide-green); background: #f3fbf7; box-shadow: 0 0 0 1px rgba(18,114,98,.08); }
#quote .guide-choice-card > span:last-child,
#quote .guide-process-card > span:last-child { display: grid; min-width: 0; gap: 3px; }
#quote .guide-choice-card strong,
#quote .guide-process-card strong { color: var(--guide-ink); font-size: 11px; }
#quote .guide-choice-card small,
#quote .guide-process-card small { overflow: hidden; color: var(--guide-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#quote .material-swatch { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid #d7dfdd; border-radius: 9px; }
#quote .material-swatch.paper { background: linear-gradient(145deg,#fff,#e7e3d7); }
#quote .material-swatch.film { background: linear-gradient(145deg,#eef8fa,#a9d9e2); }
#quote .material-swatch.metallic { background: linear-gradient(135deg,#a8afb5,#f8fbfd 48%,#8f989f); }
#quote .material-swatch.thermal { background: repeating-linear-gradient(0deg,#f5f2ea,#f5f2ea 4px,#e7e2d8 5px); }
#quote .guide-two-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 19px; }
#quote .guide-custom-quantity { margin-top: 11px; }
#quote .guide-color-options { display: grid; gap: 7px; }
#quote .guide-color-options label { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--guide-line); border-radius: 9px; background: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
#quote .color-dot { width: 21px; height: 21px; border-radius: 6px; }
#quote .color-dot.mono { background: linear-gradient(135deg,#222 50%,#eee 50%); }
#quote .color-dot.full { background: conic-gradient(#ee4058,#f2c94c,#27ae60,#2f80ed,#9b51e0,#ee4058); }
#quote .color-dot.white { border: 3px solid #ddd; background: conic-gradient(#ee4058,#2f80ed,#fff,#ee4058); }
#quote .guide-process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#quote .guide-process-card { align-items: flex-start; min-height: 75px; }
#quote .process-visual { width: 29px; height: 42px; flex: 0 0 auto; border-radius: 8px; }
#quote .process-visual.lamination { background: linear-gradient(135deg,#bddbd5,#fff 48%,#96c7bd); box-shadow: inset 0 0 0 1px rgba(18,114,98,.18); }
#quote .process-visual.foil { background: linear-gradient(135deg,#9d7835,#ffeaa2 35%,#fff3bd 50%,#a87826 72%,#f6dc83); }
#quote .process-visual.reverse { background: linear-gradient(90deg,#223c3b 50%,#abc7c1 50%); }
#quote .guide-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#quote .guide-segments label { position: relative; display: grid; gap: 3px; padding: 10px; border: 1px solid var(--guide-line); border-radius: 9px; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
#quote .guide-segments small { color: var(--guide-muted); font-size: 9px; font-weight: 500; }

#quote .guide-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#quote .guide-privacy { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--guide-muted); font-size: 10px; }
#quote .guide-privacy input { accent-color: var(--guide-green); }
#quote .guide-result { margin-top: 16px; padding: 18px; border: 1px solid #a8d3c8; border-radius: 16px; background: linear-gradient(145deg,#f0faf5,#fff); }
#quote .guide-result-top { display: flex; align-items: center; justify-content: space-between; }
#quote .guide-result-top span { color: var(--guide-muted); font-size: 11px; }
#quote .guide-result-top b { padding: 5px 8px; border-radius: 999px; color: var(--guide-green); background: var(--guide-mint); font-size: 9px; }
#quote .guide-range { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0; }
#quote .guide-range > div { padding: 13px; border-radius: 11px; background: #fff; }
#quote .guide-range span,
#quote .guide-range small { color: var(--guide-muted); font-size: 9px; }
#quote .guide-range strong { display: block; margin: 4px 0; color: var(--guide-green-dark); font-size: 20px; }
#quote .guide-result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 13px; }
#quote .guide-result-details p { display: flex; justify-content: space-between; gap: 7px; margin: 0; padding: 7px 0; border-bottom: 1px dashed #cbded9; font-size: 10px; }
#quote .guide-result-details span { color: var(--guide-muted); }
#quote .guide-result-note { margin:13px 0; padding:10px 12px; border-radius:9px; color:#744c18; background:#fff5df; font-size:10px; line-height:1.65; }
#quote .guide-result-note strong { color:#8b4d00; }
#quote .guide-result-contact { width: 100%; }
#quote .guide-status { min-height: 18px; margin: 9px 0 0; color: var(--guide-green); font-size: 10px; }
#quote .guide-quote-disclaimer { display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; padding:12px 14px; border:1px solid #efc878; border-radius:11px; background:#fff8e8; }
#quote .guide-quote-disclaimer strong { flex:0 0 auto; padding:3px 7px; border-radius:5px; color:#fff; background:#a76108; font-size:9px; }
#quote .guide-quote-disclaimer p { margin:0; color:#754b17; font-size:10px; font-weight:700; line-height:1.6; }

#quote .guide-preview { position: sticky; top: 90px; overflow: hidden; }
#quote .guide-preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--guide-line); }
#quote .guide-preview-toolbar span { color: var(--guide-muted); font-size: 10px; }
#quote .guide-preview-toolbar b { color: var(--guide-green); font-size: 11px; }
#quote .guide-product-stage { position:relative; height:285px; overflow:hidden; background:#dce8e5; }
#quote .guide-stage-photo { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s ease,transform .35s ease; }
#quote .guide-product-stage:hover .guide-stage-photo { transform:scale(1.025); }
#quote .guide-stage-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,28,35,.08) 35%,rgba(5,30,31,.64) 100%); pointer-events:none; }
#quote .guide-stage-caption { position:absolute; left:16px; bottom:15px; z-index:2; display:grid; gap:3px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); }
#quote .guide-stage-caption span { color:rgba(255,255,255,.78); font-size:9px; letter-spacing:.08em; }
#quote .guide-stage-caption strong { color:#fff; font-size:15px; }
#quote .guide-label-shape { position:absolute; right:16px; bottom:16px; z-index:3; display:flex; align-items:center; justify-content:center; gap:7px; width:105px; height:75px; padding:8px; overflow:hidden; border:1px solid rgba(255,255,255,.55); border-radius:10px; color:#fff; background:linear-gradient(135deg,rgba(11,87,93,.94),rgba(36,159,139,.94)); box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter:blur(4px); transition:.2s ease; }
#quote .guide-label-shape i { display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; font-size:12px; font-style:normal; font-weight:900; }
#quote .guide-label-shape span { display:grid; gap:2px; min-width:0; color:#fff; text-align:left; }
#quote .guide-label-shape b { color:inherit; font-size:10px; line-height:1; white-space:nowrap; }
#quote .guide-label-shape small { color:inherit; font-size:6px; letter-spacing:.08em; white-space:nowrap; opacity:.82; }
#quote .guide-label-shape.has-lamination { box-shadow:inset 0 0 20px rgba(255,255,255,.72),0 12px 28px rgba(0,0,0,.28); }
#quote .guide-label-shape.has-foil { color:#4a3512; border-color:#fff1b1; background:linear-gradient(135deg,#9f7529,#fff0a7 34%,#fff 48%,#b88a34 68%,#f5da77); }
#quote .guide-label-shape.has-foil i { color:inherit; border-color:rgba(74,53,18,.35); }
#quote .guide-label-shape.has-reverse { background:linear-gradient(90deg,rgba(11,87,93,.96) 0 50%,rgba(150,201,189,.96) 50% 100%); }
#quote .guide-preview-specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--guide-line); }
#quote .guide-preview-specs > div { padding:12px 15px; background:#fff; }
#quote .guide-preview-specs span { display:block; margin-bottom:3px; color:var(--guide-muted); font-size:9px; }
#quote .guide-preview-specs strong { color:var(--guide-ink); font-size:10px; }
#quote .guide-tip { margin:14px; padding:12px; border-radius:11px; background:#fff6ef; }
#quote .guide-tip span { color:#a55b31; font-size:9px; font-weight:900; }
#quote .guide-tip p { margin:4px 0 0; color:#73523e; font-size:10px; line-height:1.5; }

#quote .sample-journey { animation:guide-reveal .25s ease both; }
#quote .sample-intro-card { display:flex; align-items:center; gap:19px; padding:24px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#0d3f3b,#137262 62%,#258d79); box-shadow:0 18px 50px rgba(31,71,69,.12); }
#quote .sample-icon { display:grid; place-items:center; width:65px; height:65px; flex:0 0 auto; border:1px solid rgba(255,255,255,.35); border-radius:18px; color:#fff; background:rgba(255,255,255,.1); font-size:24px; font-weight:900; }
#quote .sample-intro-card h3 { margin:0; color:#fff; font-size:24px; }
#quote .sample-intro-card p { margin:7px 0 0; color:rgba(255,255,255,.72); font-size:11px; line-height:1.65; }
#quote .sample-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin-top:16px; align-items:start; }
#quote .sample-form-card,
#quote .shipping-card { padding:22px; }
#quote .sample-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
#quote .sample-steps > div { display:flex; gap:8px; padding:10px; border-radius:11px; background:var(--guide-soft); }
#quote .sample-steps b { display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; border-radius:50%; color:#fff; background:var(--guide-green); font-size:10px; }
#quote .sample-steps span { display:grid; gap:2px; }
#quote .sample-steps strong { font-size:10px; }
#quote .sample-steps small { color:var(--guide-muted); font-size:8px; }
#quote .sample-field { margin-top:12px; }
#quote .shipping-card { position:sticky; top:90px; }
#quote .shipping-label { color:var(--guide-green); font-size:10px; font-weight:900; }
#quote .shipping-card h3 { margin:7px 0 15px; color:var(--guide-ink); font-size:19px; }
#quote .shipping-card dl { margin:0; }
#quote .shipping-card dl div { display:grid; grid-template-columns:68px 1fr; gap:9px; padding:9px 0; border-bottom:1px solid var(--guide-line); font-size:10px; }
#quote .shipping-card dt { color:var(--guide-muted); }
#quote .shipping-card dd { margin:0; color:var(--guide-ink); font-weight:700; line-height:1.55; }
#quote .shipping-note { margin-top:14px; padding:12px; border-radius:11px; background:#fff6ef; }
#quote .shipping-note strong { color:#9b552e; font-size:10px; }
#quote .shipping-note p { margin:4px 0 0; color:#73523e; font-size:9px; line-height:1.55; }
#quote .sample-slip { margin-top:12px; padding:13px; border:1px dashed #8abcae; border-radius:11px; background:#f1faf6; }
#quote .sample-slip > span { color:var(--guide-muted); font-size:9px; }
#quote .sample-slip > strong { display:block; margin:4px 0 6px; color:var(--guide-green); font-size:16px; }
#quote .sample-slip p { color:var(--guide-muted); font-size:9px; line-height:1.5; }
#quote .sample-slip button { width:100%; padding:8px; border:1px solid #9cc9bd; border-radius:8px; color:var(--guide-green); background:#fff; font-size:10px; font-weight:800; cursor:pointer; }

@media (max-width: 900px) {
  #quote .guide-layout,
  #quote .sample-layout { grid-template-columns:1fr; }
  #quote .guide-preview,
  #quote .shipping-card { position:static; }
  #quote .guide-use-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  #quote .journey-switch,
  #quote .guide-use-grid,
  #quote .guide-choice-grid,
  #quote .guide-process-grid,
  #quote .guide-two-columns,
  #quote .guide-contact-grid,
  #quote .guide-range,
  #quote .guide-result-details,
  #quote .sample-steps { grid-template-columns:1fr; }
  #quote .guide-card { min-height:0; padding:18px 14px; }
  #quote .guide-stepper { gap:5px; }
  #quote .guide-step-dot span { display:none; }
  #quote .guide-use-card { min-height:145px; }
  #quote .guide-use-card img { height:86px; }
  #quote .sample-intro-card { align-items:flex-start; padding:19px; }
  #quote .sample-icon { width:50px; height:50px; border-radius:14px; font-size:19px; }
  #quote .sample-intro-card h3 { font-size:19px; }
  #quote .sample-form-card,
  #quote .shipping-card { padding:17px; }
  #quote .guide-actions { position:sticky; bottom:54px; z-index:5; margin:20px -14px -18px; padding:11px 14px; border-top:1px solid var(--guide-line); background:rgba(255,255,255,.96); }
  #quote .guide-actions button { flex:1; }
}