/* =========================================================
   Manufacturer slider (homepage logos block + SRP "Shop By
   Manufacturer" widget). The same partial renders both surfaces:
   a Swiper carousel for desktop/tablet + a <details> accordion
   for phones. CSS swap at 767px.
   ========================================================= */

.logo-slider-wrapper {
  position: relative;
  overflow: visible;
}

.logo-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.logo-slide {
  /* !important overrides Swiper's own .swiper-horizontal > .swiper-wrapper
     > .swiper-slide { display: block } (specificity (0,1,2)). */
  display: flex !important;
  flex-direction: column;
  justify-content: center; /* vertical center the inner within the slide */
  align-items: stretch;    /* inner fills slide horizontally */
  /* min-height equalizes all slides so short content (text tiles,
     wide-and-thin logos like Polaris) sits vertically centered
     instead of shrinking the slide down to content size. The largest
     logo in inventory needs ~100px (80px max-height image + 20px
     padding) — 120px gives a touch of breathing room. */
  min-height: 100px;
  text-align: center;
  background: #fff;
}

@media (min-width: 1025px) {
  .logo-slide {
    min-height: 120px;
  }
}

.logo-slide-inner {
  /* border-box so width: 100% INCLUDES the padding — otherwise the
     inner box bleeds outside the slide and the centered image gets
     pushed off the right edge by overflow:hidden on .logo-slider. */
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  /* No height — inner sizes to content + padding, then the slide
     (flex-direction: column; justify-content: center) centers it
     vertically within the slide's min-height. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo-slide img {
  max-height: 80px;
  max-width: 100%;
  height: auto;
}

/* Text-only carousel slide for makes without a configured logo. */
.logo-slide--text .logo-slide-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--off-black, #111);
  text-align: center;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.logo-slide--text:hover .logo-slide-name,
.logo-slide--text:focus-visible .logo-slide-name {
  color: var(--accent, #cf1e27);
}

/* Pagination — pulled out of Swiper's default absolute positioning so
   it sits in normal flow below the swiper-wrapper instead of overlaying
   the bottom row of slides. */
.logo-slider .swiper-pagination,
.logo-slider-pagination {
  position: static !important;
  bottom: auto !important;
  margin-top: 20px;
  margin-bottom: 24px;
  line-height: 1;
}

.logo-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d1d5db;
  opacity: 1;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.logo-slider .swiper-pagination-bullet-active {
  background: var(--accent, #cf1e27);
  transform: scale(1.15);
}

@media (min-width: 1025px) {
  .logo-slider-wrapper {
    margin: 0 80px;
  }

  .logo-slide-inner {
    padding: 20px;
  }
}

/* =========================================================
   Mobile-only accordion (phones <= 767px). Swiper carousel
   above hides; this expands.
   ========================================================= */

.logos__accordion {
  display: none;
  background: #fff;
  border: 2px solid var(--accent, #cf1e27);
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .logos__desktop {
    display: none;
  }
  .logos__accordion {
    display: block;
  }
}

.logos__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 17px;
  font-weight: 700;
  color: var(--off-black, #111);
  background: #fff;
  transition: background-color 0.15s ease;
}

.logos__accordion-toggle::-webkit-details-marker { display: none; }
.logos__accordion-toggle::marker                 { display: none; content: ''; }

.logos__accordion[open] .logos__accordion-toggle {
  background: var(--accent, #cf1e27);
  color: #fff;
}

.logos__accordion-label {
  flex: 1 1 auto;
}

.logos__accordion-chevron {
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.logos__accordion[open] .logos__accordion-chevron {
  transform: rotate(180deg);
}

.logos__accordion-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid #eee;
}

.logos__accordion-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-height: 70px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.logos__accordion-item:hover,
.logos__accordion-item:focus-visible {
  border-color: var(--accent, #cf1e27);
}

.logos__accordion-item img {
  max-height: 50px;
  max-width: 100%;
  object-fit: contain;
}

.logos__accordion-item--text {
  color: var(--off-black, #111);
}

.logos__accordion-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.logos__accordion-item--text:hover .logos__accordion-name,
.logos__accordion-item--text:focus-visible .logos__accordion-name {
  color: var(--accent, #cf1e27);
}

/* =========================================================
   Homepage "Get Financing" red bar
   ----------------------------------------------------------
   The block lives as its own top-level entry inside .entry-content
   so it spans the body width naturally — no 100vw breakout trick
   needed (the breakout was causing a horizontal scrollbar because
   100vw includes the OS scrollbar width but the body doesn't).
   The :has() selector scopes the styling to the standalone Get
   Financing CTA only — the SRP/VDP "Get Approved" buttons live
   inside .inv-ctas--* and are deliberately excluded.
   ========================================================= */

[class*="gb-element-"]:has(> a.btn[href*="credit-app"]:not([class*="inv-cta-"]):not([class*="vdp-cta-"])) {
  background: var(--accent, #cf1e27);
  padding: 24px 20px;
  text-align: center;
}

[class*="gb-element-"]:has(> a.btn[href*="credit-app"]:not([class*="inv-cta-"]):not([class*="vdp-cta-"])) > a.btn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: none;
}

[class*="gb-element-"]:has(> a.btn[href*="credit-app"]:not([class*="inv-cta-"]):not([class*="vdp-cta-"])) > a.btn:hover,
[class*="gb-element-"]:has(> a.btn[href*="credit-app"]:not([class*="inv-cta-"]):not([class*="vdp-cta-"])) > a.btn:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: none;
}

[class*="gb-element-"]:has(> a.btn[href*="credit-app"]:not([class*="inv-cta-"]):not([class*="vdp-cta-"])) > a.btn .gb-shape svg path {
  fill: #fff;
}