/* Alleen menu horizontaal scrollen op mobiel. Geen effect op desktop. */
/*
  Enhanced mobile navigation styles

  On small screens we want the horizontal chip-strip menu to scroll
  independently without dragging the entire page. The negative margins in
  previous versions could cause the whole document to move when swiping
  across the chips, especially on touch devices. To prevent this we
  remove the negative inline margin and explicitly contain horizontal
  overscroll. The `touch-action: pan-y` property disables horizontal
  panning so only the chip-strip itself can scroll horizontally. We also
  set a sticky nav on mobile via !important flags so that the menu stays
  visible when scrolling up or down.
*/
@media (max-width: 768px) {
  /*
    Keep the navigation bar fixed to the top on mobile.  Fixed positioning
    ensures the menu is always visible, even when the user scrolls down
    the page. The `!important` flags override inline styles defined in
    individual pages. We also set `overflow-x: hidden` on the nav to
    prevent the entire bar from sliding horizontally when the inner
    scroll area is swiped.
  */
  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: var(--secondary-bg);
    overflow-x: hidden;
    display: flex;
    align-items: center;
  }

  /* Ensure the logo and language selector do not flex-grow so they stay
     anchored at the edges while the middle menu can scroll. */
  nav .logo {
    flex: 0 0 auto;
    margin-right: .5rem;
  }
  nav .language-select {
    flex: 0 0 auto;
    margin-left: .5rem;
  }
  /* The nav-links container grows and provides horizontal scrolling.
     We use flexbox to allow the chip-strip to take up remaining space
     between the logo and language selector. */
  nav .nav-links {
    /* Allow the nav links area to expand and fill the space between the logo
       and the language selector. Use !important to override inline styles
       defined in the HTML head. */
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    gap: .5rem !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: none !important;
    /* Allow both horizontal and vertical touch panning so that
       horizontal swipes scroll the menu but vertical swipes will
       propagate to the page. Removing touch-action: pan-y fixes the
       issue where horizontal scrolling was completely disabled. */
    /* Consistent padding so chips don't start flush with the logo */
    padding: .5rem .25rem !important;
    /* Allow the nav-links container to shrink within the flex layout.  Without
       setting a min-width to zero the flex item may not shrink when the
       language selector is present, causing the chips to wrap or drop
       below. */
    min-width: 0 !important;
  }

  /* Chip-strip still inherits from nav-links because it shares the same
     scrolling behaviour. Remove negative margins and align items.
     Individual chip elements do not shrink and snap to the start of
     the scroll container. */
  .chip-strip {
    display: flex;
    flex-wrap: nowrap !important;
    gap: .5rem;
    margin-inline: 0;
    padding: 0;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    /* Allow default touch actions so horizontal swipes on the chip strip
       perform horizontal scrolling rather than being blocked. */
    scroll-snap-type: x proximity;
  }
  .chip-strip > a,
  .chip-strip > button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Add top padding to the body equal to the height of the fixed nav so
     that the page content does not overlap with the navigation. The
     approximate height is 4rem (1rem padding top + 1rem padding bottom
     + line height). Adjust if your nav height differs. */
  body {
    padding-top: 4.5rem;
  }
}


/* ===== Prevent oversized images in content & reviews (v9 fix) ===== */
.review img,
.review picture img,
.content img,
.picture img,
.article img,
.card img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}



/* ===== v10: cap overly tall images in review/product sections ===== */
.review img,
.review picture img,
.reviews img,
.reviews picture img,
.product-card img,
.product-card picture img,
.product-grid .card img,
.product-grid .card picture img,
.top3 img,
.top3 picture img {
  max-height: 420px;
  object-fit: cover;
}



/* ===== v11: additional safe caps for card/grid/favorites images ===== */
.cards img,
.cards picture img,
.grid .card img,
.grid .card picture img,
.grid > div img,
.grid > article img,
.favorites img,
.favorites picture img,
.category-cards img,
.category-cards picture img,
.home-cards img,
.home-cards picture img {
  max-height: 360px;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}


/* v13 pager */
.pager .btn.pill{transition:transform .08s ease, box-shadow .2s ease}
.pager .btn.pill:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}

/* v17 content image cap */
.content img, .content picture img, main img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


/* ===== vMobile-compact: reduce oversized feel on phones =====
   Goal: less scroll fatigue on mobile while keeping desktop untouched.
   Uses !important to safely override inline/page styles. */
@media (max-width: 600px) {
  /* Hero */
  header {
    min-height: 62vh !important;
    padding: 1.25rem 1rem !important;
  }
  header h1 {
    font-size: 2.15rem !important;
    margin-bottom: 0.6rem !important;
    line-height: 1.1 !important;
  }
  header p,
  header .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  header .cta-btn {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.95rem !important;
  }

  /* Section spacing */
  section {
    padding: 2.25rem 1rem !important;
  }
  h2.section-title {
    margin-bottom: 1.25rem !important;
  }

  /* Card grid */
  .grid {
    gap: 1rem !important;
  }
  .card img {
    height: 170px !important;
  }
  .card .overlay {
    height: 170px !important;
  }
  .card-content {
    padding: 0.85rem !important;
  }
  .card-content h3 {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
  }
  .card-content p {
    font-size: 0.86rem !important;
  }
  .shops {
    font-size: 0.82rem !important;
  }

  /* Info blocks */
  .info-box {
    padding: 1.25rem !important;
    margin: 1.25rem 0 !important;
  }
}