:root { --ink: #2b2621; --paper: #f3ead9; --paper-light: #faf5ec; --stamp: #cc4619; --graphite: #6b5d4a; --line: rgba(43,38,33,0.14); /* Fixed dark neutral for solid dark buttons/chips - unlike --ink, this does NOT flip in dark mode, since --ink becomes a light text color there and these need to stay dark backgrounds with white text. */ --ink-solid: #2b2621; --error-bg: rgba(181,80,47,0.1); } /* Light is always the default - dark only turns on when the account's dark-mode toggle explicitly stamps data-theme="dark" on . We deliberately do NOT follow prefers-color-scheme here. */ :root[data-theme="dark"] { --ink: #efe6da; --paper: #1c1815; --paper-light: #262019; --stamp: #ea7d3e; --graphite: #a89686; --line: rgba(239,230,218,0.14); --error-bg: rgba(217,129,79,0.14); } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; } header { background: var(--paper-light); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 960px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; } .brand { font-size: 22px; font-weight: 700; color: var(--stamp); text-decoration: none; } nav a { margin-left: 18px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; } nav a.cta { background: var(--stamp); color: white; padding: 8px 14px; border-radius: 999px; } .nav-right { display: flex; align-items: center; gap: 14px; } .logout-link { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13px; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .logout-link:hover { border-color: var(--ink); } .cart-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: white; background: var(--stamp); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .cart-link:hover { opacity: 0.9; } .cart-badge { background: white; color: var(--stamp); } .nav-toggle { display: none; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; } @media (max-width: 768px) { .nav-inner { flex-wrap: wrap; } .nav-right { flex-wrap: wrap; } .nav-toggle { display: block; } #site-nav { display: none; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding-top: 10px; order: 3; } #site-nav.is-open { display: flex; } #site-nav a { margin-left: 0; padding: 8px 4px; width: 100%; } } .layout { display: flex; justify-content: center; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 0 24px; } main { flex: 1 1 960px; max-width: 960px; margin: 0; padding: 32px 0 60px; } .promo-rail { display: none; flex: 0 0 220px; flex-direction: column; gap: 18px; padding-top: 32px; } @media (min-width: 1300px) { .promo-rail { display: flex; } } footer { text-align: center; padding: 24px; color: var(--graphite); font-size: 13px; } .footer-social { display: flex; justify-content: center; gap: 16px; margin-top: 4px; } h1 { font-size: 32px; margin-bottom: 8px; } h2 { font-size: 22px; margin-top: 36px; } .hero { text-align: center; padding: 30px 0 40px; } .hero p { color: var(--graphite); max-width: 50ch; margin: 10px auto 24px; } .search-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; margin: 0 auto; } .search-form input, .search-form select { flex: 1; min-width: 100px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; } .price-range { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 160px; } .price-range input { flex: 1; min-width: 0; } .price-range span { color: var(--graphite); font-size: 13px; } .search-form button { padding: 10px 20px; border: none; border-radius: 999px; background: var(--ink-solid); color: white; font-weight: 600; cursor: pointer; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .card { display: block; background: var(--paper-light); border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-decoration: none; color: inherit; } .card:hover { border-color: var(--ink); } .card h3 { margin: 8px 0 4px; font-size: 17px; } .category-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stamp); font-weight: 700; } .tags-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .tag-pill { font-size: 12px; padding: 3px 11px; border-radius: 999px; background: var(--paper-light); border: 1px solid var(--line); color: var(--graphite); } .price, .price-big { font-weight: 700; color: var(--ink); } .price-big { font-size: 24px; margin: 8px 0 20px; } .muted { color: var(--graphite); font-size: 14px; } .error { background: var(--error-bg); color: var(--stamp); padding: 10px 14px; border-radius: 8px; font-size: 14px; } .form { display: flex; flex-direction: column; gap: 6px; max-width: 480px; } .form.narrow { max-width: 380px; } .form label { font-weight: 600; font-size: 13px; margin-top: 10px; } .form input, .form select, .form textarea { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; } /* --- modern dropdown styling for every