:root { --li-currency-z: 2147483000; } .li-currency-control { display: inline-flex; align-items: center; vertical-align: middle; font: inherit; line-height: 1; } .li-currency-control__trigger { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 400; line-height: 1.2; cursor: pointer; opacity: .82; } .li-currency-control__trigger:hover, .li-currency-control__trigger:focus-visible, .li-currency-control[data-li-open="1"] .li-currency-control__trigger { opacity: 1; } .li-currency-control__trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } .li-currency-control__swap { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; line-height: 1; } /* Product price: visible enough to discover, still secondary to the price. */ .li-currency-control--product { margin-left: 8px; transform: translateY(-1px); } .li-currency-control--product .li-currency-control__trigger { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; } /* Keep the tap target comfortable while making the visible control quieter. */ .li-currency-control--product .li-currency-control__trigger::before { content: ''; position: absolute; width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; background: rgba(255, 255, 255, .7); } .li-currency-control--product .li-currency-control__swap { position: relative; z-index: 1; font-size: 16px; } /* * Footer: on Savoy this is injected as a genuine #nm-footer-bar-menu

* item, so Savoy owns its typography, spacing, borders and responsive layout. * These rules are only for the non-Savoy fallback control. */ .li-currency-footer { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 0; } .li-currency-footer[hidden] { display: none !important; } .li-currency-footer .li-currency-control__trigger { color: inherit; font: inherit; } /* * Native Savoy footer item: no colour/font/spacing is imposed here. The * trigger deliberately has no href, so it cannot enter a :visited state just * because it points at the current page. Disable iOS text-selection/tap * artefacts only; Savoy still owns its actual typography and layout. */ #nm-footer-bar-menu .li-currency-footer-item > a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Non-Savoy fallback only: don't inherit the generic trigger's .82 opacity. */ .li-currency-footer .li-currency-control__trigger { opacity: 1; } /* * Shared picker. It lives directly under , outside product/footer * stacking contexts, so it cannot be clipped by theme overflow rules. */ .li-currency-picker { position: fixed; z-index: var(--li-currency-z); inset: 0; pointer-events: none; } .li-currency-picker[hidden] { display: none !important; } .li-currency-picker__backdrop { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; pointer-events: auto; } .li-currency-picker__panel { position: fixed; z-index: 1; box-sizing: border-box; width: min(360px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; background: #fff; box-shadow: 0 18px 55px rgba(0, 0, 0, .18); color: #222; font-family: inherit; pointer-events: auto; } .li-currency-picker__panel:focus { outline: none; } .li-currency-picker__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 18px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); } .li-currency-picker__title { margin: 0; color: #222; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; } .li-currency-picker__subtitle { margin: 3px 0 0; color: #777; font: inherit; font-size: 12px; line-height: 1.4; } .li-currency-picker__close { appearance: none; -webkit-appearance: none; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -5px -5px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #555; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; } .li-currency-picker__close:hover, .li-currency-picker__close:focus-visible { background: rgba(0, 0, 0, .05); color: #111; outline: none; } .li-currency-picker__list { max-height: 350px; overflow-x: hidden; overflow-y: auto; padding: 6px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .li-currency-picker__option { appearance: none; -webkit-appearance: none; display: grid; grid-template-columns: 42px 54px minmax(0, 1fr) 24px; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #222; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .li-currency-picker__option:hover, .li-currency-picker__option:focus-visible { background: rgba(0, 0, 0, .045); outline: none; } .li-currency-picker__option[aria-checked="true"] { background: rgba(0, 0, 0, .04); } .li-currency-picker__symbol { font-size: 18px; font-weight: 500; } .li-currency-picker__code { font-weight: 600; letter-spacing: .01em; } .li-currency-picker__name { overflow: hidden; color: #777; text-overflow: ellipsis; white-space: nowrap; } .li-currency-picker__check { visibility: hidden; color: #222; font-size: 18px; text-align: right; } .li-currency-picker__option[aria-checked="true"] .li-currency-picker__check { visibility: visible; } .li-currency-picker__note { margin: 0; padding: 10px 18px 14px; border-top: 1px solid rgba(0, 0, 0, .08); color: #777; font: inherit; font-size: 11px; line-height: 1.45; } body.li-currency-picker-open { overflow: hidden; } .li-currency-payment-note td, .li-currency-checkout-estimate td, .li-currency-checkout-estimate th { font-size: 12px; font-weight: 400; opacity: .78; } @media (max-width: 767px) { .li-currency-control--product { margin-left: 7px; } .li-currency-control--product .li-currency-control__trigger { width: 42px; height: 42px; background: transparent; } .li-currency-control--product .li-currency-control__trigger::before { width: 32px; height: 32px; background: transparent; } .li-currency-control--product .li-currency-control__swap { font-size: 17px; } /* App-style bottom sheet. */ .li-currency-picker__backdrop { background: rgba(0, 0, 0, .36); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .li-currency-picker__panel { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100%; max-height: min(72vh, 620px); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 42px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom, 0px); animation: li-currency-sheet-in .18s ease-out; } .li-currency-picker__panel::before { content: ''; display: block; width: 38px; height: 4px; margin: 9px auto 1px; border-radius: 99px; background: rgba(0, 0, 0, .2); } .li-currency-picker__header { padding: 14px 20px 12px; } .li-currency-picker__title { font-size: 18px; } .li-currency-picker__subtitle { font-size: 13px; } .li-currency-picker__list { max-height: calc(min(72vh, 620px) - 150px); padding: 5px 10px; } .li-currency-picker__option { grid-template-columns: 44px 56px minmax(0, 1fr) 28px; min-height: 54px; padding: 9px 10px; border-radius: 10px; font-size: 15px; } .li-currency-picker__symbol { font-size: 19px; } .li-currency-picker__note { padding: 10px 20px 12px; font-size: 11px; } } @keyframes li-currency-sheet-in { from { transform: translateY(18px); opacity: .92; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .li-currency-picker__panel { animation: none !important; } }