/* Hazel's Finds: a quiet, blog-like layout. Neutral ground, ink text, the rose
   accent only on the logo heart, the selected filter, Hazel's take, Hot labels
   and link hovers. Nunito is for the logo only.
   Mobile first. */
:root {
  --bg: #F6F5F3;
  --surface: #FFFFFF;
  --ink: #2E2433;
  --ink-2: #4A3F4F;
  --muted: #6D6072;
  --line: #E4DFDA;
  --soft: #EFEBE7;
  --accent: #C2416B;
  --accent-ink: #A8325A;
  --logo: "Nunito", "Figtree", Arial, sans-serif;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
img { max-width: 100%; display: block; }
h1, h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.brand { text-decoration: none; min-width: 0; }
.logo { font-family: var(--logo); font-weight: 800; font-size: 27px; letter-spacing: -0.01em; line-height: 1; display: flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); }
.logo svg { flex: none; }
.site-nav { display: flex; gap: 16px; font-size: 14px; }
.site-nav a { text-decoration: none; padding: 12px 0; }

/* Intro: the only place with Hazel's photo */
.intro { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; gap: 14px; align-items: center; }
.intro img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.intro h1 { margin: 0; font-size: 18px; line-height: 1.3; }
.intro p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }

/* Filters */
.filters { padding-block: 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.chip { text-decoration: none; color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.chip.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 14px; color: var(--ink-2); }
.filter-row label { display: flex; gap: 8px; align-items: center; }
.filter-row select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 160px; }
.filter-row input[type="checkbox"] { accent-color: var(--ink); width: 18px; height: 18px; }
.btn-small { font: inherit; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }

/* Feed: plain entries separated by rules, like a blog */
.feed { display: flex; flex-direction: column; padding-block: 8px 28px; }
.entry { display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.entry:first-child { border-top: 1px solid var(--line); }
.entry--ended { color: var(--muted); }
.entry__img { flex: 0 0 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--soft); }
.entry__img img { width: 100%; height: 100%; object-fit: cover; }
.entry__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta { font-size: 13px; color: var(--muted); }
.label { font-weight: 600; }
.label--hot { color: var(--accent-ink); }
.entry__title { font-weight: 700; font-size: 17px; line-height: 1.35; text-decoration: none; }
.entry--ended .entry__title { font-weight: 600; text-decoration: line-through; }
.entry--ended .summary, .entry--ended .price, .entry--ended .price s { color: var(--muted); }
.entry--ended .entry__img img { filter: grayscale(1); opacity: 0.7; }
.summary { margin: 0; font-size: 15px; color: var(--ink-2); }
.price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; font-variant-numeric: tabular-nums; }
.price strong { font-weight: 700; }
.price s { color: var(--muted); }

/* Email sign-up */
.signup { margin-block: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.signup h2 { margin: 0; font-size: 17px; }
.signup p { margin: 0; font-size: 15px; color: var(--ink-2); }
.signup form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.signup label { width: 100%; }
.signup input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 11px 18px; border: 0; border-radius: 8px; background: var(--ink); color: #FFFFFF; text-decoration: none; text-align: center; cursor: pointer; }
.btn:hover { background: #46394C; color: #FFFFFF; }

.pager { display: flex; justify-content: space-between; padding-bottom: 24px; font-weight: 600; }
.empty { padding: 24px 0; color: var(--ink-2); }

/* Deal page */
.back { display: inline-block; padding-block: 14px 0; font-size: 14px; text-decoration: none; color: var(--ink-2); }
.deal { display: flex; flex-direction: column; gap: 22px; padding-block: 12px 40px; }
.deal h1 { margin: 4px 0 0; font-size: 26px; line-height: 1.25; }
.deal--ended h1 { color: var(--muted); text-decoration: line-through; }
.deal--ended .shot, .deal--ended .hero img { filter: grayscale(1); opacity: 0.7; }
.deal h2 { margin: 0 0 8px; font-size: 17px; }
.deal section p { margin: 0; }
.deal ul, .deal ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.lede { margin: 8px 0 0; font-size: 17px; color: var(--ink-2); }
.hero { border-radius: 14px; overflow: hidden; background: var(--soft); }
.item { padding-block: 10px; border-bottom: 1px solid var(--line); }
.item:first-of-type { border-top: 1px solid var(--line); }
.item__name { font-weight: 600; }
.rows { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; max-width: 360px; }
.rows div { display: flex; justify-content: space-between; gap: 12px; }
.rows .final { font-weight: 700; }
.note { font-size: 13px; color: var(--muted); }
.code-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; font-size: 16px; letter-spacing: 0.04em; background: var(--soft); padding: 2px 8px; border-radius: 6px; }
.copy { font: inherit; font-size: 14px; padding: 4px 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.take h2 { color: var(--accent-ink); }
.take p { font-style: italic; color: var(--ink-2); }
.notice { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.review { position: sticky; top: 0; z-index: 5; background: #FFF4D6; border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 10px; }
.review p { margin: 0; }
.review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.review__actions form { display: flex; gap: 8px; align-items: center; }
.review-card { display: flex; flex-direction: column; gap: 6px; }
.shot { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Text pages */
.page { padding-block: 24px 40px; max-width: 65ch; }
.page h1 { font-size: 26px; line-height: 1.25; margin: 0 0 16px; }
.page p { margin: 0 0 12px; }
.page ul { padding-left: 20px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer .wrap { padding-block: 20px 32px; display: flex; flex-direction: column; gap: 8px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer a { color: var(--ink-2); }

@media (min-width: 720px) {
  .entry__img { flex-basis: 112px; height: 112px; }
  .deal h1 { font-size: 30px; }
}