/* GLOBAL FIX: nav buttons readable on all languages & devices */
.nav-buttons a,
.nav-btn,
a.nav-btn,
.navigation a {
  font-size: 15px !important;
  padding: 10px 16px !important;
}

/*
  On very small screens the default navigation button size can push
  menu items off the screen. Reduce font size and padding for
  viewports up to 600 px wide so that more links fit on a single line
  or wrap neatly when combined with the responsive rules in chipstrip.css.
*/
@media (max-width: 600px) {
  .nav-buttons a,
  .nav-btn,
  a.nav-btn,
  .navigation a {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
}

/*
  On small screens we show a custom mobile navigation bar at the top of
  product tip and review pages. To avoid duplicate navigation, hide the
  default pager navigation (usually positioned at the bottom of the page)
  when the viewport width is 768 px or less.  Without this rule,
  pages would display two sets of “Vorige / Home” buttons on mobile.
*/
@media (max-width: 768px) {
  nav.pager {
    display: none !important;
  }
}

/*
  Pointer icons for product headings

  Many of our guides include a "top picks" section where each product name is
  presented as a third‑level heading (<h3>) linking out to an affiliate
  merchant. To help visitors recognise these headings as clickable links on
  both desktop and mobile, we add a small pointing‑hand icon before each
  anchor that is a direct child of an <h3>. Restrict this rule to content
  inside <main> so that navigation links and other interface elements are
  unaffected.
*/
main h3 > a::before,
article h3 > a::before {
  /*
    Use a pointing-hand icon before headings that contain links. Many of our
    guides wrap each recommended product name in an <h3><a>…</a></h3>. Adding
    this icon before the anchor draws attention to the fact that the
    heading is clickable without disrupting the layout. We apply the rule
    broadly to <main> and <article> contexts so that it covers both legacy
    pages and the new improved guides (which sometimes place content in
    top-level <article> tags rather than inside <main>). The icon is
    inserted only when the <a> is a direct child of the <h3>.
  */
  content: "👉";
  margin-right: 0.4rem;
}

/*
  Pointer icon in product lists
  Add a pointing-hand icon before each link inside a product-list heading.
  This helps users recognise that the product names are clickable.
*/
.product-list h3 > a::before {
  content: "👉";
  margin-right: 0.4rem;
}