/* ========================================================================== Optica — storefront theme for eyewear & optical stores -------------------------------------------------------------------------- Plain CSS (not processed by Tailwind), loaded from ThemeRegistry by master.blade.php / DefaultComponent::injectThemeAssets(). Every rule is scoped under html.theme-optica, which only exists on storefront routes while this theme is active. The accent is the admin's dynamic --color-primary. Motion is progressive: hidden "before" states exist only under html.op-motion (set unless the visitor prefers reduced motion). 1. Tokens 7. Footer 13. Campaign / promos 2. Base 8. Hero 14. Product grid + card 3. Primitives 9. Brand marquee 15. Lens guide 4. Motion 10. Category bento 16. Benefits + newsletter 5. Navigation 11. Featured edit 17. Skin for inherited pages 6. Mobile tab bar 12. Flash rail 18. Shop listing 19. Product page 20. Checkout 21. Account overview 22. Order history 23. Account forms (shared) 24. Return orders 25. Account info + password 26. Address book 27. Return details 28. Return request 29. Account shell 30. Lens picker 31. My prescriptions 32. Wishlist 33. Cart page + drawer ========================================================================== */ /* Registered so the eye-chart lens can drift by keyframes (custom props animate). */ @property --op-lx { syntax: ""; inherits: true; initial-value: 50%; } @property --op-ly { syntax: ""; inherits: true; initial-value: 50%; } @property --op-spin { syntax: ""; inherits: false; initial-value: 0deg; } /* 1. Tokens --------------------------------------------------------------- */ html.theme-optica { --op-accent: var(--color-primary, 37 99 235); --op-bg: 247 248 250; --op-bg-2: 239 241 245; --op-surface: 255 255 255; --op-ink: 11 13 19; --op-ink-2: 55 60 72; --op-muted: 110 116 131; --op-line: 227 230 236; --op-danger: 225 45 57; --op-radius: 24px; --op-radius-sm: 14px; --op-ease: cubic-bezier(.22, 1, .36, 1); --op-spring: cubic-bezier(.34, 1.56, .64, 1); --op-font-display: "General Sans", var(--display-font, ui-sans-serif), system-ui, sans-serif; --op-shadow-1: 0 1px 2px rgb(11 13 19 / .04), 0 4px 14px -6px rgb(11 13 19 / .08); --op-shadow-2: 0 2px 6px rgb(11 13 19 / .05), 0 18px 40px -16px rgb(11 13 19 / .18); --op-shadow-3: 0 30px 80px -24px rgb(11 13 19 / .32); --op-tabbar-h: 0px; scroll-padding-top: calc(var(--header-h, 72px) + 12px); } @media (max-width: 1023.98px) { html.theme-optica { --op-tabbar-h: 84px; } } /* 2. Base ----------------------------------------------------------------- */ html.theme-optica body { background: rgb(var(--op-bg)); color: rgb(var(--op-ink)); -webkit-font-smoothing: antialiased; } html.theme-optica ::selection { background: rgb(var(--op-accent) / .18); } html.theme-optica .op-home { overflow-x: clip; } /* 3. Primitives ----------------------------------------------------------- */ html.theme-optica .op-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 640px) { html.theme-optica .op-container { padding-inline: 24px; } } @media (min-width: 1280px) { html.theme-optica .op-container { padding-inline: 32px; } } html.theme-optica .op-section { padding-block: clamp(44px, 7vw, 96px); } html.theme-optica .op-section--tight { padding-block: clamp(20px, 3vw, 40px); } html.theme-optica .op-h2 { font-family: var(--op-font-display); font-size: clamp(28px, 4.2vw, 48px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; color: rgb(var(--op-ink)); } html.theme-optica .op-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--op-font-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--op-accent)); } html.theme-optica .op-eyebrow--light { color: rgb(255 255 255 / .75); } html.theme-optica .op-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3.4vw, 44px); } html.theme-optica .op-head-text { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } html.theme-optica .op-head-sub { color: rgb(var(--op-muted)); font-size: 15px; line-height: 1.6; } html.theme-optica .op-link-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; font-weight: 600; font-size: 14px; color: rgb(var(--op-ink)); position: relative; } html.theme-optica .op-link-arrow::after { content: ""; position: absolute; inset-inline: 4px; bottom: 6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--op-ease); } html.theme-optica .op-link-arrow:hover::after { transform: scaleX(1); } html.theme-optica .op-link-arrow .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-link-arrow:hover .op-icon { transform: translateX(4px); } html.theme-optica .op-btn { --op-mx: 0px; --op-my: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding-inline: 26px; border-radius: 999px; font-family: var(--op-font-display); font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .4s var(--op-ease), box-shadow .4s var(--op-ease), background-color .25s, color .25s; transform: translate(var(--op-mx), var(--op-my)); position: relative; isolation: isolate; overflow: hidden; } html.theme-optica .op-btn--sm { height: 46px; padding-inline: 20px; font-size: 14px; } html.theme-optica .op-btn--primary { background: rgb(var(--op-ink)); color: #fff; box-shadow: 0 14px 30px -14px rgb(var(--op-ink) / .7); } html.theme-optica .op-btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--op-accent)); transform: translateY(101%); transition: transform .5s var(--op-ease); } html.theme-optica .op-btn--primary:hover::before { transform: translateY(0); } html.theme-optica .op-btn--primary:hover { box-shadow: 0 18px 40px -14px rgb(var(--op-accent) / .75); } html.theme-optica .op-btn--primary .op-icon { transition: transform .4s var(--op-ease); } html.theme-optica .op-btn--primary:hover .op-icon { transform: translateX(4px); } html.theme-optica .op-btn--ghost { color: rgb(var(--op-ink)); background: rgb(var(--op-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.theme-optica .op-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink)); } html.theme-optica .op-btn:active { transform: translate(var(--op-mx), var(--op-my)) scale(.97); } html.theme-optica .op-btn:disabled { opacity: .6; cursor: not-allowed; } html.theme-optica .op-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--op-ink)); transition: background-color .2s, transform .3s var(--op-ease), color .2s; } html.theme-optica .op-icon-btn:hover { background: rgb(var(--op-ink) / .06); } html.theme-optica .op-icon-btn:active { transform: scale(.92); } html.theme-optica .op-icon-btn--outline { box-shadow: inset 0 0 0 1px rgb(var(--op-line)); background: rgb(var(--op-surface)); } html.theme-optica .op-icon-btn--outline:hover { box-shadow: inset 0 0 0 1px rgb(var(--op-ink)); background: rgb(var(--op-surface)); } html.theme-optica .op-badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding-inline: 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 0 0 2px rgb(var(--op-surface)); } html.theme-optica .op-badge--accent { background: rgb(var(--op-accent)); } html.theme-optica .op-badge--ink { background: rgb(var(--op-ink)); top: -4px; inset-inline-end: -6px; } html.theme-optica .op-chip { display: inline-flex; align-items: center; height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, box-shadow .2s, transform .3s var(--op-ease); } html.theme-optica .op-chip:hover { color: rgb(var(--op-accent)); box-shadow: inset 0 0 0 1px rgb(var(--op-accent) / .5); transform: translateY(-2px); } html.theme-optica .op-chips { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-optica .op-tag { display: inline-flex; align-items: center; height: 24px; padding-inline: 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } html.theme-optica .op-tag--accent { color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-tag--ink { color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-tag--muted { color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-star { fill: #F5B70A; color: #F5B70A; } html.theme-optica .op-flag { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; } /* Dropdowns (language, account): open on hover and on keyboard focus. */ html.theme-optica .op-dropdown { position: relative; } html.theme-optica .op-dropdown-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 5; min-width: 180px; padding: 8px; border-radius: 18px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .25s var(--op-ease), transform .35s var(--op-ease), visibility .25s; } html.theme-optica .op-dropdown-menu::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; } html.theme-optica .op-dropdown:hover .op-dropdown-menu, html.theme-optica .op-dropdown:focus-within .op-dropdown-menu { opacity: 1; visibility: visible; transform: none; } html.theme-optica .op-dropdown-menu--wide { min-width: 240px; } html.theme-optica .op-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: rgb(var(--op-ink-2)); text-align: start; transition: background-color .15s, color .15s; } html.theme-optica .op-dropdown-item:hover { background: rgb(var(--op-bg-2)); color: rgb(var(--op-ink)); } html.theme-optica .op-dropdown-item.is-danger { color: rgb(var(--op-danger)); } html.theme-optica .op-dropdown-profile { display: flex; flex-direction: column; padding: 8px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid rgb(var(--op-line)); } html.theme-optica .op-dropdown-profile small { color: rgb(var(--op-muted)); } /* 4. Motion --------------------------------------------------------------- */ /* Scroll reveal: rise + de-blur, the theme's "coming into focus" motif. Uses the individual `translate` / `scale` properties, never `transform`, so it composes with the tilt / parallax / magnetic transforms on the same elements. */ html.op-motion.theme-optica .op-reveal:not(.op-reveal--stagger) { opacity: 0; translate: 0 28px; filter: blur(8px); transition: opacity .9s var(--op-ease) var(--op-delay, 0ms), translate 1s var(--op-ease) var(--op-delay, 0ms), scale 1s var(--op-ease) var(--op-delay, 0ms), filter .9s var(--op-ease) var(--op-delay, 0ms); } html.op-motion.theme-optica .op-reveal--scale:not(.op-reveal--stagger) { translate: none; scale: .94; } html.op-motion.theme-optica .op-reveal--left:not(.op-reveal--stagger) { translate: -40px 0; } html.op-motion.theme-optica .op-reveal--right:not(.op-reveal--stagger) { translate: 40px 0; } html.op-motion.theme-optica .op-reveal.is-in:not(.op-reveal--stagger) { opacity: 1; translate: none; scale: none; filter: none; } html.op-motion.theme-optica .op-reveal--stagger > * { opacity: 0; translate: 0 34px; filter: blur(6px); transition: opacity .8s var(--op-ease), translate .9s var(--op-ease), filter .8s var(--op-ease), transform .5s var(--op-ease), box-shadow .4s; transition-delay: calc(var(--op-i, 0) * 70ms + var(--op-delay, 0ms)); } html.op-motion.theme-optica .op-reveal--stagger.is-in > * { opacity: 1; translate: none; filter: none; } /* Once in, hover/tilt transitions must not inherit the stagger delay. */ html.op-motion.theme-optica .op-reveal--stagger.is-in > *:hover, html.op-motion.theme-optica .op-reveal--stagger.is-in > .is-tilting { transition-delay: 0ms; } html.op-motion.theme-optica .op-reveal--stagger.is-in > .is-tilting { transition: transform .12s linear, box-shadow .4s; } /* Page-load choreography (hero). */ @keyframes op-intro { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } @keyframes op-focus-in { 0% { opacity: 0; filter: blur(18px); transform: translateY(.18em) scale(1.06); letter-spacing: .04em; } 100% { opacity: 1; filter: none; transform: none; } } html.op-motion.theme-optica .op-intro { animation: op-intro 1s var(--op-ease) both; animation-delay: calc(var(--op-d, 0) * 110ms + 150ms); } html.op-motion.theme-optica .op-focus, html.op-motion.theme-optica .op-rotator { display: inline-block; animation: op-focus-in 1.2s var(--op-ease) both; animation-delay: calc(var(--op-d, 0) * 120ms + 150ms); } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .op-word-enter-active, .op-word-leave-active { transition: opacity .45s var(--op-ease), transform .55s var(--op-ease), filter .45s var(--op-ease); } .op-word-enter-from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } .op-word-leave-to { opacity: 0; transform: translateY(-.45em); filter: blur(8px); } .op-focus-swap-enter-active, .op-focus-swap-leave-active { transition: opacity .5s var(--op-ease), transform .6s var(--op-ease), filter .5s var(--op-ease); } .op-focus-swap-enter-from { opacity: 0; transform: scale(1.08) rotate(-4deg); filter: blur(14px); } .op-focus-swap-leave-to { opacity: 0; transform: scale(.92) rotate(3deg); filter: blur(14px); } .op-chip-swap-enter-active, .op-chip-swap-leave-active { transition: opacity .35s var(--op-ease), transform .45s var(--op-ease); } .op-chip-swap-enter-from { opacity: 0; transform: translateY(12px); } .op-chip-swap-leave-to { opacity: 0; transform: translateY(-8px); } .op-pop-enter-active { transition: transform .45s var(--op-spring, cubic-bezier(.34,1.56,.64,1)); } .op-pop-enter-from { transform: scale(0); } .op-mega-enter-active, .op-mega-leave-active { transition: opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1); } .op-mega-enter-from, .op-mega-leave-to { opacity: 0; transform: translate(-50%, -8px); } .op-search-enter-active, .op-search-leave-active { transition: opacity .3s ease; } .op-search-enter-active .op-search-panel, .op-search-leave-active .op-search-panel { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease; } .op-search-enter-from, .op-search-leave-to { opacity: 0; } .op-search-enter-from .op-search-panel, .op-search-leave-to .op-search-panel { transform: translateY(-24px) scale(.98); opacity: 0; } /* 5. Navigation ----------------------------------------------------------- */ html.theme-optica .op-nav { position: fixed; top: 0; inset-inline: 0; z-index: 25; padding-top: 12px; transition: transform .5s var(--op-ease), padding .4s var(--op-ease); } html.theme-optica .op-nav.is-hidden { transform: translateY(-110%); } html.theme-optica .op-nav-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; border-radius: 999px; padding-inline: 10px 10px; background: rgb(var(--op-surface) / .78); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line) / .9); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); transition: background-color .4s, box-shadow .4s, max-width .5s var(--op-ease); max-width: 1288px; } @media (min-width: 640px) { html.theme-optica .op-nav-bar { width: calc(100% - 32px); padding-inline: 16px 10px; } } @media (max-width: 639.98px) { html.theme-optica .op-nav-bar { width: calc(100% - 24px); padding-inline: 6px; } html.theme-optica .op-nav { padding-top: 8px; } } html.theme-optica .op-nav.is-over-hero .op-nav-bar { background: rgb(var(--op-surface) / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); } html.theme-optica .op-nav.is-scrolled .op-nav-bar { box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line) / .9); } html.theme-optica .op-nav-spacer { height: calc(var(--header-h, 76px) + 8px); } html.theme-optica .op-nav-logo { display: flex; align-items: center; flex-shrink: 0; height: 40px; font-family: var(--op-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; } html.theme-optica .op-nav-logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain; } html.theme-optica .op-nav-burger { display: none; } html.theme-optica .op-nav-links { display: none; align-items: center; gap: 2px; margin-inline-start: 12px; flex: 1; min-width: 0; height: 100%; } html.theme-optica .op-nav-item { height: 100%; display: flex; align-items: center; } html.theme-optica .op-nav-link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding-inline: 14px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .2s, background-color .2s; } html.theme-optica .op-nav-link:hover, html.theme-optica .op-nav-link.is-open { color: rgb(var(--op-ink)); background: rgb(var(--op-ink) / .05); } html.theme-optica .op-nav-link.active { color: rgb(var(--op-ink)); } html.theme-optica .op-nav-link .op-icon { transition: transform .3s var(--op-ease); } html.theme-optica .op-nav-link.is-open .op-icon { transform: rotate(180deg); } html.theme-optica .op-nav-link--hot { color: rgb(var(--op-accent)); } html.theme-optica .op-nav-link--hot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; margin-inline-end: 4px; animation: op-pulse 2s infinite; } html.theme-optica .op-mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 280px; gap: 24px; padding: 24px; border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-mega::before { content: ""; position: absolute; inset-inline: 0; top: -14px; height: 14px; } html.theme-optica .op-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 24px; align-content: start; } html.theme-optica .op-mega-col { display: flex; flex-direction: column; gap: 6px; } html.theme-optica .op-mega-title { font-family: var(--op-font-display); font-weight: 600; font-size: 15px; text-transform: capitalize; color: rgb(var(--op-ink)); margin-bottom: 2px; } html.theme-optica .op-mega-title:hover, html.theme-optica .op-mega-link:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-mega-link { font-size: 14px; color: rgb(var(--op-muted)); text-transform: capitalize; transition: color .15s, transform .25s var(--op-ease); } html.theme-optica .op-mega-link:hover { transform: translateX(3px); } html.theme-optica .op-mega-feature { position: relative; display: block; border-radius: 20px; overflow: hidden; min-height: 220px; background: rgb(var(--op-bg-2)); } html.theme-optica .op-mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--op-ease); } html.theme-optica .op-mega-feature:hover img { transform: scale(1.06); } html.theme-optica .op-mega-feature-label { position: absolute; inset-inline: 12px; bottom: 12px; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.theme-optica .op-mega-feature-label small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-mega-feature-label strong { font-family: var(--op-font-display); font-size: 17px; text-transform: capitalize; } html.theme-optica .op-nav-actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } html.theme-optica .op-search-pill { display: none; align-items: center; gap: 10px; height: 42px; padding-inline: 14px 8px; margin-inline-end: 6px; border-radius: 999px; min-width: 230px; color: rgb(var(--op-muted)); font-size: 14px; background: rgb(var(--op-bg-2) / .9); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .2s, color .2s; } html.theme-optica .op-search-pill:hover { box-shadow: inset 0 0 0 1px rgb(var(--op-ink) / .4); color: rgb(var(--op-ink-2)); } html.theme-optica .op-search-pill kbd { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font: 600 12px/1 var(--op-font-display); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-avatar-btn { overflow: hidden; background: rgb(var(--op-accent)); color: #fff; font-size: 13px; font-weight: 700; width: 38px; height: 38px; margin-inline-start: 4px; } html.theme-optica .op-avatar-btn:hover { background: rgb(var(--op-accent)); filter: brightness(1.08); } html.theme-optica .op-avatar-btn img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { html.theme-optica .op-nav-links { display: flex; } html.theme-optica .op-search-icon { display: none; } } @media (min-width: 1200px) { html.theme-optica .op-search-pill { display: inline-flex; } html.theme-optica .op-nav-actions .op-search-icon { display: none; } } @media (min-width: 1024px) and (max-width: 1199.98px) { html.theme-optica .op-search-icon { display: inline-flex; } } @media (max-width: 1023.98px) { html.theme-optica .op-nav-burger { display: inline-flex; } html.theme-optica .op-hide-sm { display: none; } html.theme-optica .op-nav-logo { margin-inline: auto; position: absolute; left: 50%; transform: translateX(-50%); } } /* Search overlay */ html.theme-optica .op-search { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: clamp(12px, 9vh, 110px) 12px 12px; background: rgb(var(--op-ink) / .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.theme-optica .op-search-panel { width: min(720px, 100%); max-height: 100%; overflow: auto; border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3); padding: 10px; } html.theme-optica .op-search-field { display: flex; align-items: center; gap: 12px; height: 64px; padding-inline: 16px 6px; border-radius: 20px; background: rgb(var(--op-bg)); color: rgb(var(--op-muted)); } html.theme-optica .op-search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 18px; color: rgb(var(--op-ink)); } html.theme-optica .op-search-field input::-webkit-search-cancel-button { display: none; } html.theme-optica .op-search-results { display: flex; flex-direction: column; padding: 8px 4px 4px; } html.theme-optica .op-search-results li { animation: op-intro .5s var(--op-ease) both; animation-delay: calc(var(--op-i, 0) * 40ms); } html.theme-optica .op-search-results button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 10px; border-radius: 16px; text-align: start; transition: background-color .15s; } html.theme-optica .op-search-results button:hover { background: rgb(var(--op-bg)); } html.theme-optica .op-search-results img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: rgb(var(--op-bg-2)); } html.theme-optica .op-search-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-search-price { font-family: var(--op-font-display); font-weight: 600; } html.theme-optica .op-search-suggest { padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 12px; } html.theme-optica .op-search-suggest small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } /* 6. Mobile tab bar ------------------------------------------------------- */ html.theme-optica .op-tabbar { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-around; height: 64px; padding-inline: 6px; border-radius: 22px; background: rgb(var(--op-surface) / .86); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } @media (min-width: 1024px) { html.theme-optica .op-tabbar { display: none; } } html.theme-optica .op-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: rgb(var(--op-muted)); transition: color .2s; } html.theme-optica .op-tab.is-active { color: rgb(var(--op-ink)); } html.theme-optica .op-tab.is-active .op-icon { color: rgb(var(--op-accent)); } html.theme-optica .op-tab--cart { flex: 0 0 auto; } html.theme-optica .op-tab-orb { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: -30px; border-radius: 999px; color: #fff; background: rgb(var(--op-accent)); box-shadow: 0 12px 26px -8px rgb(var(--op-accent) / .7), 0 0 0 5px rgb(var(--op-bg)); transition: transform .35s var(--op-spring); } html.theme-optica .op-tab--cart:active .op-tab-orb { transform: scale(.9); } /* 7. Footer --------------------------------------------------------------- Light, airy, three tiers: help card → brand + link columns → bottom bar. Link columns are always open on desktop and collapse to tap-to-open sections below 768px (grid-rows 0fr → 1fr for a smooth expand). */ html.theme-optica .op-footer { position: relative; margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(28px, 4vw, 48px); padding-bottom: calc(20px + var(--op-tabbar-h)); background: rgb(var(--op-surface)); border-top: 1px solid rgb(var(--op-line)); color: rgb(var(--op-ink-2)); } html.theme-optica .op-footer::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--op-accent) / .6), transparent); } html.theme-optica .op-fhelp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 20px; padding: 22px; border-radius: var(--op-radius); background: linear-gradient(120deg, rgb(var(--op-accent) / .09), rgb(var(--op-accent) / .02) 60%), rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-accent) / .14); } html.theme-optica .op-fhelp-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: rgb(var(--op-accent)); box-shadow: 0 12px 24px -12px rgb(var(--op-accent) / .8); } html.theme-optica .op-fhelp-text h3 { font-family: var(--op-font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -.02em; color: rgb(var(--op-ink)); } html.theme-optica .op-fhelp-text p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: rgb(var(--op-muted)); max-width: 520px; } html.theme-optica .op-fhelp-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } html.theme-optica .op-fhelp-actions .op-btn { flex: 1 1 140px; } html.theme-optica .op-fhelp-actions .op-btn--ghost { background: rgb(var(--op-surface)); } @media (min-width: 900px) { html.theme-optica .op-fhelp { grid-template-columns: auto 1fr auto; padding: 26px 28px; } html.theme-optica .op-fhelp-actions { grid-column: auto; } html.theme-optica .op-fhelp-actions .op-btn { flex: 0 0 auto; } } html.theme-optica .op-fmain { display: grid; gap: 28px; padding-block: clamp(32px, 4.5vw, 56px); } @media (min-width: 1024px) { html.theme-optica .op-fmain { grid-template-columns: minmax(280px, 1.1fr) 2fr; gap: 64px; } } html.theme-optica .op-fbrand { display: flex; flex-direction: column; gap: 16px; } html.theme-optica .op-fbrand-logo { display: inline-flex; width: fit-content; } html.theme-optica .op-fbrand-logo img { height: 38px; width: auto; max-width: 180px; object-fit: contain; } html.theme-optica .op-fbrand-logo strong { font-family: var(--op-font-display); font-size: 24px; color: rgb(var(--op-ink)); } html.theme-optica .op-fbrand > p { font-size: 14px; line-height: 1.65; color: rgb(var(--op-muted)); max-width: 360px; } html.theme-optica .op-fcontact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } html.theme-optica .op-fcontact li { display: flex; align-items: flex-start; gap: 10px; } html.theme-optica .op-fcontact .op-icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--op-accent)); } html.theme-optica .op-fcontact a { color: rgb(var(--op-ink-2)); transition: color .2s; word-break: break-word; } html.theme-optica .op-fcontact a:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-fsocial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } html.theme-optica .op-fsocial a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .35s var(--op-spring); } html.theme-optica .op-fsocial a:hover { color: #fff; background: rgb(var(--op-accent)); box-shadow: 0 10px 20px -10px rgb(var(--op-accent) / .8); transform: translateY(-3px); } html.theme-optica .op-fcols { display: grid; grid-template-columns: 1fr; } html.theme-optica .op-fcol { border-bottom: 1px solid rgb(var(--op-line)); } html.theme-optica .op-fcol:first-child { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-fcol h4 button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; font-family: var(--op-font-display); font-size: 15px; font-weight: 600; color: rgb(var(--op-ink)); text-align: start; } html.theme-optica .op-fcol-chev { color: rgb(var(--op-muted)); transition: transform .35s var(--op-ease); } html.theme-optica .op-fcol.is-open .op-fcol-chev { transform: rotate(180deg); color: rgb(var(--op-accent)); } html.theme-optica .op-fcol-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--op-ease); } html.theme-optica .op-fcol.is-open .op-fcol-body { grid-template-rows: 1fr; } html.theme-optica .op-fcol-body > ul { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-fcol.is-open .op-fcol-body > ul { padding-bottom: 14px; } html.theme-optica .op-fcol-body a { position: relative; display: inline-flex; align-items: center; min-height: 36px; font-size: 14.5px; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .2s, transform .3s var(--op-ease); } html.theme-optica .op-fcol-body a::before { content: ""; width: 0; height: 1.5px; margin-inline-end: 0; background: rgb(var(--op-accent)); transition: width .3s var(--op-ease), margin .3s var(--op-ease); } html.theme-optica .op-fcol-body a:hover { color: rgb(var(--op-ink)); } html.theme-optica .op-fcol-body a:hover::before { width: 12px; margin-inline-end: 8px; } @media (min-width: 768px) { html.theme-optica .op-fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } html.theme-optica .op-fcol, html.theme-optica .op-fcol:first-child { border: 0; } html.theme-optica .op-fcol h4 button { min-height: 0; margin-bottom: 14px; pointer-events: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-fcol-chev { display: none; } html.theme-optica .op-fcol-body { grid-template-rows: 1fr; } html.theme-optica .op-fcol-body > ul, html.theme-optica .op-fcol.is-open .op-fcol-body > ul { padding-bottom: 0; } html.theme-optica .op-fcol-body a { min-height: 32px; } } html.theme-optica .op-fbottom { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgb(var(--op-line)); font-size: 13px; color: rgb(var(--op-muted)); text-align: center; } html.theme-optica .op-flegal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; } html.theme-optica .op-flegal a, html.theme-optica .op-fbottom-end a { color: rgb(var(--op-ink-2)); transition: color .2s; } html.theme-optica .op-flegal a:hover, html.theme-optica .op-fbottom-end a:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-fbottom-end { display: flex; align-items: center; gap: 14px; } html.theme-optica .op-ftop { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, background-color .2s, transform .35s var(--op-ease); } html.theme-optica .op-ftop:hover { color: #fff; background: rgb(var(--op-ink)); transform: translateY(-3px); } /* Phones: the last accordion row already draws the divider. */ @media (max-width: 767.98px) { html.theme-optica .op-fmain { padding-bottom: 8px; } html.theme-optica .op-fbottom { border-top: 0; } } @media (min-width: 900px) { html.theme-optica .op-fbottom { flex-direction: row; justify-content: space-between; text-align: start; } } /* 8. Hero ----------------------------------------------------------------- */ html.theme-optica .op-hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: center; padding-top: calc(var(--header-h, 76px) + 28px); padding-bottom: 72px; overflow: clip; isolation: isolate; } html.theme-optica .op-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 80% 10%, rgb(var(--op-accent) / .10), transparent 60%), rgb(var(--op-bg)); } html.theme-optica .op-blob { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .55; will-change: transform; } html.theme-optica .op-blob--a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -8vw; top: -10vw; background: rgb(var(--op-accent) / .35); animation: op-drift-a 18s ease-in-out infinite alternate; } html.theme-optica .op-blob--b { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: -10vw; bottom: -12vw; background: rgb(56 189 248 / .25); animation: op-drift-b 22s ease-in-out infinite alternate; } html.theme-optica .op-blob--c { width: 22vw; height: 22vw; max-width: 300px; max-height: 300px; left: 38%; top: 30%; background: rgb(244 114 182 / .16); animation: op-drift-a 26s ease-in-out infinite alternate-reverse; } html.theme-optica .op-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--op-ink) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--op-ink) / .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); } @keyframes op-drift-a { to { transform: translate(-6vw, 5vw) scale(1.12); } } @keyframes op-drift-b { to { transform: translate(7vw, -4vw) scale(1.18); } } html.theme-optica .op-hero-inner { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; } @media (min-width: 1024px) { html.theme-optica .op-hero-inner { grid-template-columns: 1.05fr 1fr; gap: 32px; } } html.theme-optica .op-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } html.theme-optica .op-hero-copy > .op-eyebrow { padding: 7px 14px 7px 10px; border-radius: 999px; background: rgb(var(--op-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); color: rgb(var(--op-ink-2)); letter-spacing: .08em; } html.theme-optica .op-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--op-accent)); } html.theme-optica .op-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes op-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } } @keyframes op-pulse { 50% { opacity: .35; } } html.theme-optica .op-hero-title { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(44px, 8.4vw, 104px); line-height: .96; letter-spacing: -.05em; color: rgb(var(--op-ink)); } html.theme-optica .op-rotator { display: inline-block; } html.theme-optica .op-rotator em { display: inline-block; font-style: normal; padding-bottom: .08em; background: linear-gradient(100deg, rgb(var(--op-accent)) 0%, rgb(56 189 248) 50%, rgb(var(--op-accent)) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: op-sheen 6s linear infinite; } @keyframes op-sheen { to { background-position: -200% 0; } } html.theme-optica .op-hero-sub { max-width: 500px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: rgb(var(--op-ink-2)); } html.theme-optica .op-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } html.theme-optica .op-hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html.theme-optica .op-hero-quick small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--op-muted)); margin-inline-end: 4px; } html.theme-optica .op-hero-visual { --op-px: 0; --op-py: 0; position: relative; aspect-ratio: 1; width: min(100%, 580px); margin-inline: auto; display: flex; align-items: center; justify-content: center; } html.theme-optica .op-hero-ring { position: absolute; inset: 4%; border-radius: 999px; background: conic-gradient(from var(--op-spin), rgb(var(--op-accent) / .0), rgb(var(--op-accent) / .55), rgb(56 189 248 / .4), rgb(var(--op-accent) / 0) 60%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: op-spin 9s linear infinite; } html.theme-optica .op-hero-ring--inner { inset: 14%; animation-duration: 14s; animation-direction: reverse; opacity: .6; } @keyframes op-spin { to { --op-spin: 360deg; } } /* Same box as the visual, so the rim stays concentric with the lens photo at any size. */ html.theme-optica .op-hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translate(calc(var(--op-px) * -18px), calc(var(--op-py) * -18px)); stroke: rgb(var(--op-ink)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .22; pointer-events: none; transition: transform .6s var(--op-ease); } html.theme-optica .op-hero-frame-hi { stroke: rgb(var(--op-accent)); stroke-width: 3; opacity: .9; } html.theme-optica .op-hero-frame-hinge { stroke-width: 7; } html.theme-optica .op-hero-frame .op-draw { stroke-dasharray: 1; stroke-dashoffset: 0; } html.op-motion.theme-optica .op-hero-frame .op-draw { animation: op-draw 1.8s var(--op-ease) both; animation-delay: calc(.4s + var(--op-dd, 0) * .35s); } @keyframes op-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } html.theme-optica .op-hero-lens { position: relative; width: 74%; aspect-ratio: 1; border-radius: 999px; overflow: hidden; background: radial-gradient(circle at 30% 25%, #fff, rgb(var(--op-bg-2)) 70%); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 -30px 60px -30px rgb(var(--op-accent) / .25); transform: translate(calc(var(--op-px) * 22px), calc(var(--op-py) * 22px)); transition: transform .6s var(--op-ease); } html.op-motion.theme-optica .op-hero-lens { animation: op-lens-in 1.4s var(--op-ease) .3s both; } @keyframes op-lens-in { from { opacity: 0; scale: .7; filter: blur(20px); } to { opacity: 1; scale: 1; filter: none; } } html.theme-optica .op-hero-product { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } html.theme-optica .op-hero-product img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; animation: op-float 6s ease-in-out infinite; } html.theme-optica .op-hero-lens-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgb(var(--op-ink) / .25); } html.theme-optica .op-hero-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .55) 0%, transparent 38%); pointer-events: none; } html.theme-optica .op-hero-scan { position: absolute; inset-inline: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgb(var(--op-accent) / .14), transparent); pointer-events: none; animation: op-scan 5s ease-in-out infinite; } @keyframes op-scan { 0% { top: -30%; } 55%, 100% { top: 110%; } } @keyframes op-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } } html.theme-optica .op-hero-tag { position: absolute; left: 0; bottom: 10%; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 76%; padding: 12px 14px 12px 18px; border-radius: 20px; background: rgb(var(--op-surface) / .88); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translate(calc(var(--op-px) * 34px), calc(var(--op-py) * 34px)); transition: transform .6s var(--op-ease), box-shadow .3s; } html.theme-optica .op-hero-tag:hover { box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-accent) / .4); } html.theme-optica .op-hero-tag-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } html.theme-optica .op-hero-tag-price { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; } html.theme-optica .op-hero-tag-price strong { font-family: var(--op-font-display); font-size: 16px; } html.theme-optica .op-hero-tag-price del { font-size: 11px; color: rgb(var(--op-muted)); } html.theme-optica .op-hero-tag > .op-icon { flex-shrink: 0; width: 32px; height: 32px; padding: 8px; border-radius: 999px; background: rgb(var(--op-ink)); color: #fff; } html.theme-optica .op-hero-dots { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 2; } html.theme-optica .op-hero-dot { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); opacity: .7; transition: opacity .3s, transform .4s var(--op-ease), box-shadow .3s; } html.theme-optica .op-hero-dot img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-hero-dot:hover { opacity: 1; } html.theme-optica .op-hero-dot.is-active { opacity: 1; transform: translateX(-6px) scale(1.06); box-shadow: var(--op-shadow-2), 0 0 0 2px rgb(var(--op-accent)); } @media (max-width: 639.98px) { html.theme-optica .op-hero-dots { flex-direction: row; top: auto; bottom: -8px; right: 50%; transform: translateX(50%); } html.theme-optica .op-hero-dot { width: 42px; height: 42px; border-radius: 12px; } html.theme-optica .op-hero-dot.is-active { transform: translateY(-4px); } html.theme-optica .op-hero-tag { bottom: 14%; } } html.theme-optica .op-float { position: absolute; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; color: rgb(var(--op-accent)); background: rgb(var(--op-surface) / .9); box-shadow: var(--op-shadow-2); animation: op-bob 7s ease-in-out infinite; } html.theme-optica .op-float--a { top: 8%; left: 8%; } html.theme-optica .op-float--b { top: 4%; right: 18%; animation-delay: -2s; width: 42px; height: 42px; border-radius: 999px; } html.theme-optica .op-float--c { bottom: 2%; right: 22%; animation-delay: -4s; width: 38px; height: 38px; border-radius: 12px; } @keyframes op-bob { 50% { transform: translateY(-14px) rotate(6deg); } } html.theme-optica .op-scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink) / .3); display: none; } html.theme-optica .op-scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: rgb(var(--op-ink) / .6); animation: op-wheel 1.8s var(--op-ease) infinite; } @keyframes op-wheel { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } } @media (min-width: 1024px) and (min-height: 760px) { html.theme-optica .op-scroll-cue { display: block; } } /* 9. Brand marquee -------------------------------------------------------- */ html.theme-optica .op-marquee-wrap { padding-block: 22px; border-block: 1px solid rgb(var(--op-line)); background: rgb(var(--op-surface)); } html.theme-optica .op-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } html.theme-optica .op-marquee-track { display: flex; width: max-content; gap: 56px; animation: op-marquee 38s linear infinite; } html.theme-optica .op-marquee:hover .op-marquee-track { animation-play-state: paused; } html.theme-optica .op-marquee-item { display: flex; align-items: center; gap: 12px; flex-shrink: 0; height: 44px; color: rgb(var(--op-muted)); font-family: var(--op-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-transform: capitalize; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s, color .3s; } html.theme-optica .op-marquee-item:hover { filter: none; opacity: 1; color: rgb(var(--op-ink)); } html.theme-optica .op-marquee-item img { height: 36px; width: auto; max-width: 90px; object-fit: contain; } @keyframes op-marquee { to { transform: translateX(-50%); } } html[dir="rtl"].theme-optica .op-marquee-track { animation-direction: reverse; } /* 10. Category bento ------------------------------------------------------ */ html.theme-optica .op-bento { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; } @media (min-width: 768px) { html.theme-optica .op-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 18px; } } html.theme-optica .op-bento-tile { --op-rx: 0deg; --op-ry: 0deg; position: relative; display: block; overflow: hidden; border-radius: var(--op-radius); background: rgb(var(--op-bg-2)); isolation: isolate; transform: perspective(900px) rotateX(var(--op-rx)) rotateY(var(--op-ry)); transition: transform .5s var(--op-ease), box-shadow .4s; } html.theme-optica .op-bento-tile.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-optica .op-bento-tile:hover { box-shadow: var(--op-shadow-3); } html.theme-optica .op-bento-tile.is-hero { grid-column: span 2; grid-row: span 2; } html.theme-optica .op-bento-img { position: absolute !important; inset: 0; width: 100%; height: 100%; } html.theme-optica .op-bento-img img, html.theme-optica img.op-bento-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--op-ease); } html.theme-optica .op-bento-tile:hover .op-bento-img img, html.theme-optica .op-bento-tile:hover img.op-bento-img { transform: scale(1.08); } html.theme-optica .op-bento-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 12%; color: rgb(var(--op-ink) / .55); background: radial-gradient(90% 80% at 30% 20%, #fff, transparent 60%), linear-gradient(135deg, rgb(var(--op-accent) / .16), hsl(calc(var(--op-hue, 200) * 1deg) 70% 80% / .45)); transition: transform 1.1s var(--op-ease); } html.theme-optica .op-bento-tile.is-plain .op-bento-shade { background: linear-gradient(180deg, transparent 55%, rgb(255 255 255 / .55)); } html.theme-optica .op-bento-tile.is-plain .op-bento-label { color: rgb(var(--op-ink)); } html.theme-optica .op-bento-tile.is-plain .op-bento-go { background: rgb(var(--op-ink)); color: #fff; } html.theme-optica .op-bento-tile:hover .op-bento-fallback { transform: scale(1.06); } html.theme-optica .op-bento-fallback .op-icon { animation: op-float 7s ease-in-out infinite; } html.theme-optica .op-bento-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(var(--op-ink) / .65)); } html.theme-optica .op-bento-num { position: absolute; top: 14px; inset-inline-start: 16px; font-family: var(--op-font-display); font-size: 13px; font-weight: 600; color: rgb(var(--op-ink)); padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.theme-optica .op-bento-label { position: absolute; inset-inline: 16px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; } html.theme-optica .op-bento-label strong { font-family: var(--op-font-display); font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.02em; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-bento-tile.is-hero .op-bento-label strong { font-size: clamp(22px, 2.6vw, 34px); } html.theme-optica .op-bento-go { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: rgb(var(--op-ink)); transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform .5s var(--op-spring), opacity .3s; } html.theme-optica .op-bento-tile:hover .op-bento-go { transform: none; opacity: 1; } @media (hover: none) { html.theme-optica .op-bento-go { transform: none; opacity: 1; width: 32px; height: 32px; } } /* 11. Featured edit ------------------------------------------------------- */ html.theme-optica .op-featured { background: rgb(var(--op-surface)); } html.theme-optica .op-featured-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 1024px) { html.theme-optica .op-featured-grid { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: stretch; } } html.theme-optica .op-featured-stage { position: relative; min-height: min(520px, 78vh); border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(90% 70% at 50% 35%, #fff, rgb(var(--op-bg-2))); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); isolation: isolate; } html.theme-optica .op-featured-ring { position: absolute; left: 50%; top: 40%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 999px; border: 1.5px dashed rgb(var(--op-accent) / .35); animation: op-turn 40s linear infinite; z-index: -1; } html.theme-optica .op-featured-ring::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: rgb(var(--op-accent)); box-shadow: 0 0 0 6px rgb(var(--op-accent) / .15); } @keyframes op-turn { to { transform: translate(-50%, -50%) rotate(360deg); } } html.theme-optica .op-featured-index { position: absolute; top: 22px; inset-inline-start: 26px; font-family: var(--op-font-display); font-size: 56px; font-weight: 600; letter-spacing: -.05em; line-height: 1; color: rgb(var(--op-ink) / .1); } html.theme-optica .op-featured-index small { font-size: 18px; letter-spacing: 0; } html.theme-optica .op-featured-media { position: absolute; inset: 6% 10% 30%; display: flex; align-items: center; justify-content: center; } html.theme-optica .op-featured-media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; animation: op-float 7s ease-in-out infinite; } html.theme-optica .op-featured-info { position: relative; margin: 20px; padding: 20px 22px; border-radius: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: rgb(255 255 255 / .82); box-shadow: var(--op-shadow-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.theme-optica .op-featured-info h3 { flex: 1 1 100%; font-family: var(--op-font-display); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; } html.theme-optica .op-featured-price { display: flex; align-items: baseline; gap: 10px; flex: 1; } html.theme-optica .op-featured-price strong { font-family: var(--op-font-display); font-size: 24px; letter-spacing: -.02em; } html.theme-optica .op-featured-price del { color: rgb(var(--op-muted)); font-size: 14px; } html.theme-optica .op-featured-list { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-featured-row { position: relative; width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 22px; text-align: start; overflow: hidden; background: rgb(var(--op-bg)); transition: background-color .3s, box-shadow .3s, transform .4s var(--op-ease); } html.theme-optica .op-featured-row:hover { transform: translateX(4px); } html.theme-optica .op-featured-row.is-active { background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-featured-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-featured-thumb img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-featured-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html.theme-optica .op-featured-row-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-featured-row-text small { font-family: var(--op-font-display); font-size: 14px; color: rgb(var(--op-muted)); } html.theme-optica .op-featured-row-arrow { flex-shrink: 0; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--op-ease); } html.theme-optica .op-featured-row.is-active .op-featured-row-arrow, html.theme-optica .op-featured-row:hover .op-featured-row-arrow { opacity: 1; transform: none; } html.theme-optica .op-featured-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgb(var(--op-accent)); transform-origin: left; animation: op-progress linear forwards; } html.theme-optica .op-featured-progress.is-paused { animation-play-state: paused; } @keyframes op-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 1023.98px) { html.theme-optica .op-featured-stage { min-height: 440px; } html.theme-optica .op-featured-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; } html.theme-optica .op-featured-list::-webkit-scrollbar { display: none; } html.theme-optica .op-featured-list li { flex: 0 0 78%; scroll-snap-align: start; } } /* 12. Flash rail ---------------------------------------------------------- */ html.theme-optica .op-flash { position: relative; } html.theme-optica .op-countdown { display: flex; align-items: center; gap: 6px; } html.theme-optica .op-countdown-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--op-muted)); margin-inline-end: 6px; } html.theme-optica .op-countdown-cell { display: flex; align-items: baseline; gap: 2px; min-width: 52px; justify-content: center; padding: 8px 10px; border-radius: 14px; background: rgb(var(--op-ink)); color: #fff; } html.theme-optica .op-countdown-cell strong { font-family: var(--op-font-display); font-size: 20px; font-variant-numeric: tabular-nums; } html.theme-optica .op-countdown-cell small { font-size: 11px; opacity: .6; } html.theme-optica .op-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 18px; scrollbar-width: none; } html.theme-optica .op-rail::-webkit-scrollbar { display: none; } html.theme-optica .op-rail-item { flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; } @media (min-width: 768px) { html.theme-optica .op-rail-item { flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 1024px) { html.theme-optica .op-rail-item { flex-basis: calc((100% - 48px) / 4); } html.theme-optica .op-rail { gap: 16px; } } html.theme-optica .op-rail-nav { display: flex; justify-content: flex-end; gap: 8px; } /* 13. Campaign / promos --------------------------------------------------- */ html.theme-optica .op-campaign { display: block; } html.theme-optica .op-campaign .op-container { display: flex; flex-direction: column; gap: 18px; } html.theme-optica .op-banner { position: relative; border-radius: 32px; overflow: hidden; background: rgb(var(--op-bg-2)); box-shadow: var(--op-shadow-2); } html.theme-optica .op-banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } html.theme-optica .op-banner-track::-webkit-scrollbar { display: none; } html.theme-optica .op-banner-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1689 / 600; display: block; } html.theme-optica .op-banner-slide img, html.theme-optica .op-banner-slide video { width: 100%; height: 100%; object-fit: cover; display: block; } html.theme-optica .op-banner-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgb(var(--op-ink) / .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.theme-optica .op-banner-dot { width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / .55); transition: width .4s var(--op-ease), background-color .3s; } html.theme-optica .op-banner-dot.is-active { width: 26px; background: #fff; } html.theme-optica .op-promos { display: grid; gap: 16px; grid-template-columns: 1fr; } /* auto-fill, not auto-fit: a lone promo keeps a column's width instead of spanning the page. */ @media (min-width: 640px) { html.theme-optica .op-promos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } html.theme-optica .op-promo { --op-p: 0; position: relative; display: block; overflow: hidden; border-radius: var(--op-radius); background: rgb(var(--op-bg-2)); transition: transform .5s var(--op-ease), box-shadow .4s; } html.theme-optica .op-promo:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-3); } html.theme-optica .op-promo-img img, html.theme-optica img.op-promo-img { width: 100%; display: block; transform: scale(1.1) translateY(calc(var(--op-p) * 24px)); transition: transform .2s linear; } html.theme-optica .op-promo--wide { border-radius: 32px; } /* 14. Product grid + card ------------------------------------------------- */ html.theme-optica .op-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { html.theme-optica .op-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1024px) { html.theme-optica .op-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } html.theme-optica .op-card { position: relative; display: flex; flex-direction: column; gap: 12px; } html.theme-optica .op-card-stage { --op-rx: 0deg; --op-ry: 0deg; --op-gx: 50%; --op-gy: 50%; position: relative; border-radius: var(--op-radius); overflow: hidden; isolation: isolate; background: radial-gradient(80% 70% at 50% 40%, #fff 0%, rgb(var(--op-bg-2)) 100%); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transform: perspective(900px) rotateX(var(--op-rx)) rotateY(var(--op-ry)); transition: transform .6s var(--op-ease), box-shadow .4s var(--op-ease); } html.theme-optica .op-card-stage.is-tilting { transition: transform .12s linear, box-shadow .4s var(--op-ease); } html.theme-optica .op-card:hover .op-card-stage { box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-accent) / .25); } /* Pointer glare that follows the tilt. */ html.theme-optica .op-card-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(400px circle at var(--op-gx) var(--op-gy), rgb(255 255 255 / .45), transparent 40%); opacity: 0; transition: opacity .4s; } html.theme-optica .op-card-stage.is-tilting::after { opacity: 1; } html.theme-optica .op-card-media { display: block; } html.theme-optica .op-card-img img, html.theme-optica img.op-card-img { width: 100%; mix-blend-mode: multiply; transition: transform .9s var(--op-ease); } html.theme-optica .op-card:hover .op-card-img img, html.theme-optica .op-card:hover img.op-card-img { transform: scale(1.07); } /* Lens glint: a diagonal sheen that sweeps once on hover. */ html.theme-optica .op-card-glint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .7) 48%, transparent 60%); transform: translateX(-110%); } html.theme-optica .op-card:hover .op-card-glint { transform: translateX(110%); transition: transform 1s var(--op-ease); } html.theme-optica .op-card-badges { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; } html.theme-optica .op-card-wish { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: rgb(var(--op-ink-2)); background: rgb(255 255 255 / .9); box-shadow: var(--op-shadow-1); transition: transform .35s var(--op-spring), color .2s; } html.theme-optica .op-card-wish:hover { transform: scale(1.12); color: rgb(var(--op-danger)); } html.theme-optica .op-card-wish.is-on { color: rgb(var(--op-danger)); } html.theme-optica .op-card-wish.is-on .op-icon { fill: currentColor; animation: op-heart .5s var(--op-spring); } @keyframes op-heart { 40% { transform: scale(1.35); } } html.theme-optica .op-card-cta { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 46px; padding-inline: 18px 14px; border-radius: 999px; font-family: var(--op-font-display); font-weight: 600; font-size: 14px; color: #fff; background: rgb(var(--op-ink) / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(calc(100% + 16px)); transition: transform .5s var(--op-ease), background-color .25s; } html.theme-optica .op-card-cta:hover { background: rgb(var(--op-accent)); } html.theme-optica .op-card:hover .op-card-cta, html.theme-optica .op-card:focus-within .op-card-cta { transform: none; } @media (hover: none) { html.theme-optica .op-card-cta { display: none; } } html.theme-optica .op-card.is-out .op-card-img img, html.theme-optica .op-card.is-out img.op-card-img { opacity: .55; filter: grayscale(.6); } html.theme-optica .op-card-body { display: flex; flex-direction: column; gap: 6px; padding-inline: 4px; } html.theme-optica .op-card-name { font-size: 15px; font-weight: 500; line-height: 1.35; color: rgb(var(--op-ink)); } html.theme-optica .op-card-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } html.theme-optica .op-card-name a:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } html.theme-optica .op-card-price { display: flex; align-items: baseline; gap: 8px; min-width: 0; } html.theme-optica .op-card-price strong { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } html.theme-optica .op-card-price del { font-size: 12.5px; color: rgb(var(--op-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-optica .op-card-rating { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: rgb(var(--op-ink-2)); } @media (max-width: 639.98px) { html.theme-optica .op-card-price strong { font-size: 15px; } html.theme-optica .op-card-name { font-size: 14px; } html.theme-optica .op-card-wish { width: 32px; height: 32px; } html.theme-optica .op-card-stage { border-radius: 18px; } } html.theme-optica .op-skel { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-skel > span { border-radius: 12px; background: linear-gradient(90deg, rgb(var(--op-bg-2)), rgb(var(--op-line)), rgb(var(--op-bg-2))); background-size: 200% 100%; animation: op-shimmer 1.4s linear infinite; } html.theme-optica .op-skel-img { aspect-ratio: 1; border-radius: var(--op-radius) !important; } html.theme-optica .op-skel-line { height: 14px; width: 80%; } html.theme-optica .op-skel-line--short { width: 40%; } @keyframes op-shimmer { to { background-position: -200% 0; } } /* 15. Lens guide ---------------------------------------------------------- */ html.theme-optica .op-lensguide { background: rgb(var(--op-surface)); } html.theme-optica .op-lensguide-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 1024px) { html.theme-optica .op-lensguide-grid { grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } } html.theme-optica .op-chart { --op-r: clamp(70px, 11vw, 120px); position: relative; aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden; cursor: none; touch-action: pan-y; background: #fbfbf8; box-shadow: inset 0 0 0 1px rgb(var(--op-line)), var(--op-shadow-1); animation: op-lens-drift 9s ease-in-out infinite; } html.theme-optica .op-chart.is-pointer { animation: none; } @keyframes op-lens-drift { 0%, 100% { --op-lx: 50%; --op-ly: 24%; } 25% { --op-lx: 66%; --op-ly: 46%; } 50% { --op-lx: 50%; --op-ly: 72%; } 75% { --op-lx: 34%; --op-ly: 46%; } } html.theme-optica .op-chart-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; font-family: var(--op-font-display); font-weight: 700; color: #16181d; letter-spacing: .18em; line-height: 1; user-select: none; } html.theme-optica .op-chart-layer span { white-space: nowrap; } html.theme-optica .op-chart-layer--blur { filter: blur(5px); opacity: .75; } html.theme-optica .op-chart-layer--sharp { clip-path: circle(var(--op-r) at var(--op-lx) var(--op-ly)); background: #fff; transition: filter .6s var(--op-ease), background-color .6s; } html.theme-optica .op-chart-lens { position: absolute; left: var(--op-lx); top: var(--op-ly); width: calc(var(--op-r) * 2); height: calc(var(--op-r) * 2); transform: translate(-50%, -50%); border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 6px rgb(var(--op-ink)), 0 0 0 7px rgb(255 255 255 / .6), 0 24px 50px -10px rgb(var(--op-ink) / .45), inset 0 0 30px rgb(var(--op-accent) / .12); background: linear-gradient(135deg, rgb(255 255 255 / .35), transparent 45%); transition: background-color .6s; } html.theme-optica .op-chart-lens::after { content: ""; position: absolute; top: 50%; inset-inline-end: calc(-1 * var(--op-r) * .55); width: calc(var(--op-r) * .5); height: 6px; margin-top: -3px; border-radius: 6px; background: rgb(var(--op-ink)); } html.theme-optica .op-chart-hint { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgb(var(--op-ink-2)); background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: opacity .3s; } html.theme-optica .op-chart.is-pointer .op-chart-hint { opacity: 0; } /* Lens types: tint/treat what's seen through the lens. */ html.theme-optica .op-chart.is-bluecut .op-chart-layer--sharp { background: #fff6e0; filter: sepia(.25) saturate(1.2); } html.theme-optica .op-chart.is-bluecut .op-chart-lens { background-color: rgb(255 196 64 / .12); } html.theme-optica .op-chart.is-photochromic .op-chart-layer--sharp { animation: op-photo 4s ease-in-out infinite; } html.theme-optica .op-chart.is-photochromic .op-chart-lens { animation: op-photo-lens 4s ease-in-out infinite; } @keyframes op-photo { 0%, 20% { background: #fff; color: #16181d; } 55%, 80% { background: #5a5f66; color: #f1f2f4; } 100% { background: #fff; color: #16181d; } } @keyframes op-photo-lens { 0%, 20% { background-color: transparent; } 55%, 80% { background-color: rgb(20 22 26 / .35); } 100% { background-color: transparent; } } html.theme-optica .op-chart.is-progressive .op-chart-layer--sharp { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgb(0 0 0 / .55) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgb(0 0 0 / .55) 100%); } html.theme-optica .op-chart.is-progressive .op-chart-lens { background-image: linear-gradient(180deg, transparent 45%, rgb(var(--op-accent) / .12)); } html.theme-optica .op-lens-tabs { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-lens-tab { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-radius: 22px; text-align: start; background: rgb(var(--op-bg)); transition: background-color .3s, box-shadow .3s, transform .4s var(--op-ease); } html.theme-optica .op-lens-tab:hover { transform: translateX(4px); } html.theme-optica .op-lens-tab.is-active { background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-lens-tab-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: background-color .3s, color .3s; } html.theme-optica .op-lens-tab.is-active .op-lens-tab-icon { color: #fff; background: rgb(var(--op-accent)); box-shadow: none; } html.theme-optica .op-lens-tab-text { display: flex; flex-direction: column; gap: 4px; } html.theme-optica .op-lens-tab-text strong { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; } html.theme-optica .op-lens-tab-text small { font-size: 14px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-lens-cta { align-self: flex-start; margin-top: 8px; } @media (max-width: 1023.98px) { html.theme-optica .op-chart { cursor: default; } } /* 16. Benefits + newsletter ----------------------------------------------- */ html.theme-optica .op-benefits { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { html.theme-optica .op-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } html.theme-optica .op-benefit { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--op-radius); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: transform .5s var(--op-ease), box-shadow .4s; } html.theme-optica .op-benefit:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-benefit-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: rgb(var(--op-accent) / .1); } html.theme-optica .op-benefit-icon img { width: 26px; height: 26px; object-fit: contain; } html.theme-optica .op-benefit h4 { font-family: var(--op-font-display); font-size: 16px; font-weight: 600; text-transform: capitalize; margin-bottom: 4px; } html.theme-optica .op-benefit p { font-size: 14px; line-height: 1.55; color: rgb(var(--op-muted)); } html.theme-optica .op-news { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 36px; background: rgb(var(--op-ink)); color: rgb(255 255 255 / .7); } @media (min-width: 1024px) { html.theme-optica .op-news { grid-template-columns: 1fr 1fr; } } html.theme-optica .op-news .op-h2 { color: #fff; margin-block: 12px 10px; } html.theme-optica .op-news-rings { position: absolute; right: -120px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); z-index: -1; } html.theme-optica .op-news-rings i { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgb(var(--op-accent) / .45); animation: op-ripple 6s var(--op-ease) infinite; } html.theme-optica .op-news-rings i:nth-child(2) { animation-delay: -2s; } html.theme-optica .op-news-rings i:nth-child(3) { animation-delay: -4s; } @keyframes op-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } } html.theme-optica .op-news-form { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); } html.theme-optica .op-news-form input { flex: 1; min-width: 160px; height: 54px; padding-inline: 20px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 15px; } html.theme-optica .op-news-form input::placeholder { color: rgb(255 255 255 / .45); } html.theme-optica .op-news-form .op-btn--primary { background: #fff; color: rgb(var(--op-ink)); } html.theme-optica .op-news-form .op-btn--primary:hover { color: #fff; } html.theme-optica .op-news-error { flex-basis: 100%; padding-inline: 20px 0; color: #fca5a5; } @media (max-width: 479.98px) { html.theme-optica .op-news-form { border-radius: 24px; } html.theme-optica .op-news-form .op-btn { width: 100%; } } /* 17. Skin for inherited default pages ------------------------------------ Shop listing, product page, checkout, account and auth keep the default components (and their business logic). These narrow, colour/shape-only rules bring them into the theme without forking a single one. */ html.theme-optica main, html.theme-optica .container { --tw-ring-color: rgb(var(--op-accent) / .3); } html.theme-optica :is(h1, h2, h3).font-display, html.theme-optica .font-display { font-family: var(--op-font-display); letter-spacing: -.025em; } html.theme-optica :is(.rounded-2xl, .rounded-3xl) { border-radius: var(--op-radius); } html.theme-optica :is(.shadow-card, .shadow-xs, .shadow-e1) { box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)) !important; } html.theme-optica :is(.shadow-xl, .shadow-e2, .shadow-paper) { box-shadow: var(--op-shadow-2) !important; } html.theme-optica .field-button { height: 54px; line-height: 54px; border-radius: 999px; font-family: var(--op-font-display); transition: transform .3s var(--op-ease), box-shadow .3s, filter .2s; box-shadow: 0 12px 28px -12px rgb(var(--op-accent) / .7); } html.theme-optica .field-button:hover { filter: brightness(1.06); } html.theme-optica .field-button:active { transform: scale(.98); } html.theme-optica :is(.field-control, .frontend-select) { border-radius: 14px; } html.theme-optica :is(.field-control, .frontend-select):focus-within { border-color: rgb(var(--op-accent)); box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14); } html.theme-optica .modal { background: rgb(var(--op-ink) / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.theme-optica .modal-dialog { border-radius: var(--op-radius); box-shadow: var(--op-shadow-3); } html.theme-optica .profile-link { border-radius: 12px; } html.theme-optica .profile-link.active { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .08); } /* Default product cards on catalogue / related lists: the theme's soft lens stage. */ html.theme-optica .group.rounded-2xl > .relative.isolate { background: radial-gradient(80% 70% at 50% 40%, #fff, rgb(var(--op-bg-2))); } /* The default storefront reserves room for its own bottom bar; ours floats higher. */ @media (max-width: 1023.98px) { html.theme-optica #cart-canvas > div { padding-bottom: env(safe-area-inset-bottom); } } /* Reduced motion: no loops, no drift — everything visible and still. */ @media (prefers-reduced-motion: reduce) { html.theme-optica *, html.theme-optica *::before, html.theme-optica *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.theme-optica .op-marquee-track { animation: none; } html.theme-optica .op-chart { animation: none; } } /* 18. Shop listing (optica/product/ProductComponent) ----------------------- Default listing logic, Optica markup: focus-in hero, category glider, sticky glass toolbar, sidebar/drawer filters, staggered grid, pager. */ html.theme-optica .op-shop { overflow-x: clip; padding-bottom: 24px; } /* Hero */ html.theme-optica .op-shop-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px); } html.theme-optica .op-shop-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } html.theme-optica .op-shop-hero .op-blob--a { width: 420px; height: 420px; right: -80px; top: -160px; } html.theme-optica .op-shop-hero .op-blob--b { width: 320px; height: 320px; left: -120px; bottom: -200px; } html.theme-optica .op-shop-rings { position: absolute; right: 8%; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); } html.theme-optica .op-shop-rings i { position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgb(var(--op-accent) / .25); animation: op-ripple 7s var(--op-ease) infinite; } html.theme-optica .op-shop-rings i:nth-child(2) { animation-delay: -2.3s; } html.theme-optica .op-shop-rings i:nth-child(3) { animation-delay: -4.6s; } html.theme-optica .op-shop-hero-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 900px) { html.theme-optica .op-shop-hero-inner { grid-template-columns: 1fr auto; } } html.theme-optica .op-shop-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-optica .op-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-crumbs a { text-transform: capitalize; transition: color .2s; } html.theme-optica .op-crumbs a:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-crumbs a:last-child { color: rgb(var(--op-ink)); font-weight: 500; } html.theme-optica .op-crumbs .op-icon { opacity: .5; } html[dir="rtl"].theme-optica .op-crumbs .op-icon { transform: scaleX(-1); } html.theme-optica .op-shop-title { font-family: var(--op-font-display); font-size: clamp(36px, 6vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.045em; color: rgb(var(--op-ink)); text-transform: capitalize; overflow-wrap: anywhere; } html.theme-optica .op-shop-title-pre { display: block; font-size: .4em; letter-spacing: -.02em; color: rgb(var(--op-muted)); margin-bottom: .2em; text-transform: none; } html.theme-optica .op-shop-count { font-size: 15px; color: rgb(var(--op-muted)); } html.theme-optica .op-shop-count strong { font-family: var(--op-font-display); font-size: 18px; color: rgb(var(--op-accent)); font-variant-numeric: tabular-nums; } html.theme-optica .op-shop-search { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); height: 58px; padding-inline: 18px 6px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .3s; } html.theme-optica .op-shop-search:focus-within { box-shadow: var(--op-shadow-2), inset 0 0 0 1.5px rgb(var(--op-accent)), 0 0 0 5px rgb(var(--op-accent) / .12); } html.theme-optica .op-shop-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; color: rgb(var(--op-ink)); } html.theme-optica .op-shop-search input::-webkit-search-cancel-button { display: none; } html.theme-optica .op-shop-search-clear { display: flex; padding: 6px; border-radius: 999px; color: rgb(var(--op-muted)); } html.theme-optica .op-shop-search-clear:hover { color: rgb(var(--op-danger)); } html.theme-optica .op-shop-hero-art { display: none; } @media (min-width: 900px) { html.theme-optica .op-shop-hero-art { display: block; } } html.theme-optica .op-shop-lens { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(200px, 20vw, 260px); aspect-ratio: 1; border-radius: 999px; overflow: hidden; color: rgb(var(--op-ink) / .25); background: radial-gradient(circle at 30% 25%, #fff, rgb(var(--op-bg-2)) 75%); box-shadow: var(--op-shadow-3), inset 0 0 0 1px #fff; } html.theme-optica .op-shop-lens img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; animation: op-float 7s ease-in-out infinite; } html.theme-optica .op-shop-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .5), transparent 40%); } html.theme-optica .op-shop-lens::before { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 1.5px dashed rgb(var(--op-accent) / .4); animation: op-spin-plain 30s linear infinite; } @keyframes op-spin-plain { to { transform: rotate(360deg); } } /* Category rail */ html.theme-optica .op-shop-rail { position: relative; flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); width: fit-content; max-width: 100%; } html.theme-optica .op-shop-rail::-webkit-scrollbar { display: none; } html.theme-optica .op-shop-glider { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: rgb(var(--op-ink)); box-shadow: 0 8px 18px -8px rgb(var(--op-ink) / .6); transition: transform .5s var(--op-ease), width .5s var(--op-ease), opacity .3s; pointer-events: none; } html.theme-optica .op-shop-rail-item { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; height: 36px; padding-inline: 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .35s; } html.theme-optica .op-shop-rail-item:hover { color: rgb(var(--op-ink)); } html.theme-optica .op-shop-rail-item.is-active { color: #fff; } /* Sticky toolbar */ html.theme-optica .op-shop-toolbar { position: sticky; top: 0; z-index: 15; padding-block: 10px; background: rgb(var(--op-bg) / .94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: top .5s var(--op-ease), border-color .3s; } html.theme-optica:has(.op-nav:not(.is-hidden)) .op-shop-toolbar { top: var(--header-h, 76px); } html.theme-optica .op-shop-toolbar-inner { display: flex; align-items: center; gap: 10px; } html.theme-optica .op-shop-filter-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: rgb(var(--op-ink)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .2s; } html.theme-optica .op-shop-filter-btn:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink)); } html.theme-optica .op-shop-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-shop-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } html.theme-optica .op-shop-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: background-color .2s; } html.theme-optica .op-shop-chip:hover { background: rgb(var(--op-accent) / .18); } html.theme-optica .op-shop-chip--clear { color: rgb(var(--op-ink-2)); background: transparent; text-decoration: underline; text-underline-offset: 3px; } .op-chip-list-enter-active, .op-chip-list-leave-active { transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); } .op-chip-list-enter-from, .op-chip-list-leave-to { opacity: 0; transform: scale(.6); } .op-chip-list-leave-active { position: absolute; } html.theme-optica .op-shop-tools { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } html.theme-optica .op-shop-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding-inline: 16px 12px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); cursor: pointer; } html.theme-optica .op-shop-sort-label { font-size: 13px; color: rgb(var(--op-muted)); white-space: nowrap; } html.theme-optica .op-shop-sort select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 600; color: rgb(var(--op-ink)); padding-inline-end: 22px; margin-inline-end: -22px; cursor: pointer; max-width: 170px; } html.theme-optica .op-shop-sort .op-icon { pointer-events: none; color: rgb(var(--op-muted)); } html.theme-optica .op-shop-density { display: none; padding: 4px; gap: 2px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-shop-density button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--op-muted)); transition: background-color .25s, color .25s; } html.theme-optica .op-shop-density button.is-active { color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-dens-icon { display: grid; gap: 2px; } html.theme-optica .op-dens-icon--3 { grid-template-columns: repeat(3, 4px); } html.theme-optica .op-dens-icon--4 { grid-template-columns: repeat(4, 3px); } html.theme-optica .op-dens-icon i { height: 12px; border-radius: 1.5px; background: currentColor; } @media (min-width: 1024px) { html.theme-optica .op-shop-density { display: flex; } html.theme-optica .op-shop-filter-btn { display: none; } } @media (max-width: 639.98px) { html.theme-optica .op-shop-sort-label { display: none; } html.theme-optica .op-shop-toolbar .op-shop-filter-btn { display: none; } } html.theme-optica .op-shop-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; } html.theme-optica .op-shop-progress.is-busy { opacity: 1; } html.theme-optica .op-shop-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(var(--op-accent)), transparent); animation: op-indeterminate 1.1s ease-in-out infinite; } @keyframes op-indeterminate { from { left: -40%; } to { left: 100%; } } /* Body: sidebar + results */ html.theme-optica .op-shop-body { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 20px; } @media (min-width: 1024px) { html.theme-optica .op-shop-body { grid-template-columns: 270px minmax(0, 1fr); } } html.theme-optica .op-filters { display: flex; flex-direction: column; } html.theme-optica .op-filters-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; } html.theme-optica .op-filters-head h2 { font-family: var(--op-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-filters-reset { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: rgb(var(--op-accent)); } html.theme-optica .op-filters-close, html.theme-optica .op-filters-foot { display: none; } html.theme-optica .op-filters-empty { padding-block: 16px; font-size: 14px; color: rgb(var(--op-muted)); } @media (min-width: 1024px) { html.theme-optica .op-filters { position: sticky; top: calc(var(--toolbar-h, 64px) + var(--header-h, 76px) + 16px); align-self: start; max-height: calc(100vh - var(--toolbar-h, 64px) - var(--header-h, 76px) - 32px); } html.theme-optica .op-filters-scroll { overflow-y: auto; scrollbar-width: thin; padding-inline-end: 6px; } html.theme-optica .op-filters-backdrop { display: none; } } @media (max-width: 1023.98px) { html.theme-optica .op-filters { position: fixed; z-index: 45; inset-block: 0; inset-inline-end: 0; width: min(400px, 92vw); padding: 18px 20px 0; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--op-ease), visibility .5s; } html[dir="rtl"].theme-optica .op-filters { transform: translateX(-105%); } html.theme-optica .op-filters.is-open { transform: none; visibility: visible; } html.theme-optica .op-filters-close { display: inline-flex; } html.theme-optica .op-filters-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; } html.theme-optica .op-filters-foot { display: block; padding-block: 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-filters-foot .op-btn { width: 100%; } html.theme-optica .op-filters-backdrop { position: fixed; inset: 0; z-index: 44; background: rgb(var(--op-ink) / .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } html.theme-optica .op-filters-backdrop.is-open { opacity: 1; visibility: visible; } html.theme-optica .op-filters.is-open .op-fgroup { animation: op-intro .6s var(--op-ease) both; } html.theme-optica .op-filters.is-open .op-fgroup:nth-child(2) { animation-delay: 60ms; } html.theme-optica .op-filters.is-open .op-fgroup:nth-child(3) { animation-delay: 120ms; } html.theme-optica .op-filters.is-open .op-fgroup:nth-child(n+4) { animation-delay: 180ms; } } html.theme-optica .op-fgroup { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-fgroup-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font-family: var(--op-font-display); font-size: 14px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-fgroup-head em { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; margin-inline-start: 6px; border-radius: 999px; font-style: normal; font-size: 11px; color: #fff; background: rgb(var(--op-accent)); vertical-align: 1px; } html.theme-optica .op-fgroup-head .op-icon { color: rgb(var(--op-muted)); transition: transform .35s var(--op-ease); } html.theme-optica .op-fgroup.is-open .op-fgroup-head .op-icon { transform: rotate(180deg); } html.theme-optica .op-fgroup-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--op-ease); } html.theme-optica .op-fgroup.is-open .op-fgroup-body { grid-template-rows: 1fr; } html.theme-optica .op-fgroup-body > div { min-height: 0; overflow: hidden; } html.theme-optica .op-fgroup.is-open .op-fgroup-body > div { padding-bottom: 18px; } html.theme-optica .op-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-price-inputs input { width: 100%; min-width: 0; height: 42px; padding-inline: 12px; border: 0; border-radius: 12px; outline: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .2s; } html.theme-optica .op-price-inputs input:focus { box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)), 0 0 0 4px rgb(var(--op-accent) / .12); } html.theme-optica .op-price-slider { padding-inline: 4px; } html.theme-optica .op-check-list { display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-check-list.is-scroll { max-height: 260px; overflow-y: auto; } html.theme-optica .op-check { display: flex; align-items: center; gap: 12px; min-height: 38px; padding-inline: 6px; border-radius: 10px; cursor: pointer; transition: background-color .15s; } html.theme-optica .op-check:hover { background: rgb(var(--op-bg)); } html.theme-optica .op-check input { position: absolute; opacity: 0; pointer-events: none; } html.theme-optica .op-check-box { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); background: rgb(var(--op-surface)); transition: background-color .2s, box-shadow .2s; } html.theme-optica .op-check-box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--op-ease); } html.theme-optica .op-check.is-on .op-check-box { background: rgb(var(--op-accent)); box-shadow: none; } html.theme-optica .op-check.is-on .op-check-box svg { stroke-dashoffset: 0; } html.theme-optica .op-check input:focus-visible + .op-check-box { box-shadow: 0 0 0 3px rgb(var(--op-accent) / .3); } html.theme-optica .op-check-label { font-size: 14px; text-transform: capitalize; color: rgb(var(--op-ink-2)); } html.theme-optica .op-check.is-on .op-check-label { color: rgb(var(--op-ink)); font-weight: 500; } html.theme-optica .op-pill-list { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-optica .op-pill { display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .3s var(--op-spring); } html.theme-optica .op-pill:hover { box-shadow: inset 0 0 0 1px rgb(var(--op-ink) / .4); } html.theme-optica .op-pill:active { transform: scale(.94); } html.theme-optica .op-pill.is-on { color: #fff; background: rgb(var(--op-ink)); box-shadow: none; } /* Results grid */ html.theme-optica .op-shop-results { min-width: 0; } @media (min-width: 1024px) { html.theme-optica .op-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.theme-optica .op-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { html.theme-optica .op-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } html.theme-optica .op-shop-grid { transition: opacity .3s, filter .3s; } html.theme-optica .op-shop-grid.is-busy { opacity: .45; filter: blur(2px); pointer-events: none; } @keyframes op-card-in { from { opacity: 0; translate: 0 30px; filter: blur(8px); } to { opacity: 1; translate: none; filter: none; } } html.op-motion.theme-optica .op-shop-cell { animation: op-card-in .8s var(--op-ease) both; animation-delay: calc(min(var(--op-i, 0), 12) * 55ms); } /* Empty state */ html.theme-optica .op-shop-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(40px, 8vw, 80px) 20px; border-radius: 32px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-shop-empty-art { position: relative; display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; margin-bottom: 8px; border-radius: 999px; color: rgb(var(--op-ink) / .5); background: rgb(var(--op-bg)); filter: blur(0); animation: op-unfocus 3.2s ease-in-out infinite; } html.theme-optica .op-shop-empty-art i { position: absolute; inset: -8px; border-radius: inherit; border: 1.5px dashed rgb(var(--op-accent) / .4); animation: op-spin-plain 20s linear infinite; } @keyframes op-unfocus { 0%, 100% { filter: blur(0); } 50% { filter: blur(3px); } } html.theme-optica .op-shop-empty h3 { font-family: var(--op-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-shop-empty p { max-width: 380px; color: rgb(var(--op-muted)); font-size: 14.5px; } html.theme-optica .op-shop-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } /* Pager */ html.theme-optica .op-pager { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; } html.theme-optica .op-pager-info { font-size: 14px; color: rgb(var(--op-muted)); } html.theme-optica .op-pager-info strong { color: rgb(var(--op-ink)); font-variant-numeric: tabular-nums; } html.theme-optica .op-pager-track { width: 200px; height: 3px; border-radius: 3px; overflow: hidden; background: rgb(var(--op-line)); } html.theme-optica .op-pager-bar { display: block; height: 100%; background: rgb(var(--op-accent)); transform-origin: left; transition: transform .6s var(--op-ease); } html.theme-optica .op-pager-btns { display: flex; align-items: center; gap: 6px; } html.theme-optica .op-pager-btns .op-icon-btn:disabled { opacity: .35; pointer-events: none; } html.theme-optica .op-pager-num { min-width: 42px; height: 42px; padding-inline: 8px; border-radius: 999px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink-2)); transition: background-color .2s, color .2s, transform .3s var(--op-spring); } html.theme-optica .op-pager-num:hover:not(.is-gap):not(.is-active) { background: rgb(var(--op-ink) / .06); } html.theme-optica .op-pager-num.is-active { color: #fff; background: rgb(var(--op-ink)); transform: scale(1.05); } html.theme-optica .op-pager-num.is-gap { min-width: 20px; color: rgb(var(--op-muted)); cursor: default; } @media (max-width: 479.98px) { html.theme-optica .op-pager-num:not(.is-active):not(.is-gap) { display: none; } html.theme-optica .op-pager-num.is-gap { display: none; } } /* Mobile floating filter pill */ html.theme-optica .op-shop-fab { position: fixed; z-index: 21; left: 50%; bottom: calc(var(--op-tabbar-h) + 16px); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 14px 30px -10px rgb(var(--op-ink) / .6); transform: translateX(-50%); transition: transform .5s var(--op-ease), opacity .3s; } html.theme-optica .op-shop-fab.is-hidden { transform: translate(-50%, 140%); opacity: 0; } html.op-motion.theme-optica .op-shop-fab:not(.is-hidden) { animation: op-fab-in .7s var(--op-spring) .6s both; } @keyframes op-fab-in { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: none; } } @media (min-width: 640px) { html.theme-optica .op-shop-fab { display: none; } } /* 19. Product page (optica/product/ProductDetailsComponent) ---------------- Default PDP logic, Optica markup: lens-stage gallery with a magnifier loupe, sticky buy panel, glider tabs, product rails, buy dock, fly-to-cart. */ html.theme-optica .op-pdp { overflow-x: clip; } html.theme-optica .op-pdp-hero { position: relative; isolation: isolate; padding-block: 12px clamp(32px, 5vw, 64px); } html.theme-optica .op-pdp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); } html.theme-optica .op-pdp-hero .op-blob--a { width: 520px; height: 520px; right: -140px; top: -200px; } html.theme-optica .op-pdp-hero .op-blob--b { width: 380px; height: 380px; left: -160px; top: 30%; } html.theme-optica .op-pdp-hero .op-crumbs { margin-bottom: 18px; } html.theme-optica .op-pdp-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1024px) { html.theme-optica .op-pdp-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; } } /* Gallery */ @media (min-width: 1024px) { html.theme-optica .op-pdp-gallery { position: sticky; top: calc(var(--header-h, 76px) + 16px); } } html.theme-optica .op-pdp-stage { /* Square, but never taller than the screen beside the buy panel. */ width: min(100%, calc(100vh - var(--header-h, 76px) - 150px)); min-width: min(100%, 320px); margin-inline: auto; position: relative; aspect-ratio: 1; border-radius: 36px; overflow: hidden; isolation: isolate; touch-action: pan-y; display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 70% at 50% 42%, #fff 0%, rgb(var(--op-bg-2)) 100%); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-pdp-ring { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 999px; border: 1.5px dashed rgb(var(--op-accent) / .3); animation: op-turn 50s linear infinite; z-index: -1; } html.theme-optica .op-pdp-ring::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: rgb(var(--op-accent)); box-shadow: 0 0 0 6px rgb(var(--op-accent) / .15); } html.theme-optica .op-pdp-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; user-select: none; cursor: crosshair; } html.theme-optica .op-pdp-img-ph { color: rgb(var(--op-ink) / .2); } html.theme-optica .op-pdp-img-skel { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent) 0 0 / 50% 100% no-repeat; animation: op-skel-sweep 1.3s linear infinite; } @keyframes op-skel-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } } html.theme-optica .op-pdp-counter { position: absolute; top: 20px; inset-inline-start: 24px; z-index: 2; font-family: var(--op-font-display); font-size: 15px; font-weight: 600; color: rgb(var(--op-ink)); font-variant-numeric: tabular-nums; } html.theme-optica .op-pdp-counter small { color: rgb(var(--op-muted)); font-size: 12px; } html.theme-optica .op-pdp-offer { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2; height: 30px; padding-inline: 12px; font-size: 13px; } html.theme-optica .op-pdp-nav { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -23px; border-radius: 999px; color: rgb(var(--op-ink)); background: rgb(255 255 255 / .85); box-shadow: var(--op-shadow-1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s, transform .4s var(--op-ease), background-color .2s, color .2s; } html.theme-optica .op-pdp-nav--prev { left: 16px; transform: translateX(-8px); } html.theme-optica .op-pdp-nav--next { right: 16px; transform: translateX(8px); } html.theme-optica .op-pdp-stage:hover .op-pdp-nav { opacity: 1; transform: none; } html.theme-optica .op-pdp-nav:hover { background: rgb(var(--op-ink)); color: #fff; } @media (hover: none) { html.theme-optica .op-pdp-nav { opacity: 1; transform: none; width: 38px; height: 38px; margin-top: -19px; } } html.theme-optica .op-pdp-hint { position: absolute; bottom: 16px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transform: translateX(-50%); transition: opacity .3s; pointer-events: none; } html.theme-optica .op-pdp-stage:hover .op-pdp-hint { opacity: 0; } html.theme-optica .op-loupe { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 999px; pointer-events: none; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 0 0 5px rgb(var(--op-ink)), 0 0 0 6px rgb(255 255 255 / .7), 0 24px 50px -12px rgb(var(--op-ink) / .5); will-change: transform; } html.theme-optica .op-loupe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .35), transparent 45%); } html.theme-optica .op-pdp-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; } html.theme-optica .op-pdp-thumbs::-webkit-scrollbar { display: none; } @media (max-width: 1023.98px) { html.theme-optica .op-pdp-stage { width: 100%; } html.theme-optica .op-pdp-thumbs { justify-content: flex-start; } } html.theme-optica .op-pdp-thumb { flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); opacity: .65; transition: opacity .25s, box-shadow .25s, transform .35s var(--op-ease); } html.theme-optica .op-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-pdp-thumb:hover { opacity: 1; transform: translateY(-2px); } html.theme-optica .op-pdp-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--op-accent)), var(--op-shadow-1); } html.theme-optica .op-pdp-thumb--video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; color: rgb(var(--op-accent)); opacity: 1; background: rgb(var(--op-accent) / .08); } /* Buy panel */ html.theme-optica .op-pdp-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; } html.theme-optica .op-pdp-info--skel { gap: 16px; } html.theme-optica .op-pdp-info--skel .op-skel-line { display: block; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgb(var(--op-bg-2)), rgb(var(--op-line)), rgb(var(--op-bg-2))); background-size: 200% 100%; animation: op-shimmer 1.4s linear infinite; } html.theme-optica .op-pdp-title { font-family: var(--op-font-display); font-size: clamp(30px, 4vw, 50px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-pdp-rating { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--op-muted)); transition: color .2s; } html.theme-optica .op-pdp-rating strong { color: rgb(var(--op-ink)); } html.theme-optica .op-pdp-rating:hover span:last-child { color: rgb(var(--op-accent)); text-decoration: underline; text-underline-offset: 3px; } html.theme-optica .op-pdp-sku { padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-pdp-lead { font-size: 16px; line-height: 1.7; color: rgb(var(--op-ink-2)); max-width: 560px; } /* Stars: a fixed glyph row, filled by --op-rate (0–1) via a gradient. */ html.theme-optica .op-stars { --op-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E"); display: inline-block; width: 90px; height: 18px; flex-shrink: 0; background: linear-gradient(90deg, #F5B70A calc(var(--op-rate, 0) * 100%), rgb(var(--op-line)) 0); -webkit-mask: var(--op-star) 0 0 / 18px 18px repeat-x; mask: var(--op-star) 0 0 / 18px 18px repeat-x; } html.theme-optica .op-stars--lg { width: 140px; height: 28px; -webkit-mask-size: 28px 28px; mask-size: 28px 28px; } html.theme-optica .op-pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-block: 4px; } html.theme-optica .op-pdp-price strong { font-family: var(--op-font-display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); } html.theme-optica .op-pdp-price del { font-size: 18px; color: rgb(var(--op-muted)); } html.theme-optica .op-pdp-save { display: inline-flex; align-items: center; height: 28px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(22 140 74); background: rgb(22 163 74 / .1); } /* Variations: re-skin of the shared VariationComponent (nested levels included). */ html.theme-optica .op-pdp-variations { position: relative; padding: 18px 0 4px; border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-pdp-variations dl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; } html.theme-optica .op-pdp-variations dt { font-family: var(--op-font-display); font-size: 14px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-pdp-variations dd { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-optica .op-pdp-variations dd button { height: 42px; min-width: 48px; padding-inline: 16px; line-height: 42px; border-radius: 14px; font-size: 14px; font-weight: 500; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .3s var(--op-spring); } html.theme-optica .op-pdp-variations dd button:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink) / .5); } html.theme-optica .op-pdp-variations dd button:active { transform: scale(.94); } html.theme-optica .op-pdp-variations dd button.bg-primary { color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 10px 20px -10px rgb(var(--op-ink) / .7); } html.theme-optica .op-pdp-sizeguide { position: absolute; top: 14px; inset-inline-end: 0; font-size: 13px; } html.theme-optica .op-pdp-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } html.theme-optica .op-stepper { display: inline-flex; align-items: center; height: 52px; padding: 5px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-stepper button { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--op-ink)); transition: background-color .2s, transform .25s var(--op-spring); } html.theme-optica .op-stepper button:hover:not(:disabled) { background: rgb(var(--op-bg-2)); } html.theme-optica .op-stepper button:active:not(:disabled) { transform: scale(.88); } html.theme-optica .op-stepper button:disabled { opacity: .35; cursor: not-allowed; } html.theme-optica .op-stepper input { width: 44px; height: 100%; border: 0; outline: 0; text-align: center; font-family: var(--op-font-display); font-size: 17px; font-weight: 600; background: transparent; color: rgb(var(--op-ink)); -moz-appearance: textfield; } html.theme-optica .op-stepper input::-webkit-inner-spin-button, html.theme-optica .op-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } html.theme-optica .op-stock { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } html.theme-optica .op-stock i { position: relative; width: 8px; height: 8px; border-radius: 999px; background: currentColor; } html.theme-optica .op-stock i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-stock--in { color: rgb(22 140 74); background: rgb(22 163 74 / .1); } html.theme-optica .op-stock--low { color: rgb(194 110 0); background: rgb(245 158 11 / .14); } html.theme-optica .op-stock--out { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .1); } html.theme-optica .op-stock--out i::after { animation: none; } html.theme-optica .op-pdp-note { margin-top: -8px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-pdp-note strong { color: rgb(var(--op-ink)); } html.theme-optica .op-pdp-cta { display: flex; gap: 10px; } html.theme-optica .op-pdp-add { flex: 1; height: 60px; font-size: 16px; } html.theme-optica .op-pdp-add::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%); transform: translateX(-120%); animation: op-shine 4.5s ease-in-out 1.5s infinite; } @keyframes op-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } html.theme-optica .op-pdp-add:disabled { background: rgb(var(--op-ink) / .35); box-shadow: none; } html.theme-optica .op-pdp-add:disabled::before, html.theme-optica .op-pdp-add:disabled::after { display: none; } html.theme-optica .op-pdp-iconbtn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; color: rgb(var(--op-ink)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, box-shadow .2s, transform .35s var(--op-spring); } html.theme-optica .op-pdp-iconbtn:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink)); transform: translateY(-2px); } html.theme-optica .op-pdp-iconbtn.is-on { color: rgb(var(--op-danger)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-danger) / .5); } html.theme-optica .op-pdp-iconbtn.is-on .op-icon { fill: currentColor; animation: op-heart .5s var(--op-spring); } @media (max-width: 479.98px) { html.theme-optica .op-pdp-iconbtn { width: 52px; height: 52px; } html.theme-optica .op-pdp-add { height: 56px; } } html.theme-optica .op-pdp-delivery { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-pdp-delivery-head { display: flex; align-items: center; gap: 12px; } html.theme-optica .op-pdp-delivery-head strong { font-family: var(--op-font-display); font-size: 15px; } html.theme-optica .op-pdp-delivery-head p { font-size: 13.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-pdp-delivery-head b { color: rgb(var(--op-ink)); font-weight: 600; } html.theme-optica .op-pdp-delivery-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-pin { display: flex; align-items: center; gap: 10px; height: 50px; padding-inline: 16px 6px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .2s; } html.theme-optica .op-pin:focus-within { box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)), 0 0 0 4px rgb(var(--op-accent) / .12); } html.theme-optica .op-pin.is-error { box-shadow: inset 0 0 0 1.5px rgb(var(--op-danger)); } html.theme-optica .op-pin input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: rgb(var(--op-ink)); } html.theme-optica .op-pin-value { flex: 1; font-weight: 600; letter-spacing: .06em; color: rgb(var(--op-ink)); } html.theme-optica .op-pin button { height: 38px; padding-inline: 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(var(--op-ink)); transition: background-color .2s, opacity .2s; } html.theme-optica .op-pin button:hover:not(:disabled) { background: rgb(var(--op-accent)); } html.theme-optica .op-pin button:disabled { opacity: .35; cursor: not-allowed; } html.theme-optica .op-pin.is-done button { color: rgb(var(--op-ink)); background: transparent; text-decoration: underline; text-underline-offset: 3px; } html.theme-optica .op-pin-msg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-pin-msg.is-error { color: rgb(var(--op-danger)); } html.theme-optica .op-pin-msg.is-ok { color: rgb(22 140 74); font-weight: 600; } html.theme-optica .op-pdp-assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html.theme-optica .op-pdp-assure li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-pdp-assure .op-icon { flex-shrink: 0; color: rgb(var(--op-accent)); } /* Tabs */ html.theme-optica .op-pdp-tabs { background: rgb(var(--op-surface)); border-radius: 40px 40px 0 0; } html.theme-optica .op-pdp-tabbar { position: relative; display: flex; gap: 4px; padding: 5px; margin-bottom: 32px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-pdp-tabbar::-webkit-scrollbar { display: none; } html.theme-optica .op-pdp-glider { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: rgb(var(--op-ink)); transition: transform .5s var(--op-ease), width .5s var(--op-ease), opacity .3s; pointer-events: none; } html.theme-optica .op-pdp-tab { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 20px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; color: rgb(var(--op-ink-2)); transition: color .35s; } html.theme-optica .op-pdp-tab.is-active { color: #fff; } html.theme-optica .op-pdp-tab em { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; font-style: normal; font-size: 11px; color: rgb(var(--op-ink-2)); background: rgb(var(--op-line)); transition: background-color .35s, color .35s; } html.theme-optica .op-pdp-tab.is-active em { color: rgb(var(--op-ink)); background: #fff; } .op-tab-swap-enter-active, .op-tab-swap-leave-active { transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .3s ease; } .op-tab-swap-enter-from { opacity: 0; transform: translateY(16px); filter: blur(6px); } .op-tab-swap-leave-to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } html.theme-optica .op-pdp-panel { min-height: 120px; } html.theme-optica .op-prose { max-width: 780px; font-size: 15.5px; line-height: 1.8; color: rgb(var(--op-ink-2)); } html.theme-optica .op-prose :is(h1, h2, h3, h4) { font-family: var(--op-font-display); color: rgb(var(--op-ink)); letter-spacing: -.02em; margin: 1.2em 0 .5em; } html.theme-optica .op-prose ul { list-style: disc; padding-inline-start: 1.3em; } html.theme-optica .op-prose img { border-radius: 18px; } html.theme-optica .op-pdp-videos { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 1000px; } @media (min-width: 768px) { html.theme-optica .op-pdp-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html.theme-optica .op-pdp-videos iframe, html.theme-optica .op-pdp-video-link { width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: rgb(var(--op-bg-2)); } html.theme-optica .op-pdp-video-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: rgb(var(--op-muted)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-reviews { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 900px) { html.theme-optica .op-reviews { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } } html.theme-optica .op-reviews-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; border-radius: 28px; background: linear-gradient(140deg, rgb(var(--op-accent) / .1), transparent 70%), rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } @media (min-width: 900px) { html.theme-optica .op-reviews-summary { position: sticky; top: calc(var(--header-h, 76px) + 20px); } } html.theme-optica .op-reviews-summary strong { font-family: var(--op-font-display); font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.05em; } html.theme-optica .op-reviews-summary p { font-size: 14px; color: rgb(var(--op-muted)); } html.theme-optica .op-reviews-list { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } html.theme-optica .op-reviews-empty { padding: 24px; width: 100%; border-radius: 22px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); } html.theme-optica .op-review { width: 100%; padding: 22px; border-radius: 22px; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); animation: op-intro .6s var(--op-ease) both; animation-delay: calc(var(--op-i, 0) * 60ms); } html.theme-optica .op-review header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } html.theme-optica .op-review-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-review h4 { font-weight: 600; text-transform: capitalize; margin-bottom: 2px; } html.theme-optica .op-review p { font-size: 15px; line-height: 1.7; color: rgb(var(--op-ink-2)); } html.theme-optica .op-review-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } html.theme-optica .op-review-imgs img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; } html.theme-optica .op-section--rail { padding-block: clamp(36px, 5vw, 64px); } html.theme-optica .op-pdp-tabs + .op-section--rail { background: rgb(var(--op-surface)); } /* Buy dock */ html.theme-optica .op-dock { position: fixed; z-index: 22; left: 50%; bottom: calc(var(--op-tabbar-h) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(620px, calc(100% - 24px)); padding: 8px 8px 8px 10px; border-radius: 22px; background: rgb(var(--op-surface) / .9); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } html.theme-optica .op-dock-img { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: rgb(var(--op-bg-2)); } html.theme-optica .op-dock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } html.theme-optica .op-dock-text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } html.theme-optica .op-dock-text span { font-family: var(--op-font-display); font-weight: 600; color: rgb(var(--op-accent)); } html.theme-optica .op-dock .op-btn { flex-shrink: 0; } html.theme-optica .op-dock .op-btn:disabled { background: rgb(var(--op-ink) / .35); box-shadow: none; } .op-dock-enter-active, .op-dock-leave-active { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .op-dock-enter-from, .op-dock-leave-to { transform: translate(-50%, 140%) !important; opacity: 0; } @media (max-width: 479.98px) { html.theme-optica .op-dock-img { display: none; } html.theme-optica .op-dock { padding-inline-start: 16px; } } /* Fly-to-cart ghost (appended to body) */ .op-fly { position: fixed; z-index: 70; object-fit: cover; pointer-events: none; background: #fff; box-shadow: 0 20px 40px -10px rgba(11, 13, 19, .4); } html.theme-optica .op-bump { animation: op-bump .5s var(--op-spring); } @keyframes op-bump { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } } /* Size guide modal (teleported; reuses the search overlay's panel motion) */ html.theme-optica .op-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(var(--op-ink) / .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-optica .op-modal-panel { width: min(760px, 100%); max-height: 86vh; padding: 24px; } html.theme-optica .op-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } html.theme-optica .op-modal-head h3 { font-family: var(--op-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-modal-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; } html.theme-optica .op-modal-tabs > button { height: 38px; padding-inline: 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgb(var(--op-ink-2)); transition: background-color .2s, color .2s; } html.theme-optica .op-modal-tabs > button.is-active { color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-unit { display: inline-flex; margin-inline-start: auto; padding: 3px; border-radius: 999px; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-unit button { height: 30px; padding-inline: 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-unit button.is-active { color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-size-table { overflow-x: auto; } html.theme-optica .op-size-table table { width: 100%; border-collapse: collapse; font-size: 14px; } html.theme-optica .op-size-table th { padding: 10px 14px 10px 0; text-align: start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--op-muted)); border-bottom: 1.5px solid rgb(var(--op-ink)); white-space: nowrap; } html.theme-optica .op-size-table td { padding: 12px 14px 12px 0; color: rgb(var(--op-ink-2)); border-bottom: 1px solid rgb(var(--op-line)); white-space: nowrap; } html.theme-optica .op-size-table td:first-child { font-weight: 600; color: rgb(var(--op-ink)); padding-inline-start: 10px; } html.theme-optica .op-size-table tr.is-mine td { background: rgb(var(--op-accent) / .08); } html.theme-optica .op-size-measure { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-size-measure img { max-width: 360px; margin-inline: auto; border-radius: 18px; } html.theme-optica .op-size-measure dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-size-measure dl { display: flex; flex-direction: column; gap: 12px; } /* 20. Checkout (optica/checkout/*) ----------------------------------------- Default checkout logic, Optica markup: ambient light, focus-in title, a progress rail, selectable tiles, in-place coupon + address drawer, a receipt-style summary with count-up total, mobile pay bar, placing veil. */ html.theme-optica:has(.op-co) { --op-tabbar-h: 0px; } html.theme-optica .op-co-shell { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(12px, 2vw, 24px) clamp(120px, 12vw, 96px); } html.theme-optica .op-co-ambient { position: absolute; inset: 0 0 auto; height: 720px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); } html.theme-optica .op-co-ambient .op-blob--a { width: 520px; height: 520px; right: -140px; top: -220px; opacity: .45; } html.theme-optica .op-co-ambient .op-blob--b { width: 380px; height: 380px; left: -160px; top: 120px; bottom: auto; opacity: .4; } html.theme-optica .op-co-ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--op-ink) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--op-ink) / .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); } /* Top: back + header */ html.theme-optica .op-co-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: clamp(20px, 3vw, 32px); } html.theme-optica .op-co-back { flex-shrink: 0; width: 48px; height: 48px; margin-top: 4px; } html.theme-optica .op-co-back:hover .op-icon { transform: translateX(-3px); } html.theme-optica .op-co-back .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-co-head { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html.theme-optica .op-co-title { display: flex; flex-wrap: wrap; gap: 0 .28em; font-family: var(--op-font-display); font-size: clamp(32px, 5vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -.04em; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-co-lede { max-width: 560px; font-size: 15px; line-height: 1.6; color: rgb(var(--op-muted)); } html.theme-optica .op-co-live { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(22 163 74); } html.theme-optica .op-co-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } /* Layout */ html.theme-optica .op-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1024px) { html.theme-optica .op-co { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; } } @media (min-width: 1280px) { html.theme-optica .op-co { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; } } html.theme-optica .op-co-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } html.theme-optica .op-co-side { align-self: stretch; } html.theme-optica .op-co-sticky { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 1024px) { html.theme-optica .op-co-sticky { position: sticky; top: 20px; transition: top .5s var(--op-ease); } html.theme-optica:has(.op-nav:not(.is-hidden)) .op-co-sticky { top: calc(var(--header-h, 76px) + 16px); } } /* Progress rail */ html.theme-optica .op-co-rail { --op-rail: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 10px; border-radius: 22px; background: rgb(var(--op-surface) / .75); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } html.theme-optica .op-co-rail::before, html.theme-optica .op-co-rail::after { content: ""; position: absolute; top: 33px; height: 2px; inset-inline: calc(100% / 6 + 10px); border-radius: 2px; background: rgb(var(--op-line)); } html.theme-optica .op-co-rail::after { background: linear-gradient(90deg, rgb(var(--op-accent)), rgb(56 189 248)); transform: scaleX(var(--op-rail)); transform-origin: left; transition: transform .9s var(--op-ease); } html[dir="rtl"].theme-optica .op-co-rail::after { transform-origin: right; } html.theme-optica .op-co-rail li { position: relative; z-index: 1; display: flex; justify-content: center; } html.theme-optica .op-co-rail button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; border-radius: 14px; } html.theme-optica .op-co-rail-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .4s var(--op-ease), color .3s, box-shadow .4s, transform .5s var(--op-spring); } html.theme-optica .op-co-rail-label { font-size: 12.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-muted)); transition: color .3s; } html.theme-optica .op-co-rail button:hover .op-co-rail-dot { transform: translateY(-2px); } html.theme-optica .op-co-rail .is-current .op-co-rail-dot { color: rgb(var(--op-accent)); box-shadow: inset 0 0 0 2px rgb(var(--op-accent)), 0 0 0 6px rgb(var(--op-accent) / .12); transform: scale(1.06); } html.theme-optica .op-co-rail .is-current .op-co-rail-label { color: rgb(var(--op-ink)); } html.theme-optica .op-co-rail .is-done .op-co-rail-dot { color: #fff; background: rgb(var(--op-accent)); box-shadow: 0 8px 18px -8px rgb(var(--op-accent) / .8); } html.theme-optica .op-co-rail .is-done .op-co-rail-label { color: rgb(var(--op-ink)); } /* Cards */ html.theme-optica .op-co-card { position: relative; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--op-radius); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .5s var(--op-ease); } html.theme-optica .op-co-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent) / .45); opacity: 0; transition: opacity .5s var(--op-ease); } html.theme-optica .op-co-card.is-done::after { opacity: 1; } html.theme-optica .op-co-card.is-attention { animation: op-co-nudge .6s var(--op-ease); box-shadow: 0 0 0 6px rgb(var(--op-danger) / .14), inset 0 0 0 1.5px rgb(var(--op-danger) / .6); } @keyframes op-co-nudge { 15%, 55% { transform: translateX(-7px); } 35%, 75% { transform: translateX(7px); } } html.theme-optica .op-co-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; } html.theme-optica .op-co-step { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; font-family: var(--op-font-display); font-weight: 600; color: #fff; background: rgb(var(--op-ink)); transition: background-color .4s var(--op-ease); } html.theme-optica .op-co-card.is-done .op-co-step { background: rgb(var(--op-accent)); } html.theme-optica .op-co-card-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; text-align: start; } html.theme-optica .op-co-card-title h2 { font-family: var(--op-font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-co-card-title p { font-size: 13px; color: rgb(var(--op-muted)); } /* Delivery / pick-up switch */ html.theme-optica .op-co-switch { --op-x: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgb(var(--op-bg-2)); } html.theme-optica .op-co-switch-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1); transform: translateX(calc(var(--op-x) * 100%)); transition: transform .55s var(--op-spring); } html[dir="rtl"].theme-optica .op-co-switch-glider { left: auto; right: 4px; transform: translateX(calc(var(--op-x) * -100%)); } html.theme-optica .op-co-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding-inline: 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-muted)); transition: color .3s; } html.theme-optica .op-co-switch button.is-on { color: rgb(var(--op-ink)); } @media (max-width: 639.98px) { html.theme-optica .op-co-switch { width: 100%; } } /* Selectable tiles (outlets, payment) */ html.theme-optica .op-co-tiles { display: grid; gap: 12px; } @media (min-width: 640px) { html.theme-optica .op-co-tiles--2 { grid-template-columns: 1fr 1fr; } } html.theme-optica .op-co-tile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; cursor: pointer; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .35s var(--op-ease), transform .45s var(--op-ease), background-color .35s; animation: op-co-rise .7s var(--op-ease) backwards; animation-delay: calc(var(--op-i, 0) * 70ms); } @keyframes op-co-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } } html.theme-optica .op-co-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(var(--op-accent) / .12) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; } html.theme-optica .op-co-tile:hover { transform: translateY(-2px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-ink) / .25); } html.theme-optica .op-co-tile:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(var(--op-accent) / .2), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-co-tile.is-on { background: rgb(var(--op-accent) / .05); box-shadow: 0 10px 30px -18px rgb(var(--op-accent) / .9), inset 0 0 0 2px rgb(var(--op-accent)); } html.theme-optica .op-co-tile.is-on::before { animation: op-co-sweep .9s var(--op-ease); } @keyframes op-co-sweep { to { transform: translateX(100%); } } html.theme-optica .op-co-tile-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); transition: color .3s, background-color .3s, transform .6s var(--op-spring); } html.theme-optica .op-co-tile.is-on .op-co-tile-icon { color: #fff; background: rgb(var(--op-accent)); transform: rotate(-8deg) scale(1.05); } html.theme-optica .op-co-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-co-tile-text strong { font-size: 15px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-co-tile-text small { font-size: 12.5px; line-height: 1.45; color: rgb(var(--op-muted)); } html.theme-optica .op-co-radio { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .3s, box-shadow .3s, color .2s; } html.theme-optica .op-co-radio .op-icon { transform: scale(0); transition: transform .45s var(--op-spring); } html.theme-optica :is(.op-co-tile, .op-co-addr-card).is-on .op-co-radio { color: #fff; background: rgb(var(--op-accent)); box-shadow: none; } html.theme-optica :is(.op-co-tile, .op-co-addr-card).is-on .op-co-radio .op-icon { transform: scale(1); } html.theme-optica .op-co-empty { padding: 16px; border-radius: 16px; font-size: 14px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); } /* Skeletons */ html.theme-optica .op-co-skel { display: block; border-radius: 18px; background: linear-gradient(90deg, rgb(var(--op-bg-2)) 25%, rgb(var(--op-bg)) 50%, rgb(var(--op-bg-2)) 75%); background-size: 200% 100%; animation: op-shimmer 1.4s linear infinite; } html.theme-optica .op-co-skel--tile { height: 78px; } html.theme-optica .op-co-skel--card { height: 132px; } /* Address picker */ html.theme-optica .op-co-addr + .op-co-toggle { margin-top: 16px; } html.theme-optica .op-co-addr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } html.theme-optica .op-co-addr-head h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-co-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding-inline: 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); } html.theme-optica .op-co-addr-grid { display: grid; gap: 12px; } @media (min-width: 640px) { html.theme-optica .op-co-addr-grid { grid-template-columns: 1fr 1fr; } } html.theme-optica .op-co-addr-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; cursor: pointer; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .35s var(--op-ease), transform .45s var(--op-ease), background-color .35s; animation: op-co-rise .7s var(--op-ease) backwards; animation-delay: calc(var(--op-i, 0) * 70ms); } html.theme-optica .op-co-addr-card:hover { transform: translateY(-2px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-ink) / .25); } html.theme-optica .op-co-addr-card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(var(--op-accent) / .2), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-co-addr-card.is-on { background: rgb(var(--op-accent) / .05); box-shadow: 0 10px 30px -18px rgb(var(--op-accent) / .9), inset 0 0 0 2px rgb(var(--op-accent)); } html.theme-optica .op-co-addr-card.is-flash { animation: op-co-flash 1.3s var(--op-ease); } @keyframes op-co-flash { 0% { box-shadow: 0 0 0 0 rgb(var(--op-accent) / .5), inset 0 0 0 2px rgb(var(--op-accent)); } 100% { box-shadow: 0 0 0 18px rgb(var(--op-accent) / 0), inset 0 0 0 2px rgb(var(--op-accent)); } } html.theme-optica .op-co-addr-card .op-co-radio { margin-top: 1px; } html.theme-optica .op-co-addr-body { flex: 1; min-width: 0; padding-inline-end: 30px; } html.theme-optica .op-co-addr-name { display: block; font-size: 15px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-co-addr-line { margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgb(var(--op-muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html.theme-optica .op-co-addr-phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-addr-edit { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: rgb(var(--op-muted)); transition: background-color .2s, color .2s, transform .3s var(--op-ease); } html.theme-optica .op-co-addr-edit:hover { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transform: rotate(-12deg); } html.theme-optica .op-co-addr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 16px; border-radius: 18px; text-align: center; color: rgb(var(--op-ink)); border: 1.5px dashed rgb(var(--op-line)); transition: border-color .3s, background-color .3s, transform .45s var(--op-ease); } html.theme-optica .op-co-addr-add:hover { border-color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .04); transform: translateY(-2px); } html.theme-optica .op-co-addr-add strong { font-size: 14px; font-weight: 600; } html.theme-optica .op-co-addr-add small { font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-co-addr-add-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 999px; color: #fff; background: rgb(var(--op-ink)); transition: transform .6s var(--op-spring), background-color .3s; } html.theme-optica .op-co-addr-add:hover .op-co-addr-add-icon { transform: rotate(90deg); background: rgb(var(--op-accent)); } /* Billing switch */ html.theme-optica .op-co-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; text-align: start; font-size: 14px; font-weight: 500; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); transition: background-color .3s; } html.theme-optica .op-co-toggle:hover { background: rgb(var(--op-bg-2)); } html.theme-optica .op-co-toggle-track { flex-shrink: 0; position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgb(var(--op-line)); transition: background-color .35s var(--op-ease); } html.theme-optica .op-co-toggle-track i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgb(11 13 19 / .2); transition: transform .45s var(--op-spring); } html.theme-optica .op-co-toggle[aria-checked="true"] .op-co-toggle-track { background: rgb(var(--op-accent)); } html.theme-optica .op-co-toggle[aria-checked="true"] .op-co-toggle-track i { transform: translateX(18px); } html[dir="rtl"].theme-optica .op-co-toggle[aria-checked="true"] .op-co-toggle-track i { transform: translateX(-18px); } html[dir="rtl"].theme-optica .op-co-toggle-track i { left: auto; right: 3px; } /* Collapse: grid-rows trick animates to the content's real height. */ html.theme-optica .op-co-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--op-ease), opacity .4s; opacity: 0; } html.theme-optica .op-co-collapse > div { min-height: 0; overflow: hidden; } html.theme-optica .op-co-collapse.is-open { grid-template-rows: 1fr; opacity: 1; } html.theme-optica .op-co-toggle + .op-co-collapse.is-open > div { padding-top: 18px; } /* Bag */ html.theme-optica .op-co-bag { padding: 0; overflow: clip; } html.theme-optica .op-co-bag-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: clamp(18px, 2.4vw, 26px); text-align: start; transition: background-color .3s; } html.theme-optica .op-co-bag-head:hover { background: rgb(var(--op-bg) / .6); } html.theme-optica .op-co-bag-head .op-co-card-title { min-width: 0; } html.theme-optica .op-co-thumbs { display: flex; flex-shrink: 0; } html.theme-optica .op-co-thumb { width: 42px; border-radius: 12px; overflow: hidden; background: rgb(var(--op-bg-2)); box-shadow: 0 0 0 2.5px rgb(var(--op-surface)); transition: transform .45s var(--op-spring); } html.theme-optica .op-co-thumb + .op-co-thumb { margin-inline-start: -12px; } html.theme-optica .op-co-bag-head:hover .op-co-thumb:nth-child(1) { transform: rotate(-8deg) translateX(-4px); } html.theme-optica .op-co-bag-head:hover .op-co-thumb:nth-child(3) { transform: rotate(8deg) translateX(4px); } html.theme-optica .op-co-thumb--more { display: grid; place-items: center; height: 42px; font-size: 11.5px; font-weight: 700; color: rgb(var(--op-ink-2)); } @media (max-width: 479.98px) { html.theme-optica .op-co-thumbs { display: none; } } html.theme-optica .op-co-caret-orb { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgb(var(--op-bg-2)); } html.theme-optica .op-co-caret { transition: transform .5s var(--op-ease); } html.theme-optica .op-co-bag.is-open .op-co-caret, html.theme-optica .op-co-coupon.is-open .op-co-caret { transform: rotate(180deg); } html.theme-optica .op-co-lines { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-co-line { display: flex; gap: 16px; padding: 18px clamp(18px, 2.4vw, 26px); } html.theme-optica .op-co-line + .op-co-line { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-co-line-media { position: relative; flex-shrink: 0; width: 76px; } html.theme-optica .op-co-line-media > :first-child { border-radius: 16px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #fff, rgb(var(--op-bg-2))); } html.theme-optica .op-co-line-media em { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding-inline: 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 0 0 2.5px rgb(var(--op-surface)); } html.theme-optica .op-co-line-body { flex: 1; min-width: 0; } html.theme-optica .op-co-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } html.theme-optica .op-co-line-top strong { font-size: 15px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-co-line-price { flex-shrink: 0; font-family: var(--op-font-display); font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-optica .op-co-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-co-line-meta del { color: rgb(var(--op-muted) / .7); } html.theme-optica .op-co-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } html.theme-optica .op-co-qty { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-co-qty button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(var(--op-ink)); transition: background-color .2s, transform .3s var(--op-ease); } html.theme-optica .op-co-qty button:hover:not(:disabled) { background: rgb(var(--op-bg-2)); } html.theme-optica .op-co-qty button:active:not(:disabled) { transform: scale(.88); } html.theme-optica .op-co-qty button:disabled { opacity: .35; cursor: not-allowed; } html.theme-optica .op-co-qty input { width: 36px; text-align: center; font-size: 14px; font-weight: 600; background: transparent; -moz-appearance: textfield; } html.theme-optica .op-co-qty input::-webkit-inner-spin-button, html.theme-optica .op-co-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } html.theme-optica .op-co-line-remove { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: rgb(var(--op-muted)); transition: color .2s, background-color .2s; } html.theme-optica .op-co-line-remove:hover { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } @media (max-width: 479.98px) { html.theme-optica .op-co-line-remove span { display: none; } } /* Receipt: coupon + summary in one card with a perforated seam */ /* The notches are real holes: each half is masked, so the page (gradient + grid) shows through. A box-shadow would be clipped by the mask, so the card's depth and hairline come from drop-shadow filters, which also trace the notches. */ html.theme-optica .op-co-receipt { --op-notch: 11px; position: relative; filter: drop-shadow(0 0 .5px rgb(var(--op-ink) / .28)) drop-shadow(0 14px 22px rgb(var(--op-ink) / .09)); } html.theme-optica .op-co-receipt > .op-co-coupon, html.theme-optica .op-co-receipt .op-co-sum { background: rgb(var(--op-surface)); } html.theme-optica .op-co-coupon { position: relative; padding: 8px; border-radius: var(--op-radius) var(--op-radius) 0 0; -webkit-mask: radial-gradient(circle var(--op-notch) at left bottom, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--op-notch) at right bottom, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--op-notch) at left bottom, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--op-notch) at right bottom, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) right / 51% 100% no-repeat; } html.theme-optica .op-co-receipt .op-co-sum { border-radius: 0 0 var(--op-radius) var(--op-radius); -webkit-mask: radial-gradient(circle var(--op-notch) at left top, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--op-notch) at right top, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--op-notch) at left top, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--op-notch) at right top, #0000 calc(var(--op-notch) - .5px), #000 var(--op-notch)) right / 51% 100% no-repeat; } /* Perforation between the notches. */ html.theme-optica .op-co-coupon::after { content: ""; position: absolute; left: calc(var(--op-notch) + 8px); right: calc(var(--op-notch) + 8px); bottom: 0; border-bottom: 2px dashed rgb(var(--op-line)); } html.theme-optica .op-co-coupon-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 18px; text-align: start; transition: background-color .3s; } html.theme-optica button.op-co-coupon-row:hover { background: rgb(var(--op-bg)); } html.theme-optica .op-co-coupon-orb { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .6s var(--op-spring); } html.theme-optica button.op-co-coupon-row:hover .op-co-coupon-orb { transform: rotate(-14deg) scale(1.06); } html.theme-optica .op-co-coupon-orb.is-good { color: #fff; background: rgb(22 163 74); animation: op-co-stamp .6s var(--op-spring); } @keyframes op-co-stamp { from { transform: scale(0) rotate(-30deg); } } html.theme-optica .op-co-coupon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } html.theme-optica .op-co-coupon-text strong { font-size: 14.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-co-coupon-text code { margin-inline-start: 4px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgb(22 163 74); background: rgb(22 163 74 / .1); } html.theme-optica .op-co-coupon-text small { font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-co-coupon-remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--op-muted)); transition: color .2s, background-color .2s; } html.theme-optica .op-co-coupon-remove:hover { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } html.theme-optica .op-co-coupon-form { display: flex; gap: 8px; padding: 6px 10px 4px; } html.theme-optica .op-co-coupon-form input { flex: 1; min-width: 0; height: 46px; padding-inline: 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s; } html.theme-optica .op-co-coupon-form input::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgb(var(--op-muted)); } html.theme-optica .op-co-coupon-form input:focus { outline: none; box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-co-coupon-form input.is-invalid { box-shadow: 0 0 0 4px rgb(var(--op-danger) / .12), inset 0 0 0 1.5px rgb(var(--op-danger)); animation: op-co-nudge .45s var(--op-ease); } html.theme-optica .op-co-coupon-error { padding: 6px 16px 0; font-size: 12.5px; color: rgb(var(--op-danger)); } html.theme-optica .op-co-tickets { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding: 10px; } html.theme-optica .op-co-ticket { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; text-align: start; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s, transform .35s var(--op-ease); } html.theme-optica .op-co-ticket:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-co-ticket-code { flex-shrink: 0; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); border: 1px dashed rgb(var(--op-accent) / .5); } html.theme-optica .op-co-ticket-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-ticket-text small { color: rgb(var(--op-muted)); font-size: 11.5px; } html.theme-optica .op-co-ticket-cta { font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--op-accent)); } /* Summary */ html.theme-optica .op-co-sum { padding: 18px 20px 20px; } html.theme-optica .op-co-meter { margin-bottom: 16px; padding: 12px 14px 16px; border-radius: 16px; background: rgb(var(--op-bg)); transition: background-color .5s; } html.theme-optica .op-co-meter.is-done { background: rgb(22 163 74 / .08); } html.theme-optica .op-co-meter-text { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-meter.is-done .op-co-meter-text { color: rgb(21 128 61); font-weight: 600; } html.theme-optica .op-co-meter-track { position: relative; height: 6px; margin-top: 12px; border-radius: 999px; background: rgb(var(--op-line)); } html.theme-optica .op-co-meter-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--op-accent)), rgb(56 189 248)); transform-origin: left; transition: transform .9s var(--op-ease); } html.theme-optica .op-co-meter.is-done .op-co-meter-fill { background: rgb(22 163 74); } html.theme-optica .op-co-meter-truck { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-inline-start: -13px; border-radius: 999px; color: #fff; background: rgb(var(--op-ink)); transform: translateY(-50%); box-shadow: 0 0 0 3px rgb(var(--op-surface)); transition: inset-inline-start .9s var(--op-ease), background-color .4s; } html.theme-optica .op-co-meter.is-done .op-co-meter-truck { background: rgb(22 163 74); } html.theme-optica .op-co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } html.theme-optica .op-co-sum-head h3 { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-transform: capitalize; } html.theme-optica .op-co-rows { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-co-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; } html.theme-optica .op-co-row dt { text-transform: capitalize; color: rgb(var(--op-muted)); } html.theme-optica .op-co-row dd { font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); overflow: hidden; } html.theme-optica .op-co-row dd > span { display: inline-block; } html.theme-optica .op-co-row.is-good dd, html.theme-optica .op-co-free { color: rgb(22 163 74); text-transform: capitalize; } html.theme-optica .op-co-row .is-muted { color: rgb(var(--op-muted)); } html.theme-optica .op-co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-co-total span { font-size: 14px; font-weight: 600; text-transform: capitalize; } html.theme-optica .op-co-total strong { font-family: var(--op-font-display); font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-optica .op-co-saved { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: rgb(21 128 61); background: rgb(22 163 74 / .08); } /* Place order */ html.theme-optica .op-co-place { width: 100%; height: 60px; justify-content: flex-start; padding-inline: 22px 8px; font-size: 16px; } html.theme-optica .op-co-place > span:nth-child(2) { flex: 1; text-align: start; } html.theme-optica .op-co-place-amt { padding: 0 14px; height: 44px; display: inline-flex; align-items: center; border-radius: 999px; font-variant-numeric: tabular-nums; background: rgb(255 255 255 / .14); } html.theme-optica .op-co-place.is-ready { animation: op-co-glow 2.6s ease-in-out infinite; } html.theme-optica .op-co-place.is-ready::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%); background-size: 250% 100%; animation: op-sheen 3s linear infinite; pointer-events: none; } @keyframes op-co-glow { 50% { box-shadow: 0 18px 44px -12px rgb(var(--op-accent) / .75), 0 0 0 6px rgb(var(--op-accent) / .1); } } html.theme-optica .op-co-place.is-placing { justify-content: center; } html.theme-optica .op-co-place.is-placing > span:nth-child(2) { flex: 0 1 auto; } html.theme-optica .op-co-spinner { flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: op-spin-plain .7s linear infinite; } html.theme-optica .op-co-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; color: rgb(var(--op-muted)); } html.theme-optica .op-co-hint .op-icon { animation: op-co-bob 1.6s ease-in-out infinite; } html.theme-optica .op-co-hint.is-ready { color: rgb(21 128 61); } html.theme-optica .op-co-hint.is-ready .op-icon { animation: none; } @keyframes op-co-bob { 50% { transform: translateY(-3px); } } html.theme-optica .op-co-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; } html.theme-optica .op-co-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; text-align: center; font-size: 11.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-co-trust .op-icon { color: rgb(var(--op-accent)); } /* Mobile pay bar */ html.theme-optica .op-co-bar { display: none; } @media (max-width: 1023.98px) { html.theme-optica .op-co-side .op-co-place, html.theme-optica .op-co-side .op-co-hint { display: none; } html.theme-optica .op-co-bar { position: fixed; z-index: 22; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(620px, calc(100% - 24px)); padding: 8px 8px 8px 18px; border-radius: 22px; background: rgb(var(--op-surface) / .9); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); animation: op-co-bar-in .7s var(--op-ease) .4s backwards; } html.theme-optica .op-co-bar-total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } html.theme-optica .op-co-bar-total small { font-size: 11.5px; text-transform: capitalize; color: rgb(var(--op-muted)); } html.theme-optica .op-co-bar-total strong { font-family: var(--op-font-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-optica .op-co-bar.is-ready .op-btn { animation: op-co-glow 2.6s ease-in-out infinite; } } @keyframes op-co-bar-in { from { transform: translate(-50%, 140%); opacity: 0; } } /* Address drawer (teleported to body) */ html.theme-optica .op-co-layer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; } html.theme-optica .op-co-backdrop { position: absolute; inset: 0; background: rgb(var(--op-ink) / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.theme-optica .op-co-drawer { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3); } @media (min-width: 640px) { html.theme-optica .op-co-drawer { height: calc(100% - 24px); margin: 12px; border-radius: 28px; overflow: hidden; } } html.theme-optica .op-co-drawer-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 20px 18px 22px; border-bottom: 1px solid rgb(var(--op-line)); } html.theme-optica .op-co-drawer-head > div { flex: 1; min-width: 0; } html.theme-optica .op-co-drawer-head h3 { font-family: var(--op-font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-transform: capitalize; } html.theme-optica .op-co-drawer-head p { font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-co-drawer-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-co-drawer-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; } html.theme-optica .op-co-drawer-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--op-accent)), rgb(56 189 248)); transform-origin: left; transition: transform .6s var(--op-ease); } html.theme-optica .op-co-drawer-form { flex: 1; min-height: 0; display: flex; flex-direction: column; } html.theme-optica .op-co-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; } html.theme-optica .op-co-drawer-body > * { flex-shrink: 0; } html.theme-optica .op-co-drawer-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--op-line)); background: rgb(var(--op-surface)); } @media (max-width: 479.98px) { html.theme-optica .op-co-drawer-foot .op-btn { flex: 1; } } html.theme-optica .op-co-label { position: relative; padding: 16px 18px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgb(var(--op-accent)), rgb(var(--op-ink)) 70%); box-shadow: 0 18px 40px -20px rgb(var(--op-ink) / .7); overflow: hidden; } html.theme-optica .op-co-label::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .14) 50%, transparent 65%); background-size: 250% 100%; animation: op-sheen 4s linear infinite; pointer-events: none; } html.theme-optica .op-co-label-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; } html.theme-optica .op-co-label-top span { display: inline-flex; align-items: center; gap: 6px; } html.theme-optica .op-co-label-top em { font-style: normal; font-variant-numeric: tabular-nums; } html.theme-optica .op-co-label strong { display: block; font-family: var(--op-font-display); font-size: 18px; font-weight: 600; text-transform: capitalize; } html.theme-optica .op-co-label p { font-size: 13px; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 40px; } html.theme-optica .op-co-label-stamp { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: rgb(var(--op-ink)); background: #fff; transform: scale(0) rotate(-40deg); transition: transform .6s var(--op-spring); } html.theme-optica .op-co-label.is-complete .op-co-label-stamp { transform: none; } html.theme-optica .op-co-set legend { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-co-set legend span { font-family: var(--op-font-display); color: rgb(var(--op-accent)); } html.theme-optica .op-co-grid { display: grid; gap: 14px; } @media (min-width: 480px) { html.theme-optica .op-co-grid { grid-template-columns: 1fr 1fr; } html.theme-optica .op-co-span { grid-column: 1 / -1; } } html.theme-optica .op-co-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html.theme-optica .op-co-field-label { font-size: 12.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-field-label.is-req::after { content: " *"; color: rgb(var(--op-danger)); } html.theme-optica .op-co-field-label em { font-style: normal; font-weight: 400; text-transform: lowercase; color: rgb(var(--op-muted)); } html.theme-optica .op-co-field input, html.theme-optica .op-co-select select, html.theme-optica .op-co-phone { width: 100%; height: 48px; padding-inline: 14px; border-radius: 14px; font-size: 15px; color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s, background-color .25s; } html.theme-optica .op-co-field input:focus, html.theme-optica .op-co-select select:focus, html.theme-optica .op-co-phone:focus-within { outline: none; background: rgb(var(--op-surface)); box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-co-field.is-filled input, html.theme-optica .op-co-field.is-filled select, html.theme-optica .op-co-field.is-filled .op-co-phone { background: rgb(var(--op-surface)); } html.theme-optica .op-co-field.has-error input, html.theme-optica .op-co-field.has-error select, html.theme-optica .op-co-field.has-error .op-co-phone { box-shadow: 0 0 0 4px rgb(var(--op-danger) / .1), inset 0 0 0 1.5px rgb(var(--op-danger)); } html.theme-optica .op-co-field small { font-size: 12px; color: rgb(var(--op-danger)); animation: op-co-rise .35s var(--op-ease); } html.theme-optica .op-co-select { position: relative; display: block; } html.theme-optica .op-co-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; text-overflow: ellipsis; cursor: pointer; } html.theme-optica .op-co-select select:disabled { opacity: .55; cursor: not-allowed; } html.theme-optica .op-co-select .op-icon { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); pointer-events: none; color: rgb(var(--op-muted)); } html.theme-optica .op-co-phone { display: flex; align-items: center; padding-inline: 0; } html.theme-optica .op-co-phone input { height: 100%; flex: 1; min-width: 0; background: transparent !important; box-shadow: none !important; } html.theme-optica .op-co-code { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 100%; padding-inline: 14px 10px; font-size: 14px; font-weight: 600; border-inline-end: 1px solid rgb(var(--op-line)); } html.theme-optica .op-co-code select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* Placing veil */ html.theme-optica .op-co-veil { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgb(var(--op-bg) / .7); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } html.theme-optica .op-co-veil-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 36px; border-radius: 28px; text-align: center; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-3); animation: op-co-rise .6s var(--op-ease); } html.theme-optica .op-co-veil-card strong { font-family: var(--op-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-co-veil-card small { font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-co-veil-lens { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 999px; color: rgb(var(--op-accent)); } html.theme-optica .op-co-veil-lens::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from var(--op-spin), rgb(var(--op-accent)), rgb(56 189 248), transparent 70%, rgb(var(--op-accent))); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: op-spin 1.1s linear infinite; } html.theme-optica .op-co-veil-lens::after { content: ""; position: absolute; inset: 12px; border-radius: inherit; background: rgb(var(--op-accent) / .1); animation: op-pulse 1.6s ease-in-out infinite; } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .op-co-page-enter-active, .op-co-page-leave-active { transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), filter .4s ease; } .op-co-page-enter-from { opacity: 0; transform: translateY(14px); filter: blur(6px); } .op-co-page-leave-to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } .op-co-fade-enter-active, .op-co-fade-leave-active { transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); } .op-co-fade-enter-from, .op-co-fade-leave-to { opacity: 0; transform: translateY(4px); } .op-co-tick-enter-active, .op-co-tick-leave-active { transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); } .op-co-tick-enter-from { opacity: 0; transform: translateY(70%); } .op-co-tick-leave-to { opacity: 0; transform: translateY(-70%); } .op-co-pop-enter-active { transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .2s; } .op-co-pop-leave-active { transition: transform .15s ease, opacity .15s; } .op-co-pop-enter-from, .op-co-pop-leave-to { transform: scale(0); opacity: 0; } .op-co-list-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .op-co-list-enter-active { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); } .op-co-list-leave-active { transition: opacity .3s ease, transform .35s ease; position: absolute; } .op-co-list-enter-from { opacity: 0; transform: scale(.94); } .op-co-list-leave-to { opacity: 0; transform: translateX(30px); } .op-co-drawer-enter-active, .op-co-drawer-leave-active { transition: opacity .35s ease; } .op-co-drawer-enter-active .op-co-drawer, .op-co-drawer-leave-active .op-co-drawer { transition: transform .55s cubic-bezier(.22,1,.36,1); } .op-co-drawer-enter-from, .op-co-drawer-leave-to { opacity: 0; } .op-co-drawer-enter-from .op-co-drawer, .op-co-drawer-leave-to .op-co-drawer { transform: translateX(105%); } [dir="rtl"] .op-co-drawer-enter-from .op-co-drawer, [dir="rtl"] .op-co-drawer-leave-to .op-co-drawer { transform: translateX(-105%); } /* 21. Account overview (optica/account/overview/OverviewComponent) --------- A small landing inside the account shell: hero + wallet card, count-up stats, the latest order's journey, recent orders and shortcuts. Layout keys off the component's own width (container queries) because the account sidebar decides how much room it gets, not the viewport. */ html.theme-optica .op-ov { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); } @media (max-width: 1023.98px) { html.theme-optica .op-ov { padding-bottom: 24px; } } html.theme-optica .op-ov .is-info { --op-tone: var(--op-accent); } html.theme-optica .op-ov .is-good { --op-tone: 22 163 74; } html.theme-optica .op-ov .is-warn { --op-tone: 217 119 6; } html.theme-optica .op-ov .is-crit { --op-tone: var(--op-danger); } /* Hero */ html.theme-optica .op-ov-hero { --op-hx: 50%; --op-hy: 0%; position: relative; isolation: isolate; overflow: clip; display: grid; gap: 28px; align-items: center; padding: clamp(22px, 4.5cqi, 40px); border-radius: 32px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } @container (min-width: 700px) { html.theme-optica .op-ov-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 36px; } } html.theme-optica .op-ov-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 90% at 100% 0%, rgb(var(--op-accent) / .10), transparent 60%); } html.theme-optica .op-ov-hero .op-blob--a { width: 380px; height: 380px; right: -120px; top: -160px; } html.theme-optica .op-ov-hero .op-blob--b { width: 300px; height: 300px; left: -120px; bottom: -180px; } html.theme-optica .op-ov-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--op-ink) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--op-ink) / .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(60% 80% at 75% 30%, #000, transparent); mask-image: radial-gradient(60% 80% at 75% 30%, #000, transparent); } html.theme-optica .op-ov-hero-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(360px circle at var(--op-hx) var(--op-hy), rgb(var(--op-accent) / .14), transparent 70%); } html.theme-optica .op-ov-hero.is-lit .op-ov-hero-glow { opacity: 1; } html.theme-optica .op-ov-hello { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-optica .op-ov-who { display: flex; align-items: center; gap: 14px; } html.theme-optica .op-ov-avatar { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 999px; font-family: var(--op-font-display); font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(135deg, rgb(var(--op-accent)), rgb(56 189 248)); box-shadow: 0 10px 24px -10px rgb(var(--op-accent) / .8); } html.theme-optica .op-ov-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } html.theme-optica .op-ov-avatar-ring { position: absolute; inset: -6px; border-radius: inherit; background: conic-gradient(from var(--op-spin), rgb(var(--op-accent)), rgb(56 189 248) 35%, transparent 60%, rgb(var(--op-accent))); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: op-spin 4s linear infinite; } html.theme-optica .op-ov-greet { padding: 6px 12px 6px 10px; border-radius: 999px; color: rgb(var(--op-ink-2)); letter-spacing: .08em; background: rgb(var(--op-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ov-title { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(32px, 6.4cqi, 56px); line-height: 1.02; letter-spacing: -.045em; color: rgb(var(--op-ink)); text-transform: capitalize; overflow-wrap: anywhere; } html.theme-optica .op-ov-title > span:last-child { padding-bottom: .06em; background: linear-gradient(100deg, rgb(var(--op-accent)) 0%, rgb(56 189 248) 50%, rgb(var(--op-accent)) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: op-focus-in 1.2s var(--op-ease) both, op-sheen 6s linear infinite; animation-delay: calc(var(--op-d, 0) * 120ms + 150ms), 0s; } html.theme-optica .op-ov-lede { max-width: 440px; font-size: 15px; line-height: 1.6; color: rgb(var(--op-ink-2)); } html.theme-optica .op-ov-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } html.theme-optica .op-ov-ctas .op-btn--ghost .op-icon { color: rgb(var(--op-accent)); } /* Wallet card */ html.theme-optica .op-ov-wallet-wrap { perspective: 1000px; width: 100%; max-width: 360px; justify-self: center; } @keyframes op-ov-hover { 50% { translate: 0 -8px; } } html.op-motion.theme-optica .op-ov-wallet-wrap.op-intro { animation: op-intro 1s var(--op-ease) both, op-ov-hover 6s ease-in-out 1.4s infinite; animation-delay: calc(var(--op-d, 0) * 110ms + 150ms), 1.4s; } html.theme-optica .op-ov-wallet { --op-rx: 0deg; --op-ry: 0deg; --op-gx: 50%; --op-gy: 50%; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; aspect-ratio: 1.586; padding: clamp(18px, 5cqi, 24px); border-radius: 24px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-accent) / .85), transparent 55%), radial-gradient(90% 90% at 0% 100%, rgb(56 189 248 / .45), transparent 60%), rgb(var(--op-ink)); box-shadow: 0 30px 60px -24px rgb(var(--op-ink) / .55), inset 0 0 0 1px rgb(255 255 255 / .12); transform: rotateX(var(--op-rx)) rotateY(var(--op-ry)); transform-style: preserve-3d; transition: transform .7s var(--op-ease), box-shadow .4s; } html.theme-optica .op-ov-wallet.is-tilting { transition: transform .12s linear, box-shadow .4s; box-shadow: 0 40px 70px -24px rgb(var(--op-accent) / .55), inset 0 0 0 1px rgb(255 255 255 / .18); } html.theme-optica .op-ov-wallet-glare { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--op-gx) var(--op-gy), rgb(255 255 255 / .25), transparent 60%); } html.theme-optica .op-ov-wallet.is-tilting .op-ov-wallet-glare { opacity: 1; } html.theme-optica .op-ov-wallet-sheen { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .18) 50%, transparent 65%); transform: translateX(-120%); animation: op-shine 5s ease-in-out 2s infinite; } html.theme-optica .op-ov-wallet-top { display: flex; align-items: center; justify-content: space-between; opacity: .9; } html.theme-optica .op-ov-wallet-chip { width: 38px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #f5d98b, #c9a24a); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); position: relative; } html.theme-optica .op-ov-wallet-chip::before, html.theme-optica .op-ov-wallet-chip::after { content: ""; position: absolute; inset-inline: 6px; height: 1px; background: rgb(0 0 0 / .25); top: 9px; } html.theme-optica .op-ov-wallet-chip::after { top: 18px; } html.theme-optica .op-ov-wallet-label { margin-top: auto; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .65); } html.theme-optica .op-ov-wallet-amount { display: block; min-height: 1.15em; font-family: var(--op-font-display); font-weight: 600; font-size: clamp(26px, 7cqi, 34px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-optica .op-ov-wallet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); } html.theme-optica .op-ov-wallet-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-ov-wallet-rings { display: flex; flex-shrink: 0; } html.theme-optica .op-ov-wallet-rings i { width: 24px; height: 24px; border-radius: 999px; border: 2px solid rgb(255 255 255 / .75); } html.theme-optica .op-ov-wallet-rings i + i { margin-inline-start: -8px; border-color: rgb(56 189 248 / .9); } /* Skeleton */ html.theme-optica .op-ov-skel { display: inline-block; width: 3ch; height: .8em; vertical-align: middle; border-radius: 8px; background: linear-gradient(90deg, rgb(var(--op-bg-2)), rgb(var(--op-line)), rgb(var(--op-bg-2))) 0 0 / 200% 100%; animation: op-skel-sweep 1.3s linear infinite; } html.theme-optica .op-ov-skel--light { width: 7ch; background-image: linear-gradient(90deg, rgb(255 255 255 / .12), rgb(255 255 255 / .3), rgb(255 255 255 / .12)); } /* Stats */ html.theme-optica .op-ov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2cqi, 16px); } html.theme-optica .op-ov-stat { --op-rx: 0deg; --op-ry: 0deg; position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: clamp(14px, 3cqi, 20px); border-radius: 22px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transform: perspective(700px) rotateX(var(--op-rx)) rotateY(var(--op-ry)) translateY(0); transition: transform .5s var(--op-ease), box-shadow .4s; } html.theme-optica .op-ov-stat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px; background: conic-gradient(from var(--op-spin), rgb(var(--op-tone)), transparent 30%, transparent 70%, rgb(var(--op-tone))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; animation: op-spin 3s linear infinite; } html.theme-optica .op-ov-stat:hover { box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ov-stat:hover::before { opacity: 1; } html.theme-optica .op-ov-stat-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: clamp(8px, 3cqi, 18px); border-radius: 13px; color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ov-stat:hover .op-ov-stat-icon { transform: scale(1.1) rotate(-6deg); background: rgb(var(--op-tone)); color: #fff; } html.theme-optica .op-ov-stat-num { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(26px, 5.4cqi, 38px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); } html.theme-optica .op-ov-stat-label { font-size: 13px; font-weight: 500; color: rgb(var(--op-muted)); text-transform: capitalize; } html.theme-optica .op-ov-stat-go { position: absolute; top: 18px; inset-inline-end: 18px; color: rgb(var(--op-muted)); transition: transform .4s var(--op-ease), color .3s; } html.theme-optica .op-ov-stat:hover .op-ov-stat-go { color: rgb(var(--op-tone)); transform: translate(3px, -3px); } html.theme-optica .op-ov-ring { position: absolute; top: 14px; inset-inline-end: 14px; width: 48px; height: 48px; display: grid; place-items: center; } html.theme-optica .op-ov-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } html.theme-optica .op-ov-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; } html.theme-optica .op-ov-ring-track { stroke: rgb(var(--op-tone) / .14); } html.theme-optica .op-ov-ring-fill { stroke: rgb(var(--op-tone)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--op-share, 0)); transition: stroke-dashoffset 1.6s var(--op-ease) .3s; } html.theme-optica .op-ov-ring em { font-style: normal; font-size: 11px; font-weight: 700; color: rgb(var(--op-tone)); font-variant-numeric: tabular-nums; } @container (max-width: 519.98px) { html.theme-optica .op-ov-stat-go { display: none; } html.theme-optica .op-ov-ring { width: 36px; height: 36px; top: 12px; inset-inline-end: 10px; } html.theme-optica .op-ov-ring em { font-size: 9px; } html.theme-optica .op-ov-stat-icon { width: 34px; height: 34px; border-radius: 11px; } html.theme-optica .op-ov-stat-label { font-size: 12px; line-height: 1.3; } } /* Latest order + journey */ html.theme-optica .op-ov-latest { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: clamp(18px, 4cqi, 28px); border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ov-latest::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, rgb(var(--op-tone)), rgb(56 189 248), rgb(var(--op-tone))); background-size: 200% 100%; animation: op-sheen 4s linear infinite; } html.theme-optica .op-ov-latest::after { content: ""; position: absolute; width: 320px; height: 320px; top: -200px; inset-inline-end: -120px; z-index: 0; border-radius: 999px; background: rgb(var(--op-tone) / .08); filter: blur(30px); pointer-events: none; } html.theme-optica .op-ov-latest > * { position: relative; z-index: 1; } html.theme-optica .op-ov-latest-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; } html.theme-optica .op-ov-latest-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html.theme-optica .op-ov-serial-row { display: flex; align-items: center; gap: 8px; } html.theme-optica .op-ov-serial { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(22px, 4cqi, 28px); letter-spacing: -.03em; color: rgb(var(--op-ink)); transition: color .2s; } html.theme-optica .op-ov-serial:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-ov-copy { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); transition: color .2s, background-color .2s, transform .3s var(--op-ease); } html.theme-optica .op-ov-copy:hover { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-ov-copy:active { transform: scale(.88); } html.theme-optica .op-ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-ov-dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; } html.theme-optica .op-ov-latest-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } html.theme-optica .op-ov-latest-amount > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-ov-latest-amount strong { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(22px, 4cqi, 28px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } @container (max-width: 519.98px) { html.theme-optica .op-ov-latest-amount { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; } } html.theme-optica .op-ov-journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } html.theme-optica .op-ov-journey-rail { position: absolute; top: 19px; inset-inline: 12.5%; height: 3px; border-radius: 999px; background: rgb(var(--op-line)); overflow: hidden; } html.theme-optica .op-ov-journey-rail span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--op-tone)), rgb(56 189 248)); transform-origin: left; transform: scaleX(calc(var(--op-step, 0) / 3)); transition: transform 1.4s var(--op-ease) .35s; } html.theme-optica[dir="rtl"] .op-ov-journey-rail span { transform-origin: right; } html.op-motion.theme-optica .op-ov-latest.op-reveal:not(.is-in) .op-ov-journey-rail span { transform: scaleX(0); } html.theme-optica .op-ov-node { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; } html.theme-optica .op-ov-node-dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 2px rgb(var(--op-line)); transition: background-color .5s, color .5s, box-shadow .5s, transform .6s var(--op-spring); transition-delay: calc(.35s + var(--op-i, 0) * .35s); } html.theme-optica .op-ov-node.is-done .op-ov-node-dot { color: #fff; background: rgb(var(--op-tone)); box-shadow: 0 8px 18px -8px rgb(var(--op-tone) / .9); } html.theme-optica .op-ov-node.is-now .op-ov-node-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--op-tone)); z-index: -1; animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.op-motion.theme-optica .op-ov-latest.op-reveal:not(.is-in) .op-ov-node.is-done .op-ov-node-dot { color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 2px rgb(var(--op-line)); transform: scale(.8); } html.theme-optica .op-ov-node em { font-style: normal; font-size: 12px; font-weight: 600; color: rgb(var(--op-muted)); text-transform: capitalize; } html.theme-optica .op-ov-node.is-done em { color: rgb(var(--op-ink)); } html.theme-optica .op-ov-halt { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); } html.theme-optica .op-ov-latest-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px dashed rgb(var(--op-line)); } @container (max-width: 519.98px) { html.theme-optica .op-ov-latest-actions .op-btn { flex: 1 1 auto; } } /* Pills */ html.theme-optica .op-ov-status, html.theme-optica .op-ov-pay { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-transform: capitalize; } html.theme-optica .op-ov-status { color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); } html.theme-optica .op-ov-status i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } html.theme-optica .op-ov-order:is(.is-info, .is-warn) .op-ov-status i { animation: op-pulse 1.6s ease-in-out infinite; } html.theme-optica .op-ov-pay.is-paid { color: rgb(22 163 74); background: rgb(22 163 74 / .1); } html.theme-optica .op-ov-pay.is-unpaid { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } /* Recent orders */ html.theme-optica .op-ov-section { display: flex; flex-direction: column; gap: 14px; } html.theme-optica .op-ov-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.theme-optica .op-ov-section-head h3 { font-family: var(--op-font-display); font-weight: 600; font-size: 20px; letter-spacing: -.025em; text-transform: capitalize; } html.theme-optica .op-ov-orders { position: relative; display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-ov-order { position: relative; overflow: hidden; display: grid; align-items: center; gap: 10px 14px; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "tile id actions" "pills pills amount"; padding: 14px; border-radius: 20px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: transform .45s var(--op-ease), box-shadow .4s; } @container (min-width: 640px) { html.theme-optica .op-ov-order { grid-template-columns: 44px minmax(0, 1fr) auto minmax(90px, auto) auto; grid-template-areas: "tile id pills amount actions"; padding: 14px 16px; gap: 16px; } } html.theme-optica .op-ov-order::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--op-tone)); transform: scaleY(0); transition: transform .4s var(--op-ease); } html.theme-optica .op-ov-order:hover { transform: translateY(-2px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ov-order:hover::before { transform: scaleY(1); } html.op-motion.theme-optica .op-ov-order:not(.op-ov-order--skel) { animation: op-card-in .8s var(--op-ease) backwards; animation-delay: calc(var(--op-i, 0) * 90ms + 100ms); } html.theme-optica .op-ov-order-tile { grid-area: tile; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); transition: transform .5s var(--op-spring); } html.theme-optica .op-ov-order:hover .op-ov-order-tile { transform: rotate(-8deg) scale(1.06); } html.theme-optica .op-ov-order-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-ov-order-serial { font-family: var(--op-font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: rgb(var(--op-ink)); } html.theme-optica .op-ov-order-serial:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-ov-order .op-ov-meta { font-size: 12px; } html.theme-optica .op-ov-order-pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: 6px; } html.theme-optica .op-ov-order-amount { grid-area: amount; justify-self: end; font-family: var(--op-font-display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } html.theme-optica .op-ov-order-actions { grid-area: actions; display: flex; gap: 6px; } html.theme-optica .op-ov-order-actions .op-icon-btn { width: 38px; height: 38px; } html.theme-optica .op-ov-order-go { color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-ov-order-go:hover { background: rgb(var(--op-accent)); } html.theme-optica .op-ov-order-go .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-ov-order:hover .op-ov-order-go .op-icon { transform: translateX(3px); } html.theme-optica[dir="rtl"] .op-ov-order-go .op-icon { scale: -1 1; } html.theme-optica .op-ov-order--skel { pointer-events: none; } html.theme-optica .op-ov-skel--tile { grid-area: tile; width: 44px; height: 44px; border-radius: 14px; } html.theme-optica .op-ov-skel-lines { grid-area: id; display: flex; flex-direction: column; gap: 8px; } html.theme-optica .op-ov-skel-lines .op-ov-skel:first-child { width: 40%; height: 14px; } html.theme-optica .op-ov-skel-lines .op-ov-skel:last-child { width: 65%; height: 10px; } html.theme-optica .op-ov-skel--pill { grid-area: actions; width: 80px; height: 26px; border-radius: 999px; } .op-ov-row-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } /* Empty */ html.theme-optica .op-ov-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 6cqi, 56px) 20px; text-align: center; border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ov-empty h3 { font-family: var(--op-font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; } html.theme-optica .op-ov-empty p { max-width: 380px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: rgb(var(--op-muted)); } html.theme-optica .op-ov-empty-art { position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin-bottom: 8px; } html.theme-optica .op-ov-empty-ring { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgb(var(--op-accent) / .3); animation: op-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-ov-empty-ring--2 { animation-delay: 1.3s; } html.theme-optica .op-ov-empty-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 999px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .08); animation: op-float 5s ease-in-out infinite; } /* Shortcuts */ html.theme-optica .op-ov-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } @container (max-width: 519.98px) { html.theme-optica .op-ov-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.theme-optica .op-ov-link:last-child:nth-child(odd) { grid-column: 1 / -1; } } html.theme-optica .op-ov-link { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: transform .45s var(--op-ease), box-shadow .4s; } html.theme-optica .op-ov-link:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-accent) / .35); } html.theme-optica .op-ov-link-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ov-link:hover .op-ov-link-icon { color: #fff; background: rgb(var(--op-accent)); transform: scale(1.1) rotate(-8deg); } html.theme-optica .op-ov-link-text { font-size: 14px; font-weight: 600; color: rgb(var(--op-ink)); text-transform: capitalize; } html.theme-optica .op-ov-link-go { position: absolute; top: 18px; inset-inline-end: 16px; color: rgb(var(--op-muted)); opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .4s var(--op-ease), color .3s; } html.theme-optica .op-ov-link:hover .op-ov-link-go { opacity: 1; transform: none; color: rgb(var(--op-accent)); } @media (hover: none) { html.theme-optica .op-ov-link-go { opacity: 1; transform: none; } } /* 22. Order history (optica/account/orderHistory/OrderHistoryComponent) ----- Hero + status donut, a sticky glass toolbar (tabs with live counts, search, sort), order cards with a four-step mini journey, numbered pager. Container queries for the same reason as §21: the account sidebar sets the width. */ html.theme-optica .op-oh { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); } @media (max-width: 1023.98px) { html.theme-optica .op-oh { padding-bottom: 24px; } } html.theme-optica .op-oh .is-info { --op-tone: var(--op-accent); } html.theme-optica .op-oh .is-good { --op-tone: 22 163 74; } html.theme-optica .op-oh .is-warn { --op-tone: 217 119 6; } html.theme-optica .op-oh .is-crit { --op-tone: var(--op-danger); } /* In-progress summary gets its own hue: the accent may itself be green and read as "delivered". */ html.theme-optica .op-oh .is-sky { --op-tone: 2 132 199; } /* Hero */ html.theme-optica .op-oh-hero { --op-hx: 50%; --op-hy: 0%; position: relative; isolation: isolate; overflow: clip; display: grid; gap: 26px; align-items: center; padding: clamp(22px, 4.5cqi, 40px); border-radius: 32px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } @container (min-width: 700px) { html.theme-optica .op-oh-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 36px; } } html.theme-optica .op-oh-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 90% at 100% 0%, rgb(var(--op-accent) / .10), transparent 60%); } html.theme-optica .op-oh-hero .op-blob--a { width: 360px; height: 360px; right: -120px; top: -160px; } html.theme-optica .op-oh-hero .op-blob--b { width: 280px; height: 280px; left: -120px; bottom: -180px; } html.theme-optica .op-oh-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--op-ink) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--op-ink) / .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(60% 80% at 80% 40%, #000, transparent); mask-image: radial-gradient(60% 80% at 80% 40%, #000, transparent); } html.theme-optica .op-oh-hero-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(360px circle at var(--op-hx) var(--op-hy), rgb(var(--op-accent) / .14), transparent 70%); } html.theme-optica .op-oh-hero.is-lit .op-oh-hero-glow { opacity: 1; } html.theme-optica .op-oh-hello { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-optica .op-oh-kicker { padding: 6px 12px 6px 10px; border-radius: 999px; color: rgb(var(--op-ink-2)); letter-spacing: .08em; background: rgb(var(--op-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-oh-title { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(32px, 6.4cqi, 54px); line-height: 1.02; letter-spacing: -.045em; color: rgb(var(--op-ink)); text-transform: capitalize; } html.theme-optica .op-oh-title > span:last-child { padding-bottom: .06em; background: linear-gradient(100deg, rgb(var(--op-accent)) 0%, rgb(56 189 248) 50%, rgb(var(--op-accent)) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: op-focus-in 1.2s var(--op-ease) both, op-sheen 6s linear infinite; animation-delay: calc(var(--op-d, 0) * 120ms + 150ms), 0s; } html.theme-optica .op-oh-lede { max-width: 440px; font-size: 15px; line-height: 1.6; color: rgb(var(--op-ink-2)); } html.theme-optica .op-oh-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } html.theme-optica .op-oh-ctas .op-btn--ghost .op-icon { color: rgb(var(--op-accent)); } /* Status donut: one arc per tab, drawn in sequence once the counts land. */ html.theme-optica .op-oh-donut-wrap { display: flex; align-items: center; gap: 22px; justify-self: start; } @container (min-width: 700px) { html.theme-optica .op-oh-donut-wrap { flex-direction: column; gap: 16px; justify-self: end; } } html.theme-optica .op-oh-donut { position: relative; flex-shrink: 0; width: clamp(128px, 26cqi, 172px); aspect-ratio: 1; border-radius: 999px; background: rgb(var(--op-surface) / .7); box-shadow: var(--op-shadow-1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-optica .op-oh-donut svg { position: absolute; inset: 0; transform: rotate(-90deg); } html.theme-optica .op-oh-donut circle { fill: none; stroke-width: 10; } html.theme-optica .op-oh-donut-track { stroke: rgb(var(--op-line)); } html.theme-optica .op-oh-donut-arc { stroke: rgb(var(--op-tone)); stroke-linecap: butt; stroke-dasharray: 0 1; stroke-dashoffset: calc(var(--op-off, 0) * -1); transition: stroke-dasharray 1.1s var(--op-ease); transition-delay: calc(var(--op-i, 0) * .25s + .4s); } html.theme-optica .op-oh-donut.is-ready .op-oh-donut-arc { stroke-dasharray: var(--op-len, 0) 1; } html.theme-optica .op-oh-donut::after { content: ""; position: absolute; inset: -7px; border-radius: inherit; border: 1.5px dashed rgb(var(--op-accent) / .25); animation: op-spin-plain 24s linear infinite; pointer-events: none; } html.theme-optica .op-oh-donut-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } html.theme-optica .op-oh-donut-core strong { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(30px, 7cqi, 42px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } html.theme-optica .op-oh-donut-core span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-oh-legend { display: flex; flex-direction: column; gap: 8px; min-width: 150px; } html.theme-optica .op-oh-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(var(--op-ink-2)); text-transform: capitalize; } html.theme-optica .op-oh-legend i { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--op-tone)); } html.theme-optica .op-oh-legend b { margin-inline-start: auto; padding-inline-start: 12px; font-weight: 700; color: rgb(var(--op-ink)); font-variant-numeric: tabular-nums; } /* Toolbar */ html.theme-optica .op-oh-bar { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 22px; background: rgb(var(--op-surface) / .82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: top .5s var(--op-ease); } html.theme-optica:has(.op-nav:not(.is-hidden)) .op-oh-bar { top: calc(var(--header-h, 76px) + 8px); } html.theme-optica .op-oh-tabs { position: relative; display: flex; gap: 2px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } html.theme-optica .op-oh-tabs::-webkit-scrollbar { display: none; } html.theme-optica .op-oh-ink { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 15px; background: rgb(var(--op-ink)); box-shadow: 0 10px 22px -12px rgb(var(--op-ink) / .7); transition: transform .55s var(--op-spring), width .45s var(--op-ease); } html.theme-optica .op-oh-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px; border-radius: 15px; flex-shrink: 0; font-size: 14px; font-weight: 600; white-space: nowrap; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .3s; } html.theme-optica .op-oh-tab:hover { color: rgb(var(--op-ink)); } html.theme-optica .op-oh-tab.is-on { color: #fff; } html.theme-optica .op-oh-tab em { --op-tone: var(--op-ink-2); min-width: 22px; height: 22px; padding-inline: 6px; display: inline-grid; place-items: center; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); transition: color .3s, background-color .3s; } html.theme-optica .op-oh .op-oh-tab.is-sky em { --op-tone: 2 132 199; } html.theme-optica .op-oh .op-oh-tab.is-good em { --op-tone: 22 163 74; } html.theme-optica .op-oh .op-oh-tab.is-crit em { --op-tone: var(--op-danger); } html.theme-optica .op-oh-tab.is-on em { color: #fff; background: rgb(255 255 255 / .18); } html.theme-optica .op-oh-tools { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; justify-content: flex-end; min-width: 0; } html.theme-optica .op-oh-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 320px; height: 42px; padding-inline: 14px 8px; border-radius: 15px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s, background-color .3s, max-width .5s var(--op-ease); cursor: text; } html.theme-optica .op-oh-search:focus-within { max-width: 380px; color: rgb(var(--op-accent)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)), 0 0 0 4px rgb(var(--op-accent) / .12); } html.theme-optica .op-oh-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; color: rgb(var(--op-ink)); } html.theme-optica .op-oh-search input::-webkit-search-cancel-button { display: none; } html.theme-optica .op-oh-search kbd { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)), 0 1px 0 rgb(var(--op-line)); } @media (hover: none) { html.theme-optica .op-oh-search kbd { display: none; } } html.theme-optica .op-oh-search-clear { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); transition: background-color .2s, color .2s; } html.theme-optica .op-oh-search-clear:hover { color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-oh-sort { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding-inline: 12px; border-radius: 15px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); transition: background-color .2s, color .2s; } html.theme-optica .op-oh-sort:hover { color: rgb(var(--op-ink)); background: rgb(var(--op-bg-2)); } html.theme-optica .op-oh-sort-icon { transform: rotate(180deg); transition: transform .5s var(--op-spring); } html.theme-optica .op-oh-sort-icon.is-up { transform: none; } html.theme-optica .op-oh-progress { position: absolute; inset-inline: 18px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; transition: opacity .3s; } html.theme-optica .op-oh-progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgb(var(--op-accent)), transparent); animation: op-indeterminate 1.1s ease-in-out infinite; } html.theme-optica .op-oh.is-busy .op-oh-progress { opacity: 1; } @container (max-width: 559.98px) { html.theme-optica .op-oh-tabs { flex: 1 1 100%; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } html.theme-optica .op-oh-tab { flex: 1 0 auto; justify-content: center; padding-inline: 12px; } html.theme-optica .op-oh-search, html.theme-optica .op-oh-search:focus-within { max-width: none; } } /* Order cards */ html.theme-optica .op-oh-list { position: relative; display: flex; flex-direction: column; gap: 12px; transition: opacity .3s; } html.theme-optica .op-oh.is-busy .op-oh-list:not([aria-hidden]) { opacity: .55; pointer-events: none; } html.theme-optica .op-oh-card { --op-tone: var(--op-accent); --op-rx: 0deg; --op-ry: 0deg; --op-gx: 50%; --op-gy: 50%; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: clamp(14px, 3cqi, 20px); border-radius: 24px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transform: perspective(900px) rotateX(var(--op-rx)) rotateY(var(--op-ry)); transition: transform .6s var(--op-ease), box-shadow .4s; } html.theme-optica .op-oh-card.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-optica .op-oh-card:hover { box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-tone) / .35); } html.theme-optica .op-oh-card::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--op-tone)); transform: scaleY(.35); opacity: .6; transition: transform .45s var(--op-ease), opacity .3s; } html.theme-optica .op-oh-card:hover::before { transform: scaleY(1); opacity: 1; } html.theme-optica .op-oh-card-glare { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .4s; background: radial-gradient(420px circle at var(--op-gx) var(--op-gy), rgb(var(--op-tone) / .08), transparent 65%); } html.theme-optica .op-oh-card.is-tilting .op-oh-card-glare { opacity: 1; } html.op-motion.theme-optica .op-oh-card { animation: op-card-in .8s var(--op-ease) backwards; animation-delay: calc(min(var(--op-i, 0), 10) * 70ms + 60ms); } html.theme-optica .op-oh-card-main { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; } html.theme-optica .op-oh-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-oh-card:hover .op-oh-tile { transform: rotate(-8deg) scale(1.06); color: #fff; background: rgb(var(--op-tone)); } html.theme-optica .op-oh-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html.theme-optica .op-oh-serial { font-family: var(--op-font-display); font-weight: 600; font-size: 17px; letter-spacing: -.015em; color: rgb(var(--op-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; } html.theme-optica .op-oh-serial:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-oh-id .op-ov-meta { font-size: 12.5px; } html.theme-optica .op-oh-money { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } html.theme-optica .op-oh-money strong { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(16px, 3.4cqi, 20px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } html.theme-optica .op-oh-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-oh-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; } html.theme-optica .op-oh-card:is(.is-info, .is-warn) .op-ov-status i { animation: op-pulse 1.6s ease-in-out infinite; } html.theme-optica .op-oh-steps { display: flex; gap: 4px; } html.theme-optica .op-oh-steps li { position: relative; overflow: hidden; width: clamp(22px, 6cqi, 34px); height: 5px; border-radius: 999px; background: rgb(var(--op-line)); } html.theme-optica .op-oh-steps li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--op-tone)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--op-ease); transition-delay: calc(var(--op-s, 0) * .14s + var(--op-i, 0) * 70ms + .5s); } html.theme-optica[dir="rtl"] .op-oh-steps li::after { transform-origin: right; } html.theme-optica .op-oh-steps li.is-done::after { transform: scaleX(1); } html.op-motion.theme-optica .op-oh-steps li.is-done::after { animation: op-progress .6s var(--op-ease) backwards; animation-delay: calc(var(--op-s, 0) * .14s + min(var(--op-i, 0), 10) * 70ms + .45s); } html.theme-optica .op-oh-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } html.theme-optica .op-oh-actions .op-icon-btn { width: 40px; height: 40px; } html.theme-optica .op-oh-actions .op-icon-btn--outline:hover { color: rgb(var(--op-accent)); box-shadow: inset 0 0 0 1px rgb(var(--op-accent)); } html.theme-optica .op-oh-view { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 16px 14px; border-radius: 999px; font-family: var(--op-font-display); font-size: 14px; font-weight: 600; color: #fff; background: rgb(var(--op-ink)); transition: box-shadow .4s; } html.theme-optica .op-oh-view::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--op-accent)); transform: translateY(101%); transition: transform .45s var(--op-ease); } html.theme-optica .op-oh-view:hover::before, html.theme-optica .op-oh-card:hover .op-oh-view::before { transform: none; } html.theme-optica .op-oh-card:hover .op-oh-view { box-shadow: 0 12px 24px -12px rgb(var(--op-accent) / .8); } html.theme-optica .op-oh-view .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-oh-card:hover .op-oh-view .op-icon { transform: translateX(3px); } html.theme-optica[dir="rtl"] :is(.op-oh-view, .op-oh-flip) .op-icon, html.theme-optica[dir="rtl"] .op-oh-flip { scale: -1 1; } @container (max-width: 479.98px) { html.theme-optica .op-oh-card-main { grid-template-columns: 42px minmax(0, 1fr); } html.theme-optica .op-oh-tile { width: 42px; height: 42px; border-radius: 14px; } html.theme-optica .op-oh-money { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: rgb(var(--op-bg)); } html.theme-optica .op-oh-actions { flex: 1 1 100%; } html.theme-optica .op-oh-view { flex: 1; justify-content: center; } } /* Skeleton cards */ html.theme-optica .op-oh-card--skel { flex-direction: row; align-items: center; gap: 14px; pointer-events: none; } html.theme-optica .op-oh-skel-tile { width: 48px; height: 48px; border-radius: 16px; flex-shrink: 0; } html.theme-optica .op-oh-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } html.theme-optica .op-oh-skel-lines .op-ov-skel:first-child { width: 35%; height: 15px; } html.theme-optica .op-oh-skel-lines .op-ov-skel:last-child { width: 60%; height: 10px; } html.theme-optica .op-oh-skel-pill { width: 90px; height: 28px; border-radius: 999px; } /* Empty + pager */ html.op-motion.theme-optica .op-oh-empty { animation: op-card-in .8s var(--op-ease) both; } html.theme-optica .op-oh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; } html.theme-optica .op-oh-range { font-size: 13px; color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; } html.theme-optica .op-oh-pages { display: flex; align-items: center; gap: 6px; } html.theme-optica .op-oh-pages .op-icon-btn:disabled { opacity: .4; pointer-events: none; } html.theme-optica .op-oh-page { min-width: 42px; height: 42px; padding-inline: 8px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink-2)); transition: background-color .25s, color .25s, transform .4s var(--op-spring), box-shadow .3s; } html.theme-optica .op-oh-page:hover { background: rgb(var(--op-ink) / .06); color: rgb(var(--op-ink)); } html.theme-optica .op-oh-page.is-on { color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 10px 22px -12px rgb(var(--op-ink) / .7); transform: scale(1.06); } html.theme-optica .op-oh-gap { width: 20px; text-align: center; color: rgb(var(--op-muted)); } @container (max-width: 479.98px) { html.theme-optica .op-oh-pager { justify-content: center; } html.theme-optica .op-oh-range { flex: 1 1 100%; text-align: center; } } /* Row moves when a filter removes cards (plain CSS so the build never purges it). */ .op-oh-row-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .op-oh-row-leave-active { position: absolute; inset-inline: 0; transition: opacity .25s ease, translate .3s ease; } .op-oh-row-leave-to { opacity: 0; translate: 0 -10px; } /* 23. Account forms — shared shell (account info, password, address book) --- Same hero language as §21/§22 (blobs, grid, pointer glow, focus-in title) but with a visual "orb" on the start side. Fields extend the §20 checkout fields with a leading icon and a validity tick. Container queries: the account sidebar decides the width, not the viewport. */ html.theme-optica .op-acc { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); } @media (max-width: 1023.98px) { html.theme-optica .op-acc { padding-bottom: 24px; } } html.theme-optica .op-acc .is-good { --op-tone: 22 163 74; } html.theme-optica .op-acc .is-warn { --op-tone: 217 119 6; } html.theme-optica .op-acc .is-crit { --op-tone: var(--op-danger); } html.theme-optica .op-acc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; } html.theme-optica .op-acc-hero { --op-hx: 50%; --op-hy: 0%; position: relative; isolation: isolate; overflow: clip; display: grid; gap: 22px; align-items: center; justify-items: start; padding: clamp(22px, 4.5cqi, 40px); border-radius: 32px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } @container (min-width: 620px) { html.theme-optica .op-acc-hero { grid-template-columns: auto minmax(0, 1fr); gap: 28px 32px; } } @container (min-width: 900px) { html.theme-optica .op-acc-hero { grid-template-columns: auto minmax(0, 1fr) auto; } } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-optica .op-acc-hero > :nth-child(4) { grid-column: 1 / -1; justify-self: stretch; } } html.theme-optica .op-acc-hero .op-blob--a { width: 360px; height: 360px; right: -120px; top: -160px; } html.theme-optica .op-acc-hero .op-blob--b { width: 280px; height: 280px; left: -120px; bottom: -180px; } html.theme-optica .op-acc-hero.is-lit .op-oh-hero-glow { opacity: 1; } html.theme-optica .op-acc-title { font-size: clamp(30px, 6cqi, 50px); overflow-wrap: anywhere; } html.theme-optica .op-acc-textbtn { font-weight: 600; color: rgb(var(--op-accent)); text-decoration: underline; text-underline-offset: 3px; } /* Cards */ html.theme-optica .op-acc-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(18px, 4cqi, 28px); border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-acc-card-head { display: flex; align-items: center; gap: 14px; } html.theme-optica .op-acc-card-head > div { min-width: 0; } html.theme-optica .op-acc-card-head h3 { font-family: var(--op-font-display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; text-transform: capitalize; color: rgb(var(--op-ink)); } html.theme-optica .op-acc-card-head p { font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-acc-card-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-acc-card:hover .op-acc-card-icon { transform: rotate(-8deg) scale(1.06); color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-acc-links { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } /* Fields: §20 field + leading icon + validity tick */ @container (min-width: 520px) { html.theme-optica .op-acc .op-co-grid { grid-template-columns: 1fr 1fr; } html.theme-optica .op-acc .op-co-span { grid-column: 1 / -1; } } @container (max-width: 519.98px) { html.theme-optica .op-acc .op-co-grid { grid-template-columns: 1fr; } } html.theme-optica .op-acc-input { position: relative; display: block; } html.theme-optica .op-acc-field input { height: 54px; } html.theme-optica .op-acc-field .op-co-phone { position: relative; height: 54px; } html.theme-optica .op-acc-input input { padding-inline: 46px 46px; } html.theme-optica .op-acc-input-icon { position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%); color: rgb(var(--op-muted)); pointer-events: none; transition: color .25s, transform .4s var(--op-spring); } html.theme-optica .op-acc-input:focus-within .op-acc-input-icon { color: rgb(var(--op-accent)); transform: translateY(-50%) scale(1.12); } html.theme-optica .op-acc-field.has-error .op-acc-input-icon { color: rgb(var(--op-danger)); } html.theme-optica .op-acc-tick { position: absolute; top: 50%; inset-inline-end: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; color: #fff; background: rgb(22 163 74); pointer-events: none; transform: translateY(-50%) scale(0); transition: transform .45s var(--op-spring); } html.theme-optica .op-acc-field.is-valid:not(.has-error) .op-acc-tick { transform: translateY(-50%) scale(1); } html.theme-optica .op-acc-field label.op-co-field-label { cursor: pointer; } /* Floating save bar */ html.theme-optica .op-acc-bar { position: sticky; bottom: calc(16px + var(--op-tabbar-h)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 22px; color: #fff; background: rgb(var(--op-ink) / .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--op-shadow-3); } html.theme-optica .op-acc-bar-msg { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } html.theme-optica .op-acc-bar-dot { position: relative; width: 9px; height: 9px; border-radius: 999px; background: rgb(245 158 11); } html.theme-optica .op-acc-bar-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-acc-bar-dot.is-good { background: rgb(34 197 94); } html.theme-optica .op-acc-bar-actions { display: flex; gap: 8px; margin-inline-start: auto; } html.theme-optica .op-acc-bar .op-btn--ghost { color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); } html.theme-optica .op-acc-bar .op-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; } html.theme-optica .op-acc-bar .op-btn--primary { background: #fff; color: rgb(var(--op-ink)); } html.theme-optica .op-acc-bar .op-btn--primary:hover { color: #fff; } @container (max-width: 479.98px) { html.theme-optica .op-acc-bar-actions { flex: 1 1 100%; } html.theme-optica .op-acc-bar-actions .op-btn { flex: 1; } } .op-acc-bar-enter-active, .op-acc-bar-leave-active { transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); } .op-acc-bar-enter-from, .op-acc-bar-leave-to { opacity: 0; transform: translateY(30px) scale(.96); } /* 24. Return orders (optica/account/returnOrders/ReturnOrdersComponent) ------ Built on §22 (hero, donut, toolbar, cards, pager). Adds the "how returns work" strip, a labelled four-step return journey and the reason line. */ html.theme-optica .op-ro-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; } @container (max-width: 639.98px) { html.theme-optica .op-ro-how { grid-template-columns: 1fr; gap: 8px; } } html.theme-optica .op-ro-how li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 22px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: transform .45s var(--op-ease), box-shadow .4s; } html.theme-optica .op-ro-how li:hover { transform: translateY(-3px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-accent) / .35); } @container (min-width: 640px) { html.theme-optica .op-ro-how li:not(:last-child)::after { content: ""; position: absolute; top: 50%; inset-inline-end: -10px; z-index: 1; width: 8px; height: 8px; border-top: 2px solid rgb(var(--op-accent) / .5); border-right: 2px solid rgb(var(--op-accent) / .5); transform: translateY(-50%) rotate(45deg); } html.theme-optica[dir="rtl"] .op-ro-how li:not(:last-child)::after { transform: translateY(-50%) rotate(-135deg); } } html.theme-optica .op-ro-how-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ro-how li:hover .op-ro-how-icon { transform: rotate(-8deg) scale(1.08); color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-ro-how-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html.theme-optica .op-ro-how-copy em { font-style: normal; font-family: var(--op-font-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: rgb(var(--op-accent)); } html.theme-optica .op-ro-how-copy strong { font-size: 14.5px; font-weight: 600; color: rgb(var(--op-ink)); text-transform: capitalize; } html.theme-optica .op-ro-how-copy small { font-size: 12.5px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-ro-reason { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-ro-money-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-ro-halt { font-size: 13px; color: rgb(var(--op-muted)); } /* Labelled journey: dots on a rail that fills to the current step. */ html.theme-optica .op-ro-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 420px); } html.theme-optica .op-ro-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; } html.theme-optica .op-ro-steps li::before { content: ""; position: absolute; top: 5px; inset-inline-end: 50%; width: 100%; height: 2px; background: rgb(var(--op-line)); } html.theme-optica .op-ro-steps li:first-child::before { display: none; } html.theme-optica .op-ro-steps li::after { content: ""; position: absolute; top: 5px; inset-inline-end: 50%; width: 100%; height: 2px; background: rgb(var(--op-tone)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--op-ease); transition-delay: calc(var(--op-s, 0) * .18s + .4s); } html.theme-optica[dir="rtl"] .op-ro-steps li::after { transform-origin: right; } html.theme-optica .op-ro-steps li:first-child::after { display: none; } html.theme-optica .op-ro-steps li.is-done::after { transform: scaleX(1); } html.op-motion.theme-optica .op-ro-steps li.is-done::after { animation: op-progress .6s var(--op-ease) backwards; animation-delay: calc(var(--op-s, 0) * .18s + min(var(--op-i, 0), 10) * 70ms + .4s); } html.theme-optica .op-ro-steps i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 2px rgb(var(--op-line)); transition: background-color .4s, box-shadow .4s; transition-delay: calc(var(--op-s, 0) * .18s + .5s); } html.theme-optica .op-ro-steps li.is-done i { background: rgb(var(--op-tone)); box-shadow: 0 0 0 3px rgb(var(--op-tone) / .18); } html.theme-optica .op-ro-steps li.is-now i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--op-tone)); animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-ro-steps span { font-size: 10.5px; font-weight: 600; color: rgb(var(--op-muted)); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.theme-optica .op-ro-steps li.is-done span { color: rgb(var(--op-ink)); } html.theme-optica .op-ro-card .op-oh-state { flex: 1 1 320px; } html.theme-optica .op-ro-card:is(.is-warn, .is-sky) .op-ov-status i { animation: op-pulse 1.6s ease-in-out infinite; } @container (max-width: 479.98px) { html.theme-optica .op-ro-steps { width: 100%; } } /* 25. Account info + change password (optica/account/{accountInfo,changePassword}) */ /* Photo dropzone */ html.theme-optica .op-ai-photo { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 136px); aspect-ratio: 1; border-radius: 999px; cursor: pointer; } html.theme-optica .op-ai-photo .op-ov-avatar-ring { inset: -7px; } html.theme-optica .op-ai-face { position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: #fff; background: linear-gradient(135deg, rgb(var(--op-accent)), rgb(56 189 248)); box-shadow: 0 18px 40px -18px rgb(var(--op-accent) / .8); transition: transform .5s var(--op-spring); } html.theme-optica .op-ai-face img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-ai-initials { font-family: var(--op-font-display); font-weight: 600; font-size: clamp(34px, 8cqi, 46px); letter-spacing: -.03em; } html.theme-optica .op-ai-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: inherit; color: #fff; background: rgb(var(--op-ink) / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; } html.theme-optica .op-ai-veil small { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; padding-inline: 8px; } html.theme-optica .op-ai-photo:hover .op-ai-veil, html.theme-optica .op-ai-photo:focus-within .op-ai-veil, html.theme-optica .op-ai-photo.is-drag .op-ai-veil { opacity: 1; } html.theme-optica .op-ai-photo:hover .op-ai-face, html.theme-optica .op-ai-photo.is-drag .op-ai-face { transform: scale(1.04); } html.theme-optica .op-ai-photo.is-drag::after { content: ""; position: absolute; inset: -14px; border-radius: inherit; border: 2px dashed rgb(var(--op-accent)); animation: op-spin-plain 8s linear infinite; } html.theme-optica .op-ai-photo.is-invalid .op-ai-face { box-shadow: 0 0 0 3px rgb(var(--op-danger)); } html.theme-optica .op-ai-badge { position: absolute; bottom: 4%; inset-inline-end: 4%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: rgb(var(--op-ink)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2); transition: transform .45s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ai-photo:hover .op-ai-badge { transform: rotate(-12deg) scale(1.1); color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-ai-photo.is-new .op-ai-badge { color: #fff; background: rgb(22 163 74); } html.theme-optica .op-ai-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-ai-hint.is-danger { color: rgb(var(--op-danger)); } /* Profile strength */ html.theme-optica .op-ai-meter-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 24px; background: rgb(var(--op-surface) / .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ai-meter { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 82px; height: 82px; } html.theme-optica .op-ai-meter svg { position: absolute; inset: 0; transform: rotate(-90deg); } html.theme-optica .op-ai-meter circle { fill: none; stroke-width: 6; stroke-linecap: round; } html.theme-optica .op-ai-meter-track { stroke: rgb(var(--op-line)); } html.theme-optica .op-ai-meter-fill { stroke: rgb(var(--op-accent)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--op-share, 0)); transition: stroke-dashoffset 1.2s var(--op-ease), stroke .4s; } html.op-motion.theme-optica .op-ai-meter-fill { animation: op-ai-meter-in 1.6s var(--op-ease) .5s backwards; } @keyframes op-ai-meter-in { from { stroke-dashoffset: 1; } } html.theme-optica .op-ai-meter.is-full .op-ai-meter-fill { stroke: rgb(22 163 74); } html.theme-optica .op-ai-meter strong { font-family: var(--op-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-optica .op-ai-meter strong small { font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-ai-meter-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html.theme-optica .op-ai-meter-copy > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-ai-checks { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 14px; } html.theme-optica .op-ai-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--op-muted)); text-transform: capitalize; white-space: nowrap; transition: color .3s; } html.theme-optica .op-ai-checks i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--op-spring); } html.theme-optica .op-ai-checks li.is-on { color: rgb(var(--op-ink)); } html.theme-optica .op-ai-checks li.is-on i { color: #fff; background: rgb(22 163 74); box-shadow: none; transform: scale(1.08); } /* Password: padlock orb */ html.theme-optica .op-cp-orb { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 132px); aspect-ratio: 1; border-radius: 999px; } html.theme-optica .op-cp-orb .op-ov-avatar-ring { inset: -7px; } html.theme-optica .op-cp-orb-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-accent)), rgb(var(--op-ink)) 75%); box-shadow: 0 20px 44px -18px rgb(var(--op-ink) / .7); transition: background .6s; } html.theme-optica .op-cp.is-ready .op-cp-orb-face, html.theme-optica .op-cp.is-done .op-cp-orb-face { background: radial-gradient(120% 120% at 100% 0%, rgb(34 197 94), rgb(21 128 61) 75%); } html.theme-optica .op-cp-lock { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } html.theme-optica .op-cp-lock-shackle { transform: translateY(-5px) rotate(-18deg); transform-origin: 32px 22px; transition: transform .6s var(--op-spring); } html.theme-optica .op-cp.is-ready .op-cp-lock-shackle, html.theme-optica .op-cp.is-done .op-cp-lock-shackle { transform: none; } html.theme-optica .op-cp-lock-body { fill: rgb(255 255 255 / .12); } html.theme-optica .op-cp-lock-hole { transition: opacity .3s; } html.theme-optica .op-cp-lock-check { stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--op-ease) .25s; } html.theme-optica .op-cp.is-ready .op-cp-lock-hole, html.theme-optica .op-cp.is-done .op-cp-lock-hole { opacity: 0; } html.theme-optica .op-cp.is-ready .op-cp-lock-check, html.theme-optica .op-cp.is-done .op-cp-lock-check { stroke-dashoffset: 0; } html.op-motion.theme-optica .op-cp:not(.is-ready):not(.is-done) .op-cp-orb-face .op-cp-lock { animation: op-cp-wiggle 4s ease-in-out 1.5s infinite; } @keyframes op-cp-wiggle { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-8deg); } 92% { transform: rotate(7deg); } 95% { transform: rotate(-4deg); } } html.theme-optica .op-cp-orb-burst { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } html.theme-optica .op-cp.is-ready .op-cp-orb-burst { animation: op-cp-burst .9s var(--op-ease); } @keyframes op-cp-burst { from { box-shadow: 0 0 0 0 rgb(34 197 94 / .55); } to { box-shadow: 0 0 0 28px rgb(34 197 94 / 0); } } /* Password: steps */ html.theme-optica .op-cp-steps { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; background: rgb(var(--op-surface) / .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-optica .op-cp-steps { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; } } html.theme-optica .op-cp-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgb(var(--op-muted)); text-transform: capitalize; white-space: nowrap; transition: color .3s; } html.theme-optica .op-cp-step-dot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .4s, color .4s, box-shadow .4s; } html.theme-optica .op-cp-steps li.is-now { color: rgb(var(--op-ink)); } html.theme-optica .op-cp-steps li.is-now .op-cp-step-dot { color: rgb(var(--op-accent)); box-shadow: inset 0 0 0 2px rgb(var(--op-accent)); } html.theme-optica .op-cp-steps li.is-now .op-cp-step-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgb(var(--op-accent) / .5); animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-cp-steps li.is-on { color: rgb(var(--op-ink)); } html.theme-optica .op-cp-steps li.is-on .op-cp-step-dot { color: #fff; background: rgb(22 163 74); box-shadow: 0 6px 14px -6px rgb(22 163 74 / .8); } /* Password: layout, fields, actions */ html.theme-optica .op-cp-layout { display: grid; gap: clamp(16px, 2.6vw, 22px); align-items: start; } @container (min-width: 820px) { html.theme-optica .op-cp-layout { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); } html.theme-optica .op-cp-health { position: sticky; top: calc(var(--header-h, 76px) + 16px); } } html.theme-optica .op-cp-card { overflow: hidden; } html.theme-optica .op-cp-form { display: flex; flex-direction: column; gap: 20px; } html.theme-optica .op-cp-fields { display: flex; flex-direction: column; gap: 16px; } html.theme-optica .op-cp-fields .op-acc-input input { padding-inline-end: 84px; letter-spacing: .02em; } html.theme-optica .op-cp-fields .op-acc-tick { inset-inline-end: 52px; } html.theme-optica .op-cp-eye { position: absolute; top: 50%; inset-inline-end: 8px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: rgb(var(--op-muted)); transform: translateY(-50%); transition: background-color .2s, color .2s; } html.theme-optica .op-cp-eye:hover { color: rgb(var(--op-ink)); background: rgb(var(--op-ink) / .06); } html.theme-optica .op-cp-eye[aria-pressed="true"] { color: rgb(var(--op-accent)); } html.theme-optica .op-co-field small.op-cp-note { color: rgb(var(--op-danger)); } html.theme-optica .op-co-field small.op-cp-note.is-good { display: inline-flex; align-items: center; gap: 5px; color: rgb(22 163 74); } html.theme-optica .op-cp-caps { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(180 83 9); background: rgb(245 158 11 / .12); } html.theme-optica .op-cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-cp-gen { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 18px; text-align: start; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s, background-color .3s, transform .3s var(--op-ease); } html.theme-optica .op-cp-gen:hover { background: rgb(var(--op-accent) / .06); box-shadow: inset 0 0 0 1px rgb(var(--op-accent) / .4); } html.theme-optica .op-cp-gen:active { transform: scale(.98); } html.theme-optica .op-cp-gen-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, rgb(var(--op-accent)), rgb(56 189 248)); transition: transform .5s var(--op-spring); } html.theme-optica .op-cp-gen:hover .op-cp-gen-icon { transform: rotate(-20deg) scale(1.08); } html.theme-optica .op-cp-gen strong { display: block; font-size: 13.5px; font-weight: 600; color: rgb(var(--op-ink)); } html.theme-optica .op-cp-gen small { display: block; font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-cp-submit { margin-inline-start: auto; } @container (max-width: 559.98px) { html.theme-optica .op-cp-gen, html.theme-optica .op-cp-submit { flex: 1 1 100%; } } /* Password: success */ html.theme-optica .op-cp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(16px, 5cqi, 40px) 8px; text-align: center; } html.theme-optica .op-cp-done h3 { font-family: var(--op-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-cp-done p { max-width: 380px; font-size: 14px; line-height: 1.6; color: rgb(var(--op-muted)); } html.theme-optica .op-cp-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } html.theme-optica .op-cp-done-badge { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; } html.theme-optica .op-cp-done-badge svg { width: 100%; height: 100%; fill: none; stroke: rgb(22 163 74); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } html.theme-optica .op-cp-done-badge circle { stroke-dasharray: 1; animation: op-draw .8s var(--op-ease) both; fill: rgb(22 163 74 / .08); } html.theme-optica .op-cp-done-badge path { stroke-dasharray: 1; animation: op-draw .5s var(--op-ease) .6s both; } html.theme-optica .op-cp-done-badge i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 999px; background: rgb(var(--op-accent)); opacity: 0; animation: op-cp-spark .9s var(--op-ease) .7s both; --op-a: calc(var(--op-n) * 45deg); } html.theme-optica .op-cp-done-badge i:nth-child(even) { background: rgb(34 197 94); } @keyframes op-cp-spark { 0% { opacity: 1; transform: rotate(var(--op-a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--op-a)) translateY(-64px) scale(.4); } } /* Password: health */ html.theme-optica .op-cp-health { gap: 14px; } html.theme-optica .op-cp-health-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.theme-optica .op-cp-health-head > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-cp-health-head strong { font-family: var(--op-font-display); font-size: 18px; font-weight: 600; text-transform: capitalize; } html.theme-optica .op-cp { --op-weak: var(--op-danger); --op-fair: 217 119 6; --op-good: 2 132 199; --op-strong: 22 163 74; } html.theme-optica .op-cp-health-head strong.is-weak { color: rgb(var(--op-weak)); } html.theme-optica .op-cp-health-head strong.is-fair { color: rgb(var(--op-fair)); } html.theme-optica .op-cp-health-head strong.is-good { color: rgb(var(--op-good)); } html.theme-optica .op-cp-health-head strong.is-strong { color: rgb(var(--op-strong)); } html.theme-optica .op-cp-bars { --op-bar: var(--op-line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } html.theme-optica .op-cp-bars.is-weak { --op-bar: var(--op-weak); } html.theme-optica .op-cp-bars.is-fair { --op-bar: var(--op-fair); } html.theme-optica .op-cp-bars.is-good { --op-bar: var(--op-good); } html.theme-optica .op-cp-bars.is-strong { --op-bar: var(--op-strong); } html.theme-optica .op-cp-bars i { position: relative; overflow: hidden; height: 8px; border-radius: 999px; background: rgb(var(--op-line)); } html.theme-optica .op-cp-bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--op-bar)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--op-ease), background-color .4s; transition-delay: calc(var(--op-n) * 60ms); } html.theme-optica .op-cp-bars i.is-on::after { transform: scaleX(1); } html.theme-optica .op-cp-bars.is-strong i.is-on::after { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent); background-size: 200% 100%; animation: op-sheen 2.4s linear infinite; } html.theme-optica .op-cp-health-copy { font-size: 13px; line-height: 1.55; color: rgb(var(--op-ink-2)); min-height: 2.6em; } html.theme-optica .op-cp-rules { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-cp-rules li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(var(--op-muted)); transition: color .3s; } html.theme-optica .op-cp-rules li.is-on { color: rgb(var(--op-ink)); } html.theme-optica .op-cp-rules em { margin-inline-start: auto; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-cp-rule-dot { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--op-spring); } html.theme-optica .op-cp-rules li.is-on .op-cp-rule-dot { color: #fff; background: rgb(22 163 74); box-shadow: none; transform: scale(1.1); } html.theme-optica .op-cp-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .06); } html.theme-optica .op-cp-tip .op-icon { flex-shrink: 0; margin-top: 1px; } html.theme-optica .op-cp-tip p { font-size: 12.5px; line-height: 1.55; color: rgb(var(--op-ink-2)); } /* 26. Address book (optica/account/address/AddressComponent) ---------------- Map-tile cards with a dropping pin, inline delete confirm, add tile. The add / edit drawer is §20's checkout drawer. */ /* Hero orb: pin bobbing over sonar waves, a satellite dot in orbit */ html.theme-optica .op-ad-orb { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 132px); aspect-ratio: 1; } html.theme-optica .op-ad-orb-wave { position: absolute; inset: 18%; border-radius: 999px; border: 1.5px solid rgb(var(--op-accent) / .5); animation: op-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-ad-orb-wave--2 { animation-delay: .9s; } html.theme-optica .op-ad-orb-wave--3 { animation-delay: 1.8s; } html.theme-optica .op-ad-orb-face { position: relative; z-index: 1; display: grid; place-items: center; width: 64%; height: 64%; border-radius: 999px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-accent)), rgb(var(--op-ink)) 75%); box-shadow: 0 18px 40px -16px rgb(var(--op-accent) / .8); } html.op-motion.theme-optica .op-ad-orb-pin { animation: op-ad-drop 1s var(--op-spring) .4s backwards, op-ad-bob 3s ease-in-out 1.6s infinite; } @keyframes op-ad-drop { from { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } } @keyframes op-ad-bob { 50% { transform: translateY(-5px); } } html.theme-optica .op-ad-orb-shadow { position: absolute; z-index: 1; bottom: 30%; width: 22%; height: 5px; border-radius: 999px; background: rgb(0 0 0 / .25); filter: blur(2px); animation: op-ad-shadow 3s ease-in-out 1.6s infinite; } @keyframes op-ad-shadow { 50% { transform: scaleX(.7); opacity: .6; } } html.theme-optica .op-ad-orbit { position: absolute; inset: 0; border-radius: 999px; border: 1px dashed rgb(var(--op-accent) / .3); animation: op-spin-plain 14s linear infinite; } html.theme-optica .op-ad-orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 999px; background: rgb(56 189 248); box-shadow: 0 0 0 4px rgb(56 189 248 / .2); } html.theme-optica .op-ad-side { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-optica .op-ad-side { flex-direction: row; align-items: center; justify-content: space-between; } } html.theme-optica .op-ad-stat { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; border-radius: 20px; background: rgb(var(--op-surface) / .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ad-stat strong { display: inline-block; font-family: var(--op-font-display); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } html.theme-optica .op-ad-stat span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--op-muted)); } /* Search */ html.theme-optica .op-ad-tools { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 22px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ad-search { max-width: none; } html.theme-optica .op-ad-search:focus-within { max-width: none; } html.theme-optica .op-ad-tools-count { flex-shrink: 0; padding-inline-end: 10px; font-size: 13px; font-weight: 600; color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; } /* Grid + cards */ html.theme-optica .op-ad-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; } html.theme-optica .op-ad-card { --op-rx: 0deg; --op-ry: 0deg; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-radius: 26px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transform: perspective(900px) rotateX(var(--op-rx)) rotateY(var(--op-ry)); transition: transform .6s var(--op-ease), box-shadow .4s; } html.theme-optica .op-ad-card.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-optica .op-ad-card:not(.op-ad-new):hover { box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-accent) / .35); } html.op-motion.theme-optica .op-ad-card { animation: op-card-in .8s var(--op-ease) backwards; animation-delay: calc(min(var(--op-i, 0), 10) * 80ms + 80ms); } html.theme-optica .op-ad-card.is-flash { animation: op-co-flash 1.3s var(--op-ease) 2; } html.theme-optica .op-ad-map { position: relative; height: 112px; overflow: hidden; background: linear-gradient(160deg, rgb(var(--op-accent) / .10), rgb(56 189 248 / .08)), rgb(var(--op-bg)); } html.theme-optica .op-ad-map svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--op-ease); } html.theme-optica .op-ad-card:hover .op-ad-map svg { transform: scale(1.08); } html.theme-optica .op-ad-road { fill: none; stroke: rgb(var(--op-surface)); stroke-width: 9; stroke-linecap: round; } html.theme-optica .op-ad-road--thin { stroke-width: 5; opacity: .85; } html.theme-optica .op-ad-route { fill: none; stroke: rgb(var(--op-accent)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .02 .025; } html.op-motion.theme-optica .op-ad-route { animation: op-ad-route 1.4s linear infinite; } @keyframes op-ad-route { to { stroke-dashoffset: -.045; } } html.theme-optica .op-ad-map-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px 0 0 -20px; color: #fff; filter: drop-shadow(0 8px 10px rgb(var(--op-ink) / .35)); } html.theme-optica .op-ad-map-pin .op-icon { fill: rgb(var(--op-accent)); stroke: #fff; } html.op-motion.theme-optica .op-ad-map-pin { animation: op-ad-drop .9s var(--op-spring) backwards; animation-delay: calc(min(var(--op-i, 0), 10) * 80ms + .5s); } html.theme-optica .op-ad-card:hover .op-ad-map-pin { animation: op-ad-bob 1.4s ease-in-out infinite; } html.theme-optica .op-ad-map-pin::after { content: ""; position: absolute; bottom: 2px; width: 14px; height: 4px; border-radius: 999px; background: rgb(var(--op-ink) / .25); z-index: -1; } html.theme-optica .op-ad-index { position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 999px; font-family: var(--op-font-display); font-size: 12px; font-weight: 600; color: rgb(var(--op-ink)); background: rgb(var(--op-surface) / .9); box-shadow: var(--op-shadow-1); font-variant-numeric: tabular-nums; } html.theme-optica .op-ad-zip { position: absolute; bottom: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgb(var(--op-ink) / .85); font-variant-numeric: tabular-nums; } html.theme-optica .op-ad-zip i { width: 6px; height: 6px; border-radius: 999px; background: rgb(34 197 94); animation: op-pulse 1.6s ease-in-out infinite; } html.theme-optica .op-ad-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 6px; } html.theme-optica .op-ad-who { display: flex; align-items: center; gap: 12px; min-width: 0; } html.theme-optica .op-ad-avatar { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-family: var(--op-font-display); font-size: 14px; font-weight: 600; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .5s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ad-card:hover .op-ad-avatar { transform: rotate(-8deg); color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-ad-who-copy { min-width: 0; } html.theme-optica .op-ad-who-copy h3 { font-family: var(--op-font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-ad-who-copy p, html.theme-optica .op-ad-mail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--op-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-ad-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.5; color: rgb(var(--op-ink-2)); } html.theme-optica .op-ad-street { color: rgb(var(--op-ink)); font-weight: 500; overflow-wrap: anywhere; } html.theme-optica .op-ad-actions { display: flex; gap: 6px; padding: 12px 14px 14px; margin-top: 8px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-ad-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding-inline: 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); transition: background-color .2s, color .2s, transform .3s var(--op-ease); } html.theme-optica .op-ad-act:not(.op-ad-act--danger) { flex: 1; } html.theme-optica .op-ad-act:hover { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-ad-act:active { transform: scale(.95); } html.theme-optica .op-ad-act.is-copied { color: rgb(22 163 74); background: rgb(22 163 74 / .1); } html.theme-optica .op-ad-act--danger { width: 38px; padding: 0; } html.theme-optica .op-ad-act--danger:hover { color: #fff; background: rgb(var(--op-danger)); } /* Inline delete confirm */ html.theme-optica .op-ad-confirm { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; background: rgb(var(--op-surface) / .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.theme-optica .op-ad-confirm-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .1); animation: op-co-nudge .5s var(--op-ease) .15s; } html.theme-optica .op-ad-confirm h4 { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; } html.theme-optica .op-ad-confirm p { max-width: 260px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-ad-confirm-actions { display: flex; gap: 8px; margin-top: 6px; } html.theme-optica .op-ad-danger { color: #fff; background: rgb(var(--op-danger)); box-shadow: 0 12px 26px -12px rgb(var(--op-danger) / .8); } html.theme-optica .op-ad-danger:hover { filter: brightness(1.08); } .op-ad-confirm-enter-active, .op-ad-confirm-leave-active { transition: opacity .3s ease, clip-path .5s cubic-bezier(.22,1,.36,1); } .op-ad-confirm-enter-from, .op-ad-confirm-leave-to { opacity: 0; clip-path: circle(0% at 90% 92%); } .op-ad-confirm-enter-to, .op-ad-confirm-leave-from { clip-path: circle(150% at 90% 92%); } /* Add tile */ html.theme-optica .op-ad-new { align-items: center; justify-content: center; gap: 8px; min-height: 260px; padding: 24px; text-align: center; background: transparent; box-shadow: none; border: 2px dashed rgb(var(--op-line)); transition: border-color .3s, background-color .3s, transform .45s var(--op-ease); } html.theme-optica .op-ad-new:hover { border-color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .04); transform: translateY(-3px); } html.theme-optica .op-ad-new-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 999px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); transition: transform .6s var(--op-spring), background-color .3s, color .3s; } html.theme-optica .op-ad-new:hover .op-ad-new-icon { transform: rotate(90deg) scale(1.1); color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-ad-new strong { font-size: 15px; font-weight: 600; text-transform: capitalize; } html.theme-optica .op-ad-new small { max-width: 220px; font-size: 12.5px; color: rgb(var(--op-muted)); } /* Skeleton, empty, no match */ html.theme-optica .op-ad-card--skel { gap: 10px; padding-bottom: 18px; pointer-events: none; } html.theme-optica .op-ad-card--skel .op-ov-skel { height: 12px; margin-inline: 18px; } html.theme-optica .op-ad-card--skel .op-ad-skel-map { width: auto; height: 112px; margin: 0 0 6px; border-radius: 0; } html.theme-optica .op-ad-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 6cqi, 56px) 20px; text-align: center; border-radius: 28px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-ad-empty h3 { font-family: var(--op-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; } html.theme-optica .op-ad-empty p { max-width: 380px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: rgb(var(--op-muted)); } html.theme-optica .op-ad-empty-art { position: relative; width: 220px; height: 140px; margin-bottom: 8px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgb(var(--op-accent) / .12), rgb(56 189 248 / .08)), rgb(var(--op-bg)); } html.theme-optica .op-ad-empty-map { position: absolute; inset: 0; width: 100%; height: 100%; } html.theme-optica .op-ad-empty-pin { position: absolute; top: 18%; left: 74%; margin-left: -18px; color: #fff; filter: drop-shadow(0 8px 10px rgb(var(--op-ink) / .35)); animation: op-ad-bob 2.4s ease-in-out infinite; } html.theme-optica .op-ad-empty-pin .op-icon { fill: rgb(var(--op-accent)); stroke: #fff; } html.theme-optica .op-ad-nomatch { padding: 18px; text-align: center; font-size: 14px; color: rgb(var(--op-muted)); } .op-ad-list-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .op-ad-list-leave-active { position: absolute; transition: opacity .3s ease, scale .35s ease; } .op-ad-list-leave-to { opacity: 0; scale: .9; } /* 27. Return details (optica/account/returnOrders/ReturnOrderDetailsComponent) - §23 shell. The page root carries the status tone (is-warn / is-sky / is-good / is-crit) so the orb, refund card, timeline and reply all agree. */ html.theme-optica .op-rd, html.theme-optica .op-rr { --op-tone: var(--op-accent); } html.theme-optica .op-acc.is-sky, html.theme-optica .op-acc .is-sky { --op-tone: 2 132 199; } html.theme-optica .op-acc.is-good { --op-tone: 22 163 74; } html.theme-optica .op-acc.is-warn { --op-tone: 217 119 6; } html.theme-optica .op-acc.is-crit { --op-tone: var(--op-danger); } html.theme-optica .op-rd-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 38px; padding-inline: 12px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: color .2s, box-shadow .3s; } html.theme-optica .op-rd-back:hover { color: rgb(var(--op-accent)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-accent) / .5); } html.theme-optica .op-rd-back .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-rd-back:hover .op-icon { transform: translateX(-3px); } /* Status orb */ html.theme-optica .op-rd-orb { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 132px); aspect-ratio: 1; } html.theme-optica .op-rd-orb-ring { position: absolute; inset: -6px; border-radius: 999px; background: conic-gradient(from var(--op-spin), rgb(var(--op-tone)), transparent 40%, rgb(var(--op-tone) / .5) 70%, rgb(var(--op-tone))); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: op-spin 4s linear infinite; } html.theme-optica .op-rd-orb-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 999px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-tone)), rgb(var(--op-ink)) 80%); box-shadow: 0 20px 44px -18px rgb(var(--op-tone) / .8); transition: background .6s, box-shadow .6s; } html.theme-optica .op-rd-skel-title { width: 7ch; height: .8em; } /* Refund card */ html.theme-optica .op-rd-refund { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 6px; min-width: 220px; padding: 18px 20px; border-radius: 24px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-tone) / .9), transparent 60%), rgb(var(--op-ink)); box-shadow: 0 26px 50px -24px rgb(var(--op-ink) / .6), inset 0 0 0 1px rgb(255 255 255 / .12); } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-optica .op-rd-refund { justify-self: stretch; } } html.theme-optica .op-rd-refund-sheen { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .16) 50%, transparent 65%); transform: translateX(-120%); animation: op-shine 5s ease-in-out 1.5s infinite; } html.theme-optica .op-rd-refund-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } html.theme-optica .op-rd-refund-amount { min-height: 1.1em; font-family: var(--op-font-display); font-size: clamp(28px, 6cqi, 36px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-optica .op-rd-refund-status { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; height: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: rgb(255 255 255 / .14); } html.theme-optica .op-rd-refund-status i { width: 7px; height: 7px; border-radius: 999px; background: rgb(var(--op-tone)); box-shadow: 0 0 0 3px rgb(var(--op-tone) / .3); } html.theme-optica .op-acc:is(.is-warn, .is-sky) .op-rd-refund-status i { animation: op-pulse 1.6s ease-in-out infinite; } html.theme-optica .op-rd-refund-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .85; } /* Timeline */ html.theme-optica .op-rd-journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } html.theme-optica .op-rd-journey-rail { position: absolute; top: 21px; inset-inline: 12.5%; height: 3px; border-radius: 999px; overflow: hidden; background: rgb(var(--op-line)); } html.theme-optica .op-rd-journey-rail span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--op-tone)), rgb(56 189 248)); transform-origin: left; transform: scaleX(calc(var(--op-step, 0) / 3)); transition: transform 1.4s var(--op-ease) .3s; } html.theme-optica[dir="rtl"] .op-rd-journey-rail span { transform-origin: right; } html.op-motion.theme-optica .op-rd-timeline.op-reveal:not(.is-in) .op-rd-journey-rail span { transform: scaleX(0); } html.theme-optica .op-rd-node { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; } html.theme-optica .op-rd-node-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 2px rgb(var(--op-line)); transition: background-color .5s, color .5s, box-shadow .5s, transform .6s var(--op-spring); transition-delay: calc(.3s + var(--op-i, 0) * .3s); } html.theme-optica .op-rd-node.is-done .op-rd-node-dot { color: #fff; background: rgb(var(--op-tone)); box-shadow: 0 10px 20px -10px rgb(var(--op-tone)); } html.theme-optica .op-rd-node.is-bad .op-rd-node-dot { background: rgb(var(--op-danger)); } html.theme-optica .op-rd-node.is-now .op-rd-node-dot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--op-tone)); animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.op-motion.theme-optica .op-rd-timeline.op-reveal:not(.is-in) .op-rd-node.is-done .op-rd-node-dot { color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 2px rgb(var(--op-line)); transform: scale(.8); } html.theme-optica .op-rd-node em { font-style: normal; font-size: 12.5px; font-weight: 600; color: rgb(var(--op-muted)); text-transform: capitalize; } html.theme-optica .op-rd-node.is-done em { color: rgb(var(--op-ink)); } html.theme-optica .op-rd-node small { font-size: 11px; color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; } @container (max-width: 479.98px) { html.theme-optica .op-rd-node-dot { width: 36px; height: 36px; } html.theme-optica .op-rd-journey-rail { top: 17px; } html.theme-optica .op-rd-node em { font-size: 11px; } html.theme-optica .op-rd-node small { display: none; } } /* Layout: lines | request + reply */ html.theme-optica .op-rd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.6vw, 22px); align-items: start; } @container (min-width: 820px) { html.theme-optica .op-rd-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); } } html.theme-optica .op-rd-side { display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); } html.theme-optica .op-rd-order-link { margin-inline-start: auto; flex-shrink: 0; } html.theme-optica .op-rd-lines { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-rd-line { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; background: rgb(var(--op-bg)); transition: background-color .3s, transform .4s var(--op-ease); } html.theme-optica .op-rd-line:hover { background: rgb(var(--op-bg-2)); transform: translateX(3px); } html.theme-optica .op-rd-thumb { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; overflow: visible; background: radial-gradient(80% 70% at 50% 40%, #fff, rgb(var(--op-bg-2))); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-rd-thumb > :not(b) { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; object-fit: cover; } html.theme-optica .op-rd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } html.theme-optica .op-rd-qty { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 24px; height: 22px; padding-inline: 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 0 0 2px rgb(var(--op-surface)); } html.theme-optica .op-rd-line-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-rd-line-copy strong { font-size: 14.5px; font-weight: 600; color: rgb(var(--op-ink)); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-rd-line-copy small { font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-rd-line-total { flex-shrink: 0; font-family: var(--op-font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-optica .op-rd-skel-thumb { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; } html.theme-optica .op-rd-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-rd-sum span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-rd-sum strong { font-family: var(--op-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* Request + reply */ html.theme-optica .op-rd-dl { display: flex; flex-direction: column; gap: 16px; } html.theme-optica .op-rd-dl dt { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-rd-dl .op-ro-reason { margin-top: 0; font-size: 13px; } html.theme-optica .op-rd-note { font-size: 14px; line-height: 1.6; color: rgb(var(--op-ink-2)); white-space: pre-line; overflow-wrap: anywhere; } html.theme-optica .op-rd-note.is-empty { color: rgb(var(--op-muted)); font-style: italic; } html.theme-optica .op-rd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; } html.theme-optica .op-rd-shot { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-rd-shot > :first-child, html.theme-optica .op-rd-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--op-ease); } html.theme-optica .op-rd-shot span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(var(--op-ink) / .45); opacity: 0; transition: opacity .3s; } html.theme-optica .op-rd-shot:hover span, html.theme-optica .op-rd-shot:focus-visible span { opacity: 1; } html.theme-optica .op-rd-shot:hover img { transform: scale(1.08); } html.op-motion.theme-optica .op-rd-shot { animation: op-card-in .7s var(--op-ease) backwards; animation-delay: calc(var(--op-i, 0) * 70ms + .3s); } html.theme-optica .op-rd-reply { overflow: hidden; } html.theme-optica .op-rd-reply::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, rgb(var(--op-tone)), rgb(56 189 248), rgb(var(--op-tone))); background-size: 200% 100%; animation: op-sheen 4s linear infinite; } html.theme-optica .op-rd-tone-icon { color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); } html.theme-optica .op-rd-reply .op-ov-status { color: rgb(var(--op-tone)); background: rgb(var(--op-tone) / .1); margin-top: 4px; } html.theme-optica .op-rd-reply-copy { font-size: 14px; line-height: 1.6; color: rgb(var(--op-ink-2)); } html.theme-optica .op-rd-quote { position: relative; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.6; color: rgb(var(--op-ink)); background: rgb(var(--op-tone) / .06); border-inline-start: 3px solid rgb(var(--op-tone)); } /* Photo viewer */ html.theme-optica .op-rd-viewer { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 64px 16px; background: rgb(var(--op-ink) / .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-optica .op-rd-viewer-img { max-width: min(100%, 900px); max-height: 100%; border-radius: 20px; object-fit: contain; box-shadow: var(--op-shadow-3); } html.theme-optica .op-rd-viewer .op-icon-btn { position: absolute; color: #fff; background: rgb(255 255 255 / .12); } html.theme-optica .op-rd-viewer .op-icon-btn:hover { background: rgb(255 255 255 / .24); } html.theme-optica .op-rd-viewer-close { top: 16px; inset-inline-end: 16px; } html.theme-optica .op-rd-viewer-nav { top: 50%; transform: translateY(-50%); } html.theme-optica .op-rd-viewer-nav.is-prev { inset-inline-start: 16px; } html.theme-optica .op-rd-viewer-nav.is-next { inset-inline-end: 16px; } html.theme-optica .op-rd-viewer-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(255 255 255 / .14); font-variant-numeric: tabular-nums; } /* 28. Return request (optica/account/returnOrders/ReturnOrderRequestComponent) Three numbered cards (items, reason, photos) beside a sticky refund estimate; on narrow widths the estimate becomes a floating bar. */ html.theme-optica .op-rr-orb .op-rd-orb-face { background: radial-gradient(120% 120% at 100% 0%, rgb(var(--op-accent)), rgb(var(--op-ink)) 80%); } html.op-motion.theme-optica .op-rr-orb-icon { animation: op-rr-swing 3.6s var(--op-ease) 1.2s infinite; } @keyframes op-rr-swing { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(-6px) rotate(-12deg); } 90% { transform: translateX(2px) rotate(4deg); } } html.theme-optica .op-rr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.6vw, 22px); align-items: start; } @container (min-width: 860px) { html.theme-optica .op-rr-layout { grid-template-columns: minmax(0, 1fr) 300px; } html.theme-optica .op-rr-summary { position: sticky; top: calc(var(--header-h, 76px) + 16px); } } html.theme-optica .op-rr-main { display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); min-width: 0; } html.theme-optica .op-rr-n { margin-inline-end: 4px; font-style: normal; color: rgb(var(--op-accent)); } html.theme-optica .op-rr-opt { font-family: var(--op-font-sans, inherit); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: lowercase; color: rgb(var(--op-muted)); } html.theme-optica .op-acc-card.has-error { box-shadow: var(--op-shadow-1), inset 0 0 0 1.5px rgb(var(--op-danger)); animation: op-co-nudge .45s var(--op-ease); } html.theme-optica .op-rr-alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 500; color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } html.theme-optica .op-rr-err { font-size: 12px; color: rgb(var(--op-danger)); animation: op-co-rise .35s var(--op-ease); } /* Check box (items + select all) */ html.theme-optica .op-rr-check { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: transparent; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: background-color .3s, color .3s, box-shadow .3s, transform .45s var(--op-spring); } html.theme-optica :is(.op-rr-line.is-on, .op-rr-all.is-on) .op-rr-check { color: #fff; background: rgb(var(--op-accent)); box-shadow: 0 6px 14px -6px rgb(var(--op-accent)); transform: scale(1.08); } html.theme-optica .op-rr-all { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; height: 38px; padding-inline: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); transition: background-color .2s, color .2s; } html.theme-optica .op-rr-all:hover { color: rgb(var(--op-ink)); background: rgb(var(--op-bg-2)); } @container (max-width: 479.98px) { html.theme-optica .op-acc-card-head:has(.op-rr-all) { flex-wrap: wrap; } html.theme-optica .op-rr-all { margin-inline-start: 60px; } } /* Item lines */ html.theme-optica .op-rr-lines { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-rr-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px 10px 10px; border-radius: 20px; background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1.5px transparent; transition: background-color .3s, box-shadow .35s; } html.theme-optica .op-rr-line:not(.is-off):hover { background: rgb(var(--op-bg-2)); } html.theme-optica .op-rr-line.is-on { background: rgb(var(--op-accent) / .06); box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-rr-line.is-off { opacity: .6; } html.theme-optica .op-rr-pick { flex: 1 1 260px; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0; text-align: start; border-radius: 14px; } html.theme-optica .op-rr-pick:disabled { cursor: not-allowed; } html.theme-optica .op-rr-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--op-accent) / .3); } html.theme-optica .op-rr-line .op-rd-thumb { width: 58px; height: 58px; transition: transform .5s var(--op-spring); } html.theme-optica .op-rr-line.is-on .op-rd-thumb { transform: rotate(-4deg) scale(1.04); } html.theme-optica .op-rr-tag { flex-shrink: 0; height: 26px; padding-inline: 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-rr-stepper { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-inline-start: auto; padding: 4px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-rr-stepper button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: rgb(var(--op-ink)); transition: background-color .2s, color .2s, transform .3s var(--op-spring); } html.theme-optica .op-rr-stepper button:hover:not(:disabled) { color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-rr-stepper button:active:not(:disabled) { transform: scale(.88); } html.theme-optica .op-rr-stepper button:disabled { opacity: .35; cursor: not-allowed; } html.theme-optica .op-rr-stepper b { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } html.theme-optica .op-rr-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; text-align: center; } html.theme-optica .op-rr-none .op-ov-empty-icon { width: 72px; height: 72px; } html.theme-optica .op-rr-none strong { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; } html.theme-optica .op-rr-none p { max-width: 360px; font-size: 13.5px; color: rgb(var(--op-muted)); } /* Reasons */ html.theme-optica .op-rr-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; border-radius: 18px; } html.theme-optica .op-rr-reasons.has-error { box-shadow: 0 0 0 4px rgb(var(--op-danger) / .1); } html.theme-optica .op-rr-reason { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 500; text-align: start; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: background-color .25s, box-shadow .3s, color .25s, transform .35s var(--op-ease); } html.theme-optica .op-rr-reason:hover { color: rgb(var(--op-ink)); transform: translateY(-2px); } html.theme-optica .op-rr-reason.is-on { color: rgb(var(--op-ink)); background: rgb(var(--op-accent) / .06); box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-rr-radio { position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--op-line)); transition: box-shadow .3s; } html.theme-optica .op-rr-radio::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: rgb(var(--op-accent)); transform: scale(0); transition: transform .4s var(--op-spring); } html.theme-optica .op-rr-reason.is-on .op-rr-radio { box-shadow: inset 0 0 0 2px rgb(var(--op-accent)); } html.theme-optica .op-rr-reason.is-on .op-rr-radio::after { transform: scale(1); } html.theme-optica .op-rr-note { position: relative; } html.theme-optica .op-rr-note textarea { width: 100%; min-height: 110px; padding: 12px 14px 26px; border-radius: 14px; font-size: 15px; line-height: 1.55; resize: vertical; color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s, background-color .25s; } html.theme-optica .op-rr-note textarea:focus { outline: none; background: rgb(var(--op-surface)); box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-rr-note.is-filled textarea { background: rgb(var(--op-surface)); } html.theme-optica .op-rr-count { position: absolute; bottom: 8px; inset-inline-end: 12px; font-size: 11px; color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; pointer-events: none; } html.theme-optica .op-rr-note:has(small) .op-rr-count { bottom: 28px; } /* Photos */ html.theme-optica .op-rr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } html.theme-optica .op-rr-photo { position: relative; overflow: hidden; aspect-ratio: 1; margin: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.op-motion.theme-optica .op-rr-photo { animation: op-lens-in .5s var(--op-ease) backwards; } html.theme-optica .op-rr-photo img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-rr-photo button { position: absolute; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: #fff; background: rgb(var(--op-ink) / .7); transition: background-color .2s, transform .3s var(--op-spring); } html.theme-optica .op-rr-photo button:hover { background: rgb(var(--op-danger)); transform: scale(1.1); } html.theme-optica .op-rr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; border-radius: 16px; cursor: pointer; color: rgb(var(--op-accent)); border: 2px dashed rgb(var(--op-line)); transition: border-color .3s, background-color .3s, transform .4s var(--op-ease); } html.theme-optica .op-rr-drop small { font-size: 11.5px; font-weight: 600; text-align: center; } html.theme-optica .op-rr-drop:hover, html.theme-optica .op-rr-drop.is-drag { border-color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .05); } html.theme-optica .op-rr-drop.is-drag { transform: scale(1.04); } html.theme-optica .op-rr-drop:focus-within { box-shadow: 0 0 0 4px rgb(var(--op-accent) / .2); } /* Summary */ html.theme-optica .op-rr-summary { gap: 10px; } html.theme-optica .op-rr-total { font-family: var(--op-font-display); font-size: clamp(30px, 5cqi, 38px); font-weight: 600; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } html.theme-optica .op-rr-summary .op-rd-refund-label { color: rgb(var(--op-muted)); opacity: 1; } html.theme-optica .op-rr-sub { font-size: 13px; font-weight: 600; color: rgb(var(--op-ink-2)); } html.theme-optica .op-rr-mini { display: flex; flex-direction: column; gap: 6px; padding-block: 10px; border-block: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-rr-mini li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-rr-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } html.theme-optica .op-rr-mini b { flex-shrink: 0; font-variant-numeric: tabular-nums; } html.theme-optica .op-rr-fine { font-size: 12px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-rr-submit { width: 100%; margin-top: 4px; } html.theme-optica .op-rr-need { font-size: 12px; text-align: center; color: rgb(var(--op-muted)); } @container (max-width: 859.98px) { html.theme-optica .op-rr-summary { position: sticky; bottom: calc(12px + var(--op-tabbar-h)); z-index: 20; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 12px 12px 12px 18px; border-radius: 22px; color: #fff; background: rgb(var(--op-ink) / .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--op-shadow-3); } html.theme-optica .op-rr-summary :is(.op-rr-mini, .op-rr-fine, .op-rr-need) { display: none; } html.theme-optica .op-rr-summary .op-rd-refund-label { grid-column: 1; color: rgb(255 255 255 / .65); } html.theme-optica .op-rr-total { grid-column: 1; font-size: 24px; } html.theme-optica .op-rr-sub { grid-column: 1; color: rgb(255 255 255 / .7); font-size: 12px; } html.theme-optica .op-rr-submit { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; height: 50px; background: #fff; color: rgb(var(--op-ink)); } html.theme-optica .op-rr-submit:hover { color: #fff; } } html.theme-optica .op-rd-thumb-none { display: grid; place-items: center; color: rgb(var(--op-muted)); } html.theme-optica .op-rd-line-copy strong.is-gone { font-style: italic; font-weight: 500; color: rgb(var(--op-muted)); } /* 29. Account shell (optica/account/AccountComponent) ----------------------- Sticky profile card + nav with a sliding ink pill (≥lg); below lg a compact profile row and a swipeable chip strip. Every /account page renders inside .op-shell-main, whose width the §21–§28 container queries read. */ html.theme-optica .op-shell { padding-block: 8px clamp(40px, 6vw, 80px); } html.theme-optica .op-shell-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } @media (min-width: 1024px) { html.theme-optica .op-shell-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; } } @media (min-width: 1280px) { html.theme-optica .op-shell-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; } } html.theme-optica .op-shell-main { min-width: 0; } /* Desktop card */ html.theme-optica .op-shell-side { display: none; } @media (min-width: 1024px) { html.theme-optica .op-shell-side { display: block; position: sticky; top: 16px; transition: top .5s var(--op-ease); } html.theme-optica:has(.op-nav:not(.is-hidden)) .op-shell-side { top: calc(var(--header-h, 76px) + 16px); } } html.theme-optica .op-shell-card { --op-hx: 50%; --op-hy: 0%; position: relative; overflow: clip; isolation: isolate; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 14px; border-radius: 30px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-shell-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; background: radial-gradient(90% 100% at 100% 0%, rgb(var(--op-accent) / .14), transparent 70%), radial-gradient(70% 90% at 0% 0%, rgb(56 189 248 / .10), transparent 70%); } html.theme-optica .op-shell-card-glow { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .5s; background: radial-gradient(260px circle at var(--op-hx) var(--op-hy), rgb(var(--op-accent) / .10), transparent 70%); } html.theme-optica .op-shell-card.is-lit .op-shell-card-glow { opacity: 1; } html.theme-optica .op-shell-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 8px; text-align: center; } html.theme-optica .op-shell-avatar { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 999px; } html.theme-optica .op-shell-avatar .op-ov-avatar-ring { inset: -6px; } html.theme-optica .op-shell-avatar-face { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; font-family: var(--op-font-display); font-size: 28px; font-weight: 600; color: #fff; background: linear-gradient(135deg, rgb(var(--op-accent)), rgb(56 189 248)); box-shadow: 0 14px 30px -14px rgb(var(--op-accent) / .8); transition: transform .5s var(--op-spring); } html.theme-optica .op-shell-avatar-face img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-shell-avatar:hover .op-shell-avatar-face { transform: scale(1.05); } html.theme-optica .op-shell-avatar-edit { position: absolute; bottom: 0; inset-inline-end: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--op-ink)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2); transform: scale(.6); opacity: 0; transition: transform .45s var(--op-spring), opacity .3s, background-color .3s, color .3s; } html.theme-optica .op-shell-avatar:hover .op-shell-avatar-edit, html.theme-optica .op-shell-avatar:focus-visible .op-shell-avatar-edit { transform: none; opacity: 1; color: #fff; background: rgb(var(--op-accent)); } @media (hover: none) { html.theme-optica .op-shell-avatar-edit { transform: none; opacity: 1; } } html.theme-optica .op-shell-who { display: flex; flex-direction: column; align-items: inherit; gap: 4px; min-width: 0; max-width: 100%; } html.theme-optica .op-shell-who .op-eyebrow { font-size: 10.5px; } html.theme-optica .op-shell-name { max-width: 100%; font-family: var(--op-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-transform: capitalize; color: rgb(var(--op-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-shell-contact { font-size: 13px; color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; } /* Nav + sliding pill */ html.theme-optica .op-shell-nav { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-shell-glider { position: absolute; top: 0; inset-inline: 0; z-index: 0; border-radius: 16px; background: rgb(var(--op-ink)); box-shadow: 0 12px 24px -12px rgb(var(--op-ink) / .7); opacity: 0; transition: transform .6s var(--op-spring), height .4s var(--op-ease), opacity .3s; } html.theme-optica .op-shell-glider.is-ready { opacity: 1; } html.theme-optica .op-shell-group { padding: 10px 14px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--op-muted)); } html.theme-optica .op-shell-group:not(:first-of-type) { margin-top: 6px; } html.theme-optica .op-shell-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: 16px; font-size: 14.5px; font-weight: 500; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .35s, background-color .25s; } html.theme-optica .op-shell-link:not(.is-current):hover { color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); } html.theme-optica .op-shell-link.is-current { color: #fff; } html.theme-optica .op-shell-link-icon { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); transition: color .35s, background-color .35s, transform .5s var(--op-spring); } html.theme-optica .op-shell-link:hover .op-shell-link-icon { color: rgb(var(--op-accent)); transform: rotate(-8deg); } html.theme-optica .op-shell-link.is-current .op-shell-link-icon { color: #fff; background: rgb(var(--op-accent)); transform: none; } html.theme-optica .op-shell-link-label { flex: 1; min-width: 0; } html.theme-optica .op-shell-link-arrow { flex-shrink: 0; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--op-ease); } html.theme-optica .op-shell-link:hover .op-shell-link-arrow, html.theme-optica .op-shell-link.is-current .op-shell-link-arrow, html.theme-optica .op-shell-shop:hover .op-shell-link-arrow { opacity: 1; transform: none; } html.theme-optica[dir="rtl"] :is(.op-shell-link-arrow, .op-shell-flip) { scale: -1 1; } html.theme-optica .op-shell-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--op-accent) / .35); } /* Foot: shop + logout */ html.theme-optica .op-shell-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed rgb(var(--op-line)); } html.theme-optica .op-shell-shop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; color: rgb(var(--op-ink)); background: linear-gradient(135deg, rgb(var(--op-accent) / .10), rgb(56 189 248 / .08)); transition: transform .4s var(--op-ease), box-shadow .3s; } html.theme-optica .op-shell-shop > span { flex: 1; text-transform: capitalize; } html.theme-optica .op-shell-shop > .op-icon:first-child { color: rgb(var(--op-accent)); } html.theme-optica .op-shell-shop:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(var(--op-accent) / .4); } html.theme-optica .op-shell-logout { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; color: rgb(var(--op-danger)); text-align: start; transition: background-color .2s; } html.theme-optica .op-shell-logout:hover { background: rgb(var(--op-danger) / .07); } html.theme-optica .op-shell-logout .op-icon { transition: transform .35s var(--op-ease); } html.theme-optica .op-shell-logout:hover .op-icon { transform: translateX(3px); } html.theme-optica .op-shell-logout:disabled { opacity: .6; cursor: progress; } /* Below lg: profile row + chip strip */ html.theme-optica .op-shell-mobile { display: flex; flex-direction: column; gap: 12px; min-width: 0; } @media (min-width: 1024px) { html.theme-optica .op-shell-mobile { display: none; } } html.theme-optica .op-shell-mhead { display: flex; align-items: center; gap: 12px; } html.theme-optica .op-shell-mhead .op-shell-who { flex: 1; align-items: flex-start; } html.theme-optica .op-shell-mhead .op-shell-name { font-size: 18px; } html.theme-optica .op-shell-mavatar { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 999px; font-family: var(--op-font-display); font-weight: 600; color: #fff; background: linear-gradient(135deg, rgb(var(--op-accent)), rgb(56 189 248)); box-shadow: 0 0 0 3px rgb(var(--op-surface)), 0 0 0 4.5px rgb(var(--op-accent) / .4); } html.theme-optica .op-shell-mavatar img { width: 100%; height: 100%; object-fit: cover; } html.theme-optica .op-shell-mout { flex-shrink: 0; color: rgb(var(--op-danger)); } html.theme-optica .op-shell-strip { position: relative; display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 20px; background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } html.theme-optica .op-shell-strip::-webkit-scrollbar { display: none; } html.theme-optica .op-shell-strip-glider { position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0; border-radius: 15px; background: rgb(var(--op-ink)); box-shadow: 0 10px 20px -12px rgb(var(--op-ink) / .7); opacity: 0; transition: transform .55s var(--op-spring), width .4s var(--op-ease), opacity .3s; } html.theme-optica .op-shell-strip-glider.is-ready { opacity: 1; } html.theme-optica .op-shell-chip { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px; border-radius: 15px; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-transform: capitalize; color: rgb(var(--op-ink-2)); transition: color .3s; } html.theme-optica .op-shell-chip.is-current { color: #fff; } html.theme-optica .op-shell-chip:last-child { margin-inline-end: 24px; } /* Page change: blur-focus in, quick fade out. Only while it runs, so nothing is left transformed (sticky toolbars and fixed modals in the pages stay intact). */ .op-shell-page-enter-active { transition: opacity .45s cubic-bezier(.22,1,.36,1), translate .55s cubic-bezier(.22,1,.36,1), filter .45s ease; } .op-shell-page-leave-active { transition: opacity .18s ease, filter .18s ease; } .op-shell-page-enter-from { opacity: 0; translate: 0 16px; filter: blur(6px); } .op-shell-page-leave-to { opacity: 0; filter: blur(4px); } /* Short screens (laptops): a denser card so the whole menu fits under the nav; below that, the card scrolls inside itself rather than hiding Logout. */ @media (min-width: 1024px) and (max-height: 900px) { html.theme-optica .op-shell-card { gap: 12px; padding: 16px 12px 12px; } html.theme-optica .op-shell-profile { flex-direction: row; align-items: center; gap: 14px; text-align: start; padding-inline: 6px; } html.theme-optica .op-shell-profile .op-shell-who { align-items: flex-start; } html.theme-optica .op-shell-avatar { width: 52px; height: 52px; flex-shrink: 0; } html.theme-optica .op-shell-avatar .op-ov-avatar-ring { inset: -4px; } html.theme-optica .op-shell-avatar-face { font-size: 18px; } html.theme-optica .op-shell-avatar-edit { width: 22px; height: 22px; bottom: -3px; inset-inline-end: -3px; } html.theme-optica .op-shell-name { font-size: 17px; } html.theme-optica .op-shell-nav { padding-top: 8px; } html.theme-optica .op-shell-group { padding-block: 6px 4px; } html.theme-optica .op-shell-link { min-height: 42px; padding-block: 4px; } html.theme-optica .op-shell-link-icon { width: 32px; height: 32px; border-radius: 10px; } html.theme-optica .op-shell-foot { flex-direction: row; padding-top: 10px; } html.theme-optica .op-shell-shop { flex: 1; padding: 10px 12px; } html.theme-optica .op-shell-shop .op-shell-link-arrow { display: none; } html.theme-optica .op-shell-logout { flex-shrink: 0; padding: 10px 12px; } } @media (min-width: 1024px) { html.theme-optica .op-shell-card { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; } html.theme-optica:has(.op-nav:not(.is-hidden)) .op-shell-card { max-height: calc(100vh - var(--header-h, 76px) - 32px); } } /* 30. Lens picker (optica/product/LensPickerComponent) ------------------------ Reuses §20's teleported drawer (op-co-layer / op-co-drawer / fields). Steps cross-fade with translate (never transform — see §4). Also styles the lens row under a checkout line. */ html.theme-optica .op-lp .op-co-drawer:focus { outline: none; } /* §20's drawer title capitalises each word; these are sentences ("What are these glasses for?"). */ html.theme-optica .op-lp .op-co-drawer-head h3 { text-transform: none; } html.theme-optica .op-lp-list { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-lp-stack { display: flex; flex-direction: column; gap: 18px; } html.theme-optica .op-lp-lead { font-size: 14px; line-height: 1.55; color: rgb(var(--op-ink-2)); } html.theme-optica .op-lp-hint { font-size: 12.5px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-error { font-size: 12.5px; color: rgb(var(--op-danger)); } html.theme-optica .op-lp-link { font-size: 12.5px; font-weight: 600; color: rgb(var(--op-accent)); } html.theme-optica .op-lp-link:hover { text-decoration: underline; text-underline-offset: 3px; } html.theme-optica .op-lp-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: start; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s, background-color .25s, translate .35s var(--op-ease); } html.theme-optica .op-lp-option:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink) / .5); translate: 0 -1px; } html.theme-optica .op-lp-option.is-on { box-shadow: inset 0 0 0 2px rgb(var(--op-accent)); background: rgb(var(--op-accent) / .05); } html.theme-optica .op-lp-option-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-lp-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.theme-optica .op-lp-option-text strong { font-family: var(--op-font-display); font-size: 15.5px; font-weight: 600; color: rgb(var(--op-ink)); } html.theme-optica .op-lp-option-text span { font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-option-price { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: rgb(var(--op-ink-2)); white-space: nowrap; } html.theme-optica .op-lp-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(var(--op-bg-2)); } html.theme-optica .op-lp-tabs > button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgb(var(--op-ink-2)); transition: background-color .25s, color .25s, box-shadow .25s; } html.theme-optica .op-lp-tabs > button.is-on { color: rgb(var(--op-ink)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1); } /* Prescription grid: eye label + 3 or 4 value columns, like the card it is copied from. */ html.theme-optica .op-lp-rx { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; } html.theme-optica .op-lp-rx.has-add { grid-template-columns: 64px repeat(4, minmax(0, 1fr)); } html.theme-optica .op-lp-rx-head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-align: center; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-rx-eye { display: flex; flex-direction: column; line-height: 1.15; } html.theme-optica .op-lp-rx-eye strong { font-family: var(--op-font-display); font-size: 15px; color: rgb(var(--op-ink)); } html.theme-optica .op-lp-rx-eye small { font-size: 11px; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-rx select, html.theme-optica .op-lp-rx input { width: 100%; min-width: 0; height: 44px; padding-inline: 8px; border-radius: 12px; font-size: 14px; text-align: center; text-align-last: center; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); -webkit-appearance: none; appearance: none; transition: box-shadow .25s, background-color .25s; } html.theme-optica .op-lp-rx select:focus, html.theme-optica .op-lp-rx input:focus { outline: none; background: rgb(var(--op-surface)); box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-lp-rx input:disabled { opacity: .5; cursor: not-allowed; } html.theme-optica .op-lp-rx .is-bad { box-shadow: 0 0 0 4px rgb(var(--op-danger) / .1), inset 0 0 0 1.5px rgb(var(--op-danger)); } @media (max-width: 419.98px) { html.theme-optica .op-lp-rx, html.theme-optica .op-lp-rx.has-add { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 6px; } html.theme-optica .op-lp-rx.has-add { grid-template-columns: 44px repeat(4, minmax(0, 1fr)); } html.theme-optica .op-lp-rx-eye small { display: none; } html.theme-optica .op-lp-rx select, html.theme-optica .op-lp-rx input { padding-inline: 2px; font-size: 13px; } } html.theme-optica .op-lp-pd { display: flex; flex-direction: column; gap: 8px; } html.theme-optica .op-lp-pd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.theme-optica .op-lp-pd-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html.theme-optica .op-lp-help { border-radius: 14px; background: rgb(var(--op-bg)); } html.theme-optica .op-lp-help summary { cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 600; color: rgb(var(--op-ink-2)); } html.theme-optica .op-lp-help ul { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; font-size: 12.5px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-help strong { color: rgb(var(--op-ink)); } html.theme-optica .op-lp-later { display: flex; gap: 14px; padding: 16px; border-radius: 18px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .07); } html.theme-optica .op-lp-later strong { display: block; margin-bottom: 4px; font-family: var(--op-font-display); font-size: 15px; color: rgb(var(--op-ink)); } html.theme-optica .op-lp-later p { font-size: 13px; line-height: 1.55; color: rgb(var(--op-ink-2)); } html.theme-optica .op-lp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } html.theme-optica .op-lp-chip { height: 44px; border-radius: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .2s, background-color .2s, color .2s; } html.theme-optica .op-lp-chip:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink) / .5); } html.theme-optica .op-lp-chip.is-on { color: #fff; background: rgb(var(--op-ink)); box-shadow: none; } html.theme-optica .op-lp-pkg { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px; border-radius: 18px; text-align: start; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .25s, background-color .25s; } html.theme-optica .op-lp-pkg:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px rgb(var(--op-ink) / .5); } html.theme-optica .op-lp-pkg.is-on { box-shadow: inset 0 0 0 2px rgb(var(--op-accent)); background: rgb(var(--op-accent) / .05); } html.theme-optica .op-lp-pkg.is-off { opacity: .55; cursor: not-allowed; } html.theme-optica .op-lp-pkg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } html.theme-optica .op-lp-pkg-top strong { font-family: var(--op-font-display); font-size: 15.5px; font-weight: 600; color: rgb(var(--op-ink)); } html.theme-optica .op-lp-pkg-price { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); } html.theme-optica .op-lp-pkg-tags { display: flex; flex-wrap: wrap; gap: 6px; } html.theme-optica .op-lp-pkg-desc { font-size: 13px; line-height: 1.5; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-pkg-features { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: rgb(var(--op-ink-2)); } html.theme-optica .op-lp-pkg-features > span { display: inline-flex; align-items: center; gap: 5px; } html.theme-optica .op-lp-pkg-features .op-icon { color: rgb(var(--op-accent)); } html.theme-optica .op-lp-pkg-note { font-size: 12px; font-weight: 600; color: rgb(var(--op-danger)); } html.theme-optica .op-lp-review { display: flex; flex-direction: column; border-radius: 18px; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-lp-review > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 16px; } html.theme-optica .op-lp-review > div + div { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-lp-review dt { font-size: 12.5px; text-transform: capitalize; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-review dd { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgb(var(--op-ink)); overflow-wrap: anywhere; } html.theme-optica .op-lp-review dd span { flex-shrink: 0; font-variant-numeric: tabular-nums; } html.theme-optica .op-lp-total { display: flex; align-items: baseline; justify-content: space-between; padding-inline: 4px; } html.theme-optica .op-lp-total span { font-size: 13px; text-transform: capitalize; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-total strong { font-family: var(--op-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } html.theme-optica .op-lp-foot { justify-content: space-between; align-items: center; } html.theme-optica .op-lp-foot-sum { display: flex; flex-direction: column; line-height: 1.2; } html.theme-optica .op-lp-foot-sum small { font-size: 11.5px; text-transform: capitalize; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-foot-sum strong { font-family: var(--op-font-display); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 479.98px) { html.theme-optica .op-lp-foot .op-btn { flex: 0 1 auto; } } .op-lp-step-enter-active, .op-lp-step-leave-active { transition: opacity .25s ease, translate .35s cubic-bezier(.22,1,.36,1); } .op-lp-step-enter-from { opacity: 0; translate: 16px 0; } .op-lp-step-leave-to { opacity: 0; translate: -16px 0; } [dir="rtl"] .op-lp-step-enter-from { translate: -16px 0; } [dir="rtl"] .op-lp-step-leave-to { translate: 16px 0; } html.theme-optica .op-lp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 20px; text-align: center; cursor: pointer; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .05); box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent) / .35); transition: background-color .25s, box-shadow .25s; } html.theme-optica .op-lp-drop:hover { background: rgb(var(--op-accent) / .09); } html.theme-optica .op-lp-drop:focus-within { box-shadow: 0 0 0 4px rgb(var(--op-accent) / .14), inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-lp-drop strong { font-family: var(--op-font-display); font-size: 15px; color: rgb(var(--op-ink)); overflow-wrap: anywhere; } html.theme-optica .op-lp-drop span { font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-lp-drop.is-done { color: rgb(21 138 71); background: rgb(21 138 71 / .06); box-shadow: inset 0 0 0 1.5px rgb(21 138 71 / .4); } html.theme-optica .op-lp-drop.is-busy { opacity: .7; cursor: progress; } /* Lens row under a checkout line */ html.theme-optica .op-co-line-lens { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; background: rgb(var(--op-bg)); } html.theme-optica .op-co-line-lens-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-line-lens-title .op-icon { flex-shrink: 0; color: rgb(var(--op-accent)); } html.theme-optica .op-co-line-lens-title em { margin-inline-start: auto; font-style: normal; font-variant-numeric: tabular-nums; } html.theme-optica .op-co-line-lens-rx { color: rgb(var(--op-muted)); font-variant-numeric: tabular-nums; } html.theme-optica .op-co-line-lens-rx.is-later { color: rgb(181 114 0); } html.theme-optica .op-co-rxnote { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; color: rgb(181 114 0); background: rgb(255 244 214); box-shadow: inset 0 0 0 1px rgb(181 114 0 / .25); } html.theme-optica .op-co-rxnote .op-icon { flex-shrink: 0; margin-top: 1px; } html.theme-optica .op-co-rxnote p { font-size: 13px; line-height: 1.55; color: rgb(var(--op-ink-2)); } html.theme-optica .op-co-rxnote strong { display: block; color: rgb(var(--op-ink)); } /* Lens picker: saved prescriptions */ html.theme-optica .op-lp-saved .op-lp-option-text span { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } html.theme-optica .op-lp-saved-warn { color: rgb(181 114 0) !important; } html.theme-optica .op-lp-filled { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 500; color: rgb(21 138 71); background: rgb(21 138 71 / .07); } html.theme-optica .op-lp-filled .op-icon { flex-shrink: 0; } html.theme-optica .op-lp-save { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: rgb(var(--op-ink-2)); cursor: pointer; } html.theme-optica .op-lp-save input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: rgb(var(--op-accent)); } /* 31. My prescriptions (optica/account/prescriptions) ------------------------ */ html.theme-optica .op-rxp-card:not(.op-ad-new) { gap: 12px; padding: 18px 18px 0; } html.theme-optica .op-rxp-card.op-ad-card--skel { padding-bottom: 18px; } html.theme-optica .op-rxp-head h3 { margin-top: 10px; font-family: var(--op-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; } html.theme-optica .op-rxp-head p { margin-top: 2px; font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-rxp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-rxp-badge.is-photo { color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); } html.theme-optica .op-rxp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-rxp-table th, html.theme-optica .op-rxp-table td { padding: 8px 10px; text-align: left; } html.theme-optica .op-rxp-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); } html.theme-optica .op-rxp-table tbody th { font-size: 12px; color: rgb(var(--op-ink)); } html.theme-optica .op-rxp-table tbody tr + tr > * { border-top: 1px solid rgb(var(--op-line)); } html.theme-optica .op-rxp-pd { font-size: 13px; font-weight: 500; color: rgb(var(--op-ink-2)); font-variant-numeric: tabular-nums; } html.theme-optica .op-rxp-photo-note { padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); } html.theme-optica .op-rxp-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: rgb(181 114 0); } html.theme-optica .op-rxp-warn .op-icon { flex-shrink: 0; margin-top: 1px; } html.theme-optica .op-rxp-card .op-ad-actions { margin-top: auto; margin-inline: -18px; } html.theme-optica .op-rxp-empty-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 999px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } /* 32. Wishlist (optica/wishlist/*) ------------------------------------------- Focus-in hero with count-up totals and a fan of saved frames around a beating heart; §18's sticky toolbar (glider tabs + sort) plus an in-list search; §14 cards that leave with a blur while neighbours glide into the gap; undo toast. */ html.theme-optica .op-wl { overflow-x: clip; padding-bottom: 32px; } /* Hero */ html.theme-optica .op-wl-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(20px, 3vw, 36px) clamp(32px, 5vw, 56px); } html.theme-optica .op-wl-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } html.theme-optica .op-wl-hero .op-blob--a { width: 460px; height: 460px; right: -60px; top: -180px; background: rgb(var(--op-danger) / .2); } html.theme-optica .op-wl-hero .op-blob--b { width: 340px; height: 340px; left: -120px; bottom: -200px; } html.theme-optica .op-wl-hero .op-blob--c { width: 260px; height: 260px; left: 45%; top: 10%; background: rgb(var(--op-accent) / .18); } html.theme-optica .op-wl-gridlines { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--op-ink) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--op-ink) / .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%); } html.theme-optica .op-wl-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; } @media (min-width: 900px) { html.theme-optica .op-wl-hero-inner { grid-template-columns: minmax(0, 1fr) auto; } } html.theme-optica .op-wl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-optica .op-wl-eyebrow-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--op-danger)); } html.theme-optica .op-wl-eyebrow-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-wl-title { font-family: var(--op-font-display); font-size: clamp(40px, 6.4vw, 80px); font-weight: 600; line-height: .98; letter-spacing: -.045em; color: rgb(var(--op-ink)); text-transform: capitalize; } html.theme-optica .op-wl-title > span:last-child { background: linear-gradient(100deg, rgb(var(--op-ink)) 10%, rgb(var(--op-danger)) 55%, rgb(var(--op-accent)) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.theme-optica .op-wl-lede { max-width: 520px; font-size: 16px; line-height: 1.6; color: rgb(var(--op-muted)); } html.theme-optica .op-wl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } html.theme-optica .op-wl-stat { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; background: rgb(var(--op-surface) / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: transform .4s var(--op-ease), box-shadow .4s var(--op-ease); } html.theme-optica .op-wl-stat:hover { transform: translateY(-3px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-wl-stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .1); } html.theme-optica .op-wl-stat:nth-child(2) .op-wl-stat-icon { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } html.theme-optica .op-wl-stat.is-accent .op-wl-stat-icon { color: #fff; background: rgb(var(--op-accent)); } html.theme-optica .op-wl-stat-text { display: flex; flex-direction: column; line-height: 1.15; } html.theme-optica .op-wl-stat-text strong { font-family: var(--op-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink)); } html.theme-optica .op-wl-stat-text small { font-size: 12.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-wl-stats.is-loading strong { color: transparent; border-radius: 8px; background: linear-gradient(90deg, rgb(var(--op-bg-2)), rgb(var(--op-line)), rgb(var(--op-bg-2))); background-size: 200% 100%; animation: op-shimmer 1.4s linear infinite; } /* Hero art: lens rings, fanned covers, beating heart, rising hearts */ html.theme-optica .op-wl-art { position: relative; display: none; width: clamp(260px, 26vw, 340px); aspect-ratio: 1; } @media (min-width: 900px) { html.theme-optica .op-wl-art { display: block; } } html.theme-optica .op-wl-rings { position: absolute; inset: 0; } html.theme-optica .op-wl-rings i { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgb(var(--op-danger) / .28); animation: op-ripple 6.5s var(--op-ease) infinite; } html.theme-optica .op-wl-rings i:nth-child(2) { animation-delay: -2.2s; border-color: rgb(var(--op-accent) / .25); } html.theme-optica .op-wl-rings i:nth-child(3) { animation-delay: -4.4s; } html.theme-optica .op-wl-fan { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 3 / 4; margin: -30% 0 0 -23%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); transform: rotate(var(--op-r, 0deg)) translate(var(--op-tx, 0), 0); animation: op-wl-fan-in 1.1s var(--op-spring) both, op-wl-sway 7s ease-in-out infinite; animation-delay: calc(var(--op-n, 0) * 120ms + 400ms), calc(var(--op-n, 0) * -1.6s); } html.theme-optica .op-wl-fan img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } html.theme-optica .op-wl-fan.is-0 { --op-r: -14deg; --op-tx: -42%; --op-n: 0; z-index: 1; } html.theme-optica .op-wl-fan.is-1 { --op-r: 13deg; --op-tx: 42%; --op-n: 1; z-index: 1; } html.theme-optica .op-wl-fan.is-2 { --op-r: -2deg; --op-tx: 0; --op-n: 2; z-index: 2; } @keyframes op-wl-fan-in { from { opacity: 0; transform: rotate(0deg) translate(0, 30%) scale(.6); } } @keyframes op-wl-sway { 50% { translate: 0 -10px; rotate: 2deg; } } html.theme-optica .op-wl-orb { position: absolute; z-index: 3; left: 50%; bottom: 6%; display: grid; place-items: center; width: 64px; height: 64px; margin-left: -32px; border-radius: 999px; color: #fff; background: rgb(var(--op-danger)); box-shadow: 0 16px 34px -10px rgb(var(--op-danger) / .7), 0 0 0 6px rgb(var(--op-surface)); animation: op-wl-beat 1.6s ease-in-out infinite; } html.theme-optica .op-wl-orb .op-icon { fill: currentColor; } html.theme-optica .op-wl-orb.is-solo { top: 50%; bottom: auto; width: 128px; height: 128px; margin: -64px 0 0 -64px; } @keyframes op-wl-beat { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.12; } 26% { scale: 1.04; } 32% { scale: 1.1; } } html.theme-optica .op-wl-float { position: absolute; z-index: 4; left: calc(10% + var(--op-i) * 13%); bottom: 12%; color: rgb(var(--op-danger)); opacity: 0; animation: op-wl-rise 5.5s ease-in infinite; animation-delay: calc(var(--op-i) * -0.95s); } html.theme-optica .op-wl-float .op-icon { fill: currentColor; } html.theme-optica .op-wl-float:nth-child(even) { color: rgb(var(--op-accent)); } @keyframes op-wl-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-10deg); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -240px) scale(1.1) rotate(16deg); } } /* Toolbar: §18 sticky glass bar + tab counts + search */ html.theme-optica .op-wl-toolbar-inner { flex-wrap: wrap; } html.theme-optica .op-shop-rail-item:disabled { opacity: .4; cursor: not-allowed; } html.theme-optica .op-wl-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-inline-start: 8px; padding-inline: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); transition: color .35s, background-color .35s; } html.theme-optica .op-shop-rail-item.is-active .op-wl-tab-count { color: rgb(var(--op-ink)); background: #fff; } html.theme-optica .op-wl-tools { gap: 8px; } html.theme-optica .op-wl-find { display: flex; align-items: center; gap: 8px; width: 220px; height: 44px; padding-inline: 14px 8px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: width .5s var(--op-ease), box-shadow .3s; cursor: text; } html.theme-optica .op-wl-find:focus-within, html.theme-optica .op-wl-find.has-value { width: 280px; box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)), 0 0 0 4px rgb(var(--op-accent) / .12); color: rgb(var(--op-accent)); } html.theme-optica .op-wl-find input { flex: 1; width: 0; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; color: rgb(var(--op-ink)); } html.theme-optica .op-wl-find input::-webkit-search-cancel-button { display: none; } html.theme-optica .op-wl-find-clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg-2)); transition: color .2s, transform .3s var(--op-spring); } html.theme-optica .op-wl-find-clear:hover { color: rgb(var(--op-danger)); transform: rotate(90deg); } @media (max-width: 767.98px) { html.theme-optica .op-wl-toolbar-inner > .op-shop-rail { flex: 1 1 100%; width: auto; } html.theme-optica .op-wl-tools { flex: 1 1 100%; margin-inline-start: 0; } html.theme-optica .op-wl-find, html.theme-optica .op-wl-find:focus-within, html.theme-optica .op-wl-find.has-value { flex: 1 1 0; width: auto; min-width: 0; } html.theme-optica .op-wl-tools .op-shop-sort { flex-shrink: 0; } html.theme-optica .op-wl-tools .op-shop-sort select { max-width: 130px; } } /* Grid + card */ html.theme-optica .op-wl-body { padding-top: clamp(20px, 3vw, 32px); } html.theme-optica .op-wl-grid { position: relative; transition: opacity .3s, filter .3s; } html.theme-optica .op-wl-grid.is-busy { opacity: .45; filter: blur(2px); pointer-events: none; } /* `backwards`, not `both`: a held end frame would pin opacity and the leave fade would never show. */ html.op-motion.theme-optica .op-wl-card { animation: op-card-in .8s var(--op-ease) backwards; animation-delay: calc(min(var(--op-i, 0), 12) * 60ms); } .op-wl-card-move { transition: transform .65s cubic-bezier(.22, 1, .36, 1); } .op-wl-card-leave-active { position: absolute; z-index: 0; transition: opacity .45s ease, scale .55s cubic-bezier(.22, 1, .36, 1), filter .45s ease; pointer-events: none; } .op-wl-card-leave-to { opacity: 0; scale: .82; filter: blur(10px); } .op-wl-card-enter-active { transition: opacity .5s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1); } .op-wl-card-enter-from { opacity: 0; scale: .85; } html.theme-optica .op-wl-card .op-card-body { flex: 1; } html.theme-optica .op-wl-card .op-wl-cta { margin-top: auto; } html.theme-optica .op-wl-card .op-card-meta { margin-bottom: 6px; } html.theme-optica .op-wl-remove { overflow: hidden; } html.theme-optica .op-wl-remove .op-icon { position: absolute; transition: opacity .25s, transform .4s var(--op-spring); } html.theme-optica .op-wl-remove-x { opacity: 0; transform: rotate(-90deg) scale(.5); } html.theme-optica .op-wl-remove:hover, html.theme-optica .op-wl-remove:focus-visible { color: #fff; background: rgb(var(--op-danger)); } html.theme-optica .op-wl-remove:hover .op-wl-remove-heart, html.theme-optica .op-wl-remove:focus-visible .op-wl-remove-heart { opacity: 0; transform: scale(.4); } html.theme-optica .op-wl-remove:hover .op-wl-remove-x, html.theme-optica .op-wl-remove:focus-visible .op-wl-remove-x { opacity: 1; transform: none; } html.theme-optica .op-wl-low { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgb(234 88 12); } html.theme-optica .op-wl-low-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: currentColor; } html.theme-optica .op-wl-low-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: op-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-optica .op-wl-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin-top: 6px; border-radius: 999px; font-family: var(--op-font-display); font-size: 13.5px; font-weight: 600; color: rgb(var(--op-ink)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); background: rgb(var(--op-surface)); transition: color .3s, box-shadow .3s, transform .3s var(--op-spring); } html.theme-optica .op-wl-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--op-ink)); transform: translateY(101%); transition: transform .5s var(--op-ease); } html.theme-optica .op-wl-cta:hover { color: #fff; box-shadow: none; } html.theme-optica .op-wl-cta:hover::before { transform: none; } html.theme-optica .op-wl-cta:active { transform: scale(.97); } html.theme-optica .op-wl-cta-arrow { transition: transform .4s var(--op-ease); } html.theme-optica .op-wl-cta:hover .op-wl-cta-arrow { transform: translateX(4px); } html[dir="rtl"].theme-optica .op-wl-cta-arrow { scale: -1 1; } html.theme-optica .op-wl-cta.is-notify::before { background: rgb(var(--op-accent)); } @media (max-width: 639.98px) { html.theme-optica .op-wl-cta { height: 38px; font-size: 12.5px; } } /* Empty states */ html.theme-optica .op-wl-nomatch { margin-top: 8px; } html.theme-optica .op-wl-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(36px, 7vw, 72px) 20px; border-radius: 36px; background: radial-gradient(60% 60% at 50% 0%, rgb(var(--op-danger) / .07), transparent 70%), rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-wl-empty > p { max-width: 420px; color: rgb(var(--op-muted)); font-size: 15px; line-height: 1.6; } html.theme-optica .op-wl-empty-art { position: relative; width: 220px; height: 220px; margin-bottom: 4px; } html.theme-optica .op-wl-empty-art .op-wl-orb.is-solo { width: 112px; height: 112px; margin: -56px 0 0 -56px; } html.theme-optica .op-wl-empty-orbit { position: absolute; inset: 14px; border-radius: 999px; border: 1.5px dashed rgb(var(--op-line)); animation: op-spin-plain 18s linear infinite; } html.theme-optica .op-wl-empty-sat { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px; border-radius: 14px; color: rgb(var(--op-accent)); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-2); animation: op-spin-plain 18s linear infinite reverse; } html.theme-optica .op-wl-empty-sat.is-0 { left: 50%; top: 0; } html.theme-optica .op-wl-empty-sat.is-1 { left: 93.3%; top: 75%; color: rgb(var(--op-danger)); } html.theme-optica .op-wl-empty-sat.is-2 { left: 6.7%; top: 75%; } html.theme-optica .op-wl-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(720px, 100%); margin: 10px 0 14px; counter-reset: op-wl; list-style: none; padding: 0; } @media (min-width: 640px) { html.theme-optica .op-wl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } html.theme-optica .op-wl-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 30px 14px 14px; line-height: 1.35; border-radius: 18px; text-align: start; font-size: 14px; font-weight: 500; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); counter-increment: op-wl; } html.theme-optica .op-wl-steps li::after { content: counter(op-wl, decimal-leading-zero); position: absolute; top: 8px; inset-inline-end: 12px; font-family: var(--op-font-display); font-size: 11px; font-weight: 700; color: rgb(var(--op-muted) / .6); } html.theme-optica .op-wl-step-icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } /* Keep exploring band */ html.theme-optica .op-wl-more { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 4vw, 48px); border-radius: 32px; color: #fff; background: rgb(var(--op-ink)); } html.theme-optica .op-wl-more-glow { position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -260px; border-radius: 999px; background: conic-gradient(from var(--op-spin), rgb(var(--op-accent) / .7), rgb(var(--op-danger) / .55), rgb(56 189 248 / .5), rgb(var(--op-accent) / .7)); filter: blur(70px); opacity: .7; animation: op-spin 14s linear infinite; } html.theme-optica .op-wl-more-copy { display: flex; flex-direction: column; gap: 10px; } html.theme-optica .op-wl-more h2 { font-family: var(--op-font-display); font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; } html.theme-optica .op-wl-more-btn { color: rgb(var(--op-ink)); background: #fff; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .5); } html.theme-optica .op-wl-more-btn .op-icon { transition: transform .4s var(--op-ease); } html.theme-optica .op-wl-more-btn:hover .op-icon { transform: translateX(4px); } /* Undo toast (teleported to body, so not scoped by .op-wl) */ html.theme-optica .op-wl-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--op-tabbar-h) + 18px); display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 10px 10px 10px 10px; border-radius: 20px; overflow: hidden; color: #fff; background: rgb(var(--op-ink) / .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--op-shadow-3); translate: -50% 0; } html.theme-optica .op-wl-toast-thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; } html.theme-optica .op-wl-toast-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } html.theme-optica .op-wl-toast-copy strong { font-size: 14px; font-weight: 600; } html.theme-optica .op-wl-toast-copy span { font-size: 12.5px; color: rgb(255 255 255 / .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-optica .op-wl-toast-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: rgb(var(--op-ink)); background: #fff; transition: transform .3s var(--op-spring), background-color .2s; } html.theme-optica .op-wl-toast-btn:hover { background: rgb(var(--op-accent)); color: #fff; } html.theme-optica .op-wl-toast-btn:active { transform: scale(.94); } html.theme-optica .op-wl-toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--op-accent)); transform-origin: left; animation: op-wl-timer linear forwards; } html.theme-optica .op-wl-toast-timer.is-paused { animation-play-state: paused; } @keyframes op-wl-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } .op-wl-toast-enter-active { transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); } .op-wl-toast-leave-active { transition: opacity .25s ease, transform .3s ease; } .op-wl-toast-enter-from, .op-wl-toast-leave-to { opacity: 0; transform: translateY(30px) scale(.94); } @media (prefers-reduced-motion: reduce) { html.theme-optica .op-wl-fan, html.theme-optica .op-wl-orb, html.theme-optica .op-wl-float, html.theme-optica .op-wl-rings i, html.theme-optica .op-wl-empty-orbit, html.theme-optica .op-wl-empty-sat, html.theme-optica .op-wl-more-glow { animation: none; } html.theme-optica .op-wl-float { display: none; } } /* 33. Cart page + drawer (optica/checkout/cartList/*, layouts/…/optica/FrontendCartComponent) Page lives inside the §20 checkout shell and reuses its summary rows, meter, qty stepper and lens block; lines leave like §32 cards and share its undo toast. The drawer keeps the default's #cart-canvas / .canvas-active contract. */ /* Header step rail */ html.theme-optica .op-cart-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding: 0; list-style: none; } html.theme-optica .op-cart-steps li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: rgb(var(--op-muted)); background: rgb(var(--op-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cart-steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg-2)); } html.theme-optica .op-cart-steps li.is-current { color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 10px 22px -10px rgb(var(--op-ink) / .6); } html.theme-optica .op-cart-steps li.is-current span { color: rgb(var(--op-ink)); background: #fff; } /* Layout */ html.theme-optica .op-cart { padding-bottom: 32px; } html.theme-optica .op-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1024px) { html.theme-optica .op-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } } html.theme-optica .op-cart-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } html.theme-optica .op-cart-meter { margin-bottom: 0; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } /* Lines */ html.theme-optica .op-cart-lines { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } html.theme-optica .op-cart-line { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: var(--op-radius); background: rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .4s var(--op-ease), translate .4s var(--op-ease), opacity .3s; } html.theme-optica .op-cart-line:hover { box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-accent) / .25); translate: 0 -2px; } html.theme-optica .op-cart-line.is-busy { opacity: .7; } html.op-motion.theme-optica .op-cart-line { animation: op-card-in .8s var(--op-ease) backwards; animation-delay: calc(min(var(--op-i, 0), 10) * 70ms + 250ms); } .op-cart-line-move { transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .op-cart-line-leave-active { position: absolute; z-index: 0; transition: opacity .4s ease, scale .5s cubic-bezier(.22, 1, .36, 1), filter .4s ease; pointer-events: none; } .op-cart-line-leave-to { opacity: 0; scale: .94; filter: blur(8px); } .op-cart-line-enter-active { transition: opacity .5s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1); } .op-cart-line-enter-from { opacity: 0; scale: .9; } html.theme-optica .op-cart-media { --op-rx: 0deg; --op-ry: 0deg; position: relative; align-self: start; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #fff, rgb(var(--op-bg-2))); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transform: perspective(700px) rotateX(var(--op-rx)) rotateY(var(--op-ry)); transition: transform .6s var(--op-ease); } html.theme-optica .op-cart-media.is-tilting { transition: transform .12s linear; } html.theme-optica .op-cart-media img { width: 100%; mix-blend-mode: multiply; transition: scale .8s var(--op-ease); } html.theme-optica .op-cart-line:hover .op-cart-media img { scale: 1.06; } html.theme-optica .op-cart-off { position: absolute; top: 8px; inset-inline-start: 8px; } html.theme-optica .op-cart-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html.theme-optica .op-cart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } html.theme-optica .op-cart-ident { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html.theme-optica .op-cart-name { font-family: var(--op-font-display); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; text-transform: capitalize; color: rgb(var(--op-ink)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.theme-optica .op-cart-variants { display: flex; flex-wrap: wrap; gap: 6px; } html.theme-optica .op-cart-variant { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 500; text-transform: capitalize; color: rgb(var(--op-ink-2)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cart-total { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; overflow: hidden; } html.theme-optica .op-cart-total strong { display: inline-block; font-family: var(--op-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } html.theme-optica .op-cart-each { font-size: 12px; color: rgb(var(--op-muted)); white-space: nowrap; } html.theme-optica .op-cart-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; font-weight: 600; color: rgb(var(--op-ink-2)); font-variant-numeric: tabular-nums; } html.theme-optica .op-cart-price del { font-size: 13px; font-weight: 500; color: rgb(var(--op-muted)); } html.theme-optica .op-cart-lens { margin: 0; } html.theme-optica .op-cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; } html.theme-optica .op-cart-qty { background: rgb(var(--op-bg)); } html.theme-optica .op-cart-links { display: flex; align-items: center; gap: 4px; } html.theme-optica .op-cart-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: rgb(var(--op-muted)); transition: color .2s, background-color .2s, transform .3s var(--op-spring); } html.theme-optica .op-cart-link:hover { color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .08); } html.theme-optica .op-cart-link.is-danger:hover { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } html.theme-optica .op-cart-link:active { transform: scale(.94); } html.theme-optica .op-cart-link:hover .op-icon { animation: op-heart .5s var(--op-spring); } @media (max-width: 639.98px) { html.theme-optica .op-cart-line { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 20px; } html.theme-optica .op-cart-media { border-radius: 14px; } html.theme-optica .op-cart-top { flex-direction: column; gap: 4px; } html.theme-optica .op-cart-total { align-items: flex-start; } html.theme-optica .op-cart-total strong { font-size: 17px; } html.theme-optica .op-cart-name { font-size: 15px; } html.theme-optica .op-cart-link span { display: none; } html.theme-optica .op-cart-link { width: 36px; padding: 0; justify-content: center; } } /* Trust strip */ html.theme-optica .op-cart-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { html.theme-optica .op-cart-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } } html.theme-optica .op-cart-trust li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: rgb(var(--op-ink-2)); background: rgb(var(--op-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cart-trust li > span { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: rgb(var(--op-accent)); background: rgb(var(--op-accent) / .1); } /* Upsell */ html.theme-optica .op-cart-upsell { margin-top: 18px; } html.theme-optica .op-cart-upsell-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } html.theme-optica .op-cart-upsell-head h2 { font-family: var(--op-font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.03em; } html.theme-optica .op-cart-upsell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 768px) { html.theme-optica .op-cart-upsell-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } html.theme-optica .op-cart-up { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); transition: box-shadow .4s var(--op-ease), transform .4s var(--op-ease); } html.theme-optica .op-cart-up:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-2), inset 0 0 0 1px rgb(var(--op-accent) / .25); } html.theme-optica .op-cart-up-media { display: block; border-radius: 14px; overflow: hidden; background: rgb(var(--op-bg-2)); } html.theme-optica .op-cart-up-media img { width: 100%; mix-blend-mode: multiply; transition: scale .8s var(--op-ease); } html.theme-optica .op-cart-up:hover .op-cart-up-media img { scale: 1.07; } html.theme-optica .op-cart-up-body { display: flex; flex-direction: column; gap: 4px; padding-inline: 2px; padding-inline-end: 44px; } html.theme-optica .op-cart-up-name { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: rgb(var(--op-ink)); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-transform: capitalize; } html.theme-optica .op-cart-up-name:hover { color: rgb(var(--op-accent)); } html.theme-optica .op-cart-up-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } html.theme-optica .op-cart-up-price strong { font-family: var(--op-font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-optica .op-cart-up-price del { font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-cart-up-add { position: absolute; bottom: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 10px 20px -10px rgb(var(--op-ink) / .7); transition: background-color .25s, transform .4s var(--op-spring); } html.theme-optica .op-cart-up-add:hover:not(:disabled) { background: rgb(var(--op-accent)); transform: rotate(90deg) scale(1.08); } html.theme-optica .op-cart-up-add:disabled { opacity: .7; } html.theme-optica .op-cart-up-add.is-sm { position: static; width: 32px; height: 32px; } /* Summary */ html.theme-optica .op-cart-side .op-co-total strong { font-size: 32px; } html.theme-optica .op-cart-area { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 12px; padding-inline: 14px 12px; border-radius: 14px; color: rgb(var(--op-muted)); background: rgb(var(--op-bg)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cart-area:focus-within { box-shadow: inset 0 0 0 1.5px rgb(var(--op-accent)); } html.theme-optica .op-cart-area select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; font-size: 14px; color: rgb(var(--op-ink)); cursor: pointer; } html.theme-optica .op-cart-area .op-icon:last-child { pointer-events: none; } html.theme-optica .op-cart-coupon { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 6px 10px 10px; border-radius: 16px; background: rgb(22 163 74 / .08); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .3); } html.theme-optica .op-cart-coupon-icon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: rgb(22 163 74); } html.theme-optica .op-cart-coupon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } html.theme-optica .op-cart-coupon-text strong { font-size: 13.5px; color: rgb(21 128 61); text-transform: capitalize; } html.theme-optica .op-cart-coupon-text small { font-size: 12px; color: rgb(var(--op-ink-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-optica .op-cart-note { margin-top: 8px; font-size: 12px; color: rgb(var(--op-muted)); } html.theme-optica .op-cart-go { width: 100%; margin-top: 18px; justify-content: space-between; padding-inline: 22px; } html.theme-optica .op-cart-go .op-icon:first-child { opacity: .8; } html.theme-optica .op-cart-continue { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: rgb(var(--op-muted)); transition: color .2s, gap .3s var(--op-ease); } html.theme-optica .op-cart-continue:hover { color: rgb(var(--op-ink)); gap: 10px; } html.theme-optica .op-cart-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: rgb(var(--op-muted)); } /* Phone checkout bar (the tab bar hides on this route) */ html.theme-optica .op-cart-bar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgb(var(--op-surface) / .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--op-shadow-3), inset 0 0 0 1px rgb(var(--op-line)); } html.op-motion.theme-optica .op-cart-bar { animation: op-fab-in .7s var(--op-spring) .5s both; } html.theme-optica .op-cart-bar-total { display: flex; flex-direction: column; line-height: 1.15; } html.theme-optica .op-cart-bar-total small { font-size: 11.5px; color: rgb(var(--op-muted)); text-transform: capitalize; } html.theme-optica .op-cart-bar-total strong { font-family: var(--op-font-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { html.theme-optica .op-cart-bar { display: none; } } @media (max-width: 1023.98px) { html.theme-optica .op-cart { padding-bottom: 96px; } html.theme-optica .op-cart-toast { bottom: 96px; } } /* Empty */ html.theme-optica .op-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(36px, 7vw, 72px) 20px; border-radius: 36px; background: radial-gradient(60% 60% at 50% 0%, rgb(var(--op-accent) / .08), transparent 70%), rgb(var(--op-surface)); box-shadow: var(--op-shadow-1), inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cart-empty > p { max-width: 420px; color: rgb(var(--op-muted)); font-size: 15px; line-height: 1.6; } html.theme-optica .op-cart-empty-art { position: relative; width: 220px; height: 220px; margin-bottom: 4px; } html.theme-optica .op-cart-orb { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 999px; color: #fff; background: rgb(var(--op-ink)); box-shadow: 0 18px 40px -12px rgb(var(--op-ink) / .6), 0 0 0 6px rgb(var(--op-surface)); animation: op-cart-bob 3.2s ease-in-out infinite; } html.theme-optica .op-cart-orb.is-small { position: relative; left: auto; top: auto; width: 76px; height: 76px; margin: 0 0 6px; } @keyframes op-cart-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -8px; rotate: -6deg; } 60% { translate: 0 -3px; rotate: 4deg; } } /* Drawer */ html.theme-optica .op-cd { position: fixed; inset: 0; z-index: 40; visibility: hidden; opacity: 0; background: rgb(var(--op-ink) / .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .4s ease, visibility .4s; } html.theme-optica .op-cd-panel { display: flex; flex-direction: column; width: min(440px, 100%); height: 100dvh; margin-inline-start: auto; background: rgb(var(--op-bg)); box-shadow: var(--op-shadow-3); transform: translateX(100%); transition: transform .6s cubic-bezier(.22, 1, .36, 1); } html[dir="rtl"].theme-optica .op-cd-panel { transform: translateX(-100%); } html.theme-optica .op-cd-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; } html.theme-optica .op-cd-head h3 { font-family: var(--op-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; text-transform: capitalize; } html.theme-optica .op-cd-head small { font-size: 13px; color: rgb(var(--op-muted)); } html.theme-optica .op-cd-meter { flex-shrink: 0; margin: 0 18px 12px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 18px; scrollbar-width: thin; } html.theme-optica .op-cd-lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } html.theme-optica .op-cd-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 18px; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.op-motion.theme-optica .op-cd.canvas-active .op-cd-line { animation: op-cd-in .6s var(--op-ease) backwards; animation-delay: calc(min(var(--op-i, 0), 8) * 60ms + 200ms); } @keyframes op-cd-in { from { opacity: 0; translate: 30px 0; filter: blur(6px); } } .op-cd-line-leave-active { transition: opacity .3s ease, translate .4s cubic-bezier(.22, 1, .36, 1); } .op-cd-line-leave-to { opacity: 0; translate: 40px 0; } .op-cd-line-move { transition: transform .5s cubic-bezier(.22, 1, .36, 1); } html.theme-optica .op-cd-media { border-radius: 12px; overflow: hidden; background: rgb(var(--op-bg-2)); align-self: start; } html.theme-optica .op-cd-media img { width: 100%; mix-blend-mode: multiply; } html.theme-optica .op-cd-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } html.theme-optica .op-cd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } html.theme-optica .op-cd-top h4 { font-size: 14.5px; font-weight: 600; line-height: 1.3; text-transform: capitalize; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.theme-optica .op-cd-remove { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px 0 0; border-radius: 999px; color: rgb(var(--op-muted)); transition: color .2s, background-color .2s; } html.theme-optica .op-cd-remove:hover { color: rgb(var(--op-danger)); background: rgb(var(--op-danger) / .08); } html.theme-optica .op-cd-variant { font-size: 12px; color: rgb(var(--op-muted)); text-transform: capitalize; } html.theme-optica .op-cd-lens { margin: 0; font-size: 12px; } html.theme-optica .op-cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; } html.theme-optica .op-cd-foot .op-co-qty button { width: 26px; height: 26px; } html.theme-optica .op-cd-foot .op-co-qty input { width: 28px; font-size: 13px; } html.theme-optica .op-cd-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; } html.theme-optica .op-cd-price strong { font-family: var(--op-font-display); font-size: 16px; font-weight: 600; } html.theme-optica .op-cd-price del { font-size: 11.5px; color: rgb(var(--op-muted)); } html.theme-optica .op-cd-upsell { margin-top: 22px; } html.theme-optica .op-cd-upsell-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; margin: 12px -18px 0; padding: 0 18px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } html.theme-optica .op-cd-upsell-rail::-webkit-scrollbar { display: none; } html.theme-optica .op-cd-up { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; scroll-snap-align: start; background: rgb(var(--op-surface)); box-shadow: inset 0 0 0 1px rgb(var(--op-line)); } html.theme-optica .op-cd-up-media { display: block; border-radius: 10px; overflow: hidden; background: rgb(var(--op-bg-2)); } html.theme-optica .op-cd-up-media img { width: 100%; mix-blend-mode: multiply; } html.theme-optica .op-cd-up-name { font-size: 12.5px; font-weight: 500; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-optica .op-cd-up-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; } html.theme-optica .op-cd-footer { flex-shrink: 0; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); background: rgb(var(--op-surface)); border-top: 1px solid rgb(var(--op-line)); box-shadow: 0 -20px 40px -30px rgb(var(--op-ink) / .3); } html.theme-optica .op-cd-footer .op-cart-coupon { margin: 0 0 12px; } html.theme-optica .op-cd-footer .op-co-total { margin-top: 12px; padding-top: 12px; } html.theme-optica .op-cd-footer .op-co-total strong { font-size: 24px; } html.theme-optica .op-cd-ctas { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 14px; } html.theme-optica .op-cd-ctas .op-btn { width: 100%; } html.theme-optica .op-cd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: rgb(var(--op-muted)); } @media (prefers-reduced-motion: reduce) { html.theme-optica .op-cart-orb { animation: none; } }