/* =====================================================================
   7Stars — "Handmade Crochet Bouquets" landing page (/crochet-bouquets/).

   Page-unique layout ONLY. Everything shared lives in home.css as `.hp-*`
   and is used directly here: .hp-hero, .hp-card + .hp-grid, .hp-trust,
   .hp-quote, .hp-prose, .hp-faq, .hp-btn, .hp-crumb, .hp-head.

   The page body carries `.hp`, so every `--hp-*` token resolves. Do not
   introduce raw hex values or a second "gold" — see STANDARDS.md §3.
   ===================================================================== */

/* ── In-page jump chips (under the hero) ───────────────────────────── */
.bq-jump {
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: 1.4rem 0 0;
}
.bq-jump a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  font-size: .82rem; font-weight: 500;
  color: var(--hp-ink-2);
  background: var(--hp-white);
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  transition: border-color .25s var(--hp-ease), color .25s var(--hp-ease), transform .25s var(--hp-ease);
}
.bq-jump a:hover {
  color: var(--hp-gold-deep);
  border-color: var(--hp-gold-soft);
  transform: translateY(-1px);
}

/* ── Comparison tables (bouquet chooser + crochet vs fresh) ────────── */
.bq-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bq-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--hp-white);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
}
.bq-table th,
.bq-table td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hp-line-soft);
}
.bq-table thead th {
  font-family: var(--hp-sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hp-muted);
  background: var(--hp-cream-2);
  white-space: nowrap;
}
.bq-table tbody th {
  font-weight: 600;
  color: var(--hp-ink);
  white-space: nowrap;
}
.bq-table tbody th a { color: var(--hp-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.bq-table tbody th a:hover { color: var(--hp-ink); }
.bq-table td { color: var(--hp-ink-2); }
.bq-table tbody tr:last-child th,
.bq-table tbody tr:last-child td { border-bottom: 0; }
.bq-table tbody tr:hover { background: var(--hp-cream); }
.bq-table .bq-yes { color: var(--hp-gold-deep); font-weight: 600; }

/* ── Occasion → bouquet picker ─────────────────────────────────────── */
.bq-occasions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.bq-occasion {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.2rem;
  background: var(--hp-white);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  box-shadow: var(--hp-shadow-sm);
  transition: transform .3s var(--hp-ease), box-shadow .3s var(--hp-ease), border-color .3s;
}
.bq-occasion:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-md); border-color: var(--hp-gold-soft); }
.bq-occasion-ico {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: .45rem;
  color: var(--hp-gold-deep);
  background: var(--hp-sand);
  border-radius: 50%;
}
.bq-occasion-ico svg { width: 19px; height: 19px; }
.bq-occasion h3 { font-size: 1rem; }
.bq-occasion p { font-size: .85rem; line-height: 1.6; color: var(--hp-muted); }
.bq-occasion-pick {
  margin-top: .55rem;
  font-size: .84rem; font-weight: 600;
  color: var(--hp-gold-deep);
}

/* ── "Read next" guide links ───────────────────────────────────────── */
.bq-reads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.bq-read {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.15rem 1.25rem;
  background: var(--hp-cream-2);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  transition: transform .3s var(--hp-ease), border-color .3s;
}
.bq-read:hover { transform: translateY(-3px); border-color: var(--hp-gold-soft); }
.bq-read span {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--hp-muted);
}
.bq-read h3 { font-size: .99rem; line-height: 1.35; }
.bq-read p { font-size: .85rem; line-height: 1.6; color: var(--hp-muted); }

/* ── Closing CTA band ──────────────────────────────────────────────── */
.bq-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.8rem; align-items: center;
  padding: 2.2rem 2.4rem;
  background: linear-gradient(120deg, #f8f1e6, #f3e9d9);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r-lg);
}
.bq-cta h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem); }
.bq-cta p { margin-top: .6rem; font-size: .93rem; color: var(--hp-ink-2); }
.bq-cta-btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-self: end; }

@media (max-width: 860px) {
  .bq-cta { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; }
  .bq-cta-btns { justify-self: start; }
}