/**
 * Sitewide offer box (inline, after the test tools grid / a calculator
 * result / mid-article) and the dismissible bottom bar for The Printer Cost
 * & Upkeep Kit. Loaded on every page that carries kit-offer.js. Same light
 * blue/white palette as the rest of the site, with the green "buy" button
 * already used sitewide for CTAs.
 */
.kit-offer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #EFF6FF;
  border: 2px solid #DBEAFE;
  border-radius: 16px;
  padding: 16px;
  margin: 24px auto;
  max-width: 640px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.kit-offer-thumb { flex: 0 0 auto; width: 66px; height: auto; border-radius: 6px; box-shadow: 0 4px 10px rgba(30,64,175,.18); background: #fff; }
.kit-offer-body { min-width: 0; }
.kit-offer-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e40af; margin: 0 0 4px; }
.kit-offer-line { font-size: .96rem; color: #1f2937; margin: 0 0 10px; line-height: 1.5; }
.kit-offer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kit-offer .btn-buy { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .6rem 1.1rem; border-radius: 10px; box-shadow: 0 3px 10px rgba(5,150,105,.28); }
.kit-offer .btn-buy:hover { box-shadow: 0 6px 16px rgba(5,150,105,.36); }
.kit-offer-look { font-size: .88rem; font-weight: 600; color: #6b7280; text-decoration: underline; }
.kit-offer-fine { font-size: .76rem; color: #6b7280; margin: 8px 0 0; }
@media (max-width: 480px) {
  .kit-offer { flex-direction: column; align-items: stretch; }
  .kit-offer-thumb { 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 #3b82f6;
  box-shadow: 0 -4px 16px rgba(30,64,175,.14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.kit-bar[hidden] { display: none; }
.kit-bar-in { max-width: 40rem; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.kit-bar-sub { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #6b7280; }
.kit-bar .btn-buy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; padding: .55rem 1rem; border-radius: 10px; }
.kit-bar-close { flex: 0 0 auto; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: #6b7280; cursor: pointer; padding: 4px 6px; }
.kit-bar-close:hover { color: #3b82f6; }

/* The free online printer test pages need their print/test controls fully
   visible and unobstructed, and printing a test page must never carry the
   kit pitch onto paper. */
@media print {
  .kit-offer, .kit-bar { display: none !important; }
}

/* A bare content table (e.g. a calculator's comparison table, or a guide's
   spec table) can overflow a 360px viewport with no scroll affordance.
   Scoped to pages that load this stylesheet, not a sitewide change. */
@media (max-width: 767px) {
  main table, article table, .container table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
}

/* Phones: stop pre-existing grid/flex content, long words and wide tables from
   widening the page (18 pages overflowed at 360px before this). */
@media (max-width: 767px) {
  body { overflow-wrap: break-word; }
  .grid > *, .flex > * { min-width: 0; }
  main table, article table, .container table, .prose table { display: block; max-width: 100%; overflow-x: auto; }
  img, iframe, video, svg { max-width: 100%; height: auto; }
  button, .btn { max-width: 100%; white-space: normal; }
}