/* ---------------------------------------------------------------------------
 * Recommended tools cross-sell — template-parts/shop/recommended-tools.php
 * ---------------------------------------------------------------------------
 * Always exactly 3 products (see xshield1_get_recommended_tools() in
 * inc/shop/shop-tools.php). No prev/next buttons on any screen size —
 * removed per request. Below the "larger screens" breakpoint, only one
 * card is visible at a time and the track is swipeable (native horizontal
 * scroll + scroll-snap, no JS needed); at/above it, all 3 show at once as
 * a 3-column grid that fills the same width as the PET/TPU product image
 * above it (both sit inside .xs-vehicle-result, which is the thing that
 * actually constrains the width — max-width: 1040px, padding: 0 24px, see
 * template-parts/shop/vehicle-result.php — this file doesn't need to
 * duplicate that number anywhere, plain 100%-width elements naturally
 * match it already).
 * ------------------------------------------------------------------------ */

.xs-recommended-tools {
  margin-top: var(--xs-space-6, 32px);
  padding-top: var(--xs-space-5, 24px);
  border-top: var(--xs-border-width, 1px) solid var(--xs-color-border, #e5e5e5);
}

.xs-recommended-tools[hidden] {
  display: none;
}

.xs-recommended-tools__title {
  margin: 0 0 16px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--xs-color-text, #171717);
  text-align: center;
}

.xs-recommended-tools__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* room for any scrollbar so it doesn't clip the last card */
}

/* Hide the scrollbar itself — swiping is the intended interaction on the
   screen sizes where scrolling is even possible, not a visible scrollbar
   track. */
.xs-recommended-tools__track {
  scrollbar-width: none;
}
.xs-recommended-tools__track::-webkit-scrollbar {
  display: none;
}

.xs-rt-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Mobile default: one full-width card visible at a time, swipe for the
     next — overridden to a 3-column grid below. */
  flex: 0 0 100%;
  width: 100%;
}

.xs-rt-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: var(--xs-border-width, 1px) solid var(--xs-color-border, #e5e5e5);
  margin-bottom: 8px;
}

.xs-rt-card__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--xs-color-text, #171717);
  /* Clamp to 2 lines so uneven title lengths don't stagger card heights. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xs-rt-card__price {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--xs-color-text-muted, #595959);
}

/*
 * Add to Cart — matches the main purchase-panel button's exact style
 * (.xs-btn / .xs-btn--primary overrides in template-parts/shop/vehicle-result.php)
 * rather than the theme-wide base.css defaults, since that's the button a
 * shopper sees right above this section and the two should read as the
 * same control: solid red, white uppercase text, same weight/letter-
 * spacing, full width of its own column.
 */
.xs-rt-card__add {
  display: block;
  width: 100%;
  max-width: none;
  padding: 16px 24px;
  border: 1px solid #cd151c;
  background: #cd151c;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.xs-rt-card__add:hover {
  background: #a80f15;
  border-color: #a80f15;
}

.xs-rt-card__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * "Shop More Tools" — motorsports shop only (see recommended-tools.php's
 * show_more_tools_link arg). Secondary CTA sitting under the cross-sell
 * track: black outline / uppercase, matching the site's general secondary-
 * button language rather than duplicating the red primary Add to Cart
 * treatment used inside the cards above it.
 */
.xs-recommended-tools__more {
  margin-top: var(--xs-space-5, 24px);
  text-align: center;
}

.xs-recommended-tools__more-link {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.xs-recommended-tools__more-link:hover {
  background: #1a1a1a;
  color: #fff;
}

/* Larger screens: all 3 cards fit at once — 3-column grid instead of a
   swipeable single-card strip, filling the full row width (same width as
   the vehicle photo above) rather than staying a small fixed size. */
@media (min-width: 700px) {
  .xs-recommended-tools__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    overflow-x: visible;
  }
  .xs-rt-card {
    flex: initial;
    width: auto;
  }
}