:root { --navy: #14243f; --navy2: #1d3357; --red: #d62f2f; --ink: #111; --grey: #f2f4f7; --line: #dde2ea; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: #fff; }
a { color: var(--navy2); }
button, select, input { font: inherit; }

.preview { background: #fff4cc; color: #5a4500; text-align: center; padding: .4rem; font-size: .85rem; }
.trust { background: var(--navy); color: #fff; display: flex; justify-content: center; gap: 1.5rem; padding: .4rem 1rem; font-size: .8rem; flex-wrap: wrap; }

.header { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; flex-wrap: wrap; }
.logo { text-decoration: none; color: var(--navy); font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.logo strong { font-style: italic; font-size: 1.6rem; }
.logo em { color: var(--red); font-style: italic; }
.logo small { display: block; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: #667; font-weight: 600; }
.search { flex: 1 1 260px; }
.search input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 6px; }
.basket-btn { background: var(--navy); color: #fff; border: 0; border-radius: 6px; padding: .6rem .9rem; cursor: pointer; }
.basket-btn span { background: var(--red); border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; }

.cats { background: var(--navy2); display: flex; overflow-x: auto; }
.cats button { background: none; border: 0; color: #fff; padding: .7rem 1rem; white-space: nowrap; cursor: pointer; }
.cats button.active, .cats button:hover { background: var(--red); }

.hero { background: linear-gradient(120deg, var(--navy) 0%, #2c4a78 100%); color: #fff; display: grid; grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1rem; }
.hero h1 { font-size: clamp(1.8rem, 6vw, 3rem); font-style: italic; text-transform: uppercase; line-height: 1; margin: 0 0 .5rem; }
.finder { background: #fff; color: var(--ink); border-radius: 8px; padding: 1rem; display: grid; gap: .6rem; }
.finder h2 { margin: 0; font-size: 1.05rem; text-transform: uppercase; color: var(--navy); }
.finder select { padding: .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.btn-red { background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: .7rem 1rem; font-weight: 700; cursor: pointer; }
.btn-red:disabled { opacity: .55; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--navy2); text-decoration: underline; cursor: pointer; padding: 0; justify-self: start; }
.small { font-size: .85rem; margin: 0; }

main { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: .3rem; background: var(--grey); }
.card .brand { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #667; }
.card h3 { margin: 0; font-size: 1rem; }
.card .fits { font-size: .8rem; color: #445; }
.card .price { font-size: 1.25rem; font-weight: 800; margin-top: auto; }
.empty { padding: 1rem; background: var(--grey); border-radius: 8px; }

.brands { background: var(--grey); text-align: center; padding: 1.2rem 1rem; }
.brands h2 { margin: 0 0 .3rem; color: var(--navy); font-style: italic; text-transform: uppercase; font-size: 1.1rem; }
.footer { background: var(--navy); color: #fff; padding: 1rem; font-size: .85rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .5rem; }
.footer a { color: #fff; }

.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 100%); background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.25); padding: 1rem; display: flex; flex-direction: column; gap: .8rem; z-index: 10; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; }
.drawer-head button { background: none; border: 0; font-size: 1.8rem; cursor: pointer; }
#basket-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#basket-items li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.qty { display: flex; gap: .3rem; align-items: center; }
.qty button { width: 1.8rem; height: 1.8rem; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; }
.total { display: flex; justify-content: space-between; font-size: 1.1rem; margin: 0; }

.page { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem; }

@media (min-width: 800px) {
  .hero { grid-template-columns: 1.3fr 1fr; padding: 2.5rem 2rem; align-items: center; }
}