:root { color: #302316; background: #fffaf0; font-family: system-ui, sans-serif; }
body { margin: 0; }
header { padding: 1rem max(5vw, 1rem); background: #21160f; }
header a { display: inline-flex; align-items: center; gap: .75rem; color: #f7db9c; font-size: 1.25rem; font-weight: 700; text-decoration: none; }
header img { border-radius: 50%; }
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); max-width: 64rem; margin: auto; padding: clamp(1rem, 5vw, 4rem); }
.product-photo { display: block; width: 100%; max-height: 34rem; object-fit: contain; border-radius: 1rem; background: #f8edda; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-block: .5rem; line-height: 1.25; }
p { line-height: 1.7; }
a { color: #684018; }
ul { list-style: none; padding: 0; }
li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding-block: .75rem; border-block-end: 1px solid #e7d5b8; }
li a { border-radius: .55rem; background: #f0d498; padding: .5rem .8rem; font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
@media (max-width: 44rem) { main { grid-template-columns: 1fr; } .product-photo { max-height: 26rem; } }