/* cl-home.css: the home (templates/home.html) in Rancho's look, measured on their home at 1440 and at 390.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { display: flex; flex-direction: column; background: var(--site-bg); color: var(--site-fg); }

/* the section headings: WinnerSans ultra-condensed, uppercase */
.cl-h2 { font: 500 68.4px/68.4px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

/* ---------- the hero: their first slide, the line and Shop Now over the photo ---------- */
.cl-hero { order: -1; position: relative; height: 576px; background: var(--site-dark); overflow: hidden; }
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-hero__in { position: relative; max-width: 1050px; margin: 0 auto; padding: 95px 0 0; }
.cl-hero__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 144px; height: 41px; margin-top: 27px; padding: 0 20px; background: var(--site-accent); color: var(--site-accent-fg); font: 700 11.7px/1 var(--site-font-wide); letter-spacing: 1.8px; text-transform: uppercase; }
.cl-hero__btn:hover { background: var(--site-accent-hover); }

/* ---------- the vehicle band, set over the hero's foot as their finder is ---------- */
.cl-finder { position: relative; z-index: 2; width: 1224px; max-width: 100%; margin: -42px auto 20px; }
.cl-finder__toggle { display: none; }

/* ---------- popular products ---------- */
.cl-products { width: 1224px; max-width: 100%; margin: 0 auto; padding: 72px 0 71px; }
.cl-products .cl-h2 { margin-bottom: 55px; }
.cl-products__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.cl-product { display: flex; flex-direction: column; min-height: 374px; padding: 18px 27px 0; border: 1px solid var(--site-tile-line); margin-right: -1px; background: var(--site-tile-bg); }
.cl-product__img { display: block; aspect-ratio: 300 / 245; }
.cl-product__img img { width: 100%; height: 100%; object-fit: contain; background: var(--site-photo-mat); }
.cl-product__sku { margin-top: 12px; font: 400 16.2px/25.92px var(--site-font-body); letter-spacing: 0.45px; color: var(--site-fg); }
.cl-product__name { font: 700 16.2px/25.92px var(--site-font-body); letter-spacing: 0.45px; }
.cl-product__name a:hover { color: var(--site-accent); }
.cl-product__btn { margin: auto -27px 0; }

/* ---------- the search band, where their dealer finder sits ---------- */
.cl-search { min-height: 245px; padding: 59px 16px 60px; background: var(--site-dark-2); border-top: 1px solid var(--site-dark-line); text-align: center; }
.cl-search__h { font: 500 43.2px/43.2px var(--site-font-heading); text-transform: uppercase; color: var(--site-on-dark); }
.cl-search__form { display: flex; gap: 5px; width: 504px; max-width: 100%; margin: 27px auto 0; }
.cl-search__form input { flex: 1; min-width: 0; height: 54px; margin: 0; padding: 0 18px; background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-field-line); border-radius: var(--site-radius); font: 400 16px/1 var(--site-font-body); -webkit-appearance: none; appearance: none; }
.cl-search__form input::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-search__form .cl-btn { width: 104px; min-height: 54px; padding: 0; }

/* ---------- phones (measured at 390) ---------- */
@media (max-width: 979.98px) {
  .cl-h2 { font-size: 46px; line-height: 46px; }
  .cl-finder { order: -2; width: auto; margin: 0; }
  .cl-finder__toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 20px; background: var(--site-accent); color: var(--site-accent-fg); font: 700 12px/15px var(--site-font-body); letter-spacing: 2px; text-transform: uppercase; text-align: left; }
  .cl-finder__toggle span { flex: 1; }
  .cl-finder__toggle[aria-expanded="true"] .cl-finder__chev { transform: rotate(180deg); }
  .cl-js .cl-finder__panel:not(.is-open) { display: none; }
  .cl-hero { height: 520px; }
  .cl-hero__in { position: absolute; left: 20px; right: 20px; bottom: 50px; padding: 0; }
  .cl-hero__btn { min-width: 156px; height: 46px; margin-top: 20px; font-size: 13px; letter-spacing: 2px; }
  .cl-products { width: auto; padding: 46px 0 70px; }
  .cl-products .cl-h2 { margin: 0 20px 55px; }
  .cl-products__row { display: flex; gap: 10px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-products__row::-webkit-scrollbar { display: none; }
  .cl-product { flex: none; width: 350px; max-width: calc(100vw - 40px); min-height: 440px; padding: 20px 30px 0; margin: 0; scroll-snap-align: center; }
  .cl-product__sku { font-size: 18px; line-height: 28.8px; }
  .cl-product__name { font-size: 18px; line-height: 28.8px; }
  .cl-product__btn { margin: auto -30px 0; min-height: 52px; }
  .cl-search { min-height: 280px; padding: 80px 20px 60px; }
  .cl-search__h { font-size: 36px; line-height: 36px; }
  .cl-search__form { margin-top: 24px; gap: 6px; }
  .cl-search__form input { height: 60px; }
  .cl-search__form .cl-btn { width: 96px; min-height: 60px; }
}

}