* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f6f6f6; color: #222; }
header { padding: 1rem; background: #fff; border-bottom: 1px solid #ddd; }
h1 { margin: 0; font-size: 1.4rem; }
main { display: grid; gap: 1rem; padding: 1rem; max-width: 1100px; margin: auto; grid-template-columns: 1fr 320px; align-items: start; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card, aside { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; }
.card h3 { margin-top: 0; }
.price { font-weight: bold; }
aside { position: sticky; top: 1rem; }
aside ul { list-style: none; padding: 0; margin: 0; }
aside li { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid #eee; }
aside li > span:first-child { flex: 1 1 100%; }
button { cursor: pointer; padding: .5rem .8rem; border: 0; border-radius: 6px; background: #222; color: #fff; }
button:disabled { opacity: .4; cursor: not-allowed; }
#buy { width: 100%; background: #25d366; color: #000; font-weight: bold; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } aside { position: static; } }
.card img { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: .75rem; }
.card img { cursor: zoom-in; }
.modal { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; background: rgba(0, 0, 0, .85); }
.modal[hidden] { display: none; }
.modal-bar { display: flex; gap: .5rem; justify-content: center; padding: .75rem; }
.modal-bar button { min-width: 2.5rem; background: #fff; color: #000; }
.modal-view { flex: 1; overflow: auto; display: flex; padding: 1rem; }
.modal-view img { margin: auto; max-width: none; width: 100%; max-height: none; object-fit: contain; }