@font-face { font-family: Onest; src: url(Onest-VariableFont_wght.ttf) format("truetype"); font-weight: 100 900; font-display: swap }
/* Оформление сайта «Ночь»: тёмный фон, фото товара на белой карточке, жёлтый акцент.
   Шрифт Onest подключается сам, если его файл (.ttf или .woff2) лежит в этой папке. Если файла нет, страница показывается системным шрифтом. */

:root { --bg: #14161a; --panel: #1f2228; --ink: #f2f3f5; --muted: #a9afb9; --line: #353a43; --edge: #4a4f58; --hot: #ffd23f; --on-hot: #14161a }
* { box-sizing: border-box }
html { background: var(--bg) }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100% }
img { max-width: 100%; display: block }
a { color: var(--hot) }
a:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px }
h1 { margin: 4px 0 0; font-size: 28px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere }
h2 { margin: 0; font-size: 18px; font-weight: 800 }
h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800 }
p { margin: 0 }
.muted { color: var(--muted); font-size: 15px }

.page { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column }
.top { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px }
.brand { font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: none; padding: 12px 0 }
.nav { font-size: 14px; font-weight: 700; text-decoration: none; padding: 12px 0 }
.foot { margin-top: auto; padding: 20px; font-size: 13px; color: var(--muted) }

.photo { padding: 4px 16px 0 }
.photo > div { background: #fff; border-radius: 24px; padding: 14px }
.photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain }

.lead { padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 12px }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { font-size: 13px; font-weight: 500; border: 1px solid var(--edge); border-radius: 999px; padding: 6px 12px }
.chip.hot { font-weight: 700; color: var(--on-hot); background: var(--hot); border-color: var(--hot) }

.how { margin: 0 16px 16px; background: var(--hot); color: var(--on-hot); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px }
.how h2 { font-size: 20px }
.step { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45 }
.step > span { font-size: 15px; font-weight: 800; width: 22px; flex: none }
.step.round { gap: 14px; line-height: 1.5 }
.step.round > span { width: 32px; height: 32px; border-radius: 999px; background: var(--hot); color: var(--on-hot); display: flex; align-items: center; justify-content: center }

.pack { margin: 0 16px; background: var(--panel); border-radius: 20px; padding: 20px; display: flex; flex-direction: column }
.pack h2 { margin-bottom: 6px }
.word { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.word:last-child { border-bottom: 0; padding-bottom: 0 }
.word b { font-size: 22px; font-weight: 700; color: var(--hot); line-height: 1.25; overflow-wrap: anywhere }
.word span { font-size: 15px; line-height: 1.4 }

.rec { padding: 28px 20px 30px; display: flex; flex-direction: column; gap: 14px }
.card { border: 1px solid var(--edge); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 700;
  padding: 15px 14px; border-radius: 14px; min-height: 48px }
.btn.main { flex: 1 1 auto; background: var(--hot); color: var(--on-hot); font-weight: 800 }
.btn.line { color: var(--hot); border: 1px solid var(--hot) }
.btn.wide { margin-top: 8px; font-size: 16px }

.shelf { margin: 0 16px; background: var(--panel); border-radius: 20px; padding: 20px; display: flex; flex-direction: column }
.shelf h2 { margin-bottom: 4px }
.good { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; line-height: 1.3 }
.good:last-child { border-bottom: 0; padding-bottom: 0 }
.good img, .good em { width: 52px; height: 52px; border-radius: 10px; flex: none }
.good img { background: #fff; object-fit: contain }
.good em { border: 1px dashed var(--edge) }
.good span { flex: 1; min-width: 0; overflow-wrap: anywhere }
.good i { color: var(--hot); font-size: 18px; font-style: normal }
.good.off { color: var(--muted) }

.plain { padding: 24px 20px 8px; display: flex; flex-direction: column; gap: 14px }
.plain:last-of-type { padding-bottom: 30px }

.stub { flex: 1; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 14px }
.stub .chip { align-self: flex-start }
.stub h1 { font-size: 30px }
.stub .btn { flex: 0 0 auto }

.tiles { padding: 0 16px 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.tile { background: var(--panel); border-radius: 18px; padding: 10px; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere }
.tile div { background: #fff; border-radius: 12px; padding: 6px }
.tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain }
.tile span { padding: 0 4px 4px }