:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17282d; background: #f5f7f5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #17594e; }
:focus-visible { outline: 3px solid #177563; outline-offset: 3px; }
.shell { max-width: 75rem; margin: auto; padding: 1rem clamp(1rem, 4vw, 3rem); }
.masthead, .categories, .footer, .pages { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.masthead { justify-content: space-between; border-bottom: 1px solid #cdd8d4; }
.brand, h1 { font-family: Georgia, serif; }
.brand { font-size: 1.5rem; font-weight: bold; }
form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
input, button, .purchase { font: inherit; padding: .55rem .75rem; border: 1px solid #779089; border-radius: .25rem; }
button, .purchase { background: #17594e; color: white; cursor: pointer; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); overflow-wrap: anywhere; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.catalog a { display: grid; gap: .75rem; height: 100%; padding: .9rem; background: white; border: 1px solid #cdd8d4; overflow-wrap: anywhere; }
.catalog > .catalog-ad { grid-column: 1 / -1; min-width: 0; }
.catalog img, .detail img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: white; }
.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }
.purchase { display: inline-block; }
.footer { margin-top: 2rem; border-top: 1px solid #cdd8d4; }