/* Indiott — "Complete the stack" cross-sell row (indiott-works-with.php).
   Reuses the theme's shop-loop cards (.woocommerce ul.products li.product) so
   image/title/price/(inc. VAT)/add-to-basket already match the shop. This file
   only re-lays the grid into a horizontal, scroll-snapping row and adds the
   section heading. Namespaced .ind-works; graphite/paper/signal design system. */

.ind-works {
  border-top: 1px solid var(--steel-100, #e9ecef);
  padding: 34px 0 10px;
  margin-top: 30px;
}
.ind-works .ind-kicker { margin: 0 0 6px; }
.ind-works__sub {
  margin: 0 0 18px;
  max-width: 60ch;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--steel-700, #3e444b);
}

/* "Which gateway do I need?" — sits above the cards because on a LoRaWAN sensor page it is
   the question that blocks the purchase, not a footnote to it. */
.ind-works__guide { margin: 0 0 18px; font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); font-size: 14px; line-height: 1.5; }
.ind-works__guide a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 1px solid var(--steel-300, #c9ced4); border-radius: 4px;
  color: var(--ink, #232458); text-decoration: none; font-weight: 500; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.ind-works__guide a:hover,
.ind-works__guide a:focus-visible { border-color: var(--signal, #ee6124); background: #fff8f4; }

/* Horizontal viewport with a soft fade at the right edge to hint at scroll. */
.ind-works__viewport { position: relative; }

/* Re-lay the theme's product grid into a single non-wrapping row. High
   specificity + targeted !important so it beats Kadence's archive grid rules
   without touching the card styling itself. */
.ind-works .ind-works__viewport ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  margin: 0 !important;
  padding: 4px 2px 14px;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-300, #c6ccd2) transparent;
}
/* Kill the Woo clearfix pseudo-elements that would otherwise become flex items. */
.ind-works .ind-works__viewport ul.products::before,
.ind-works .ind-works__viewport ul.products::after {
  content: none !important;
  display: none !important;
}
.ind-works .ind-works__viewport ul.products li.product {
  flex: 0 0 clamp(212px, 23.5%, 258px);
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* Scrollbar (WebKit). */
.ind-works .ind-works__viewport ul.products::-webkit-scrollbar { height: 7px; }
.ind-works .ind-works__viewport ul.products::-webkit-scrollbar-thumb {
  background: var(--steel-300, #c6ccd2);
  border-radius: 6px;
}
.ind-works .ind-works__viewport ul.products::-webkit-scrollbar-track { background: transparent; }

/* Tighten the theme card's internal rhythm a touch for this compact row and keep
   the price + add-to-basket + "+ Add to quote" comfortably stacked. */
.ind-works .ind-works__viewport ul.products li.product .price {
  margin-top: 6px;
}
.ind-works .ind-works__viewport ul.products li.product .ind-loop-quote {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .ind-works { padding-top: 26px; }
  .ind-works .ind-works__viewport ul.products li.product {
    flex-basis: 78%;
  }
}