:root {
  color-scheme: dark;
  --background: #101115;
  --panel: #191b21;
  --line: #34363d;
  --text: #f6f1e8;
  --muted: #c2c0c6;
  --gold: #dfb86a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 16px/1.6 Inter, Arial, sans-serif;
}
a { color: var(--gold); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
header { padding: 1rem max(1rem, calc((100% - 72rem) / 2)); border-bottom: 1px solid var(--line); }
header a { color: var(--text); font: bold 1.25rem Georgia, serif; text-decoration: none; }
header span { color: var(--gold); }
main { max-width: 74rem; padding: 1.5rem 1rem 3rem; margin: auto; }
nav { margin-bottom: 1.25rem; }
article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-content: start; }
.gallery a { display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); aspect-ratio: 1; }
.gallery a:first-child { grid-column: 1 / -1; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.category { color: var(--gold); font-size: .8rem; font-weight: bold; letter-spacing: .075em; text-transform: uppercase; margin: 0 0 .5rem; }
h1 { font: 400 clamp(1.8rem, 4vw, 3rem)/1.15 Georgia, serif; margin: 0; }
.price { color: var(--gold); font-size: 1.35rem; font-weight: bold; margin: .75rem 0; }
dl { margin: 1rem 0; }
dl div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); border-top: 1px solid var(--line); padding: .5rem 0; }
dt { color: var(--muted); }
dd { margin: 0; }
.buy { display: inline-block; padding: .7rem 1.3rem; background: var(--gold); color: var(--background); font-weight: bold; text-decoration: none; }
.checkout-note, .description { color: var(--muted); }
.description { margin-top: 1.25rem; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 44rem) { article { grid-template-columns: minmax(0, 1fr); } }

.collection-intro { max-width: 47rem; color: var(--muted); margin: 1rem 0 1.6rem; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.collection-grid li { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.collection-grid a { display: block; height: 100%; color: var(--text); text-decoration: none; }
.collection-grid a:hover h3 { text-decoration: underline; color: var(--gold); }
.collection-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--background); }
.collection-grid h3 { font: 400 1.12rem/1.35 Georgia, serif; margin: 1rem 1rem .35rem; }
.collection-grid p { color: var(--gold); margin: 0 1rem 1rem; }
.collection-links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 1.75rem 0 0; }
.related-products { margin-top: 2.5rem; }
.related-products .collection-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 20rem)); }