/**
 * Offer box (after the timer / partway through a guide or review) and the
 * dismissible bottom bar for The 8-Week Breathwork and Meditation Plan.
 * Same soft red palette as the rest of One Breathe Studio. Class names are
 * kit-prefixed and the Buy button's colors are !important so article link
 * styles can never turn it into a transparent link.
 */
.kit-offer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FFF5F5;
  border: 2px solid #F5C6C0;
  border-radius: 18px;
  padding: 16px;
  margin: 28px auto;
  max-width: 680px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: left;
}
.kit-offer[data-kit-slot]:empty { display: none; }
.kit-offer-thumb-link { flex: 0 0 auto; display: block; line-height: 0; }
.kit-offer-thumb { width: 72px; height: auto; border-radius: 6px; box-shadow: 0 4px 10px rgba(120,30,20,.2); background: #fff; }
.kit-offer-body { min-width: 0; flex: 1 1 auto; }
.kit-offer .kit-offer-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C0392B; margin: 0 0 4px; }
.kit-offer .kit-offer-line { font-size: .98rem; color: #222; margin: 0 0 12px; line-height: 1.5; }
.kit-offer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
a.kit-btn-buy, a.kit-btn-buy:visited {
  display: inline-flex; align-items: center; gap: 6px;
  background: #C0392B !important; color: #fff !important;
  text-decoration: none !important; font-weight: 700; font-size: .95rem; line-height: 1.2;
  padding: .65rem 1.15rem; border-radius: 28px; min-height: 44px; box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(192,57,43,.28); border: 0;
}
a.kit-btn-buy:hover { background: #A93226 !important; color: #fff !important; }
.kit-mono { font-variant-numeric: tabular-nums; font-weight: 800; color: inherit; }
.kit-offer a.kit-offer-look { font-size: .9rem; font-weight: 600; color: #A93226; text-decoration: underline; }
.kit-offer .kit-offer-fine { font-size: .78rem; color: #6b5a58; margin: 10px 0 0; }
@media (max-width: 480px) {
  .kit-offer { flex-direction: column; align-items: stretch; margin: 24px 0; }
  .kit-offer-thumb-link { display: none; }
}

.kit-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 995;
  background: rgba(255,255,255,.98);
  border-top: 2px solid #E74C3C;
  box-shadow: 0 -4px 16px rgba(120,30,20,.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.kit-bar[hidden] { display: none; }
.kit-bar-in { max-width: 42rem; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.kit-bar-sub { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #6b5a58; }
.kit-bar a.kit-btn-buy { flex: 0 0 auto; font-size: .92rem; padding: .55rem 1rem; }
.kit-bar-close { flex: 0 0 auto; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: #6b5a58; cursor: pointer; padding: 4px 8px; min-height: 40px; }
.kit-bar-close:hover { color: #C0392B; }

/* Phones: a bare comparison table in a guide can be wider than a 360px
   screen. Let it scroll inside itself instead of widening the page. Scoped
   to the pages that load this stylesheet (home, guides, reviews). */
@media (max-width: 767px) {
  .main-content table, main table, article table, .container table, table.comparison-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .pros-cons { grid-template-columns: 1fr !important; }
}