/* Master Lock key safe documentation */
.media-product-hero--lock{
    --media-product-photo-css:url('../images/masterlock-keybox.webp');
    --media-product-position:center 43%;
    background-color:#e8e6e0;
}

.lock-doc-page{padding-top:var(--space-4);padding-bottom:var(--space-6)}
.lock-doc-intro{margin:2px var(--space-1) var(--space-4);color:var(--ink);font-size:var(--font-md);line-height:var(--line-copy)}

.lock-app-card{padding:var(--space-5);margin-bottom:var(--space-3)}
.lock-app-card__head{display:grid;grid-template-columns:calc(var(--icon-box-lg) + var(--space-1)) minmax(0,1fr);align-items:center;gap:var(--space-3)}
.lock-app-card__logo{width:var(--icon-box-lg);height:var(--icon-box-lg);border-radius:var(--radius-md);display:block;box-shadow:var(--shadow-soft)}
.lock-app-card h2{margin:0;font-family:var(--font-heading-family);font-size:var(--font-lg);font-weight:var(--weight-medium);line-height:var(--line-tight)}
.lock-app-card p{margin:2px 0 0;color:var(--muted);font-size:var(--font-sm);line-height:var(--line-normal)}
.lock-store-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.lock-store-links a{min-height:var(--control-lg);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:#f1efea;color:var(--ink);display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:var(--space-2);font-size:var(--font-sm);font-weight:var(--weight-semibold);line-height:var(--line-tight)}
.lock-store-links a .app-icon{font-size:var(--font-lg)}
.lock-store-links a:active{transform:scale(.98)}

.lock-instruction-card{padding:var(--space-5);margin-top:var(--space-3)}
.lock-instruction-card__title{display:grid;grid-template-columns:calc(var(--icon-box-lg) + var(--space-1)) minmax(0,1fr);align-items:center;gap:var(--space-3)}
.lock-instruction-card__title>span{width:var(--icon-box-lg);height:var(--icon-box-lg);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--green);display:grid;place-items:center;font-size:var(--font-lg)}
.lock-instruction-card__title h2{margin:0;font-family:var(--font-heading-family);font-size:var(--font-lg);font-weight:var(--weight-medium);line-height:var(--line-tight)}
.lock-instruction-card>p{margin:var(--space-1) 0 0;padding-left:calc(calc(var(--icon-box-lg) + var(--space-1)) + var(--space-3));color:var(--muted);font-size:var(--font-md);line-height:var(--line-copy)}
.lock-instruction-card--important{border-color:rgba(183,108,75,.28);background:linear-gradient(135deg,#fffdfa,#fbf4ef)}
.lock-instruction-card--important .lock-instruction-card__title>span{color:var(--terracotta);background:#f6ebe5}
.lock-instruction-card--important>p{color:var(--ink);font-weight:var(--weight-semibold)}

@media(max-width:420px){
    .media-product-hero--lock{--media-product-position:center 44%}
    .lock-store-links{grid-template-columns:1fr 1fr}
    .lock-store-links a{min-height:var(--control-md);padding:var(--space-2) var(--space-2)}
    .lock-instruction-card>p{padding-left:calc(calc(var(--icon-box-lg) + var(--space-1)) + var(--space-3))}
}