:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #1d2b29; background: #f4f5ef; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: clamp(2rem, 6vw, 5rem) max(5vw, calc((100vw - 1120px) / 2)); background: #173831; color: #fff; }
header a { color: #d3e9c2; font-size: .85rem; letter-spacing: .12em; font-weight: 800; text-decoration: none; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.1; margin: .5rem 0 0; overflow-wrap: anywhere; }
main { max-width: 1160px; padding: 1.5rem 1rem 4rem; margin: auto; }
nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
nav a, .back { display: inline-block; background: #e3eadc; padding: .55rem .8rem; border-radius: .5rem; font-weight: 650; }
a { color: #17604d; }
section + section { margin-top: 2.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.1rem; }
article { border: 1px solid #d7e0d5; border-radius: .9rem; overflow: hidden; background: #fff; }
article img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #edf0e8; }
.body { padding: 1.1rem; overflow-wrap: anywhere; }
h3, p { margin: 0 0 .65rem; }
.category { color: #426158; font-size: .85rem; }
.price { font-weight: 800; font-size: 1.45rem; color: #185a43; }
.description { color: #46534c; }
.back { margin-bottom: 1rem; }
.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.detail .body { padding: clamp(1.1rem, 4vw, 3rem); }
.empty { padding: 1.25rem; background: #fff; border-radius: .75rem; }