/* LR-CO storefront. Warm near-black, ivory and copper; wide uppercase type; thin rules; square corners.
   Sizes checked: phone 390, iPad 820, iPad landscape 1180, desktop 1440. */

:root {
  --bg: #0e0d0c;
  --s1: #161412;
  --s2: #1e1b18;
  --s3: #29251f;
  --line: #2c2824;
  --line-2: #433c34;
  --text: #efe9df;
  --muted: #a8a093;
  --dim: #80786c;
  --cu: #c8834a;
  --cu-dark: #8f5226;
  --brass: #d6a85b;
  --cu-100: rgba(200, 131, 74, .12);
  --ivory: #efe9df;
  --ink: #141210;
  --ok: #9cc796;
  --warn: #d6a85b;
  --bad: #e58a7a;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The header's main row and the part-type row under it; together they stay pinned at the top (phones: the main
     row only). --head-h is what stays pinned: other sticky parts of a page sit below it. */
  --main-h: 72px;
  --cat-h: 46px;
  --head-h: calc(var(--main-h) + var(--cat-h));
  /* The header plus the room kept above it for Safari's tab row on iPad (js/safari-bars.js; 0 elsewhere). */
  --head-top: calc(var(--head-h) + var(--bar-gap, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-top) + 20px); }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15.5px; line-height: 1.6; font-feature-settings: 'tnum' 1, 'cv11' 1; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.lr-lock, html.lr-lock body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--cu); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; border-radius: 0; }
button:disabled { cursor: not-allowed; opacity: .4; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.1; }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
::selection { background: var(--cu); color: var(--ink); }
mark { background: none; color: var(--brass); text-decoration: underline 1px; text-underline-offset: 3px; }

.lr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lr-skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--ivory); color: var(--ink); font-weight: 600; }
.lr-skip:focus { top: 12px; }
.lr-i { width: 18px; height: 18px; flex: none; }
.lr-wrap { width: min(1320px, calc(100% - 80px)); margin-inline: auto; }
.lr-main { display: block; min-height: 60vh; outline: none; padding-bottom: 40px; }
.lr-muted { color: var(--muted); }
.lr-small { font-size: 13px; }

/* ---------------------------------------------------------------- type */
.lr-label { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lr-label a { color: inherit; text-decoration: none; }
.lr-page-title, .lr-section-head h2, .lr-hero-title, .lr-buy-title, .lr-empty h1, .lr-empty h2 { font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }
.lr-page-title { font-size: clamp(30px, 4.6vw, 58px); line-height: 1; }
.lr-section { margin-top: 96px; }
.lr-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.lr-section-head h2 { font-size: clamp(22px, 2.6vw, 34px); }
.lr-section-head-tight { margin-top: 40px; }
.lr-textlink, .lr-textbtn, .lr-headlink { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline 1px; text-decoration-color: var(--cu); text-underline-offset: 7px; white-space: nowrap; }
.lr-textbtn { text-decoration: none; }
.lr-textlink:hover, .lr-textbtn:hover, .lr-headlink:hover { color: var(--brass); }
.lr-textbtn .lr-i { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- buttons, fields */
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lr-btn-copper { background: var(--cu); color: #140c06; }
.lr-btn-copper:hover { background: var(--brass); }
.lr-btn-copper:disabled { background: var(--s3); color: var(--dim); opacity: 1; }
.lr-btn-line { border-color: var(--line-2); color: var(--text); }
.lr-btn-line:hover { border-color: var(--text); }
.lr-btn-ink { background: var(--ink); color: var(--ivory); }
.lr-btn-ink:hover { background: #2b2620; }
.lr-btn-sm { min-height: 40px; padding: 0 16px; font-size: 11px; }
.lr-btn-lg { min-height: 58px; font-size: 12.5px; }
.lr-btn-block { width: 100%; }
.lr-btn .lr-i { width: 16px; height: 16px; }
.lr-add-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); white-space: nowrap; position: relative; z-index: 1; }
.lr-add-link:hover { color: var(--text); }
.lr-add-link.is-added { color: var(--ok); }
.lr-chips { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); }
.lr-chip { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.lr-chip:hover { color: var(--text); }
.lr-chip.is-on { color: var(--text); border-bottom-color: var(--cu); }

.lr-form-msg { font-size: 13.5px; }
.lr-form-msg:empty { display: none; }
.lr-form-msg.is-ok { color: var(--ok); }
.lr-form-msg.is-bad { color: var(--bad); }
.lr-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.lr-select select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line-2); background: var(--s1); }

/* ---------------------------------------------------------------- header (Nov 10 rework) */
/* The promise strip: not pinned, it scrolls away. Drawn above the header so the header's iPad Safari filler (its
   ::before, the tab row's height above it) never covers it. */
.lr-promo { position: relative; z-index: 81; border-bottom: 1px solid var(--line); background: var(--s1); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lr-promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.lr-promo p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.lr-promo p span:first-child { color: var(--text); }
.lr-promo-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cu); }
.lr-promo-links { display: flex; gap: 2px; }
.lr-promo-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; color: var(--muted); text-decoration: none; }
.lr-promo-links li:last-child a { padding-right: 0; }
.lr-promo-links a:hover { color: var(--text); }

/* The main row. */
.lr-header { position: sticky; top: var(--bar-gap, 0px); z-index: 80; height: var(--main-h); border-bottom: 1px solid var(--line); background: var(--bg); transition: top .25s ease; }
/* iPad Safari (js/safari-bars.js): pinned just below Safari's tab row while it shows, filled above in the header's colour. */
.lr-header::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--bar-gap, 0px); background: inherit; pointer-events: none; transition: height .25s ease; }
.lr-header-inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.lr-logo { display: inline-flex; flex: none; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.lr-word { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 19px; letter-spacing: .08em; white-space: nowrap; }
.lr-word b { font-weight: 400; color: var(--cu); letter-spacing: 0; }
.lr-hbtn { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 9px; min-width: 44px; min-height: 44px; padding: 0 10px; color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.lr-hbtn .lr-i { width: 22px; height: 22px; flex: none; }
.lr-hbtn:hover, .lr-hbtn[aria-current] { color: var(--brass); }
.lr-menu-btn { display: none; margin-left: -10px; }
.lr-search-btn { display: none; }
.lr-hactions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lr-hactions .lr-hbtn:last-child { margin-right: -10px; }
.lr-hicon { position: relative; display: inline-flex; }
.lr-bag-link { gap: 15px; }
.lr-cart-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cu); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 18px; text-align: center; }
.lr-hicon .lr-cart-count { position: absolute; top: -6px; right: -9px; }
.lr-hicon .lr-cart-count.is-zero { display: none; }
.lr-bag-link.is-tick .lr-cart-count { animation: lr-tick .5s; }
@keyframes lr-tick { 40% { transform: translateY(-4px) scale(1.15); } }

/* The search box, with its suggestions under it. */
.lr-hsearch { position: relative; flex: 1 1 auto; max-width: 560px; margin-inline: auto; }
.lr-hsearch-gap { flex: 1 1 auto; }
.lr-hsearch input { width: 100%; height: 44px; padding: 0 14px 0 44px; border: 1px solid var(--line-2); border-radius: 0; background: var(--s1); color: var(--text); font-size: 14.5px; -webkit-appearance: none; appearance: none; }
.lr-hsearch input::placeholder { color: var(--dim); }
.lr-hsearch input:focus { outline: none; border-color: var(--cu); background: var(--bg); }
.lr-hsearch-i { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.lr-hsuggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 90; max-height: min(480px, calc(var(--vvh, 100vh) - var(--head-top) - 24px)); overflow-y: auto; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); overscroll-behavior: contain; }
.lr-hs-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.lr-hs-item:last-child { border-bottom: 0; }
.lr-hs-item:hover, .lr-hs-item[aria-selected="true"] { background: var(--s2); }
.lr-hs-art, .lr-hs-type { display: grid; flex: none; place-items: center; width: 48px; height: 40px; border: 1px solid var(--line); background: var(--s1); overflow: hidden; }
.lr-hs-art svg, .lr-hs-art .lr-img { width: 100%; height: 100%; object-fit: contain; }
.lr-hs-art .lr-ph { font-size: 7px; }
.lr-hs-type .lr-i { width: 18px; height: 18px; color: var(--cu); }
.lr-hs-text { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.lr-hs-text b { overflow: hidden; font-weight: 500; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lr-hs-text small { color: var(--muted); font-size: 12px; }
.lr-hs-price { flex: none; color: var(--brass); font-size: 14px; }
.lr-hs-all { justify-content: center; min-height: 48px; color: var(--brass); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* The part-type row: pinned under the main row (not on phones), scrolls sideways when it doesn't fit. */
.lr-catbar { position: sticky; top: calc(var(--bar-gap, 0px) + var(--main-h)); z-index: 79; height: var(--cat-h); border-bottom: 1px solid var(--line); background: var(--bg); transition: top .25s ease; }
html.lr-scrolled .lr-catbar { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.lr-catbar-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; height: 100%; }
.lr-cats, .lr-catbar-more { display: flex; align-items: stretch; gap: 28px; }
.lr-cats { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lr-cats::-webkit-scrollbar { display: none; }
.lr-cats li, .lr-catbar-more li { display: flex; flex: none; }
.lr-cats a, .lr-catbar-more a { display: inline-flex; align-items: center; padding: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; }
.lr-cats a:hover, .lr-catbar-more a:hover { color: var(--text); }
.lr-cats a[aria-current], .lr-catbar-more a[aria-current] { color: var(--text); box-shadow: inset 0 -2px 0 var(--cu); }
.lr-cats li:first-child a { color: var(--text); }

/* The side menu (below 1025px). */
.lr-drawer { position: fixed; inset: 0; z-index: 200; }
.lr-drawer-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s; }
.lr-drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; width: min(400px, 88vw); padding-top: var(--bar-gap, 0px); border-right: 1px solid var(--line-2); background: var(--bg); transform: translateX(-100%); transition: transform .25s ease; outline: none; }
.lr-drawer.is-open .lr-drawer-back { opacity: 1; }
.lr-drawer.is-open .lr-drawer-panel { transform: none; }
.lr-drawer-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--main-h); padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.lr-drawer-title { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.lr-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 32px; overscroll-behavior: contain; }
.lr-drawer-h { margin: 22px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lr-drawer-list { border-top: 1px solid var(--line); }
.lr-drawer-list a { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 16px; text-decoration: none; }
.lr-drawer-list a > span:first-child { flex: 1 1 auto; }
.lr-drawer-list a .lr-i { width: 16px; height: 16px; color: var(--dim); }
.lr-drawer-list a:hover { color: var(--brass); }
.lr-drawer-n { color: var(--muted); font-size: 13px; }
.lr-drawer-list .lr-cart-count { min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; color: var(--ink); font-size: 12px; }
.lr-drawer-list .lr-cart-count.is-zero { background: var(--s3); color: var(--muted); }
.lr-drawer-note { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
  .lr-drawer-back, .lr-drawer-panel, .lr-header, .lr-catbar { transition: none; }
}
@keyframes lr-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- footer */
.lr-footer { margin-top: 120px; border-top: 1px solid var(--line); overflow: hidden; }
.lr-footer-ivory { background: var(--ivory); color: var(--ink); padding: 56px 0; }
.lr-footer-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.lr-footer-ivory .lr-label { color: var(--cu-dark); }
.lr-footer-news h2 { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); text-transform: uppercase; }
.lr-footer-news p { margin-top: 8px; color: #4a443c; }
.lr-footer-ivory .lr-form-msg.is-ok { color: #2f6b2a; }
.lr-footer-ivory .lr-form-msg.is-bad { color: #9a2f1f; }
.lr-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 56px 0 24px; }
.lr-footer-cols h3 { margin-bottom: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lr-footer-cols a { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
.lr-footer-cols a:hover { color: var(--text); }
.lr-footer-word { margin: 24px 0 8px; font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: min(12.5vw, 196px); line-height: .9; letter-spacing: .02em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--line-2); user-select: none; }
.lr-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 32px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
.lr-footer-bottom a { color: var(--muted); }

/* ---------------------------------------------------------------- toast, lightbox, float */
.lr-toast { position: fixed; left: 24px; bottom: 24px; z-index: 260; max-width: min(440px, calc(100vw - 48px)); padding: 14px 18px; background: var(--ivory); color: var(--ink); font-size: 13px; font-weight: 500; transform: translateY(150%); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; pointer-events: none; }
.lr-toast.is-on { transform: none; opacity: 1; visibility: visible; }

.lr-lightbox { position: fixed; inset: 0; z-index: 250; padding-top: var(--bar-gap, 0px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #090807; }
.lr-lightbox-top, .lr-lightbox-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.lr-lightbox-count { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lr-lightbox-stage { display: grid; place-items: center; padding: 0 24px; cursor: zoom-out; min-height: 0; }
.lr-lightbox-stage svg { width: min(1100px, 100%); max-height: 100%; animation: lr-in .3s; }

.lr-float { position: fixed; left: 0; top: 0; z-index: 150; width: 280px; aspect-ratio: 4 / 3; padding: 12px; border: 1px solid var(--line-2); background: var(--s1); pointer-events: none; opacity: 0; transition: opacity .15s; }
.lr-float.is-on { opacity: 1; }
.lr-float svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- crumbs, heads, cards */
.lr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 26px 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.lr-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.lr-crumbs a:hover { color: var(--text); }
.lr-crumbs [aria-current] { color: var(--text); }
.lr-crumb-sep { color: var(--line-2); }
.lr-page-head { max-width: 860px; margin-bottom: 36px; }
.lr-page-head .lr-muted { max-width: 600px; margin-top: 14px; }

.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 44px 28px; }
.lr-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.lr-card { position: relative; display: flex; flex-direction: column; }
.lr-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--s1); }
.lr-card-media svg { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lr-card:hover .lr-card-media svg { transform: scale(1.05); }
.lr-card.is-out .lr-card-media svg { opacity: .45; }
.lr-gallery .lr-card-media { aspect-ratio: 16 / 10; padding: 3% 12%; }
.lr-flag { position: absolute; top: 12px; left: 12px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--line-2); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lr-flag.is-new { border-color: var(--brass); color: var(--brass); }
.lr-card-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding-top: 16px; }
.lr-card-no { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.lr-card-title { font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.35; }
.lr-card-title a { color: var(--text); text-decoration: none; }
.lr-card-title a::after { content: ''; position: absolute; inset: 0; }
.lr-card-title a:hover { color: var(--brass); }
.lr-card-price { color: var(--brass); }
.lr-card-line2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding-left: 0; }
.lr-card-meta { font-size: 12px; color: var(--dim); }
.lr-price { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; letter-spacing: .02em; color: var(--brass); white-space: nowrap; }
.lr-from { margin-right: 2px; font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lr-price-lg { font-size: 22px; }
.lr-price-xl { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); }
.lr-stars { --r: 100%; position: relative; display: inline-block; width: 64px; height: 12px; flex: none; background: linear-gradient(90deg, var(--brass) var(--r), var(--line-2) var(--r)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M6 0l1.8 3.8 4.2.5-3.1 2.9.8 4.1L6 9.2 2.3 11.3l.8-4.1L0 4.3l4.2-.5z'/%3E%3Cuse href='%23s' x='13'/%3E%3Cuse href='%23s' x='26'/%3E%3Cuse href='%23s' x='39'/%3E%3Cuse href='%23s' x='52'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M6 0l1.8 3.8 4.2.5-3.1 2.9.8 4.1L6 9.2 2.3 11.3l.8-4.1L0 4.3l4.2-.5z'/%3E%3Cuse href='%23s' x='13'/%3E%3Cuse href='%23s' x='26'/%3E%3Cuse href='%23s' x='39'/%3E%3Cuse href='%23s' x='52'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 12px no-repeat; }
.lr-mini-art { position: relative; display: block; width: 64px; height: 48px; flex: none; border: 1px solid var(--line); background: var(--s1); }
.lr-mini-art svg { width: 100%; height: 100%; }
.lr-mini-art i { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--cu); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------------------------------------------------------------- price range slider */
.lr-range { --a: 0%; --b: 100%; position: relative; height: 44px; }
.lr-range-track { position: absolute; left: 11px; right: 11px; top: 50%; height: 1px; background: var(--line-2); }
.lr-range-track span { position: absolute; left: var(--a); right: calc(100% - var(--b)); top: -1px; height: 3px; background: var(--cu); }
.lr-range input[type="range"] { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.lr-range input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.lr-range input[type="range"]::-moz-range-track { background: transparent; border: 0; }
.lr-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 11px; border: 1px solid var(--brass); background: var(--bg); cursor: grab; transform: rotate(45deg) scale(.82); }
.lr-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 1px solid var(--brass); border-radius: 0; background: var(--bg); cursor: grab; transform: rotate(45deg); }
.lr-range input[type="range"]:focus { outline: none; }
.lr-range input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--cu); }
.lr-range input[type="range"]:focus-visible::-moz-range-thumb { background: var(--cu); }
.lr-range-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); }

/* ---------------------------------------------------------------- home */
.lr-hero { padding: 40px 0 72px; border-bottom: 1px solid var(--line); }
.lr-hero-title { max-width: 14ch; font-size: clamp(42px, 7.2vw, 112px); line-height: .94; letter-spacing: -.005em; }
.lr-hero-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; align-items: start; margin-top: 36px; }
.lr-hero-copy p { max-width: 400px; color: var(--muted); font-size: 16px; }
.lr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.lr-hero-figure { position: relative; margin: 0; }
.lr-hero-art { display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 55%, #221d18, var(--s1)); }
.lr-hero-art svg { width: 100%; height: 100%; }

.lr-cindex { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 20px; overflow-x: auto; padding: 0 max(40px, calc((100% - 1320px) / 2)) 16px; scroll-snap-type: x mandatory; scroll-padding-inline: max(40px, calc((100% - 1320px) / 2)); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.lr-cindex-item { position: relative; display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); color: var(--text); text-decoration: none; scroll-snap-align: start; transition: border-color .2s; }
.lr-cindex-item:hover { border-color: var(--cu); }
.lr-cindex-no { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--brass); }
.lr-cindex-art { display: block; aspect-ratio: 16 / 10; margin: 4px 0 8px; }
.lr-cindex-art svg { width: 100%; height: 100%; transition: transform .5s; }
.lr-cindex-item:hover .lr-cindex-art svg { transform: scale(1.05); }
.lr-cindex-item b { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 17px; text-transform: uppercase; }
.lr-cindex-item small { font-size: 13px; color: var(--muted); }

.lr-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.lr-feature-art { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--s1); }
.lr-feature-art svg { width: 100%; height: 100%; }
.lr-feature-copy h2 { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); text-transform: uppercase; }
.lr-feature-copy > p { margin: 16px 0 20px; color: var(--muted); }
.lr-feature-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }

.lr-standard { margin-top: 96px; padding: 72px 0; background: var(--ivory); color: var(--ink); }
.lr-standard .lr-label { color: var(--cu-dark); }
.lr-standard h2 { max-width: 20ch; font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(24px, 3vw, 40px); text-transform: uppercase; }
.lr-standard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid #c9c0b1; }
.lr-standard-grid > div { padding: 28px 28px 0 0; }
.lr-standard-grid > div + div { padding-left: 28px; border-left: 1px solid #c9c0b1; }
.lr-standard-grid b { display: block; font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(48px, 6vw, 88px); line-height: 1; color: var(--cu-dark); }
.lr-standard-grid p { max-width: 30ch; margin-top: 14px; color: #3f3a33; }

.lr-range-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lr-range-teaser h2 { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 3vw, 42px); text-transform: uppercase; }
.lr-range-teaser .lr-muted { margin-top: 10px; }
.lr-range-box { display: grid; gap: 12px; }
.lr-range-value { font-family: var(--display); font-stretch: 112%; font-size: 24px; color: var(--brass); }
.lr-range-box .lr-btn { justify-self: start; margin-top: 8px; }
.lr-presets { display: flex; flex-wrap: wrap; gap: 0 20px; }
.lr-presets a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.lr-presets a:hover { color: var(--text); text-decoration-color: var(--cu); }

.lr-rotator { min-height: 220px; }
.lr-rquote blockquote p { max-width: 30ch; font-family: var(--display); font-stretch: 100%; font-weight: 400; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -.01em; animation: lr-in .5s; }
.lr-rquote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 24px; font-size: 13px; color: var(--muted); }
.lr-rquote figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass); text-decoration: none; }
.lr-rotator-dots { display: flex; gap: 6px; margin-top: 18px; }
.lr-rotator-dots button { display: grid; place-items: center; width: 44px; height: 40px; }
.lr-rotator-dots span { display: block; width: 28px; height: 1px; background: var(--line-2); transition: background .2s, height .2s; }
.lr-rotator-dots .is-on span { background: var(--cu); height: 3px; }

/* ---------------------------------------------------------------- shop */
.lr-tabs { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); }
.lr-tabs button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 48px; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lr-tabs button span { font-size: 10.5px; color: var(--dim); }
.lr-tabs button:hover { color: var(--text); }
.lr-tabs button.is-on { color: var(--text); border-bottom-color: var(--cu); }
.lr-tabs button.is-on span { color: var(--brass); }
.lr-shopbar { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: end; gap: 24px 56px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.lr-shop-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lr-shop-range-head .lr-label { margin: 0; }
.lr-shop-range-head b { font-weight: 500; color: var(--brass); }
.lr-shop-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 32px; }
.lr-sorts, .lr-views { display: flex; flex-wrap: wrap; gap: 0 18px; }
.lr-sorts button, .lr-views button { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.lr-sorts button:hover, .lr-views button:hover { color: var(--text); }
.lr-sorts button.is-on, .lr-views button.is-on { color: var(--text); border-bottom-color: var(--cu); }
.lr-views { padding-left: 32px; border-left: 1px solid var(--line); }
.lr-count { padding: 18px 0 28px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lr-count b { color: var(--text); font-weight: 600; }

.lr-index { border-top: 1px solid var(--line); }
.lr-irow { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px 140px; align-items: center; gap: 16px; min-height: 60px; padding: 0 8px; border-bottom: 1px solid var(--line); transition: background .15s; }
.lr-ihead { min-height: 44px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.lr-irow:not(.lr-ihead):hover { background: var(--s1); }
.lr-ino { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.lr-ititle a { color: var(--text); font-size: 16px; text-decoration: none; }
.lr-ititle a::after { content: ''; position: absolute; inset: 0; }
.lr-irow:hover .lr-ititle a { color: var(--brass); }
.lr-ititle em { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bad); }
.lr-itype, .lr-isku { font-size: 13px; color: var(--muted); }
.lr-iprice { text-align: right; color: var(--brass); font-variant-numeric: tabular-nums; }
.lr-ihead span:last-child { text-align: right; }

/* ---------------------------------------------------------------- search */
.lr-search-field { display: grid; gap: 6px; padding: 8px 0 0; }
.lr-search-field input { width: 100%; min-height: 72px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: clamp(26px, 4vw, 52px); color: var(--text); }
.lr-search-field input:focus { outline: none; border-bottom-color: var(--cu); }
.lr-search-field input::placeholder { color: var(--dim); }
.lr-search-field input::-webkit-search-cancel-button { display: none; }
.lr-search-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.lr-facets { position: sticky; top: calc(var(--head-top) + 24px); display: grid; }
.lr-facets button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.lr-facets button span { color: var(--dim); }
.lr-facets button:hover { color: var(--text); }
.lr-facets button.is-on { color: var(--text); border-bottom-color: var(--cu); }
.lr-facets button.is-on span { color: var(--brass); }
.lr-search-grid:has(.lr-facets[hidden]) { grid-template-columns: minmax(0, 1fr); }
.lr-results { border-top: 1px solid var(--line); }
.lr-result { display: grid; grid-template-columns: 48px 128px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lr-result-no { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.lr-result-art { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--s1); }
.lr-result-art svg { width: 100%; height: 100%; }
.lr-result.is-out .lr-result-art svg { opacity: .45; }
.lr-result-title { color: var(--text); font-size: 17px; text-decoration: none; }
.lr-result-title:hover { color: var(--brass); }
.lr-result-info p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.lr-result-info b { color: var(--bad); font-weight: 500; }
.lr-result-buy { display: grid; justify-items: end; gap: 2px; }
.lr-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lr-suggest button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.lr-suggest button:hover { border-color: var(--cu); color: var(--brass); }

/* ---------------------------------------------------------------- product */
.lr-pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: start; }
.lr-viewer { position: sticky; top: calc(var(--head-top) + 24px); display: grid; gap: 14px; }
.lr-stage { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 55%, #221d18, var(--s1)); cursor: zoom-in; }
#stageArt { display: block; width: 100%; height: 100%; }
#stageArt svg { width: 100%; height: 100%; animation: lr-in .3s; }
.lr-lens { position: absolute; left: 0; top: 0; width: 170px; height: 170px; overflow: hidden; border: 1px solid var(--brass); border-radius: 50%; background: var(--s1); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lr-stage.is-zoom .lr-lens { opacity: 1; }
#lensInner { position: absolute; left: 0; top: 0; display: block; }
#lensInner svg { width: 100%; height: 100%; }
.lr-stage-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(14, 13, 12, .85); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lr-stage-hint .lr-i { width: 14px; height: 14px; }
.lr-film { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.lr-film > .lr-textbtn { justify-content: center; width: 40px; padding: 0; }
.lr-film-count { min-width: 64px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-align: center; }
.lr-film-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); justify-content: end; gap: 8px; }
.lr-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--s1); opacity: .6; transition: opacity .2s, border-color .2s; }
.lr-thumb svg { width: 100%; height: 100%; }
.lr-thumb span { position: absolute; left: 4px; top: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.lr-thumb:hover { opacity: 1; }
.lr-thumb.is-on { opacity: 1; border-color: var(--cu); }

.lr-buy { display: grid; gap: 16px; }
.lr-buy .lr-label { margin: 0; }
.lr-buy .lr-label a { display: inline-flex; align-items: center; min-height: 40px; }
.lr-buy-title { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.05; }
.lr-buy-price { margin-top: 4px; }
.lr-buy-rating a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--muted); font-size: 13px; text-decoration: none; }
.lr-buy-facts { border-top: 1px solid var(--line); }
.lr-buy-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lr-buy-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.lr-buy-facts dd { font-size: 14.5px; }
.lr-buy-facts dd span { color: var(--muted); font-size: 13px; }
.lr-stock { color: var(--ok); }
.lr-stock.is-low { color: var(--brass); }
.lr-stock.is-out { color: var(--bad); }
.lr-askfit { justify-self: start; }
.lr-qty { display: grid; gap: 8px; }
.lr-qty .lr-label { margin: 0; }
.lr-qty-btns { display: flex; }
.lr-qty-btns button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.lr-qty-btns button + button { margin-left: -1px; }
.lr-qty-btns button:hover { color: var(--text); }
.lr-qty-btns button.is-on { position: relative; z-index: 1; border-color: var(--cu); color: var(--text); background: var(--cu-100); }
.lr-buy-actions { display: grid; }
.lr-added { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 1px solid var(--ok); color: var(--ok); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; animation: lr-in .3s; }
.lr-added:hover { color: var(--text); border-color: var(--text); }
.lr-buy-row2 { display: flex; align-items: center; gap: 20px; }
.lr-buy-row2 .lr-btn { flex: 1; }
.lr-notify { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-2); }
.lr-notify .lr-label { margin: 0; }
.lr-notify > p { font-size: 13.5px; color: var(--muted); }

/* Product page, below the buy box (owner, Nov 11: the description, more information, what it fits,
   delivery and reviews reworked so it reads well on a computer). Two columns on wide screens:
   the description on the left, what it fits and delivery in cards on the right. */
.lr-pinfo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 56px; align-items: start; margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.lr-pinfo-main { display: grid; gap: 48px; min-width: 0; }
.lr-pinfo-side { display: grid; gap: 20px; min-width: 0; }
.lr-pblock { display: grid; gap: 18px; min-width: 0; scroll-margin-top: calc(var(--head-top) + 20px); }
.lr-pblock > h2, .lr-pcard > h2, .lr-previews-head h2 { font-family: var(--display); font-stretch: 125%; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.lr-pcard { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); background: var(--s1); scroll-margin-top: calc(var(--head-top) + 20px); }
.lr-pcard > h2 { font-size: 15px; }
.lr-pcard .lr-fits { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lr-pcard .lr-fits li { padding: 10px 0; font-size: 14px; }
.lr-pcard .lr-fitnote { margin-top: 0; }
.lr-fits-all { justify-self: start; min-height: 44px; color: var(--brass); }
.lr-terms { display: grid; gap: 14px; }
.lr-terms li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 1.55; color: #d6cfc3; }
.lr-terms .lr-i { width: 20px; height: 20px; margin-top: 1px; color: var(--brass); }
.lr-terms b { color: var(--text); font-weight: 600; }
.lr-terms a { color: var(--brass); white-space: nowrap; }
/* More information: the owner's own lines (gaskets, bolts, what's in the box), as many as he adds. */
.lr-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.lr-specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.lr-specs dt { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.lr-specs dd { font-size: 14.5px; overflow-wrap: anywhere; }
.lr-previews { display: grid; gap: 8px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-top) + 20px); }
.lr-previews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.lr-previews-head h2 { font-size: 22px; }
/* The version picker (catless, catted 200 cell, 400 cell...), each with its own price. */
.lr-variants { display: grid; gap: 10px; }
.lr-variants .lr-label b { color: var(--text); font-weight: 600; letter-spacing: .08em; }
.lr-var-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.lr-var { display: grid; gap: 2px; align-content: center; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.lr-var b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.lr-var small { font-size: 12.5px; color: var(--muted); }
.lr-var:hover { border-color: var(--muted); }
.lr-var.is-on { border-color: var(--cu); background: var(--cu-100); }
.lr-var.is-out b { color: var(--muted); }
.lr-var:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lr-prose > p, .lr-prose li { font-size: 15.5px; line-height: 1.75; color: #d6cfc3; }
.lr-prose > p { margin-bottom: 14px; }
.lr-lead { font-size: 19px !important; line-height: 1.55 !important; color: var(--text) !important; }
.lr-inbox ul { border-top: 1px solid var(--line); }
.lr-inbox li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lr-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.lr-sheet > div { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; gap: 8px; padding: 10px 0; }
.lr-sheet > div::before { content: ''; grid-column: 2; grid-row: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.lr-sheet dt { grid-column: 1; grid-row: 1; font-size: 13px; color: var(--muted); }
.lr-sheet dd { grid-column: 3; grid-row: 1; max-width: 26ch; font-size: 13.5px; text-align: right; }
.lr-sheet-sm { grid-template-columns: minmax(0, 1fr); }
.lr-revhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lr-score { display: flex; align-items: center; gap: 14px; }
.lr-score b { font-family: var(--display); font-stretch: 125%; font-size: 40px; font-weight: 600; line-height: 1; }
.lr-score span { font-size: 13px; color: var(--muted); }
#reviewMsg { margin-top: 8px; }

/* ---------------------------------------------------------------- empty states, misc */
.lr-empty { display: grid; justify-items: center; gap: 10px; max-width: 620px; margin: 40px auto; padding: 48px 20px; text-align: center; }
.lr-empty h1, .lr-empty h2 { font-size: clamp(22px, 2.6vw, 32px); }
.lr-empty p { color: var(--muted); }
.lr-empty .lr-label { margin: 0; }
.lr-empty-left { justify-items: start; margin: 8px 0 0; padding: 24px 0; text-align: left; max-width: none; }
.lr-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.lr-meter { display: grid; gap: 10px; padding: 18px 0; }
.lr-meter p { font-size: 13px; color: var(--muted); }
.lr-meter b { color: var(--text); font-weight: 500; }
.lr-meter-bar { height: 1px; background: var(--line-2); }
.lr-meter-bar span { display: block; height: 3px; margin-top: -1px; background: var(--cu); transition: width .4s; }
.lr-meter.is-done .lr-meter-bar span { background: var(--ok); }
.lr-card-box { padding: 26px; border: 1px solid var(--line); background: var(--s1); }
.lr-card-box > h2, .lr-card-box > h3 { margin-bottom: 14px; font-family: var(--display); font-stretch: 125%; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.lr-card-box > p { color: var(--muted); font-size: 14px; }
.lr-card-box > p + h2 { margin-top: 22px; }
.lr-card-box .lr-co-lines + dl { margin-top: 16px; }
.lr-callout { display: flex; gap: 14px; margin: 18px 0; padding: 18px; border: 1px solid var(--line-2); border-left: 2px solid var(--cu); }
.lr-callout > .lr-i { width: 22px; height: 22px; color: var(--brass); }
.lr-callout div { display: grid; gap: 6px; }
.lr-callout p { font-size: 14px; color: #d6cfc3; margin: 0 !important; }
.lr-callout-warn { border-left-color: var(--brass); }
.lr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lr-table th, .lr-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lr-table thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.lr-table tbody th { font-weight: 500; color: var(--muted); }

/* ---------------------------------------------------------------- bag */
.lr-cart-page .lr-page-title { margin-bottom: 28px; }
.lr-bag { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.lr-bag-head { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px; gap: 16px; padding-bottom: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.lr-bag-head span:last-child { text-align: right; }
.lr-lines { border-top: 1px solid var(--line); }
.lr-line { display: grid; grid-template-columns: 36px 120px minmax(0, 1fr) 150px 120px; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lr-line-no { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.lr-line-art { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--s1); }
.lr-line-art svg { width: 100%; height: 100%; }
.lr-line-info { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.lr-line-title { color: var(--text); font-size: 16px; text-decoration: none; }
.lr-line-title:hover { color: var(--brass); }
.lr-line-info p { font-size: 12.5px; color: var(--muted); }
.lr-line-info .lr-line-variant { font-size: 13px; color: var(--text); }
.lr-line-rm { min-height: 44px; color: var(--muted); }
.lr-qtyin { display: inline-flex; align-items: center; border: 1px solid var(--line-2); justify-self: start; }
.lr-qtyin .lr-textbtn { justify-content: center; width: 40px; min-height: 44px; padding: 0; font-size: 16px; letter-spacing: 0; }
.lr-qtyin input { width: 44px; min-height: 44px; border: 0; border-inline: 1px solid var(--line-2); background: transparent; text-align: center; font-size: 15px; }
.lr-qtyin input:focus { outline: 1px solid var(--cu); outline-offset: -1px; }
.lr-line-total { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.lr-summary { position: sticky; top: calc(var(--head-top) + 24px); display: grid; gap: 16px; padding: 28px; border: 1px solid var(--line); background: var(--s1); }
.lr-summary .lr-label { margin: 0; }
.lr-summary dl, .lr-co-summary dl, .lr-card-box dl { display: grid; gap: 10px; }
.lr-summary dl > div, .lr-co-summary dl > div, .lr-card-box dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.lr-summary dt, .lr-co-summary dt, .lr-card-box dt { color: var(--muted); }
.lr-summary dd, .lr-co-summary dd, .lr-card-box dd { font-variant-numeric: tabular-nums; text-align: right; }
.lr-total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.lr-total dt { color: var(--text) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; align-self: center; }
.lr-total dd { font-family: var(--display); font-stretch: 112%; font-size: 22px; color: var(--brass); }
.lr-summary .lr-textlink { justify-self: center; }

/* ---------------------------------------------------------------- checkout */
.lr-co-header .lr-header-inner { gap: 16px; }
.lr-co-footer { margin-top: 64px; padding: 24px 0 40px; border-top: 1px solid var(--line); }
.lr-co-footer .lr-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.lr-co-footer a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.lr-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "main sum"; gap: 64px; align-items: start; padding-top: 36px; }
.lr-co-main { grid-area: main; min-width: 0; }
.lr-co-summary { grid-area: sum; position: sticky; top: calc(var(--head-top) + 24px); padding: 28px; border: 1px solid var(--line); background: var(--s1); }
.lr-co-summary > .lr-label { margin-bottom: 16px; }
#coSummaryBody { display: grid; gap: 16px; }
.lr-co-lines { display: grid; gap: 12px; }
.lr-co-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 13.5px; }
.lr-co-lines li > span:nth-child(2) { display: grid; min-width: 0; }
.lr-co-lines small { font-size: 11.5px; color: var(--dim); }
.lr-co-lines b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lr-co-lines a { color: var(--text); text-decoration: none; }
.lr-co-art { position: relative; display: block; width: 64px; height: 48px; border: 1px solid var(--line); background: var(--bg); }
.lr-co-art svg { width: 100%; height: 100%; }
.lr-co-art i { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--cu); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 600; line-height: 18px; text-align: center; }
/* Until online payment opens: the order, a note and (when the store has a support email) ordering by email. */
.lr-checkout-soon .lr-co-main { display: grid; gap: 22px; align-content: start; justify-items: start; }
.lr-checkout-soon .lr-co-main > .lr-label { margin: 0; }
.lr-checkout-soon .lr-page-sub { margin-top: -8px; }
.lr-checkout-soon .lr-co-main > .lr-card-box, .lr-checkout-soon .lr-co-main > .lr-offroad, .lr-checkout-soon .lr-co-main > .lr-ca { width: 100%; }
.lr-order-mail { display: flex; align-items: flex-start; gap: 16px; }
.lr-order-mail > .lr-i { width: 22px; height: 22px; margin-top: 2px; color: var(--brass); }
.lr-order-mail > div { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.lr-order-mail h2 { font-family: var(--display); font-stretch: 125%; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.lr-order-mail p { font-size: 14px; color: var(--muted); }
.lr-order-mail p a { color: var(--brass); overflow-wrap: anywhere; }
.lr-co-back { display: flex; flex-wrap: wrap; gap: 4px 28px; }

/* ---------------------------------------------------------------- info page heads, steps */
.lr-info-head { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.lr-info-head .lr-label { margin-top: 8px; }
.lr-page-sub { max-width: 640px; margin-top: 16px; font-size: 16.5px; color: var(--muted); }
.lr-page-sub a { color: var(--brass); }
.lr-steps-list { display: grid; gap: 0; margin: 8px 0 28px; border-top: 1px solid var(--line); counter-reset: s; }
.lr-steps-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); counter-increment: s; }
.lr-steps-list li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--brass); padding-top: 3px; }
.lr-steps-list b { font-weight: 500; }
.lr-steps-list span { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------------------- info pages */
.lr-info { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; padding: 40px 0 20px; }
.lr-info.is-wide { grid-template-columns: minmax(0, 1fr); }
.lr-info-nav { position: sticky; top: calc(var(--head-top) + 24px); }
.lr-info-nav p { margin: 22px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lr-info-nav p:first-child { margin-top: 0; }
.lr-info-nav a { display: flex; align-items: center; min-height: 36px; color: var(--muted); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid var(--line); }
.lr-info-nav a:hover { color: var(--text); }
.lr-info-nav a[aria-current] { color: var(--text); border-bottom-color: var(--cu); }
.lr-prose { max-width: 760px; }
.lr-info.is-wide .lr-prose { max-width: none; }
.lr-prose > h2 { margin: 36px 0 12px; font-family: var(--display); font-stretch: 125%; font-size: 17px; text-transform: uppercase; }
.lr-prose > h2:first-child { margin-top: 0; }
.lr-prose a { color: var(--brass); }
.lr-prose a.lr-btn-copper { color: #140c06; }
.lr-prose a.lr-btn-line { color: var(--text); }
.lr-bullets { display: grid; gap: 6px; margin-bottom: 18px; }
.lr-bullets li { position: relative; padding-left: 22px; }
.lr-bullets li::before { content: ''; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--cu); }
.lr-prose .lr-table { margin: 6px 0 20px; border-top: 1px solid var(--line); }
.lr-faq { border-top: 1px solid var(--line); }
.lr-faq details { border-bottom: 1px solid var(--line); }
.lr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 0; font-size: 16px; cursor: pointer; list-style: none; }
.lr-faq summary::-webkit-details-marker { display: none; }
.lr-faq summary .lr-i { color: var(--brass); transition: transform .2s; }
.lr-faq details[open] summary .lr-i { transform: rotate(45deg); }
.lr-faq details p { padding: 0 0 20px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.lr-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 28px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lr-values > div { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lr-values .lr-i { width: 22px; height: 22px; color: var(--brass); }
.lr-values h3 { margin: 12px 0 4px; font-family: var(--display); font-stretch: 125%; font-size: 14px; text-transform: uppercase; }
.lr-values p { font-size: 13.5px; color: var(--muted); }
.lr-contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.lr-contact-side { display: grid; gap: 14px; }
.lr-contact-side .lr-card-box { display: grid; justify-items: start; gap: 8px; }
.lr-contact-side .lr-card-box > .lr-i { color: var(--brass); }
.lr-contact-side .lr-card-box h3 { margin: 0; }
/* The contact form (contact page; docs/LRCO_CONTACT.md). */
.lr-prose > .lr-ct { margin: 0 0 40px; padding: 28px; border: 1px solid var(--line-2); background: var(--s1); }
.lr-ct h2 { margin: 0 0 8px; font-family: var(--display); font-stretch: 125%; font-size: 17px; text-transform: uppercase; }
.lr-ct-intro { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.lr-ct form { display: grid; gap: 20px; }
.lr-ct .lr-field select:invalid { color: var(--dim); }
.lr-ct-text textarea { width: 100%; min-height: 168px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text); font-size: 16px; line-height: 1.55; resize: vertical; transition: border-color .2s; }
.lr-ct-text textarea:focus { outline: none; border-color: var(--cu); }
.lr-ct-text textarea::placeholder { color: var(--dim); }
.lr-ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lr-ct-send .lr-form-msg { flex: 1 1 220px; margin: 0; }
.lr-ct .lr-small { margin: 0; }
.lr-ct-done { display: flex; gap: 16px; align-items: flex-start; outline: none; }
.lr-ct-done > .lr-i { flex: none; width: 26px; height: 26px; margin-top: 2px; color: var(--ok); }
.lr-ct-done > div { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.lr-ct-done h2 { margin: 0; }
.lr-ct-done p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #d6cfc3; overflow-wrap: anywhere; }
.lr-ct-ref { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--text); }
@media (max-width: 640px) {
  .lr-prose > .lr-ct { margin: 0 -4px 32px; padding: 20px 16px; }
  .lr-ct .lr-field-row { grid-template-columns: minmax(0, 1fr); }
  .lr-ct-send .lr-btn { width: 100%; }
}
.lr-reviews-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.lr-reviews-top > div:first-child { display: grid; gap: 6px; }
.lr-reviews-top > div:first-child p:last-child { font-size: 13.5px; color: var(--muted); }
.lr-big-score { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 56px; line-height: 1; }
.lr-review-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 32px; align-items: start; }
.lr-review { display: grid; gap: 10px; padding: 22px 0; border-top: 1px solid var(--line); }
.lr-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lr-review-top b { font-weight: 500; }
.lr-review p { font-size: 14.5px; line-height: 1.7; color: #d6cfc3; }
.lr-review-by { font-size: 12.5px !important; color: var(--muted) !important; }
.lr-review-product { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--brass) !important; font-size: 13px; text-decoration: none; }
.lr-review-product .lr-mini-art { width: 48px; height: 36px; }

/* ---------------------------------------------------------------- loading the catalog */
.lr-boot { display: grid; align-content: center; justify-items: center; gap: 28px; min-height: 70vh; padding: 48px 16px; text-align: center; }
.lr-boot-msg { display: grid; justify-items: center; gap: 12px; max-width: 520px; color: var(--muted); font-size: 14px; }
p.lr-boot-msg { letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; animation: lr-in .5s .3s both; }
.lr-boot-msg h1 { font-family: var(--display); font-stretch: 125%; font-size: clamp(22px, 3vw, 32px); text-transform: uppercase; color: var(--text); }
.lr-boot-msg .lr-btn { margin-top: 8px; }

/* ---------------------------------------------------------------- pictures: photo, drawing or placeholder */
.lr-img { display: block; width: 100%; height: 100%; object-fit: cover; }
#stageArt .lr-img, #lensInner .lr-img, .lr-float .lr-img, .lr-hero-art .lr-img, .lr-feature-art .lr-img { object-fit: contain; }
.lr-gallery .lr-card-media:has(> .lr-img) { padding: 0; }
.lr-card-media .lr-img, .lr-cindex-art .lr-img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lr-card:hover .lr-card-media .lr-img, .lr-cindex-item:hover .lr-cindex-art .lr-img { transform: scale(1.05); }
.lr-card.is-out .lr-card-media .lr-img, .lr-result.is-out .lr-result-art .lr-img, .lr-line.is-out .lr-line-art > * { opacity: .45; }
.lr-cindex-art { overflow: hidden; }
.lr-lightbox-stage .lr-img { width: auto; height: auto; max-width: min(1100px, 100%); max-height: calc(100vh - 150px - var(--bar-gap, 0px)); object-fit: contain; animation: lr-in .3s; }
.lr-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 32px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(239, 233, 223, .02) 14px 15px); }
.lr-ph span { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(10px, 1.4vw, 18px); letter-spacing: .08em; white-space: nowrap; color: var(--line-2); }
.lr-co-art .lr-ph span, .lr-mini-art .lr-ph span { font-size: 9px; }
.lr-stage.is-still { cursor: default; }
.lr-lightbox-stage .lr-ph { width: min(1100px, 100%); aspect-ratio: 4 / 3; height: auto; }

.lr-hero-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.lr-hero-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 14px; font-size: 13.5px; }
.lr-hero-cap a { color: var(--muted); text-decoration: none; }
.lr-hero-cap a:hover { color: var(--text); }
.lr-hero-cap .lr-price { color: var(--brass); }
.lr-rotator-all { margin-top: 12px; }
.lr-shopbar.is-norange { grid-template-columns: minmax(0, 1fr); }
.lr-card-oos { color: var(--bad); }
.lr-line-oos { color: var(--bad) !important; font-size: 12.5px; }
.lr-footer-mail { justify-self: end; max-width: 100%; }
.lr-footer-mail .lr-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* ---------------------------------------------------------------- product: off-road notice, fits, install video */
.lr-offroad { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid rgba(214, 168, 91, .45); border-left: 2px solid var(--brass); background: rgba(214, 168, 91, .05); }
.lr-offroad > .lr-i { width: 20px; height: 20px; margin-top: 2px; color: var(--brass); }
.lr-offroad div { display: grid; gap: 4px; min-width: 0; }
.lr-offroad b { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.lr-offroad p { font-size: 13.5px; line-height: 1.6; color: #d6cfc3; }
.lr-offroad a { color: var(--brass); }
/* California shipping (ship-rules.js): a quiet line when a part ships there, a muted note when it doesn't */
.lr-ca.is-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lr-ca.is-ok .lr-i { width: 16px; height: 16px; flex: none; color: var(--ok); }
.lr-ca.is-no { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 2px solid var(--muted); background: rgba(255, 255, 255, .02); }
.lr-ca.is-no > .lr-i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.lr-ca.is-no div { display: grid; gap: 4px; min-width: 0; }
.lr-ca.lr-ca-line { align-items: center; padding: 12px 14px; font-size: 13.5px; color: #d6cfc3; }
.lr-ca.lr-ca-line > .lr-i { margin-top: 0; }
.lr-ca.is-no b { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.lr-ca.is-no p { font-size: 13.5px; line-height: 1.6; color: #d6cfc3; overflow-wrap: anywhere; }
.lr-bag-main > .lr-ca { margin-top: 16px; }
.lr-fits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; border-bottom: 1px solid var(--line); }
.lr-fits li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.lr-fitnote { margin-top: 16px; font-size: 14px; color: var(--muted); }
.lr-video { position: relative; max-width: 860px; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 55%, #221d18, var(--s1)); }
.lr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lr-video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; color: var(--text); }
.lr-video-play .lr-i { width: 56px; height: 56px; stroke-width: 1; color: var(--cu); transition: transform .2s; }
.lr-video-play:hover .lr-i { transform: scale(1.08); }
.lr-video-play b { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.lr-video-play small { font-size: 12px; color: var(--muted); }
.lr-video-link { margin-top: 10px; }

/* ---------------------------------------------------------------- contact and requests by email */
.lr-mailcard { display: grid; justify-items: start; gap: 12px; }
.lr-mailcard > .lr-i, .lr-req-cards .lr-card-box > .lr-i { width: 22px; height: 22px; color: var(--brass); }
.lr-mailcard > h2 { margin: 0 !important; }
.lr-mail-big { font-family: var(--display); font-stretch: 112%; font-size: clamp(18px, 2.4vw, 26px); color: var(--text) !important; overflow-wrap: anywhere; }
.lr-req-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-bottom: 24px; }
.lr-req-cards .lr-card-box { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start; gap: 10px; }
.lr-req-cards .lr-card-box > h3 { margin: 0; }

/* ---------------------------------------------------------------- forms (account pages) */
.lr-field { display: grid; gap: 4px; min-width: 0; }
.lr-field > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lr-field input, .lr-field select { width: 100%; min-height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text); font-size: 16px; transition: border-color .2s; }
.lr-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.lr-field select option { background: var(--s1); color: var(--text); }
.lr-field input:focus, .lr-field select:focus { outline: none; border-color: var(--cu); }
.lr-field input::placeholder { color: var(--dim); }
.lr-field-hint { font-size: 12.5px; color: var(--dim); }
.lr-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.lr-field-row-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.lr-field-row-3 > span { display: grid; min-width: 0; }
.lr-check-line { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.lr-check-line input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--cu); }
.lr-link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.lr-link-btn:hover { color: var(--text); }
.lr-pass { position: relative; display: block; }
.lr-pass input { padding-right: 64px; }
.lr-pass .lr-link-btn { position: absolute; right: 0; top: 4px; justify-content: center; min-width: 56px; min-height: 40px; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lr-code-input { font-size: 26px !important; font-variant-numeric: tabular-nums; letter-spacing: .4em; }
.lr-code-input.is-text { font-size: 18px !important; letter-spacing: .08em; }
.lr-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lr-btn-danger { border-color: rgba(229, 138, 122, .55); color: var(--bad); }
.lr-btn-danger:hover { border-color: var(--bad); }
.lr-badge { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--line-2); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.lr-badge-on { border-color: rgba(156, 199, 150, .45); color: var(--ok); }
.lr-status { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lr-status.s5 { border-color: rgba(156, 199, 150, .45); color: var(--ok); }
.lr-status.s3 { border-color: rgba(214, 168, 91, .5); color: var(--brass); }
.lr-status.s1 { color: var(--text); }
.lr-status.sx { border-color: rgba(229, 138, 122, .45); color: var(--bad); }
.lr-plus { color: var(--ok); }
.lr-minus { color: var(--bad); }
.lr-discount dd { color: var(--ok); }
.lr-empty-small { display: grid; justify-items: start; gap: 14px; padding: 24px; border: 1px dashed var(--line-2); }
.lr-empty-small p { color: var(--muted); }
.lr-empty-small b { color: var(--text); font-weight: 500; }
.lr-loading-line { padding: 12px 0; font-size: 13.5px; }

/* ---------------------------------------------------------------- sign in, create, forgot, reset */
.lr-auth { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 400px); justify-content: center; gap: 56px; padding: 48px 0 20px; }
.lr-auth-card { display: grid; align-content: start; gap: 14px; min-width: 0; }
.lr-auth-card > .lr-label { margin: 0; }
.lr-auth-card h1 { font-family: var(--display); font-stretch: 125%; font-size: clamp(26px, 3vw, 38px); text-transform: uppercase; line-height: 1.05; }
.lr-auth-card > .lr-muted b, .lr-auth-card > .lr-muted a { color: var(--text); }
.lr-auth-card form { display: grid; gap: 18px; margin-top: 10px; }
.lr-auth-forgot { margin-top: -12px; text-align: right; }
.lr-auth-switch { margin-top: 8px; font-size: 14px; color: var(--muted); }
.lr-auth-switch a, .lr-auth-card .lr-small a { color: var(--brass); }
.lr-auth-side { align-self: start; display: grid; gap: 18px; padding: 32px; border: 1px solid var(--line); background: var(--s1); }
.lr-auth-side h2 { font-family: var(--display); font-stretch: 125%; font-size: 16px; text-transform: uppercase; }
.lr-checklist { display: grid; border-top: 1px solid var(--line); }
.lr-checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lr-checklist .lr-i, .lr-auth-note .lr-i { color: var(--brass); }
.lr-auth-note { display: flex; gap: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.lr-or { display: flex; align-items: center; gap: 14px; margin: 6px 0 -2px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.lr-or::before, .lr-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lr-recovery-toggle { justify-self: start; margin-top: -8px; }
.lr-code-more { display: flex; flex-wrap: wrap; gap: 0 22px; }
.lr-code-more:empty { display: none; }
@media (pointer: coarse) { .lr-code-more .lr-link-btn { min-height: 44px; } }

/* ---------------------------------------------------------------- account (signed in) */
.lr-account-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin: 8px 0 28px; }
.lr-account-head .lr-label { margin-bottom: 8px; }
.lr-account-head .lr-muted { margin-top: 8px; overflow-wrap: anywhere; }
.lr-acct-tabs a { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.lr-acct-tabs a:hover { color: var(--text); }
.lr-acct-tabs a.is-on { color: var(--text); border-bottom-color: var(--cu); }
.lr-acct-body { padding-top: 32px; }
.lr-acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; align-items: start; }
.lr-acct-wide { grid-column: 1 / -1; }
.lr-acct-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.lr-acct-sec-head h2, .lr-sec-head h2, .lr-order-head h2 { font-family: var(--display); font-stretch: 125%; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; }
.lr-acct-links { display: grid; border-top: 1px solid var(--line); }
.lr-acct-links a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.lr-acct-links a:hover b { color: var(--brass); }
.lr-acct-links .lr-i { color: var(--brass); }
.lr-acct-links span, .lr-order-id, .lr-olines li > span, .lr-trackings li > span, .lr-keylist-name > span, .lr-device-name > span { display: grid; gap: 2px; min-width: 0; }
.lr-acct-links b { font-weight: 500; }
.lr-acct-links small, .lr-order-id small, .lr-olines small, .lr-trackings small, .lr-keylist small, .lr-devices small { font-size: 12.5px; color: var(--muted); }
.lr-credit-card { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 14px; padding: 24px; border: 1px solid var(--cu); background: linear-gradient(135deg, #241a12, var(--s1) 60%); }
.lr-credit-card small { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lr-credit-card strong { display: block; font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 40px; line-height: 1.1; }
.lr-credit-card p { max-width: 260px; font-size: 12.5px; color: var(--muted); }
.lr-ledger { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.lr-ledger li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lr-ledger-when { color: var(--muted); font-size: 12.5px; }
.lr-ledger b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lr-order-list { display: grid; border-top: 1px solid var(--line); }
.lr-order { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; align-items: center; gap: 12px 20px; min-height: 68px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.lr-order:hover b { color: var(--brass); }
.lr-order b { font-weight: 600; letter-spacing: .06em; }
.lr-order strong { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; color: var(--brass); }
.lr-order-back { margin-bottom: 8px; }
.lr-order-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.lr-order-head .lr-label { margin-bottom: 6px; }
.lr-order-head .lr-muted { margin-top: 6px; font-size: 13.5px; }
.lr-order-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.lr-olines { display: grid; margin-bottom: 16px; border-top: 1px solid var(--line); }
.lr-olines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lr-olines b { font-weight: 500; }
.lr-olines strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.lr-trackings { display: grid; gap: 10px; margin-bottom: 8px; }
.lr-trackings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.lr-trackings .lr-i { color: var(--brass); }
.lr-trackings small { overflow-wrap: anywhere; }
.lr-card-box > .lr-card-h3 { margin-top: 22px; }
.lr-addr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.lr-addr { display: grid; align-content: space-between; gap: 16px; padding: 22px; border: 1px solid var(--line-2); }
.lr-addr.is-default { border-color: var(--cu); }
.lr-addr-text b { font-weight: 500; }
.lr-addr-text p { margin-top: 6px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.lr-addr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lr-confirm-q { flex-basis: 100%; font-size: 13.5px; }
#adForm { margin-bottom: 24px; }
.lr-addr-form { display: grid; gap: 18px; max-width: 760px; }
/* Google address suggestions (/js/address-lookup.js), in LR-CO's look */
.addr-lookup-list { --addr-bg: var(--s2); --addr-fg: var(--text); --addr-muted: var(--muted); --addr-border: var(--line-2); --addr-active: rgba(200, 131, 74, .14); --addr-radius: 4px; --addr-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
/* while suggestions are open, the floating chat button steps aside so it can't cover them or Google's attribution */
body:has(.addr-lookup-list:not([hidden])) .lr-chat-btn { visibility: hidden; }
.lr-addr-form > h3 { margin-bottom: 0 !important; }
.lr-sec-list { display: grid; border-top: 1px solid var(--line); }
.lr-sec-row { display: grid; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--head-top) + 20px); }
.lr-sec-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.lr-sec-head > div { flex: 1 1 320px; display: grid; gap: 6px; min-width: 0; }
.lr-sec-head > div > span { max-width: 640px; font-size: 13.5px; color: var(--muted); }
.lr-sec-danger .lr-sec-head h2 { color: var(--bad); }
.lr-sec-form { display: grid; gap: 18px; max-width: 520px; }
.lr-sec-form .lr-field-row { gap: 18px; }
.lr-sec-row > .lr-form-msg { margin-top: -4px; }
.lr-sec-row > .lr-muted, .lr-sec-row > .lr-small { font-size: 13.5px; }
.lr-email-line { overflow-wrap: anywhere; }
.lr-email-line b { font-weight: 500; }
#emCode { display: grid; gap: 14px; max-width: 520px; }
#emCode form { display: grid; gap: 18px; }
.lr-totp { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.lr-qr { width: 200px; height: 200px; padding: 10px; overflow: hidden; background: #fff; }
.lr-qr svg { display: block; width: 100%; height: 100%; }
.lr-totp-text { display: grid; justify-items: start; gap: 10px; font-size: 14px; }
.lr-totp-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 600; letter-spacing: .08em; color: var(--brass); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.lr-recovery { display: grid; gap: 14px; max-width: 640px; padding: 22px; border: 1px solid rgba(214, 168, 91, .45); background: rgba(214, 168, 91, .05); }
.lr-recovery h3 { font-family: var(--display); font-stretch: 125%; font-size: 15px; text-transform: uppercase; outline: none; }
.lr-recovery p { font-size: 13.5px; color: #d6cfc3; }
.lr-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 14px 0; border-block: 1px solid var(--line-2); list-style: decimal inside; color: var(--dim); font-size: 12px; }
.lr-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .06em; color: var(--text); }
.lr-keylist, .lr-devices { display: grid; border-top: 1px solid var(--line); }
.lr-keylist li, .lr-devices li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lr-keylist-name, .lr-device-name { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 240px; }
.lr-keylist-name .lr-i, .lr-device-name .lr-i { margin-top: 2px; color: var(--brass); }
.lr-keylist b, .lr-devices b { font-weight: 500; overflow-wrap: anywhere; }
.lr-devices li.is-current { border-left: 2px solid var(--cu); padding-left: 12px; }
.lr-device-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lr-key-remove { flex-basis: 100%; }

/* ---------------------------------------------------------------- store policies (frontend/js/store-policies.js) */
.lr-pol-sec + .lr-pol-sec { margin-top: 34px; }
.lr-pol-sec > h2 { margin: 0 0 12px; font-family: var(--display); font-stretch: 125%; font-size: 17px; text-transform: uppercase; }
.lr-pol-sec > p, .lr-pol-sec li { font-size: 15.5px; line-height: 1.75; color: #d6cfc3; }
.lr-pol-sec > p { margin-bottom: 12px; }
.lr-pol-h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.lr-pol-steps { margin: 6px 0 18px; border-top: 1px solid var(--line); counter-reset: s; }
.lr-pol-steps li { position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid var(--line); counter-increment: s; }
.lr-pol-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--brass); }
.lr-facts { display: grid; margin: 6px 0 20px; border-top: 1px solid var(--line); }
.lr-facts > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lr-facts dt { padding-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lr-facts dd { font-size: 14.5px; line-height: 1.65; color: #d6cfc3; overflow-wrap: anywhere; }
.lr-pol-sec .lr-faq { margin: 6px 0 10px; }
.lr-pol-sec .lr-callout b { font-weight: 600; }
.lr-prose > .lr-pol-updated { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }

/* ---------------------------------------------------------------- agreements: the waiver dialog, signed notes, policy boxes */
/* The dialog fills the visible screen (--vvh/--vvt follow visualViewport, so the on-screen keyboard can't push the
   Sign button off screen) and sits below Safari's tab row on iPad (--bar-gap). The footer with Sign never scrolls. */
.lr-dialog { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100vh); z-index: 400; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--bar-gap, 0px)) 16px 16px; background: rgba(9, 8, 7, .84); animation: lr-in .2s; }
.lr-dialog-box { display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%; min-height: 0; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lr-dialog-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.lr-dialog-head .lr-label { margin-bottom: 8px; }
.lr-dialog-head h2 { font-family: var(--display); font-stretch: 125%; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; line-height: 1.05; }
.lr-dialog-sub { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.lr-dialog-sub b { color: var(--text); font-weight: 500; }
.lr-dialog-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--text); }
.lr-dialog-x:hover { border-color: var(--text); }
.lr-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 16px; align-content: start; padding: 20px 24px; }
.lr-dialog-foot { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.lr-wv-text { max-height: min(300px, 38vh); overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; border: 1px solid var(--line-2); background: var(--s1); }
.lr-wv-text:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.lr-wv-doc + .lr-wv-doc { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.lr-wv-text .lr-pol-sec + .lr-pol-sec { margin-top: 14px; }
.lr-wv-text .lr-pol-sec > p, .lr-wv-text .lr-pol-sec li, .lr-wv-text .lr-facts dd { font-size: 14px; line-height: 1.65; }
.lr-wv-text h3 { margin-bottom: 8px; font-family: var(--display); font-stretch: 125%; font-size: 15px; text-transform: uppercase; }
.lr-wv-text h2 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lr-wv-text p, .lr-wv-text li { font-size: 14px; line-height: 1.65; color: #d6cfc3; }
.lr-wv-text p + p { margin-top: 8px; }
.lr-wv-text .lr-bullets { margin: 6px 0 10px; }
.lr-wv-text .lr-wv-lead { color: var(--text); }
.lr-wv-text .lr-wv-end { margin-top: 18px; font-size: 12px; color: var(--dim); text-align: center; }
.lr-wv-read { margin-top: -6px; font-size: 12.5px; color: var(--brass); }
.lr-wv-read.is-ok { color: var(--ok); }
.lr-wv-sign { display: grid; gap: 4px; }
.lr-wv-sign-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lr-wv-sig { min-height: 58px; padding: 6px 4px 0; border-bottom: 1px solid var(--line-2); font-family: "Snell Roundhand", "Segoe Script", "Apple Chancery", "Brush Script MT", "URW Chancery L", cursive; font-size: 30px; font-style: italic; line-height: 1.5; color: var(--ivory); overflow-wrap: anywhere; }
.lr-wv-sig-empty { font-family: var(--body); font-size: 13px; font-style: normal; color: var(--dim); }
.lr-wv-sign small { font-size: 12px; color: var(--dim); }
.lr-signed { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(156, 199, 150, .45); background: rgba(156, 199, 150, .07); color: var(--ok); font-size: 13.5px; line-height: 1.5; }
.lr-signed .lr-i { flex: none; width: 18px; height: 18px; color: var(--ok); }
.lr-signed-sm, .lr-line-info .lr-signed-sm { padding: 2px 0; border: 0; background: none; font-size: 12.5px; color: var(--ok); }
.lr-signed-sm .lr-i { width: 15px; height: 15px; }
.lr-agree { display: grid; gap: 8px; width: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
/* The tick has its own 44px tap area; the sentence is a second label, so tapping its words ticks it too. */
.lr-agree-row { display: flex; align-items: flex-start; gap: 2px; }
.lr-agree-tick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px 0 0 -12px; cursor: pointer; }
.lr-agree-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--cu); cursor: pointer; }
.lr-agree-text { padding-top: 1px; font-size: 13.5px; line-height: 1.55; cursor: pointer; }
.lr-agree a { color: var(--brass); }
.lr-agree-at { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ok); }
.lr-agree-at .lr-i { width: 16px; height: 16px; }
.lr-ref { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); font-size: 14px; }
.lr-ref .lr-i { color: var(--brass); }
.lr-ref > span { display: grid; gap: 2px; }
.lr-ref b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--text); }
.lr-ref small { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- live chat */
.lr-chat-btn { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 150; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid var(--cu); background: var(--s1); color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.lr-chat-btn .lr-i { color: var(--cu); }
.lr-chat-btn:hover { background: var(--s2); }
.lr-has-chat .lr-footer-bottom, .lr-has-chat .lr-co-footer { padding-bottom: 88px; }
/* Placed from the visible screen (visualViewport), not the page's bottom edge, so iPad's keyboard can't cover it. */
.lr-chatp { --chat-h: min(580px, calc(var(--vvh, 100vh) - 40px - var(--head-top))); position: fixed; right: 20px; top: calc(var(--vvt, 0px) + var(--vvh, 100vh) - var(--chat-h) - 20px); z-index: 160; display: flex; flex-direction: column; width: 380px; height: var(--chat-h); border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: lr-in .2s; }
.lr-chatp-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.lr-chatp-head > div { display: grid; gap: 2px; min-width: 0; }
.lr-chatp-head b { font-family: var(--display); font-stretch: 125%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.lr-chatp-head small { font-size: 12px; color: var(--muted); }
.lr-chatp-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.lr-chatp-intro { font-size: 13px; color: var(--muted); }
.lr-msg { max-width: 88%; display: grid; gap: 3px; }
.lr-msg small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lr-msg p { padding: 10px 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.lr-msg.is-team { align-self: flex-start; }
.lr-msg.is-team p { border-left: 1px solid var(--cu); background: var(--s1); }
.lr-msg.is-you { align-self: flex-end; justify-items: end; }
.lr-msg.is-you p { background: var(--s2); }
.lr-msg a { color: var(--brass); }
.lr-chatp-wait { font-style: italic; }
.lr-chatp-contact { flex: none; border-top: 1px solid var(--line); }
.lr-chatp-contact summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 12.5px; color: var(--muted); cursor: pointer; list-style: none; }
.lr-chatp-contact summary::-webkit-details-marker { display: none; }
.lr-chatp-contact summary::after { content: '+'; margin-left: auto; font-size: 16px; color: var(--brass); }
.lr-chatp-contact[open] summary::after { content: '\2212'; }
.lr-chatp-cform { display: grid; gap: 12px; padding: 0 16px 14px; }
.lr-chatp-cform > p:first-child { font-size: 12.5px; color: var(--muted); }
.lr-chatp-cform .lr-btn { justify-self: start; min-height: 44px; }
.lr-chatp-form { flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--line); }
.lr-chatp-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.lr-chatp-form textarea:focus { outline: none; border-color: var(--cu); }
.lr-chatp-form .lr-btn { min-height: 44px; }
.lr-chatp-msg { flex: none; padding: 0 16px 10px; }
/* A new chat: the terms, "I agree", optional name and email, Start. */
.lr-chatp-start { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; align-content: start; gap: 14px; padding: 16px; }
.lr-chatp-terms { max-height: 220px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--s1); }
.lr-chatp-terms:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.lr-chatp-terms p { font-size: 13.5px; line-height: 1.6; color: #d6cfc3; overflow-wrap: anywhere; }
.lr-chatp-terms p + p { margin-top: 8px; }
.lr-chatp-terms a { color: var(--brass); }
.lr-chatp-note { margin-top: -6px; font-size: 12.5px; color: var(--muted); }
.lr-chatp-cap { font-size: 12px; color: var(--dim); }
.lr-chatp-cap:empty { display: none; }
.lr-chatp-cap-line { flex: none; padding: 0 16px 8px; }
.lr-chatp-cap-line.is-wait { color: var(--brass); }
.lr-chatp-form textarea:disabled { opacity: .55; cursor: not-allowed; }
/* A sent message shows at once; one still going out is a little faded; one that couldn't go says so, with Try again. */
.lr-msg.is-sending p { opacity: .7; }
.lr-msg.is-failed p { border: 1px dashed var(--bad); background: transparent; }
.lr-msg-fail { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; font-size: 12.5px; color: var(--bad); }
.lr-msg-fail .lr-link-btn { min-height: 44px; padding: 0 4px; color: var(--brass); font-size: 12.5px; text-decoration: underline; text-underline-offset: 4px; }
/* The three dots while the reply is written (owner, Nov 11: "like a iPhone text message"). */
.lr-typing p { display: inline-flex; align-items: center; min-height: 40px; }
.lr-dots { display: inline-flex; align-items: center; gap: 5px; height: 10px; }
.lr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: lr-dot 1.2s ease-in-out infinite; }
.lr-dots i:nth-child(2) { animation-delay: .15s; }
.lr-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lr-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lr-dots i { animation: none; opacity: .75; } }
/* The buttons under a reply: the store's own pages. A part is a small card with its picture and price. */
.lr-chat-links { display: grid; gap: 6px; margin-top: 4px; }
.lr-chat-act, .lr-chat-part { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.lr-chat-act:hover, .lr-chat-part:hover { border-color: var(--cu); }
.lr-msg .lr-chat-act { color: var(--brass); }
.lr-chat-act span, .lr-chat-part-t { flex: 1; min-width: 0; }
.lr-chat-act .lr-i, .lr-chat-part > .lr-i { flex: none; width: 16px; height: 16px; color: var(--cu); }
.lr-chat-part { padding: 6px 12px 6px 6px; }
.lr-chat-thumb { flex: none; width: 48px; height: 48px; overflow: hidden; background: var(--s2); }
.lr-chat-thumb > img, .lr-chat-thumb > svg, .lr-chat-thumb > .lr-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.lr-chat-thumb .lr-ph { font-size: 7px; display: grid; place-items: center; }
.lr-chat-part-t { display: grid; gap: 2px; }
.lr-chat-part-t b { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lr-chat-part-t small { font-size: 12px; color: var(--muted); }
/* "Check my order": a private panel above the message box. */
.lr-chatp-tool { flex: none; max-height: 48%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--s1); }
.lr-chatp-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lr-chatp-tool-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lr-chatp-tool-head .lr-i { width: 16px; height: 16px; color: var(--cu); }
.lr-chatp-tool-head .lr-link-btn { min-height: 44px; padding: 0 4px; color: var(--brass); font-size: 12.5px; }
.lr-chatp-tool p { font-size: 13.5px; line-height: 1.55; }
.lr-chatp-tool-form { display: grid; gap: 10px; }
.lr-chatp-tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lr-chatp-tool-row .lr-btn { min-height: 44px; }
.lr-chatp-tool-row .lr-link-btn { min-height: 44px; color: var(--brass); font-size: 12.5px; }
.lr-ocard { display: grid; gap: 10px; }
.lr-ocard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lr-ocard-top .lr-label { margin: 0 0 2px; }
.lr-ocard-top b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.lr-ocard-top small { font-size: 12px; color: var(--muted); }
.lr-ocard-parcel { display: flex; align-items: center; gap: 10px; }
.lr-ocard-parcel > .lr-i { flex: none; width: 18px; height: 18px; color: var(--cu); }
.lr-ocard-parcel span { flex: 1; min-width: 0; display: grid; }
.lr-ocard-parcel small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lr-ocard-parcel .lr-btn { min-height: 44px; }
/* The honeypot: off screen, never seen or reached by people; bots that fill every field fill it in. */
.lr-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- iPad landscape and below */
@media (max-width: 1180px) {
  .lr-wrap { width: min(1320px, calc(100% - 56px)); }
  .lr-cindex { padding-inline: 28px; scroll-padding-inline: 28px; }
  .lr-hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }
  .lr-pdp { gap: 40px; }
  .lr-checkout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .lr-bag { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
  .lr-line { grid-template-columns: 30px 96px minmax(0, 1fr) 140px 100px; }
  .lr-bag-head { grid-template-columns: minmax(0, 1fr) 140px 100px; }
  .lr-irow { grid-template-columns: 52px minmax(0, 1fr) 160px 120px; }
  .lr-pinfo { gap: 40px; }
}

@media (max-width: 1024px) {
  .lr-hide-sm { display: none !important; }
  .lr-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-hero-copy { order: 2; }
  .lr-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .lr-film { grid-template-columns: auto auto auto; justify-content: center; }
  .lr-film-thumbs { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
  .lr-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lr-range-teaser { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lr-shopbar { grid-template-columns: minmax(0, 1fr); }
  .lr-shop-ctrl { justify-content: space-between; }
  .lr-checkout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "sum"; gap: 36px; padding-top: 24px; }
  .lr-co-summary { position: static; }
  .lr-bag { grid-template-columns: minmax(0, 1fr); }
  .lr-summary { position: static; }
}

@media (max-width: 760px) {
  .lr-pdp { grid-template-columns: minmax(0, 1fr); }
  .lr-viewer { position: static; }
}

@media (max-width: 900px) {
  .lr-gallery { gap: 40px 20px; }
  .lr-pinfo { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; padding-top: 32px; }
  .lr-pinfo-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lr-specs { grid-template-columns: minmax(0, 1fr); }
  .lr-previews { margin-top: 56px; padding-top: 32px; }
  .lr-sheet { grid-template-columns: minmax(0, 1fr); }
  .lr-search-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lr-facets { position: static; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .lr-facets .lr-label { display: none; }
  .lr-facets button { flex: none; gap: 8px; padding: 0 14px; border: 1px solid var(--line-2); }
  .lr-facets button.is-on { border-color: var(--cu); }
  .lr-irow { grid-template-columns: 44px minmax(0, 1fr) 120px; }
  .lr-itype { display: none; }
  .lr-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-info { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lr-auth { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 32px; padding-top: 36px; }
  .lr-acct-grid, .lr-order-grid { grid-template-columns: minmax(0, 1fr); }
  /* The policy pages' side menu is a sidebar on wide screens only; below 900px it stacked above the footer and read as a second footer. */
  .lr-info-nav { display: none; }
  .lr-footer-news { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lr-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .lr-wrap { width: calc(100% - 32px); }
  .lr-pinfo-side { grid-template-columns: minmax(0, 1fr); }
  .lr-pcard { padding: 18px 16px; }
  .lr-specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lr-var-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-word { font-size: 17px; gap: 3px; }

  .lr-section { margin-top: 64px; }
  .lr-section-head { flex-wrap: wrap; align-items: end; }
  .lr-crumbs { padding: 16px 0 12px; }
  .lr-page-head { margin-bottom: 24px; }

  .lr-hero { padding: 24px 0 48px; }
  .lr-hero-title { font-size: 40px; }
  .lr-hero-grid { margin-top: 24px; gap: 24px; }
  .lr-hero-actions .lr-btn { width: 100%; }
  .lr-cindex { grid-auto-columns: 74%; padding-inline: 16px; scroll-padding-inline: 16px; gap: 12px; }
  .lr-standard { margin-top: 64px; padding: 48px 0; }
  .lr-standard-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-standard-grid > div, .lr-standard-grid > div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid #c9c0b1; }
  .lr-feature-buy .lr-btn { width: 100%; }
  .lr-range-box .lr-btn { justify-self: stretch; }
  .lr-rotator { min-height: 280px; }

  .lr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .lr-grid .lr-card-line { grid-template-columns: auto minmax(0, 1fr); padding-top: 12px; gap: 2px 8px; }
  .lr-grid .lr-card-price { grid-column: 2; }
  .lr-grid .lr-card-title { font-size: 14px; }
  .lr-grid .lr-card-line2 { flex-wrap: wrap; gap: 0 8px; }
  .lr-grid .lr-card-meta { display: none; }
  .lr-gallery { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lr-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0 20px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .lr-tabs::-webkit-scrollbar { display: none; }
  .lr-shop-ctrl { gap: 4px 20px; }
  .lr-views { padding-left: 0; border-left: 0; }
  .lr-irow { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
  .lr-ititle a { font-size: 14.5px; }

  .lr-search-field input { min-height: 60px; font-size: 26px; }
  .lr-result { grid-template-columns: 88px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .lr-result-no { display: none; }
  .lr-result-art { grid-row: span 2; }
  .lr-result-title { font-size: 15px; }
  .lr-result-buy { grid-column: 2; display: flex; justify-content: space-between; align-items: center; }

  .lr-film { grid-template-columns: auto auto auto; justify-content: center; }
  .lr-film-thumbs { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
  .lr-stage-hint span { display: none; }
  .lr-buy-facts > div { grid-template-columns: 100px minmax(0, 1fr); }
  .lr-qty-btns { width: 100%; }
  .lr-qty-btns button { flex: 1; width: auto; }
  .lr-buy-row2 { gap: 12px; }
  .lr-sheet dd { max-width: 58vw; }

  .lr-line { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "art info" "art qty" "art total"; gap: 8px 14px; align-items: start; }
  .lr-line-no { display: none; }
  .lr-line-art { grid-area: art; }
  .lr-line-info { grid-area: info; }
  .lr-qtyin { grid-area: qty; }
  .lr-line-total { grid-area: total; text-align: left; }
  .lr-bag-head { display: none; }
  .lr-summary { padding: 22px 18px; }
  .lr-field-row, .lr-field-row-3 { grid-template-columns: minmax(0, 1fr); }
  .lr-auth { padding-top: 24px; }
  .lr-auth-side { padding: 24px 18px; }
  .lr-account-head { margin-bottom: 20px; }
  .lr-account-head .lr-btn { width: 100%; }
  /* All five account tabs in view: two rows rather than a row that scrolls sideways. */
  .lr-acct-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .lr-acct-tabs a { min-height: 44px; }
  .lr-acct-body { padding-top: 24px; }
  .lr-order { grid-template-columns: minmax(0, 1fr) auto; }
  .lr-order strong { grid-column: 1 / -1; text-align: left; }
  .lr-ledger li { grid-template-columns: minmax(0, 1fr) auto; }
  .lr-ledger-what { grid-column: 1 / -1; grid-row: 2; }
  .lr-totp { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lr-totp-text { justify-items: stretch; text-align: center; }
  .lr-totp-text .lr-btn { width: 100%; }
  .lr-codes { gap: 8px 12px; }
  .lr-recovery { padding: 18px 14px; }
  .lr-btn-row .lr-btn { flex: 1 1 auto; }
  .lr-sec-head > .lr-btn { width: 100%; }
  .lr-trackings li { grid-template-columns: auto minmax(0, 1fr); }
  .lr-trackings li .lr-btn { grid-column: 1 / -1; }
  .lr-card-box { padding: 20px 16px; }
  /* The waiver dialog takes the whole visible screen on a phone; the text and the form scroll as one. */
  .lr-facts > div { grid-template-columns: minmax(0, 1fr); }
  .lr-dialog { padding: var(--bar-gap, 0px) 0 0; align-items: stretch; }
  .lr-dialog-box { width: 100%; height: 100%; max-height: none; border: 0; }
  .lr-dialog-head { padding: 14px 16px 12px; }
  .lr-dialog-body { padding: 16px; }
  .lr-wv-text { max-height: none; overflow: visible; padding: 0; border: 0; background: none; }
  .lr-dialog-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .lr-dialog-foot .lr-btn { flex: 1 1 0; padding: 0 10px; }
  /* Chat: the button sits above the phone's bottom edge; the open panel is the whole visible screen. */
  .lr-chat-btn { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .lr-chatp { left: 0; right: 0; top: calc(var(--vvt, 0px) + var(--bar-gap, 0px)); width: auto; height: calc(var(--vvh, 100vh) - var(--bar-gap, 0px)); border: 0; z-index: 270; }
  html.lr-chat-open, html.lr-chat-open body { overflow: hidden; }
  .lr-has-chat .lr-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .lr-has-chat .lr-footer-bottom, .lr-has-chat .lr-co-footer { padding-bottom: 84px; }
  .lr-co-summary { padding: 22px 18px; }
  .lr-checkout-soon .lr-co-main > .lr-btn { width: 100%; }
  .lr-order-mail { flex-direction: column; gap: 12px; }
  .lr-order-mail .lr-btn { width: 100%; }
  .lr-mailcard .lr-btn, .lr-req-cards .lr-btn { width: 100%; }
  .lr-video-play .lr-i { width: 44px; height: 44px; }
  .lr-offroad { padding: 14px; }

  .lr-values { grid-template-columns: minmax(0, 1fr); }

  .lr-footer { margin-top: 80px; }
  .lr-footer-ivory { padding: 40px 0; }
  .lr-footer-cols { gap: 28px 16px; padding-top: 40px; }
  .lr-footer-cols a { min-height: 40px; }
  .lr-footer-bottom { flex-direction: column; }

  .lr-toast { left: 12px; right: 12px; bottom: 16px; max-width: none; }
  .lr-footer-mail { justify-self: stretch; }
  .lr-footer-mail .lr-btn { width: 100%; }
  .lr-lightbox-top, .lr-lightbox-nav { padding: 10px 16px; }
  .lr-lightbox-stage { padding: 0 8px; }
}

@media (max-width: 380px) {
  .lr-hero-title { font-size: 34px; }
  .lr-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Reviews: count and sort above the list, Show more / Show all below it, so every review can be read. */
.lr-review-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.lr-review-count { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); outline: none; }
.lr-review-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lr-review-more [hidden] { display: none !important; }
.lr-review-main { min-width: 0; }
.lr-review-main { margin-top: 28px; }
.lr-review-list { display: grid; }

/* ---------------------------------------------------------------- header: iPad upright and smaller (Nov 10) */
/* Checkout has its own short header (logo and Return to bag): only its main row is pinned. */
html.lr-checkout-chrome { --head-h: var(--main-h); }
@media (max-width: 1024px) {
  :root { --main-h: 64px; --cat-h: 46px; }
  .lr-header-inner { gap: 14px; }
  .lr-menu-btn { display: inline-flex; }
  .lr-promo-inner { justify-content: center; }
  .lr-promo-links, .lr-catbar-more { display: none; }
  /* A fade on the right says the row scrolls. */
  .lr-cats { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 28px; }
  .lr-hsearch { max-width: none; }
  .lr-acct-link .lr-hlabel { display: none; }
}
@media (max-width: 760px) {
  :root { --main-h: 58px; --head-h: var(--main-h); }
  .lr-header-inner { gap: 6px; }
  .lr-word { font-size: 17px; gap: 3px; }
  .lr-hlabel { display: none; }
  .lr-hbtn { padding: 0; }
  .lr-menu-btn { margin-left: -8px; }
  .lr-hactions { gap: 0; }
  .lr-hactions .lr-hbtn:last-child { margin-right: -6px; }
  .lr-search-btn { display: inline-flex; }
  .lr-search-btn[aria-expanded="true"] { color: var(--brass); }
  /* The search box opens under the header row from the search button. */
  .lr-hsearch { display: none; position: absolute; left: 0; right: 0; top: 100%; max-width: none; margin: 0; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 16px 30px rgba(0, 0, 0, .45); }
  html.lr-search-open .lr-hsearch { display: block; }
  .lr-hsearch input { font-size: 16px; }
  .lr-hsearch-i { left: 30px; }
  .lr-hsuggest { left: 16px; right: 16px; top: calc(100% - 4px); max-height: calc(var(--vvh, 100vh) - var(--main-h) - 90px); }
  .lr-hs-item { gap: 12px; }
  /* The part-type row scrolls away with the page on phones (only the main row stays pinned). */
  .lr-catbar { position: static; height: auto; }
  .lr-catbar-inner { width: 100%; padding-left: 16px; }
  .lr-cats { gap: 22px; }
  .lr-cats a { min-height: 44px; }
  .lr-promo { font-size: 10.5px; letter-spacing: .1em; }
  .lr-promo-inner { min-height: 32px; padding: 6px 0; }
  .lr-promo p { justify-content: center; gap: 2px 10px; text-align: center; }
  /* One line on phones: the delivery promise (returns are in the menu and on every product). */
  .lr-promo p span:not(:first-child) { display: none; }
}

/* ------------------------------------------------------------------ card checkout and the order page (Nov 11) */
.lr-co-form { display: grid; gap: 26px; align-content: start; }
.lr-co-form > .lr-label { margin: 0; }
.lr-co-form > .lr-page-title { margin-top: -14px; }
.lr-co-sec { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.lr-co-sec > h2 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-stretch: 125%; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.lr-co-sec > h2 > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--cu); color: var(--cu); font-family: var(--body); font-stretch: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.lr-co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.lr-co-full { grid-column: 1 / -1; }
.lr-co-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; min-width: 0; }
.lr-co-sec .lr-small { margin: 0; }
.lr-co-sec .lr-small a, .lr-co-form > .lr-small a { color: var(--brass); }
.lr-co-signin { margin: 0; }
.lr-co-card { min-height: 120px; }
.lr-co-card-wait { padding: 18px 0; color: var(--muted); font-size: 14px; }
.lr-co-secure { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; }
.lr-co-secure .lr-i { flex: none; width: 18px; height: 18px; color: var(--brass); }
.lr-co-paybtn { width: 100%; }
.lr-co-paybtn[aria-busy="true"] { cursor: progress; }
.lr-co-form > .lr-form-msg { margin-top: -12px; }
.lr-co-form > .lr-form-msg a { color: var(--brass); }
.lr-co-form > .lr-callout, .lr-co-form > .lr-ref, .lr-co-form > .lr-agree, .lr-co-form > .lr-offroad { margin: 0; }
.lr-co-test { border-left-color: var(--brass); }
.lr-co-sec .lr-ca { margin: 0; }
.lr-order-page { padding-top: 28px; }
.lr-order-page > .lr-label { margin-top: 18px; }
.lr-order-page > .lr-page-sub b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.lr-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 30px; }
.lr-order-side { display: grid; gap: 20px; }
.lr-order-side .lr-card-box p { margin: 0 0 8px; overflow-wrap: anywhere; }
.lr-order-side .lr-card-box a, .lr-order-grid .lr-co-lines a { color: var(--brass); }
.lr-order-grid .lr-co-lines + dl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lr-order-status { color: var(--text) !important; font-family: var(--display); font-stretch: 125%; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.lr-order-page .lr-co-back { margin-top: 28px; }
@media (max-width: 1024px) {
  /* The order first on smaller screens, so the total is seen before the form. */
  .lr-checkout-pay { grid-template-areas: "sum" "main"; }
  .lr-order-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lr-co-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lr-co-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .lr-co-form { gap: 22px; }
}