* { box-sizing: border-box; }
body { margin: 0; background: #11110f; color: #f5f1e9; font: 16px/1.6 system-ui, sans-serif; }
a { color: #e9c486; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem max(4vw, 1rem); background: #1b1915; }
header .brand { color: #f5f1e9; font: bold 1.6rem Georgia, serif; text-decoration: none; }
header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
main { max-width: 1200px; margin: auto; padding: 1.5rem max(4vw, 1rem) 4rem; }
.breadcrumbs { font-size: .9rem; margin-bottom: 2rem; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.photo { border-radius: 22px; overflow: hidden; background: #26231d; }
.photo img { display: block; width: 100%; max-height: 720px; object-fit: contain; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; color: #d6a866; font-size: .8rem; }
h1 { font: bold clamp(2.1rem, 5vw, 4rem)/1.1 Georgia, serif; margin: .3rem 0 1.4rem; }
.detail-price { font-size: 1.8rem; font-weight: 700; }
.detail-code { margin: -.65rem 0 .5rem; color: #bcb5a8; font-size: .9rem; letter-spacing: .04em; }
.detail-code strong { color: #e9c486; }
.button { display: inline-block; background: #bd8b46; color: #17130e; text-decoration: none; font-weight: 700; border-radius: 999px; padding: .85rem 1.5rem; margin: 1rem 0; }
.button:hover { background: #e0b879; }
.back { display: block; margin-top: .7rem; }
footer { border-top: 1px solid #3b3429; padding: 2rem 4vw; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } .photo img { max-height: 480px; } }