/* fountainpen.de — mobile / responsive overlay
   Loaded by every page on top of the legacy template CSS.
   Goals:
   - prevent horizontal page-overflow on phones
   - scale fixed-width tables and images down
   - keep desktop layout visually identical (most rules apply only ≤900px)
*/

/* Universal: no element should ever push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* Images: never overflow their container, never load eagerly if marked lazy */
img { max-width: 100%; height: auto; }

/* Old-school tables on the product pages have fixed widths — let them shrink */
@media (max-width: 900px) {
  table { max-width: 100% !important; width: 100% !important; height: auto !important; }
  td, th { word-wrap: break-word; word-break: break-word; max-width: 100%; }
  /* Old <font size="2"> still rules colour, but at least bump base size for readability */
  body, td, font { font-size: 14px; line-height: 1.5; }
  font[size="1"] { font-size: 12px !important; }
  font[size="2"] { font-size: 14px !important; }
  font[size="3"] { font-size: 16px !important; }
  /* Pre-formatted price/spec lists */
  pre { white-space: pre-wrap; word-break: break-word; }
}

/* Phone: stack the two main top-level cells of the legacy 2-column layout */
@media (max-width: 700px) {
  body > table, body > center > table { width: 100% !important; }
  /* Many product pages use a wrapping <table> with one big <tr><td> for menu and one for content. */
  table table { width: 100% !important; }
  /* Hide truly decorative spacer GIFs */
  img[src*="spacer"], img[width="1"][height="1"] { display: none !important; }
  /* Make text inputs / buttons reachable and tappable */
  input, select, textarea, button { font-size: 16px; }
  /* The fixed back-to-top button shouldn't sit on top of footer text */
  #fp-btt { bottom: 14px !important; right: 14px !important; }
}

/* Visual polish that's safe on all screens */
a { word-wrap: break-word; }
img.fp-zoomable { image-rendering: -webkit-optimize-contrast; }

/* Print: tighter, no nav, no fixed buttons */
@media print {
  #fp-btt, #fp-bc, #fp-search-wrap, #fp-lb, .lang-switch, nav, .qnav { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
}