/* Increment 3: lens selection, preferences, processing and recommendation. */
body:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) { background:#081a36; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) { width:min(100%,1440px); background:#081a36; box-shadow:none; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .topbar { height:100px; padding:24px 6%; gap:18px; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand { color:#fff; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand-copy small { color:#a8c8ef; font-size:9px; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand-copy small i { background:#65b8ff; animation:none; box-shadow:none; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand-mark svg { stroke:#68bbff; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand-mark circle { fill:#f3ce70; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .brand-mark .milie-spark { stroke:#f3ce70; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .icon-button { background:#122948; border-color:#365071; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .icon-button svg { stroke:#fff; }
.kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) :is(button,a,input):focus-visible { outline:3px solid #69baff; outline-offset:4px; }

:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) { --ink:#10213b; --muted:#506078; --green:#2264a5; --green-dark:#194f87; --lime:#f3ce70; --paper:#081a36; --line:#d4e0ef; color:#fff; padding:30px 6% 38px; min-height:calc(100svh - 100px); background:radial-gradient(ellipse at 85% 15%,#16427770,transparent 55%); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .step-row { color:#b4c4da; font-size:12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .progress { background:#294261; margin:14px 0 30px; height:5px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .progress i { background:#65b8ff; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .eyebrow { color:#a8c8ef; font-size:12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) h2 { font:700 clamp(36px,4.5vw,60px)/1.12 var(--sans); letter-spacing:-.04em; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) h2 em { font:inherit; color:#65b8ff; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .step-heading > p:last-child { font-size:18px; line-height:1.6; color:#b4c4da; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .sticky-action { position:static; padding:24px 0 0; margin-top:auto; background:none; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .primary-button { min-height:66px; background:#f3ce70; color:#10213b; box-shadow:none; font-size:18px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .primary-button:hover:not(:disabled) { background:#ffdf8e; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .secondary-button { min-height:66px; background:#122948; border-color:#6e98c8; color:#d5eaff; font-size:16px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .primary-button:disabled { background:#344760; color:#aabbcf; cursor:not-allowed; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .secondary-button:disabled { background:#182c46; border-color:#40536d; color:#94a8c2; cursor:not-allowed; }

:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(button,select,input,a):focus-visible { outline:3px solid #65b8ff; outline-offset:4px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-tech-list,.treatment-list) { margin:28px 0; gap:18px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.tech-card,.treatment-card,.own-frame-card,.summary-card) { background:#f6f9fe; color:#10213b; border-color:#d4e0ef; box-shadow:none; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.tech-card,.treatment-card).selected { background:#e5f1ff; border-color:#65b8ff; box-shadow:0 0 0 3px #65b8ff30; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-card { min-height:270px; padding:24px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-badge { font-size:11px; background:#e3edfb; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-badge.recommended { background:#f3ce70; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy b { font:700 26px/1.3 var(--sans); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy small { font-size:16px; line-height:1.5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy > span { font-size:13px; gap:8px; line-height:1.6; margin-top:10px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy i { background:#e3edfb; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-select { width:32px; height:32px; line-height:32px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-icon.photochromic { background:linear-gradient(135deg,#e3edfb 50%,#8aa9ce 50%); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-card { min-height:100px; padding:22px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-copy b { font-size:21px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-copy small { font-size:16px; line-height:1.5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-price { font-size:19px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-icon { background:#e3edfb; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-card { margin:30px 0; padding:30px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-card h3 { font:700 30px/1.3 var(--sans); max-width:none; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-text { font-size:18px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-note { background:#e3edfb; font-size:16px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-eyebrow { color:#775b16; font-size:12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.mini-round,.mini-pill) { min-height:54px; font-size:17px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .mini-round { width:54px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tabs { background:#122948; border-color:#416c9b; padding:6px; gap:8px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab { min-height:68px; color:#a8c8ef; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab b { font:700 22px/1.3 var(--sans); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab small { font-size:11px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab.active { background:#f3ce70; color:#10213b; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-workspace { margin:20px 0; color:#10213b; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual { background:#eaf1f9; padding:24px; gap:20px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual-head { flex-wrap:wrap; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual-head b, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-head b { font:700 24px/1.3 var(--sans); white-space:normal; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual-head small, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-head small { font-size:12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-status { font-size:11px; padding:9px 12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-diagram, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-legend { transform:none; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-legend { font-size:13px; line-height:1.5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-controls { padding:24px; gap:18px; background:#f6f9fe; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control > span { font-size:16px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control small { font-size:12px; line-height:1.5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control output { font-size:17px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control input { min-height:40px; margin:0; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-result { min-height:100px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-result b { font:700 23px/1.3 var(--sans); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-result small, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-result p span { font-size:12px; line-height:1.5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.fitting-align-button,.fitting-3d-button) { min-height:60px; font-size:16px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-disclaimer { color:#b4c4da; font-size:15px; margin:0 0 24px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-disclaimer span { color:#a8c8ef; border-color:#6e98c8; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-card { color:#10213b; background:#eaf1f9; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-head { padding:22px; flex-wrap:wrap; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-head > span { font-size:13px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-toolbar { flex-wrap:wrap; gap:10px; padding:16px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-toolbar button { min-height:54px; font-size:15px; flex:1 1 120px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-toolbar button[aria-pressed="true"] { background:#e3edfb; border-color:#2264a5; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-3d-tone,.lens-3d-scenario,.lens-3d-decentration) { padding:12px 16px; gap:12px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-3d-control-label,.lens-3d-tone-selectors label span,.lens-3d-decentration label span) { font-size:13px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-3d-tone-selectors select,.lens-3d-scenario select,.lens-3d-switch,.lens-3d-decentration button) { min-height:50px; font-size:15px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-tone-selectors { gap:14px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-decentration input[type=range] { min-height:40px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-3d-dec-val,.lens-3d-dec-note,.lens-3d-meta) { font-size:13px; line-height:1.6; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-fullscreen { width:48px; height:48px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items { padding:12px 28px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items span { font-size:13px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items b { font:600 21px/1.4 var(--sans); overflow-wrap:anywhere; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items strong { font-size:20px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-total { background:#e3edfb; gap:20px; flex-wrap:wrap; padding:24px 28px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-total span { font-size:18px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-total small { font-size:13px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-total strong { font:700 34px/1.3 var(--sans); }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-visual { background:#e3edfb; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-visual .large { max-width:350px; }
/* Com foto real a chapa azul vira moldura branca: a foto do cadastro e' JPG de
   fundo branco, e sobre o azul ela aparece como um retangulo colado. */
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-visual.com-foto { background:#fff; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .advisor-note { padding:20px 0; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .advisor-note p { color:#b4c4da; font-size:17px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .advisor-note b { color:#fff; font-size:19px; }
:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .text-button { color:#a8c8ef; min-height:56px; font-size:17px; }
@media (max-width:850px) {
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-workspace { grid-template-columns:minmax(0,1fr); }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual { border-right:0; border-bottom:1px solid #d4e0ef; }
}
@media (max-width:600px) {
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) { padding:20px 5% 32px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-tech-list { grid-template-columns:1fr; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .dual-action { grid-template-columns:1fr; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-card { flex-wrap:wrap; gap:12px; padding:18px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-copy { flex-basis:calc(100% - 70px); }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-price { margin-left:56px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-card { padding:22px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .own-frame-card h3 { font-size:25px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-visual, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-controls { padding:18px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control { gap:8px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control > span { font-size:15px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control output { font-size:15px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-tone-selectors label { flex:1 1 130px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 .kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) { width:100%; }
 .kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .topbar { height:132px; padding:30px 7%; }
 .kiosk:has(:is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]).active) .icon-button { width:64px; height:64px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) { min-height:calc(100svh - 132px); padding:44px 7% 56px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) h2 { font-size:clamp(48px,6vw,68px); }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .step-heading > p:last-child { font-size:24px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.step-row,.eyebrow) { font-size:16px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.primary-button,.secondary-button) { min-height:82px; font-size:22px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-card { min-height:330px; padding:30px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy b { font-size:30px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy small { font-size:21px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .tech-copy > span { font-size:17px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-card { min-height:125px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-copy b { font-size:27px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-copy small { font-size:21px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .treatment-price { font-size:24px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-workspace { grid-template-columns:1fr; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-diagram { max-height:440px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-controls { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:30px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-result { grid-column:1 / -1; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control { align-content:start; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control > span, :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control output { font-size:21px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-control small { font-size:16px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.fitting-align-button,.fitting-3d-button) { min-height:72px; font-size:20px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab { min-height:80px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab b { font-size:28px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-eye-tab small { font-size:15px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .fitting-disclaimer { font-size:20px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .lens-3d-viewport { min-height:560px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) :is(.lens-3d-toolbar button,.lens-3d-tone-selectors select,.lens-3d-scenario select,.lens-3d-switch,.lens-3d-decentration button) { min-height:64px; font-size:20px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items b { font-size:27px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items span { font-size:17px; }
 :is([data-screen="more-options"], [data-screen="lens-results"], [data-screen="treatments"], [data-screen="own-frame"], [data-screen="lens-fitting"], [data-screen="lens-3d"], [data-screen="summary"], [data-screen="payment"], [data-screen="order-done"]) .summary-items strong { font-size:26px; }
}
/* Shared dialogs complete the customer-facing journey. */
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog) { --ink:#10213b; --muted:#506078; --green:#2264a5; --green-dark:#194f87; --lime:#f3ce70; --paper:#f6f9fe; --line:#d4e0ef; background:#f6f9fe; color:#10213b; max-height:calc(100svh - 32px); overflow:auto; padding-top:64px; }
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog)::backdrop { background:#06152dbb; }
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog) .dialog-close { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid #d4e0ef; right:10px; top:10px; }
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog) h3 { font:700 32px/1.2 var(--sans); }
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog) .primary-button { background:#f3ce70; color:#10213b; box-shadow:none; }
#lensAlternativesDialog { width:min(850px,calc(100% - 32px)); }
#lensAlternativesDialog .alternative-lens-card { background:#fff; padding:22px; }
#lensAlternativesDialog .alternative-lens-card h4 { font:700 25px/1.3 var(--sans); }
#lensAlternativesDialog .alternative-lens-card small { display:block; padding-right:32px; font-size:11px; }
#lensAlternativesDialog .alternative-lens-card p { font-size:16px; line-height:1.5; }
#lensAlternativesDialog .alternative-preco { font-size:26px; margin:8px 0 12px; }
#lensAlternativesDialog .alternative-preco em { font-size:12px; }
#lensAlternativesDialog .alternative-lens-card ul { font-size:15px; }
#lensAlternativesDialog .choose-lens-alternative { min-height:56px; font-size:16px; }
#lgpdDialog .lgpd-content h4 { font-family:var(--sans); font-size:18px; }
#lgpdDialog .lgpd-content p { font-size:14px; }
:is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog) button:focus-visible { outline:3px solid #3276bf; outline-offset:3px; }
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 :is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog) { width:min(900px,calc(100% - 80px)); padding:80px 40px 40px; }
 :is(#helpDialog,#lgpdDialog,#lensAlternativesDialog) h3 { font-size:44px; }
 :is(#helpDialog,#lgpdDialog,#lensAlternativesDialog,#ownFrameTranscriptDialog) p { font-size:22px; }
 :is(#helpDialog,#lgpdDialog,#lensAlternativesDialog) .primary-button { min-height:80px; font-size:22px; }
}
/* Compact 3D controls: preserve 44px touch targets, prioritize the lens. */
[data-screen="lens-3d"] .lens-3d-toolbar { gap:8px; padding:12px 16px 8px; }
[data-screen="lens-3d"] .lens-3d-toolbar button { min-height:44px; flex:1 1 0; padding:8px; font-size:14px; border-radius:9px; }
[data-screen="lens-3d"] .lens-3d-tone { padding:8px 16px; }
[data-screen="lens-3d"] .lens-3d-tone-selectors { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; position:relative; }
[data-screen="lens-3d"] .lens-3d-tone-selectors label { min-width:0; gap:5px; }
[data-screen="lens-3d"] .lens-3d-tone-selectors label span { font-size:12px; line-height:1.4; letter-spacing:0; }
[data-screen="lens-3d"] .lens-3d-tone-selectors select { width:100%; min-width:0; min-height:44px; border-radius:9px; padding:0 22px 0 10px; font-size:14px; }
[data-screen="lens-3d"] .lens-3d-tone-preview { position:absolute; top:0; right:calc(75% + 9px); width:12px; height:12px; pointer-events:none; }
[data-screen="lens-3d"] .lens-3d-scenario { justify-content:flex-start; gap:8px; padding:8px 16px; }
[data-screen="lens-3d"] :is(.lens-3d-scenario select,.lens-3d-switch,.lens-3d-decentration button) { min-height:44px; font-size:14px; border-radius:9px; padding:0 12px; }
[data-screen="lens-3d"] .lens-3d-control-label { font-size:12px; letter-spacing:0; }
[data-screen="lens-3d"] .lens-3d-decentration { display:grid; grid-template-columns:auto minmax(70px,1fr) 48px minmax(70px,1fr) 48px auto; gap:8px; padding:8px 16px; }
[data-screen="lens-3d"] .lens-3d-decentration label { min-width:0; }
[data-screen="lens-3d"] .lens-3d-decentration input[type=range] { width:100%; min-width:0; min-height:44px; margin:0; }
[data-screen="lens-3d"] .lens-3d-decentration label span { font-size:12px; }
[data-screen="lens-3d"] .lens-3d-dec-val { min-width:0; font-size:12px; }
[data-screen="lens-3d"] .lens-3d-dec-note { font-size:12px; padding:4px 16px 8px; }
[data-screen="lens-3d"] .lens-3d-meta { font-size:11px; padding:4px 16px 12px; gap:5px 12px; }
@media (max-width:900px) {
 [data-screen="lens-3d"] .lens-3d-decentration { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px; }
 [data-screen="lens-3d"] .lens-3d-decentration > .lens-3d-control-label { grid-column:1 / -1; }
 [data-screen="lens-3d"] .lens-3d-decentration button { grid-column:1 / -1; justify-self:end; }
}
@media (max-width:600px) {
 [data-screen="lens-3d"] .lens-3d-tone-selectors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 [data-screen="lens-3d"] .lens-3d-tone-preview { right:calc(50% + 8px); }
 [data-screen="lens-3d"] .lens-3d-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 [data-screen="lens-3d"] .lens-3d-scenario { display:grid; grid-template-columns:auto minmax(0,1fr); }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lens-3d"] :is(.lens-3d-toolbar button,.lens-3d-tone-selectors select,.lens-3d-scenario select,.lens-3d-switch,.lens-3d-decentration button) { min-height:48px; font-size:16px; }
 [data-screen="lens-3d"] :is(.lens-3d-tone-selectors label span,.lens-3d-control-label) { font-size:13px; }
}

/* ── Subopções da lente, em modal ───────────────────────────────────────────
   Escolher uma tecnologia abre o modal com os produtos DAQUELA tecnologia.
   Virou modal porque algumas listas (o antirreflexo tem 18 itens, em quatro
   fabricantes) esticavam a tela muito além do que cabe num toque. Em troca, a
   escolha volta impressa no card — ver .tech-choice —, para a sobreposição
   não apagar da vista o que a pessoa acabou de decidir. */
.sub-options-dialog { width:min(880px, calc(100% - 40px)); max-height:calc(100svh - 40px); overflow:auto; padding:36px 30px 20px; text-align:left; }
.sub-options-dialog > .eyebrow { text-align:center; color:#2264a5; font-size:11px; letter-spacing:.18em; }
.sub-options-dialog > h3 { text-align:center; font-family:var(--sans); font-weight:700; font-size:30px; letter-spacing:-.02em; margin:6px 0 4px; }
.sub-options-dialog .dialog-close { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid #d4e0ef; right:10px; top:10px; font-size:26px; line-height:1; }
.sub-options-dialog .sub-panel[hidden] { display:none; }
.sub-options-dialog .sub-lead { color:#506078; font-size:15px; line-height:1.5; text-align:center; margin:0 auto 22px; max-width:60ch; }
.sub-options-dialog .sub-lead b { color:#2264a5; font-weight:800; letter-spacing:.08em; }
.sub-options-dialog .sub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sub-options-dialog .sub-card { position:relative; display:grid; align-content:start; gap:5px; padding:16px 15px; min-height:90px; border:1.5px solid #d4e0ef; border-radius:15px; background:#f6f9fe; text-align:left; cursor:pointer; transition:border-color .16s ease, background .16s ease; }
.sub-options-dialog .sub-card:hover:not(.selected) { background:#e9f1fc; }
.sub-options-dialog .sub-card.selected { border-color:#2264a5; background:#e5f1ff; }
.sub-options-dialog .sub-card b { font:700 16px/1.25 var(--sans); color:#10213b; padding-right:24px; }
.sub-options-dialog .sub-card small { font:500 13px/1.4 var(--sans); color:#506078; }
.sub-options-dialog .sub-check { position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:#2264a5; color:#fff; font:800 12px/22px var(--sans); text-align:center; opacity:0; transform:scale(.6); transition:.16s ease; }
.sub-options-dialog .sub-card.selected .sub-check { opacity:1; transform:scale(1); }
.sub-options-dialog .sub-group + .sub-group { margin-top:20px; }
.sub-options-dialog .sub-group-title { display:block; font:800 11px/1 var(--sans); letter-spacing:.18em; color:#2264a5; }
.sub-options-dialog .sub-group .sub-grid { margin-top:10px; }
.sub-options-dialog .text-button { margin-top:14px; color:#506078; }

/* O produto escolhido, de volta no card da tecnologia. */
.tech-choice { display:block; margin-top:10px; padding:7px 12px; border-radius:999px; background:#e5f1ff; border:1px solid #9fc4e8; color:#1b4f86; font:700 13px/1.2 var(--sans); width:fit-content; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tech-choice[hidden] { display:none; }

@media (max-width:600px) {
 .sub-options-dialog { width:calc(100% - 22px); padding:28px 16px 14px; }
 .sub-options-dialog > h3 { font-size:23px; }
 .sub-options-dialog .sub-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
 .sub-options-dialog .sub-card { padding:13px 11px; min-height:80px; }
 .sub-options-dialog .sub-card b { font-size:14px; padding-right:20px; }
 .sub-options-dialog .sub-card small { font-size:11px; }
 .sub-options-dialog .sub-lead { font-size:13px; margin-bottom:16px; }
 .tech-choice { font-size:11px; padding:5px 10px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 .sub-options-dialog { width:min(1000px, calc(100% - 60px)); padding:48px 40px 26px; }
 .sub-options-dialog > .eyebrow { font-size:15px; }
 .sub-options-dialog > h3 { font-size:42px; }
 .sub-options-dialog .dialog-close { width:64px; height:64px; font-size:34px; }
 .sub-options-dialog .sub-lead { font-size:20px; margin-bottom:30px; }
 .sub-options-dialog .sub-grid { gap:18px; }
 .sub-options-dialog .sub-card { padding:24px 22px; min-height:126px; border-radius:20px; gap:8px; }
 .sub-options-dialog .sub-card b { font-size:23px; padding-right:38px; }
 .sub-options-dialog .sub-card small { font-size:17px; }
 .sub-options-dialog .sub-check { width:32px; height:32px; font-size:16px; line-height:32px; top:18px; right:18px; }
 .sub-options-dialog .sub-group-title { font-size:16px; }
 .sub-options-dialog .text-button { font-size:20px; }
 .tech-choice { font-size:18px; padding:10px 18px; margin-top:14px; }
}

/* Anti-Blue é liga/desliga (Sim/Não no catálogo), não uma família de produto:
   ganha moldura tracejada quando desligado, para não se confundir com os
   cards de escolha única ao lado. */
.tech-card[data-toggle]:not(.selected) { border-style:dashed; }
.tech-card[data-toggle] .tech-select::before { content:''; }

/* Passo 2 do modal: cartela de cores da tecnologia fotossensível.
   A amostra mostra o tom que a lente assume NO SOL — por isso é opaca e
   escura, não um pontinho decorativo. */
.sub-options-dialog .sub-back { position:absolute; left:14px; top:18px; border:1px solid #d4e0ef; border-radius:999px; background:#fff; color:#2264a5; font:700 14px/1 var(--sans); padding:12px 18px; cursor:pointer; }
.sub-options-dialog .sub-back[hidden] { display:none; }
.sub-options-dialog .sub-back:hover { background:#e9f1fc; }
.sub-options-dialog .sub-colors[hidden] { display:none; }
.sub-options-dialog .cor-grid { grid-template-columns:repeat(4,1fr); }
.sub-options-dialog .cor-card { justify-items:center; align-content:center; text-align:center; gap:10px; min-height:112px; }
.sub-options-dialog .cor-card b { padding-right:0; font-size:15px; }
.cor-amostra { width:44px; height:44px; border-radius:50%; background:var(--tom); box-shadow:inset 0 3px 8px #ffffff40, 0 2px 6px #10213b33; }
@media (max-width:600px) {
 .sub-options-dialog .sub-back { left:10px; top:12px; padding:9px 13px; font-size:12px; }
 .sub-options-dialog .cor-grid { grid-template-columns:repeat(3,1fr); }
 .sub-options-dialog .cor-card { min-height:96px; gap:7px; }
 .cor-amostra { width:34px; height:34px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 .sub-options-dialog .sub-back { left:22px; top:26px; padding:17px 26px; font-size:19px; }
 .sub-options-dialog .cor-card { min-height:158px; gap:14px; }
 .sub-options-dialog .cor-card b { font-size:22px; }
 .cor-amostra { width:64px; height:64px; }
}

/* ── Lentes encontradas (tabela) ────────────────────────────────────────────
   Tabela de verdade (<table>), e não uma grade de divs: são dados tabulares
   comparáveis coluna a coluna, e o leitor de tela anuncia cabeçalho + célula.
   No celular ela vira uma lista de cartões, porque 6 colunas não cabem. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

[data-screen="lens-results"] .lens-criteria { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 18px; }
[data-screen="lens-results"] .criteria-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; background:#0e2b4d; border:1px solid #3d6491; color:#d5eaff; font:600 14px/1 var(--sans); }
[data-screen="lens-results"] .criteria-chip b { color:#a8c8ef; font-weight:800; font-size:11px; letter-spacing:.12em; }

[data-screen="lens-results"] .lens-table-wrap { border:1px solid #416c9b; border-radius:20px; overflow:auto; background:#173b64; -webkit-overflow-scrolling:touch; }
[data-screen="lens-results"] .lens-table { width:100%; border-collapse:collapse; text-align:left; }
[data-screen="lens-results"] .lens-table thead th { padding:16px 18px; background:#0e2b4d; color:#a8c8ef; font:800 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
[data-screen="lens-results"] .lens-table tbody tr { border-top:1px solid #2f557f; cursor:pointer; transition:background .16s ease; }
[data-screen="lens-results"] .lens-table tbody tr:hover:not(.selected) { background:#1b4470; }
[data-screen="lens-results"] .lens-table tbody tr.selected { background:#1e4c7e; box-shadow:inset 4px 0 0 #f3ce70; }
[data-screen="lens-results"] .lens-table td { padding:16px 18px; color:#d5eaff; font:500 15px/1.35 var(--sans); vertical-align:middle; }
[data-screen="lens-results"] .lens-nome { font-weight:700; color:#fff; font-size:17px; }
[data-screen="lens-results"] .lens-marca { display:block; margin-top:3px; font-size:12px; color:#a8c8ef; letter-spacing:.06em; }
[data-screen="lens-results"] .col-valor, [data-screen="lens-results"] .lens-valor { text-align:right; white-space:nowrap; }
[data-screen="lens-results"] .lens-valor { font:800 18px/1 var(--sans); color:#f3ce70; }
[data-screen="lens-results"] .lens-pick { width:26px; height:26px; border-radius:50%; border:2px solid #7e94af; display:grid; place-items:center; }
[data-screen="lens-results"] .lens-table tr.selected .lens-pick { border-color:#f3ce70; background:#f3ce70; color:#10213b; font:800 13px/1 var(--sans); }
[data-screen="lens-results"] .lens-pick::after { content:'\2713'; opacity:0; }
[data-screen="lens-results"] .lens-table tr.selected .lens-pick::after { opacity:1; }
[data-screen="lens-results"] .lens-recomendada { display:inline-block; margin-left:8px; padding:4px 9px; border-radius:999px; background:#f3ce70; color:#10213b; font:800 10px/1 var(--sans); letter-spacing:.1em; vertical-align:middle; }

@media (max-width:700px) {
 /* Vira lista de cartões: cada linha empilha rótulo + valor. */
 [data-screen="lens-results"] .lens-table thead { display:none; }
 [data-screen="lens-results"] .lens-table, [data-screen="lens-results"] .lens-table tbody,
 [data-screen="lens-results"] .lens-table tr, [data-screen="lens-results"] .lens-table td { display:block; width:100%; }
 [data-screen="lens-results"] .lens-table tbody tr { position:relative; padding:14px 16px 16px; }
 [data-screen="lens-results"] .lens-table td { padding:5px 0; }
 [data-screen="lens-results"] .lens-table td[data-rotulo]::before { content:attr(data-rotulo) ': '; color:#8fb4dd; font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
 [data-screen="lens-results"] .col-valor, [data-screen="lens-results"] .lens-valor { text-align:left; }
 [data-screen="lens-results"] .lens-table td.col-pick { position:absolute; right:14px; top:14px; width:auto; padding:0; }
 [data-screen="lens-results"] .criteria-chip { font-size:12px; padding:7px 12px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lens-results"] .criteria-chip { font-size:19px; padding:13px 22px; }
 [data-screen="lens-results"] .criteria-chip b { font-size:15px; }
 [data-screen="lens-results"] .lens-table thead th { padding:22px 24px; font-size:16px; }
 [data-screen="lens-results"] .lens-table td { padding:24px; font-size:21px; }
 [data-screen="lens-results"] .lens-nome { font-size:25px; }
 [data-screen="lens-results"] .lens-marca { font-size:17px; }
 [data-screen="lens-results"] .lens-valor { font-size:26px; }
 [data-screen="lens-results"] .lens-pick { width:36px; height:36px; }
}

/* A bolinha vira botão de verdade: é um alvo de toque com intenção própria
   (escolher), diferente do resto da linha (ver detalhes). Botão também entra
   na navegação por teclado e se anuncia com aria-label. */
[data-screen="lens-results"] button.lens-pick { padding:0; cursor:pointer; background:none; }

/* Card de detalhes da lente. */
.lens-detail-dialog { width:min(540px, calc(100% - 36px)); max-height:calc(100svh - 40px); overflow:auto; text-align:left; padding:38px 32px 28px; }
.lens-detail-dialog .dialog-close { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid #d4e0ef; right:10px; top:10px; font-size:26px; line-height:1; }
.lens-detail-dialog > .eyebrow { color:#2264a5; font-size:12px; letter-spacing:.18em; }
.lens-detail-dialog > h3 { font-family:var(--sans); font-weight:700; font-size:30px; letter-spacing:-.02em; margin:6px 0 22px; padding-right:40px; }
.lens-detail-specs { display:grid; gap:1px; margin:0 0 22px; background:#e3edfb; border:1px solid #e3edfb; border-radius:16px; overflow:hidden; }
.lens-detail-specs > div { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 18px; background:#f6f9fe; }
.lens-detail-specs dt { color:#506078; font:600 14px/1.3 var(--sans); }
.lens-detail-specs dd { margin:0; color:#10213b; font:700 15px/1.3 var(--sans); text-align:right; }
.lens-detail-price { display:flex; justify-content:space-between; align-items:baseline; padding:0 4px 20px; }
.lens-detail-price span { color:#506078; font:600 15px/1 var(--sans); }
.lens-detail-price strong { color:#10213b; font:800 30px/1 var(--sans); }
@media (max-width:600px) {
 .lens-detail-dialog { padding:30px 20px 20px; }
 .lens-detail-dialog > h3 { font-size:23px; margin-bottom:18px; }
 .lens-detail-specs > div { padding:12px 14px; }
 .lens-detail-specs dt { font-size:12px; }
 .lens-detail-specs dd { font-size:13px; }
 .lens-detail-price strong { font-size:24px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 .lens-detail-dialog { width:min(700px, calc(100% - 60px)); padding:50px 44px 34px; }
 .lens-detail-dialog > .eyebrow { font-size:16px; }
 .lens-detail-dialog > h3 { font-size:42px; margin-bottom:30px; }
 .lens-detail-specs > div { padding:20px 24px; }
 .lens-detail-specs dt { font-size:19px; }
 .lens-detail-specs dd { font-size:21px; }
 .lens-detail-price span { font-size:20px; }
 .lens-detail-price strong { font-size:40px; }
}

/* ── Pagamento ──────────────────────────────────────────────────────────────
   O quiosque registra a INTENÇÃO de pagamento; a cobrança acontece no balcão.
   Por isso não há campo de cartão nem QR de PIX aqui: coletar dado de cartão
   num totem compartilhado seria pedir problema. */
[data-screen="payment"] .pay-total { border:1px solid #416c9b; border-radius:20px; background:#173b64; overflow:hidden; margin-bottom:26px; }
[data-screen="payment"] .pay-total-linhas > div { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:14px; align-items:baseline; padding:15px 22px; border-bottom:1px solid #2f557f; }
[data-screen="payment"] .pay-total-linhas span { color:#a8c8ef; font:800 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
[data-screen="payment"] .pay-total-linhas b { color:#fff; font:600 16px/1.3 var(--sans); }
[data-screen="payment"] .pay-total-linhas strong { color:#d5eaff; font:700 16px/1 var(--sans); white-space:nowrap; }
[data-screen="payment"] .pay-total-soma { display:flex; justify-content:space-between; align-items:baseline; padding:20px 22px; background:#0e2b4d; }
[data-screen="payment"] .pay-total-soma span { color:#a8c8ef; font:800 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
[data-screen="payment"] .pay-total-soma strong { color:#f3ce70; font:800 32px/1 var(--sans); }

[data-screen="payment"] .pay-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
[data-screen="payment"] .pay-card { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr) 26px; align-items:center; gap:16px; padding:18px; border:2px solid #3d6491; border-radius:18px; background:#0e2b4d; text-align:left; cursor:pointer; transition:border-color .16s ease, background .16s ease; }
[data-screen="payment"] .pay-card:hover:not(.selected) { background:#123a63; }
[data-screen="payment"] .pay-card.selected { border-color:#f3ce70; background:#1b436f; }
[data-screen="payment"] .pay-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:#173b64; }
[data-screen="payment"] .pay-icon svg { width:30px; height:30px; fill:none; stroke:#65b8ff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
[data-screen="payment"] .pay-card.selected .pay-icon svg { stroke:#f3ce70; }
[data-screen="payment"] .pay-copy b { display:block; color:#fff; font:700 18px/1.25 var(--sans); }
[data-screen="payment"] .pay-copy small { display:block; margin-top:4px; color:#a8c8ef; font:500 13px/1.4 var(--sans); }
[data-screen="payment"] .pay-check { width:26px; height:26px; border-radius:50%; background:#f3ce70; color:#10213b; font:800 13px/26px var(--sans); text-align:center; opacity:0; transform:scale(.6); transition:.16s ease; }
[data-screen="payment"] .pay-card.selected .pay-check { opacity:1; transform:scale(1); }

/* Divisao do total entre formas de pagamento. Mesma gramatica da tela:
   moldura #3d6491, destaque em #f3ce70, fundo #0e2b4d. */
[data-screen="payment"] .pay-valores { margin-top:24px; padding-top:22px; border-top:1px solid #2f557f; }
[data-screen="payment"] .pay-valores[hidden] { display:none; }
[data-screen="payment"] .pay-valores-lead { color:#fff; font:700 17px/1.3 var(--sans); }
[data-screen="payment"] .pay-valores-lista { display:grid; gap:10px; margin-top:14px; }
[data-screen="payment"] .pay-valor { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid #3d6491; border-radius:14px; background:#0e2b4d; }
[data-screen="payment"] .pay-valor-nome { color:#fff; font:700 16px/1.25 var(--sans); }
[data-screen="payment"] .pay-valor-parcela:not(:empty) { display:block; margin-top:3px; color:#f3ce70; font:700 13px/1.3 var(--sans); }
[data-screen="payment"] .pay-valor-campo { display:flex; align-items:center; gap:7px; color:#a8c8ef; font:800 13px/1 var(--sans); }
/* Campo numerico grande: no totem quem digita e' o dedo, as vezes o do cliente. */
[data-screen="payment"] .pay-valor-campo input { width:130px; padding:11px 12px; border:1.5px solid #4a6c94; border-radius:11px; background:#10325a; color:#fff; font:800 19px/1 var(--sans); text-align:right; }
[data-screen="payment"] .pay-valor-campo input:focus { outline:none; border-color:#f3ce70; }
[data-screen="payment"] .pay-valor-remover { width:38px; height:38px; border-radius:50%; border:1.5px solid #4a6c94; background:transparent; color:#a8c8ef; font:700 20px/1 var(--sans); cursor:pointer; }
[data-screen="payment"] .pay-valor-remover:hover { border-color:#f3ce70; color:#f3ce70; }
/* O quanto falta e' o que decide o botao Confirmar: estado, nao enfeite. */
[data-screen="payment"] .pay-valores-resto { margin-top:14px; padding:12px 16px; border-radius:12px; background:#173b64; color:#f3ce70; font:800 15px/1.3 var(--sans); }
[data-screen="payment"] .pay-valores-resto.fechado { background:#14402c; color:#8fe0a8; }
[data-screen="payment"] .pay-parcelas { margin-top:24px; padding-top:22px; border-top:1px solid #2f557f; }
[data-screen="payment"] .pay-parcelas[hidden] { display:none; }
[data-screen="payment"] .pay-parcelas-lead { color:#fff; font:700 17px/1.3 var(--sans); }
[data-screen="payment"] .pay-parcelas-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:14px; }
[data-screen="payment"] .pay-parcela { display:grid; gap:4px; justify-items:center; padding:14px 10px; border:1.5px solid #3d6491; border-radius:14px; background:#0e2b4d; cursor:pointer; }
[data-screen="payment"] .pay-parcela.selected { border-color:#f3ce70; background:#1b436f; }
[data-screen="payment"] .pay-parcela b { color:#fff; font:800 20px/1 var(--sans); }
[data-screen="payment"] .pay-parcela small { color:#a8c8ef; font:600 13px/1 var(--sans); }
[data-screen="payment"] .pay-nota { display:flex; gap:11px; align-items:flex-start; margin-top:18px; color:#b4c4da; font-size:13px; line-height:1.5; }
[data-screen="payment"] .pay-nota span { flex:0 0 20px; height:20px; border:1px solid #4a6c94; border-radius:50%; display:grid; place-items:center; font:700 11px/1 var(--sans); color:#8fb4dd; }

/* ── Pedido registrado ─────────────────────────────────────────────────────── */
[data-screen="order-done"] .order-done { width:min(620px,100%); margin:auto; text-align:center; padding:20px 0 40px; }
[data-screen="order-done"] .order-done-mark { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 24px; border-radius:50%; background:#f3ce70; color:#10213b; font:800 40px/1 var(--sans); }
[data-screen="order-done"] .order-done-lead { color:#b4c4da; font-size:18px; line-height:1.6; max-width:46ch; margin:0 auto; }
[data-screen="order-done"] .order-code { margin:28px auto; padding:24px; border:1px dashed #6e98c8; border-radius:20px; background:#173b64; }
[data-screen="order-done"] .order-code small { display:block; color:#a8c8ef; font:800 12px/1 var(--sans); letter-spacing:.2em; }
[data-screen="order-done"] .order-code strong { display:block; margin-top:12px; color:#f3ce70; font:800 46px/1 var(--sans); letter-spacing:.04em; }
[data-screen="order-done"] .order-done-specs { display:grid; gap:1px; background:#2f557f; border:1px solid #2f557f; border-radius:16px; overflow:hidden; margin:0 0 28px; }
[data-screen="order-done"] .order-done-specs > div { display:flex; justify-content:space-between; gap:16px; padding:15px 20px; background:#173b64; }
[data-screen="order-done"] .order-done-specs dt { color:#a8c8ef; font:600 14px/1.3 var(--sans); }
[data-screen="order-done"] .order-done-specs dd { margin:0; color:#fff; font:700 15px/1.3 var(--sans); }

@media (max-width:600px) {
 [data-screen="payment"] .pay-total-linhas > div { grid-template-columns:1fr auto; }
 [data-screen="payment"] .pay-total-linhas span { grid-column:1 / -1; }
 [data-screen="payment"] .pay-total-soma strong { font-size:25px; }
 [data-screen="payment"] .pay-card { grid-template-columns:44px minmax(0,1fr) 22px; gap:12px; padding:14px; }
 [data-screen="payment"] .pay-icon { width:44px; height:44px; border-radius:13px; }
 [data-screen="payment"] .pay-icon svg { width:24px; height:24px; }
 [data-screen="payment"] .pay-copy b { font-size:16px; }
 [data-screen="order-done"] .order-code strong { font-size:34px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="payment"] .pay-total-linhas > div { padding:22px 30px; grid-template-columns:210px minmax(0,1fr) auto; }
 [data-screen="payment"] .pay-total-linhas span { font-size:15px; }
 [data-screen="payment"] .pay-total-linhas b, [data-screen="payment"] .pay-total-linhas strong { font-size:22px; }
 [data-screen="payment"] .pay-total-soma { padding:28px 30px; }
 [data-screen="payment"] .pay-total-soma span { font-size:18px; }
 [data-screen="payment"] .pay-total-soma strong { font-size:44px; }
 [data-screen="payment"] .pay-card { grid-template-columns:78px minmax(0,1fr) 34px; padding:26px; gap:22px; }
 [data-screen="payment"] .pay-icon { width:78px; height:78px; border-radius:20px; }
 [data-screen="payment"] .pay-icon svg { width:42px; height:42px; }
 [data-screen="payment"] .pay-copy b { font-size:25px; }
 [data-screen="payment"] .pay-copy small { font-size:18px; }
 [data-screen="payment"] .pay-parcelas-lead { font-size:23px; }
 [data-screen="payment"] .pay-parcela b { font-size:27px; }
 [data-screen="payment"] .pay-parcela small { font-size:17px; }
 [data-screen="payment"] .pay-nota { font-size:17px; }
 [data-screen="order-done"] .order-code strong { font-size:62px; }
 [data-screen="order-done"] .order-done-lead { font-size:24px; }
 [data-screen="order-done"] .order-done-specs dt, [data-screen="order-done"] .order-done-specs dd { font-size:20px; }
}

/* ── Ajustes da lente 3D, colapsáveis ───────────────────────────────────────
   <details> nativo em vez de JS: os controles continuam no DOM (o
   Lens3DViewer busca os elementos por id ao carregar), abrem sem script e
   respondem a teclado sozinhos. Fechados por padrão — o visualizador é o
   assunto da tela; cor, cenário e descentração são ajuste fino.
   A barra de vistas (frontal/lateral/girar/par) fica FORA: é a interação
   principal e não pode depender de abrir gaveta. */
[data-screen="lens-3d"] .lens-3d-ajustes { border-top:1px solid var(--line); background:#fff; }
[data-screen="lens-3d"] .lens-3d-ajustes > summary { display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; list-style:none; user-select:none; }
[data-screen="lens-3d"] .lens-3d-ajustes > summary::-webkit-details-marker { display:none; }
[data-screen="lens-3d"] .lens-3d-ajustes > summary:hover { background:#f6f9fe; }
[data-screen="lens-3d"] .lens-3d-ajustes > summary:focus-visible { outline:3px solid #65b8ff; outline-offset:-3px; }
[data-screen="lens-3d"] .ajustes-titulo { color:#10213b; font:700 16px/1.2 var(--sans); }
[data-screen="lens-3d"] .ajustes-dica { flex:1; min-width:0; color:#506078; font:500 13px/1.3 var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-screen="lens-3d"] .ajustes-seta { flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#e3edfb; position:relative; transition:transform .22s ease; }
[data-screen="lens-3d"] .ajustes-seta::before { content:''; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-right:2.2px solid #2264a5; border-bottom:2.2px solid #2264a5; transform:translateY(-2px) rotate(45deg); }
[data-screen="lens-3d"] .lens-3d-ajustes[open] > summary .ajustes-seta { transform:rotate(180deg); }
[data-screen="lens-3d"] .lens-3d-ajustes[open] > summary { border-bottom:1px solid var(--line); }
[data-screen="lens-3d"] .lens-3d-ajustes-corpo { animation:ajustesAbrem .26s ease both; }
@keyframes ajustesAbrem { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

@media (max-width:600px) {
 [data-screen="lens-3d"] .lens-3d-ajustes > summary { padding:13px 14px; gap:9px; }
 [data-screen="lens-3d"] .ajustes-titulo { font-size:14px; }
 /* A dica sai: em tela estreita ela espremeria o título. */
 [data-screen="lens-3d"] .ajustes-dica { display:none; }
 [data-screen="lens-3d"] .ajustes-seta { flex-basis:26px; width:26px; height:26px; margin-left:auto; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lens-3d"] .lens-3d-ajustes > summary { padding:24px 26px; gap:16px; }
 [data-screen="lens-3d"] .ajustes-titulo { font-size:23px; }
 [data-screen="lens-3d"] .ajustes-dica { font-size:18px; }
 [data-screen="lens-3d"] .ajustes-seta { flex-basis:44px; width:44px; height:44px; }
 [data-screen="lens-3d"] .ajustes-seta::before { width:13px; height:13px; border-width:3px; }
}
@media (prefers-reduced-motion:reduce) {
 [data-screen="lens-3d"] .lens-3d-ajustes-corpo { animation:none; }
 [data-screen="lens-3d"] .ajustes-seta { transition:none; }
}

/* ── Comparar lentes ────────────────────────────────────────────────────────
   A bolinha da tabela virou marcação múltipla: uma marcada é uma escolha,
   duas ou mais são uma comparação. O gatilho fica na mesma linha dos chips de
   critério, onde o olho já está. */
[data-screen="lens-results"] .lens-criteria-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 18px; }
[data-screen="lens-results"] .lens-criteria { margin:0; }
[data-screen="lens-results"] .compare-trigger { display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border:1px solid #f3ce70; border-radius:999px; background:#f3ce70; color:#10213b; font:800 14px/1 var(--sans); cursor:pointer; animation:compareEntra .28s ease both; }
[data-screen="lens-results"] .compare-trigger[hidden] { display:none; }
[data-screen="lens-results"] .compare-trigger svg { width:17px; height:17px; fill:none; stroke:#10213b; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-screen="lens-results"] .compare-count { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#10213b; color:#f3ce70; font-size:12px; }
@keyframes compareEntra { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }

.lens-compare-dialog { width:min(920px, calc(100% - 36px)); max-height:calc(100svh - 40px); overflow:auto; text-align:left; padding:38px 30px 28px; }
.lens-compare-dialog .dialog-close { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid #d4e0ef; right:10px; top:10px; font-size:26px; line-height:1; }
.lens-compare-dialog > .eyebrow { text-align:center; color:#2264a5; font-size:12px; letter-spacing:.18em; }
.lens-compare-dialog > h3 { text-align:center; font-family:var(--sans); font-weight:700; font-size:28px; letter-spacing:-.02em; margin:6px 0 22px; }
.compare-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* table-layout:fixed iguala as colunas de lente: sem isso a largura sai do
   conteúdo e "Acrílico Transistions Cinza" rouba espaço de "Kodak Blue UV",
   justamente o oposto do que uma comparação deve fazer. A primeira coluna
   (os rótulos) tem largura própria; o resto divide o que sobra em partes
   iguais. O min-width manda para a rolagem horizontal antes de espremer. */
.compare-table { width:100%; min-width:520px; border-collapse:collapse; table-layout:fixed; }
.compare-table :is(th,td) { overflow-wrap:anywhere; }
/* Atributos nas linhas e lentes nas colunas: é a leitura que responde
   "qual delas é mais fina", que é a pergunta de quem compara. */
.compare-table thead th { padding:14px 14px 16px; vertical-align:bottom; color:#10213b; font:700 17px/1.25 var(--sans); text-align:left; border-bottom:2px solid #d4e0ef; }
.compare-table thead th:first-child { width:150px; }
.compare-table tbody th { padding:14px; color:#506078; font:700 13px/1.3 var(--sans); text-align:left; white-space:nowrap; background:#f6f9fe; }
.compare-table tbody td { padding:14px; color:#10213b; font:500 15px/1.35 var(--sans); border-left:1px solid #e3edfb; }
.compare-table tbody tr { border-bottom:1px solid #e3edfb; }
.compare-table tbody td small { display:block; margin-top:3px; color:#506078; font-size:12px; font-weight:600; }
.compare-table tbody td b { font:800 19px/1 var(--sans); color:#10213b; }
.compare-acoes td { padding-top:18px; border-left:0; }
.compare-pick { width:100%; min-height:48px; padding:0 14px; border:0; border-radius:12px; background:#2264a5; color:#fff; font:700 14px/1 var(--sans); cursor:pointer; }
.compare-pick:hover { background:#1b5189; }

@media (max-width:600px) {
 .lens-compare-dialog { width:calc(100% - 20px); padding:28px 14px 18px; }
 .lens-compare-dialog > h3 { font-size:21px; }
 .compare-table thead th { font-size:14px; padding:10px; }
 .compare-table thead th:first-child { width:96px; }
 .compare-table tbody th { font-size:11px; padding:10px; }
 .compare-table tbody td { font-size:13px; padding:10px; }
 .compare-table tbody td b { font-size:16px; }
 .compare-pick { font-size:12px; min-height:44px; }
 [data-screen="lens-results"] .compare-trigger { font-size:12px; padding:8px 13px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lens-results"] .compare-trigger { font-size:19px; padding:14px 24px; gap:12px; }
 [data-screen="lens-results"] .compare-trigger svg { width:23px; height:23px; }
 [data-screen="lens-results"] .compare-count { min-width:30px; height:30px; font-size:16px; }
 .lens-compare-dialog { width:min(1000px, calc(100% - 60px)); padding:48px 40px 34px; }
 .lens-compare-dialog > h3 { font-size:38px; }
 .compare-table thead th { font-size:24px; padding:20px; }
 .compare-table thead th:first-child { width:210px; }
 .compare-table tbody th { font-size:18px; padding:20px; }
 .compare-table tbody td { font-size:21px; padding:20px; }
 .compare-table tbody td b { font-size:27px; }
 .compare-pick { min-height:66px; font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
 [data-screen="lens-results"] .compare-trigger { animation:none; }
}

/* ── Aviso de bloco insuficiente ────────────────────────────────────────────
   Aparece na virada para insuficiente, não a cada passo de slider. Explica a
   geometria (por que a DNP descentrada exige bloco maior) antes de sugerir
   saída, porque quem entende o motivo escolhe melhor entre as duas opções. */
.fitting-block-dialog { width:min(600px, calc(100% - 36px)); max-height:calc(100svh - 40px); overflow:auto; text-align:left; padding:38px 30px 22px; }
.fitting-block-dialog .dialog-close { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid #d4e0ef; right:10px; top:10px; font-size:26px; line-height:1; }
.fitting-block-dialog .block-icon { background:#fdeee4; }
.fitting-block-dialog .block-icon svg { width:32px; height:32px; fill:none; stroke:#c25f2a; stroke-width:2; stroke-linecap:round; }
.fitting-block-dialog > .eyebrow { text-align:center; color:#c25f2a; font-size:12px; letter-spacing:.18em; }
.fitting-block-dialog > h3 { text-align:center; font-family:var(--sans); font-weight:700; font-size:29px; line-height:1.15; letter-spacing:-.02em; margin:8px 0 14px; }
.fitting-block-dialog .block-lead { color:#506078; font-size:15px; line-height:1.6; margin:0 0 20px; text-align:center; }
.fitting-block-dialog .block-lead b { color:#10213b; }

.block-numeros { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 0 20px; background:#e3edfb; border:1px solid #e3edfb; border-radius:16px; overflow:hidden; }
.block-numeros > div { background:#f6f9fe; padding:14px 10px; text-align:center; }
.block-numeros dt { color:#506078; font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.block-numeros dd { margin:7px 0 0; color:#10213b; font:800 21px/1 var(--sans); }
.block-numeros .falta { background:#fdeee4; }
.block-numeros .falta dt { color:#a8501f; }
.block-numeros .falta dd { color:#c25f2a; }

.block-explica { padding:16px 18px; border-radius:14px; background:#f6f9fe; border:1px solid #e3edfb; margin-bottom:22px; }
.block-explica b { display:block; color:#10213b; font:700 15px/1.3 var(--sans); margin-bottom:7px; }
.block-explica p { margin:0; color:#506078; font-size:14px; line-height:1.6; }

.block-sugestoes-titulo { margin:0 0 10px; color:#10213b; font:700 15px/1 var(--sans); }
.block-sugestoes { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.block-sugestoes li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:13px; align-items:start; }
.block-sugestoes li > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#2264a5; color:#fff; font:800 14px/1 var(--sans); }
.block-sugestoes b { display:block; color:#10213b; font:700 15px/1.3 var(--sans); }
.block-sugestoes small { display:block; margin-top:4px; color:#506078; font-size:13px; line-height:1.55; }
.block-sugestoes small b { display:inline; color:#2264a5; font-weight:800; }

@media (max-width:600px) {
 .fitting-block-dialog { width:calc(100% - 20px); padding:30px 16px 16px; }
 .fitting-block-dialog > h3 { font-size:22px; }
 .fitting-block-dialog .block-lead { font-size:13px; }
 .block-numeros dd { font-size:17px; }
 .block-numeros dt { font-size:10px; }
 .block-explica p, .block-sugestoes small { font-size:12px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 .fitting-block-dialog { width:min(760px, calc(100% - 60px)); padding:48px 40px 30px; }
 .fitting-block-dialog > h3 { font-size:40px; }
 .fitting-block-dialog .block-lead { font-size:20px; }
 .block-numeros dt { font-size:15px; }
 .block-numeros dd { font-size:29px; }
 .block-explica b { font-size:20px; }
 .block-explica p { font-size:18px; }
 .block-sugestoes-titulo { font-size:20px; }
 .block-sugestoes li { grid-template-columns:40px minmax(0,1fr); gap:18px; }
 .block-sugestoes li > span { width:40px; height:40px; font-size:19px; }
 .block-sugestoes b { font-size:20px; }
 .block-sugestoes small { font-size:17px; }
}

/* O aviso tem duas saídas: pesquisar lentes (mantém a armação que a pessoa
   escolheu) ou trocar de armação. A primeira é a principal por isso. */
.fitting-block-dialog .primary-button { line-height:1.3; padding:14px 22px; }
.fitting-block-dialog .secondary-button { width:100%; margin-top:10px; }

/* Diâmetro do blank, redondo — a forma lembra a própria lente. Só aparece
   quando o cadastro traz o valor; surfaçada não tem blank fixo. */
[data-screen="lens-results"] .lens-diametro { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:40px; height:40px; margin-left:9px; border-radius:50%; background:#14406e; border:1.5px solid #2f6ba6; color:#d7ecff; font:800 13px/1 var(--sans); vertical-align:middle; }
/* Faixa de risco do blank: <65 vermelho, 65-69 amarelo, >=70 verde. */
[data-screen="lens-results"] .lens-diametro.vermelho { background:#5e1622; border-color:#c0566a; color:#ffd9e0; }
[data-screen="lens-results"] .lens-diametro.amarelo  { background:#5a4410; border-color:#d3a83f; color:#ffeec2; }
[data-screen="lens-results"] .lens-diametro.verde    { background:#14472f; border-color:#4aa578; color:#cdf3de; }
[data-screen="lens-results"] .lens-diametro i { font:700 7px/1 var(--sans); font-style:normal; letter-spacing:.06em; opacity:.7; margin-top:2px; }
@media (min-width:1200px) {
  [data-screen="lens-results"] .lens-diametro { width:50px; height:50px; font-size:17px; }
  [data-screen="lens-results"] .lens-diametro i { font-size:8px; }
}

/* Paginador no tema escuro das telas de resultado. */
[data-screen="lens-results"] .pager-botao { border-color:#3d6491; background:#0e2b4d; color:#fff; }
[data-screen="lens-results"] .pager-botao:disabled { color:#8aa6c4; }
[data-screen="lens-results"] .pager-pos { color:#b4c4da; }
[data-screen="lens-results"] .pager-aviso { color:#8aa6c4; }