/* Shades of Sam: Storefront: lens flow (/frame-process) */ html:has(body.sos-lens-body) { margin-top: 0 !important; } body.sos-lens-body { margin: 0; background: #fff; } /* WoodMart's phone toolbar and back-to-top button would cover Back/Next. */ body.sos-lens-body .wd-toolbar, body.sos-lens-body .scrollToTop { display: none !important; } #sos-lens { --rust: #73260A; --muted: #8A7A6D; --ink: #2A1810; --deep: #40140A; --coral: #D97B59; --cream: #F7F3EF; --line: #EDE7E1; --paper: #FFFFFF; --blush: #E8B8A0; --light: #F2F2F2; --top: 64px; --summary: 420px; --nav: 76px; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.5; } #sos-lens *, #sos-lens *::before, #sos-lens *::after { box-sizing: border-box; } #sos-lens a { color: var(--rust); } #sos-lens button { background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; line-height: inherit; margin: 0; min-height: 0; padding: 0; text-transform: none; width: auto; height: auto; cursor: pointer; } #sos-lens [hidden] { display: none !important; } #sos-lens :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } #sos-lens .sos-muted { color: var(--muted); font-size: 13px; } /* ---------- Top bar ---------- */ #sos-lens .sos-lens__top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: var(--top); padding: 0 24px; background: var(--paper); border-bottom: 1px solid var(--line); } #sos-lens .sos-lens__logo { display: flex; align-items: center; flex: 0 0 auto; color: var(--deep); font-family: 'Lora', serif; font-weight: 600; text-decoration: none; } #sos-lens .sos-lens__logo img { display: block; width: auto; height: 34px; } #sos-lens .sos-steps-bar { display: flex; flex: 1 1 auto; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } #sos-lens .sos-steps-bar li { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #sos-lens .sos-steps-bar li + li::before { content: ''; width: 28px; height: 1px; margin-right: 8px; background: var(--line); } #sos-lens .sos-steps-bar span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #CFC6BD; font-size: 11px; letter-spacing: 0; } #sos-lens .sos-steps-bar li.is-current { color: var(--rust); } #sos-lens .sos-steps-bar li.is-current span { border-color: var(--rust); background: var(--rust); color: #fff; } #sos-lens .sos-steps-bar li.is-done span { border-color: var(--rust); color: var(--rust); } #sos-lens .sos-steps-bar li.is-skipped { opacity: .4; } #sos-lens .sos-lens__close { display: flex; padding: 8px; color: var(--ink); } /* ---------- Layout ---------- */ #sos-lens .sos-lens__layout { display: grid; grid-template-columns: var(--summary) minmax(0, 1fr); min-height: 100vh; padding-top: var(--top); } #sos-lens .sos-lens__summary { position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--summary); overflow-y: auto; padding: 32px; background: var(--cream); } #sos-lens .sos-lens__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; } #sos-lens .sos-lens__name { margin: 12px 0 0; font-family: 'Lora', serif; font-weight: 600; font-size: 22px; color: var(--deep); } #sos-lens .sos-lens__meta { margin: 2px 0 0; color: var(--muted); } #sos-lens .sos-lens__lines { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #E2D9D0; } #sos-lens .sos-lens__lines div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; } #sos-lens .sos-lens__lines dt { color: var(--muted); } #sos-lens .sos-lens__lines dd { margin: 0; font-weight: 500; } #sos-lens .sos-lens__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E2D9D0; font-size: 15px; } #sos-lens .sos-lens__subtotal strong { font-size: 22px; color: var(--rust); } #sos-lens .sos-lens__turn { margin: 12px 0 0; font-size: 13px; color: var(--ink); } #sos-lens .sos-lens__main { grid-column: 2; width: 100%; max-width: 760px; padding: 40px 48px calc(var(--nav) + 40px); } #sos-lens .sos-step__title { margin: 0 0 20px; font-family: 'Lora', serif; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--deep); outline: none; } /* ---------- Option cards ---------- */ #sos-lens .sos-options { display: grid; gap: 12px; } #sos-lens .sos-options--grid { grid-template-columns: 1fr 1fr; } #sos-lens .sos-option { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; } #sos-lens .sos-option:hover { border-color: #CFC6BD; } #sos-lens .sos-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } #sos-lens .sos-option:has(input:checked) { border-color: var(--rust); background: var(--cream); } #sos-lens .sos-option:has(input:focus-visible) { outline: 2px solid var(--coral); outline-offset: 2px; } #sos-lens .sos-option__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } #sos-lens .sos-option__title { font-weight: 600; font-size: 15px; color: var(--deep); } #sos-lens .sos-option__title em { font-style: normal; font-weight: 400; color: var(--muted); } #sos-lens .sos-option__line { font-size: 13px; color: var(--muted); } #sos-lens .sos-option__price { flex: 0 0 auto; font-weight: 600; color: var(--rust); white-space: nowrap; } #sos-lens .sos-option--card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; } #sos-lens .sos-option__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #sos-lens .sos-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--cream); font-size: 13px; } #sos-lens .sos-note--soft { background: none; padding: 0; color: var(--muted); } #sos-lens .sos-more-link { margin-top: 14px; font-size: 13px; text-decoration: underline; color: var(--ink); } #sos-lens .sos-more-link:hover { color: var(--rust); } /* ---------- Prescription ---------- */ #sos-lens .sos-rx-panel { margin-top: 20px; } #sos-lens .sos-drop { position: relative; padding: 24px; border: 1.5px dashed #CFC6BD; border-radius: 8px; text-align: center; background: var(--paper); transition: border-color .15s, background .15s; } #sos-lens .sos-drop.is-over { border-color: var(--rust); background: var(--cream); } #sos-lens .sos-drop__input { position: absolute; opacity: 0; width: 1px; height: 1px; } #sos-lens .sos-drop__label { display: flex; flex-direction: column; gap: 4px; cursor: pointer; } #sos-lens .sos-drop__input:focus-visible + .sos-drop__label { outline: 2px solid var(--coral); outline-offset: 4px; } #sos-lens .sos-drop__title { font-weight: 600; color: var(--rust); text-decoration: underline; } #sos-lens .sos-drop__hint { font-size: 12px; color: var(--muted); } #sos-lens .sos-drop__preview { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; } #sos-lens .sos-drop__preview img { max-width: 100%; max-height: 220px; border-radius: 6px; } #sos-lens .sos-drop__pdf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 54px; border-radius: 4px; background: var(--rust); color: #fff; font-size: 11px; font-weight: 700; } #sos-lens .sos-drop__status { margin: 10px 0 0; min-height: 20px; font-size: 13px; } #sos-lens .sos-drop__status.is-error { color: #B3261E; } #sos-lens .sos-drop__status.is-ok { color: #1D6B2F; } #sos-lens .sos-rx-table { display: grid; gap: 8px; } #sos-lens .sos-rx-row { display: grid; grid-template-columns: 130px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; } #sos-lens .sos-rx-row:not(:has([data-add-col]:not([hidden]))) { grid-template-columns: 130px repeat(3, minmax(0, 1fr)); } #sos-lens .sos-rx-row--head span { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); } #sos-lens .sos-rx-eye { font-weight: 500; font-size: 13px; } #sos-lens select, #sos-lens input[type="number"], #sos-lens input[type="text"], #sos-lens input[type="date"] { width: 100%; height: 44px; padding: 0 10px; border: 1px solid #D8CFC5; border-radius: 6px; background: var(--paper); font: inherit; color: var(--ink); } #sos-lens select:focus, #sos-lens input:focus { outline: none; border-color: var(--rust); } #sos-lens .sos-rx-pd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; } #sos-lens .sos-rx-pd > label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; margin: 0; } #sos-lens label { font-size: inherit; margin: 0; } #sos-lens .sos-rx-pd select { width: 110px; } #sos-lens .sos-rx-pd [data-two-pd-fields] { display: inline-flex; gap: 8px; } #sos-lens .sos-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; } #sos-lens .sos-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--rust); flex: 0 0 auto; } #sos-lens .sos-rx-errors { margin: 8px 0 0; color: #B3261E; font-size: 13px; } #sos-lens .sos-surcharge { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--coral); background: var(--cream); font-size: 13px; } #sos-lens .sos-rx-common { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 20px; } #sos-lens .sos-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } #sos-lens .sos-consent { grid-column: 1 / -1; color: var(--ink); } /* ---------- Review ---------- */ #sos-lens .sos-review-list { margin: 0; border-top: 1px solid var(--line); } #sos-lens .sos-review-list div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } #sos-lens .sos-review-list dt { color: var(--muted); } #sos-lens .sos-review-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } #sos-lens .sos-review-list .is-total dd { font-size: 20px; font-weight: 600; color: var(--rust); } #sos-lens .sos-returns { margin-top: 14px; } #sos-lens .sos-step-error { min-height: 20px; margin: 16px 0 0; color: #B3261E; font-size: 13px; } /* ---------- Bottom nav ---------- */ #sos-lens .sos-lens__nav { position: fixed; left: var(--summary); right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: var(--nav); padding: 0 48px; background: var(--paper); border-top: 1px solid var(--line); } #sos-lens .sos-lens__mobile-total { display: none; } #sos-lens .sos-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 32px; border-radius: 999px; font-weight: 500; font-size: 15px; transition: background .2s, color .2s, border-color .2s, opacity .2s; } #sos-lens .sos-btn--primary { background: var(--rust); color: var(--light); min-width: 170px; } #sos-lens .sos-btn--primary:hover { background: var(--deep); color: #fff; } #sos-lens .sos-btn--primary.is-incomplete { opacity: .55; } #sos-lens .sos-btn--ghost { border: 1.5px solid #BFB3A8; color: var(--ink); } #sos-lens .sos-btn:disabled { opacity: .55; cursor: wait; } /* ---------- Help modal ---------- */ #sos-lens .sos-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(42, 24, 16, .5); } #sos-lens .sos-modal__box { position: relative; width: min(600px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px; border-radius: 12px; background: var(--paper); } #sos-lens .sos-modal__close { position: absolute; top: 12px; right: 12px; display: flex; padding: 6px; } #sos-lens .sos-modal__title { margin: 0 0 14px; font-family: 'Lora', serif; font-weight: 600; font-size: 22px; color: var(--deep); } #sos-lens .sos-help-list { margin: 0; } #sos-lens .sos-help-list div { padding: 10px 0; border-bottom: 1px solid var(--line); } #sos-lens .sos-help-list dt { font-weight: 600; color: var(--deep); } #sos-lens .sos-help-list dd { margin: 2px 0 0; } /* ============ Tablet & phone ============ */ @media (max-width: 1023px) { #sos-lens { --summary: 0px; --top: 56px; } #sos-lens .sos-lens__top { gap: 12px; padding: 0 12px; } #sos-lens .sos-lens__logo img { height: 28px; } #sos-lens .sos-steps-bar { gap: 4px; } #sos-lens .sos-steps-bar li { padding: 0 2px; font-size: 0; gap: 0; } #sos-lens .sos-steps-bar li.is-current { font-size: 11px; gap: 6px; } #sos-lens .sos-steps-bar li + li::before { width: 14px; margin-right: 4px; } #sos-lens .sos-lens__layout { display: block; } #sos-lens .sos-lens__summary { position: static; width: auto; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 14px 16px; } #sos-lens .sos-lens__frame { display: contents; } #sos-lens .sos-lens__img { grid-row: 1 / span 2; width: 88px; } #sos-lens .sos-lens__name { margin: 0; font-size: 17px; } #sos-lens .sos-lens__meta { grid-column: 2; } #sos-lens .sos-lens__lines, #sos-lens .sos-lens__subtotal { display: none; } #sos-lens .sos-lens__turn { grid-column: 1 / -1; } #sos-lens .sos-lens__main { max-width: none; padding: 24px 16px calc(var(--nav) + 24px); } #sos-lens .sos-step__title { font-size: 23px; } #sos-lens .sos-lens__nav { left: 0; padding: 0 16px calc(env(safe-area-inset-bottom)); height: calc(var(--nav) + env(safe-area-inset-bottom)); } #sos-lens .sos-lens__mobile-total { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; } #sos-lens .sos-lens__mobile-total span { font-size: 12px; color: var(--muted); } #sos-lens .sos-lens__mobile-total strong { font-size: 18px; color: var(--rust); } #sos-lens .sos-btn { height: 46px; padding: 0 20px; } #sos-lens .sos-btn--primary { min-width: 120px; } } @media (max-width: 767px) { #sos-lens .sos-lens__logo { display: none; } #sos-lens .sos-steps-bar { justify-content: flex-start; } #sos-lens .sos-options--grid { grid-template-columns: 1fr 1fr; gap: 10px; } #sos-lens .sos-option { padding: 14px 16px; gap: 12px; } #sos-lens .sos-option--card { padding: 14px; } #sos-lens .sos-option__title { font-size: 14px; } #sos-lens .sos-rx-row, #sos-lens .sos-rx-row:not(:has([data-add-col]:not([hidden]))) { grid-template-columns: 1fr 1fr 1fr; } #sos-lens .sos-rx-row:has([data-add-col]:not([hidden])) { grid-template-columns: 1fr 1fr 1fr 1fr; } #sos-lens .sos-rx-row .sos-rx-eye, #sos-lens .sos-rx-row--head span:first-child { grid-column: 1 / -1; } #sos-lens .sos-rx-row--head span:first-child { display: none; } #sos-lens .sos-rx-common { grid-template-columns: minmax(0, 1fr); } #sos-lens .sos-review-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; } #sos-lens .sos-modal { align-items: flex-end; padding: 0; } #sos-lens .sos-modal__box { width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); } }