.locks-intro { padding-block: var(--section-space); background: #edf1e8; color: #22321e; }
.locks-intro-layout { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: var(--content-space); }
.locks-intro h1 span { color: #50682a; }
.locks-intro p:not(.eyebrow) { max-width: 650px; color: #596850; }
.locks-intro .button { margin-top: var(--text-space); }
.locks-check { padding: clamp(24px, 3vw, 40px); border: 1px solid #ced7c5; border-radius: 24px; background: #fafcf7; }
.locks-check > .icon { width: 52px; height: 52px; padding: 12px; background: #dcff77; border-radius: 16px; }
.locks-check h2 { font: var(--type-h4); margin-block: 20px; }
.locks-check ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 16px; }
.locks-check li { display: flex; gap: 12px; align-items: start; }
.locks-check li .icon { margin-top: 3px; }
.locks-catalog { padding-block: var(--section-space); background: #0c120c; color: #fafcf7; --ring: #dcff77; }
.locks-catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: var(--content-space); }
.locks-catalog-heading h2 { margin-top: var(--text-space); }
.locks-catalog-heading > p { max-width: 420px; color: #bec7b4; }
.locks-catalog .eyebrow { color: #dcff77; }
/* Featured picks share a large product stage; the directory stays compact. */
.locks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lock-card { display: flex; flex-direction: column; min-width: 0; border-radius: 28px; overflow: hidden; background: #edf1e8; color: #22321e; }
.lock-photo { --device-height: 218px; position: relative; height: 360px; overflow: hidden; isolation: isolate; background: #e8eee1; }
.lock-photo img { position: absolute; left: 50%; top: 54%; height: auto; max-width: none; mix-blend-mode: multiply; transition: transform .4s ease; }
/* Normalize the manufacturers' different image padding to one visible device height. */
.lock-photo .lock-photo-encode { width: calc(var(--device-height) * 1.9632); translate: -51.25% -49.7656%; }
.lock-photo .lock-photo-lever { width: calc(var(--device-height) * 1.6887); translate: -44.1406% -47.8125%; }
.lock-photo .lock-photo-assure { width: calc(var(--device-height) * 1.1958); translate: -49.9621% -50.0758%; }
.lock-pick { position: absolute; top: 24px; left: 24px; z-index: 1; padding: 9px 14px; border-radius: 99px; background: #22321e; color: #fafcf7; font: var(--type-h6); }
.lock-photo-caption { position: absolute; bottom: 22px; left: 24px; right: 24px; text-align: center; font: var(--type-h6); color: #44543b; }
.lock-card-body { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 18px; padding: clamp(22px, 2vw, 28px); }
.locks-catalog .lock-card .eyebrow { color: #50682a; margin: 0; }
.lock-card h3 { font: var(--type-h4); }
.lock-card-body > p:not(.eyebrow) { color: #596850; }
.lock-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.lock-facts span { padding: 7px 11px; border: 1px solid #bccbae; border-radius: 99px; font: var(--type-h6); }
.lock-card dl { align-self: stretch; margin: 0; display: grid; gap: 14px; }
.lock-card dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid #c4cfbb; }
.lock-card dt { color: #596850; font: var(--type-h6); padding-top: 3px; }
.lock-card dd { margin: 0; font: var(--type-h6); }
.lock-card a { margin-top: auto; display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font: var(--type-button); text-decoration: underline; text-underline-offset: 5px; }
.lock-card a .arrow-icon { flex-shrink: 0; }
.locks-library-jump { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 12px; font: var(--type-button); text-decoration: underline; text-underline-offset: 5px; }
.locks-library { padding-block: var(--section-space); background: #fafcf7; color: #22321e; --ring: #50682a; }
.locks-library .locks-catalog-heading > p { color: #596850; }
.lock-library-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; border-top: 1px solid #c4cfbb; }
.lock-library-meta p { display: flex; align-items: center; gap: 10px; font: var(--type-h6); }
.lock-library-meta strong { font: var(--type-h4); }
.lock-library-meta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: var(--type-h6); text-underline-offset: 4px; }
.lock-library-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; gap: 16px; padding: 24px; background: #edf1e8; border: 1px solid #d0d9c8; border-radius: 20px; }
.lock-library-filters label { display: grid; min-width: 0; gap: 10px; font: var(--type-h6); }
.lock-library-filters input, .lock-library-filters select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #b3c2a7; border-radius: 10px; padding: 12px; background: #fafcf7; color: #22321e; font: var(--type-body); font-size: max(16px, 1em); }
.lock-library-reset { min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid #b3c2a7; color: #22321e; background: transparent; font: var(--type-button); cursor: pointer; }
.lock-library-count { margin-block: 24px 16px; color: #596850; font: var(--type-h6); }
.lock-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lock-library-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid #c4cfbb; border-radius: 16px; background: #fff; transition: background .2s, border-color .2s, transform .2s; }
.lock-library-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; font: var(--type-h6); color: #596850; }
.lock-status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; background: #f1eee7; color: #6f5a29; }
.lock-status[data-state="live"] { background: #e6efdb; color: #3b5c24; }
.lock-status[data-state="unavailable"], .lock-status[data-state="restricted"] { background: #f7e8e1; color: #884022; }
.lock-library-card h3 { font: var(--type-h5); overflow-wrap: anywhere; }
.lock-library-card h3 a { display: flex; align-items: start; justify-content: space-between; gap: 14px; min-height: 44px; }
.lock-library-card .arrow-icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; }
.lock-library-models { margin-block: 10px 18px; font: var(--type-h6); color: #596850; overflow-wrap: anywhere; }
.lock-library-connection { margin-top: auto; padding-top: 14px; border-top: 1px solid #dce3d5; font: var(--type-h6); }
.lock-library-connection p { color: #596850; margin-top: 6px; }
.lock-library-more { display: flex; justify-content: center; margin-top: 28px; }
.lock-library-more .button { cursor: pointer; }
.lock-library-empty { padding: 40px 24px; text-align: center; border: 1px dashed #b3c2a7; border-radius: 16px; }
.lock-library-empty h3 { font: var(--type-h4); }
.lock-library-empty p { margin: 12px auto; max-width: 600px; }
.lock-library-empty a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.lock-library-note { display: flex; align-items: start; gap: 16px; padding: 24px; margin-top: 32px; border-radius: 18px; background: #edf1e8; font: var(--type-h6); color: #596850; }
.lock-library-note .icon { flex: 0 0 24px; color: #50682a; }
.lock-library-note strong { color: #22321e; }
.lock-library-note a { text-decoration: underline; text-underline-offset: 4px; }
.locks-library [hidden] { display: none !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .lock-card:hover .lock-photo > img { transform: translateY(-4px); } .lock-library-card:hover { transform: translateY(-3px); background: #f3f7ed; border-color: #769253; } }
@media (prefers-reduced-motion: reduce) { .lock-photo img, .lock-library-card { transition: none; } }
.locks-source-note { margin-top: 28px; max-width: 920px; color: #bec7b4; font: var(--type-h6); }
.locks-review { padding-block: var(--section-space); background: #edf1e8; color: #22321e; }
.locks-review h2 { margin-block: var(--text-space) var(--content-space); }
.locks-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.locks-review-list article { padding-top: 24px; border-top: 1px solid #a4b19a; }
.locks-review-list h3 { font: var(--type-h4); margin-bottom: 16px; }
.locks-review-list p { color: #596850; }
.locks-review-list a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; text-decoration: underline; text-underline-offset: 5px; font: var(--type-button); }
.locks-setup-note { margin-top: var(--content-space); padding: 24px; background: #dcff77; border-radius: 18px; }
.locks-setup-note p + p { margin-top: 12px; }
.locks-setup-note a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1050px) { .lock-library-filters { grid-template-columns: 1fr 1fr; } .lock-library-search { grid-column: 1 / -1; } .lock-library-reset { grid-column: 1 / -1; } .lock-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .locks-intro-layout { grid-template-columns: 1.15fr .85fr; gap: 32px; } }
@media (max-width: 800px) { .locks-intro-layout, .locks-grid, .locks-review-list { grid-template-columns: 1fr; } .locks-catalog-heading { align-items: start; flex-direction: column; } .locks-catalog-heading > p { max-width: 650px; } }
@media (max-width: 380px) { .lock-card dl > div { grid-template-columns: 1fr; gap: 6px; } }

@media (max-width: 540px) { .lock-library-grid { grid-template-columns: 1fr; } .lock-library-filters { padding: 18px; gap: 14px; } .lock-library-filters input, .lock-library-filters select { padding-inline: 8px; } .lock-library-meta a { flex-wrap: wrap; } .lock-photo-caption { font-size: 12px; } .lock-card-body { gap: 18px; } .lock-library-card { padding: 20px; } }