:root { font-family: system-ui, sans-serif; color: #252921; background: #f5f6f2; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
header, main { max-width: 960px; margin: auto; padding: 20px 16px; }
header { border-bottom: 1px solid #d8ddd1; }
.brand { font-size: 14px; font-weight: 650; }
h1 { font-size: 26px; margin: 14px 0 0; }
#status { line-height: 1.7; margin: 0 0 16px; overflow-wrap: anywhere; }
#catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 18px; }
article { background: white; border: 1px solid #d8ddd1; border-radius: 12px; padding: 16px; min-width: 0; }
h2 { font-size: 20px; margin: 0; overflow-wrap: anywhere; }
.state { display: inline-block; font-size: 13px; padding: 4px 8px; margin: 10px 0; background: #eef1e6; border-radius: 5px; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
figure { margin: 14px 0; }
img, video { display: block; width: 100%; max-height: 450px; object-fit: contain; background: #eef1e6; border-radius: 8px; }
button { display: block; min-height: 44px; padding: 10px 14px; width: 100%; font: inherit; cursor: pointer; border: 1px solid #b7bdab; border-radius: 7px; background: #f7df77; color: #252921; margin-top: 10px; overflow-wrap: anywhere; }
button:focus-visible { outline: 3px solid #315d2a; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: wait; }
.remove { background: white; color: #963d2d; }
.availability-choice { display:flex; align-items:center; gap:12px; min-height:48px; font-weight:650; margin-bottom:12px; cursor:pointer; }
.availability-choice input { width:24px; height:24px; accent-color:#396531; }
.alias { color:#45633b; font-weight:600; }
#instructions { line-height:1.7; overflow-wrap:anywhere; }
.actions { position:sticky; bottom:0; background:#f5f6f2; padding:8px 0 max(8px,env(safe-area-inset-bottom)); }
.actions:empty { display:none; }
@media (max-width: 400px) { header, main { padding: 16px 12px; } }
