:root {
  --bg: #FAF8F4;
  --page-bg: #E9E5DF;
  --surface: #FFFFFF;
  --surface-2: #F2EEE8;
  --text: #191817;
  --text-muted: #66615C;
  --text-faint: #9A948E;
  --border: #E5DED6;
  --divider: #EEE8E1;
  --accent: #FF4F6D;
  --accent-contrast: #FFFFFF;
  --lavender: #C8B8FF;
  --lime: #DFFF63;
  --lime-bg: #191817;
  --amber: #F0B94E;
  --chip-bg: #F0ECE6;
  --chip-text: #24211F;
  --overlay-btn: rgba(255,255,255,0.94);
  --scrim-bottom: rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#171717; --page-bg:#0F0F0F; --surface:#202020; --surface-2:#2A2A2A;
    --text:#F7F5F2; --text-muted:#B9B3AD; --text-faint:#827C76; --border:#33302D; --divider:#2B2927;
    --accent:#FF657E; --accent-contrast:#171717; --lavender:#B9A8FF; --lime:#DFFF63; --lime-bg:#F7F5F2;
    --amber:#F0B94E; --chip-bg:#292725; --chip-text:#F7F5F2; --overlay-btn:rgba(23,23,23,.88); --scrim-bottom:rgba(0,0,0,.72);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page-bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text);
}
button, input, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.display { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 800; }
.editorial { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }

.page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) { .page { max-width: 720px; } }
@media (min-width: 900px) { .page { max-width: 1080px; } }
@media (min-width: 1280px) { .page { max-width: 1240px; } }

.btn-reset { all: unset; box-sizing: border-box; cursor: pointer; }
.touch { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

.chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
}
.chip.selected { background: var(--text); color: #fff; }

.hscroll { display: flex; gap: 10px; overflow-x: auto; }
.hscroll::-webkit-scrollbar { display: none; }

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #F1ECE8;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px;
  background: linear-gradient(to top, var(--scrim-bottom), rgba(0,0,0,0));
}
.save-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 15px;
  background: var(--overlay-btn);
  display: flex; align-items: center; justify-content: center;
}
.new-sticker {
  position: absolute; top: 6px; left: 6px;
  padding: 4px 8px;
  background: var(--lime);
  color: #191817;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  z-index: 2;
}

input[type="text"], input[type="search"], textarea, select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
label { font-size: 12px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; }

.nav-bottom {
  position: sticky; bottom: 0;
  height: 72px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-around;
}

.site-nav-list {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-list a {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text);
}

.custom-logo-link img.custom-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 10px;
}
@media (min-width: 640px) { .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .listing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1280px) { .listing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.listing-layout { display: flex; flex-direction: column; }
.listing-media { width: 100%; }
.listing-details { width: 100%; }
.buy-bar {
  position: sticky;
  bottom: 0;
  padding: 14px 20px 22px;
  background: var(--bg);
  border-top: 2px solid var(--divider);
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 900px) {
  .listing-layout { flex-direction: row; align-items: flex-start; gap: 40px; padding: 0 20px; }
  .listing-media { flex: 0 0 460px; }
  .listing-media > div:first-child { border-radius: 16px; }
  .listing-details { flex: 1; min-width: 0; }
  .buy-bar {
    position: static;
    margin-top: 24px;
    padding: 18px 20px;
    border-top: none;
    border-radius: 14px;
    background: var(--surface);
  }
}