/* cl-home.css: Big Gun's home (templates/home.html), from their measurements at 1440 and in the 390 phone stage:
   the 1200px container with 15px sides, sections 64px top and bottom, black (#141414) and light (#F7F7F7) bands,
   headings in red condensed capitals. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-dark); color: #FFFFFF; }
.cl-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }
.cl-sec { padding: 64px 0; background: var(--site-dark); }
.cl-sec--light { background: var(--site-light); color: var(--site-fg); }
.cl-h2 { color: var(--site-red); font: 700 34px/39.1px var(--site-font-heading); letter-spacing: .68px; text-transform: uppercase; }
.cl-h3 { font: 700 22px/26.4px var(--site-font-heading); letter-spacing: .44px; text-transform: uppercase; }
.cl-lede { margin-top: 8px; font: 400 15px/21.75px var(--site-font-body); }
.cl-more { font: 600 15px/19.5px var(--site-font-body); text-decoration: underline; text-underline-offset: 3px; }
.cl-more:hover { color: var(--site-red); }
.cl-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }

/* ---------- hero: their photo, the copy and the finder on the left ---------- */
.cl-hero { position: relative; min-height: 629px; overflow: hidden; background: var(--site-dark); }
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cl-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 20, 20, .96) 0%, rgba(20, 20, 20, .9) 30%, rgba(20, 20, 20, .45) 50%, rgba(20, 20, 20, 0) 68%); }
.cl-hero__in { position: relative; z-index: 2; padding-top: 71px; padding-bottom: 32px; }
.cl-hero__h { max-width: 540px; font: 700 56px/57.12px var(--site-font-heading); letter-spacing: .56px; text-transform: uppercase; }
.cl-hero__p { max-width: 435px; margin-top: 9px; font: 400 17px/27.2px var(--site-font-body); color: #F2F2F2; }
.cl-hero__finder { width: 640px; min-height: 229px; margin-top: 23px; padding: 25px; background: #1C1C1C; border: 1px solid var(--site-dark-line); color: var(--site-fg); }
.cl-hero__chips { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 24px; border-top: 1px solid var(--site-dark-line); }
.cl-hero__chips li { display: flex; align-items: center; gap: 8px; height: 44px; font: 600 14px/18.2px var(--site-font-body); color: #F2F2F2; }
.cl-hero__chips svg { color: var(--site-red); flex: none; }

/* ---------- shop by vehicle: the classes and the popular machines ---------- */
.cl-card { display: flex; flex-direction: column; height: 100%; background: var(--site-card-bg); border: 1px solid var(--site-card-line); color: var(--site-fg); }
.cl-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cl-card__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 0 16px 0 12px; border-top: 1px solid var(--site-rule-soft); font: 700 16px/18.4px var(--site-font-heading); letter-spacing: .64px; text-transform: uppercase; }
.cl-card__name svg { flex: none; color: var(--site-red); }
.cl-card:hover { border-color: var(--site-red); }
.cl-classes { display: grid; grid-template-columns: 449px 1fr 1fr 1fr; gap: 16px; margin-top: 24px; }
.cl-classes .cl-card img { height: 223px; aspect-ratio: auto; }
.cl-classes .cl-card__name { padding-left: 16px; }
.cl-machines__h { margin-top: 48px; }
.cl-machines__tabs { margin-top: 16px; height: 44px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--site-rule-soft); }
.cl-machines__tabs span { padding-bottom: 10px; border-bottom: 2px solid var(--site-red); margin-bottom: -1px; font: 700 15px/18px var(--site-font-heading); letter-spacing: .6px; text-transform: uppercase; }
.cl-machines__more { display: flex; justify-content: flex-end; align-items: center; height: 44px; margin-top: 16px; }
.cl-machines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 9px; }
.cl-machines .cl-card img { aspect-ratio: 4 / 3; }
.cl-machines .cl-card__name { min-height: 59px; }
.cl-sec__btn { margin-top: 32px; color: var(--site-fg); }

/* ---------- best sellers: our product pages in their dark cards ---------- */
.cl-best { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.cl-prod { display: flex; flex-direction: column; min-height: 583px; background: #1C1C1C; border: 1px solid var(--site-dark-line); }
.cl-prod__img { display: block; background: #FFFFFF; }
.cl-prod__img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.cl-prod__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 28px; }
.cl-prod__tag { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .32); font: 700 13px/15.6px var(--site-font-heading); letter-spacing: .96px; text-transform: uppercase; }
.cl-prod__title { margin-top: 38px; font: 700 16px/21.6px var(--site-font-body); }
.cl-prod__title:hover { color: var(--site-red); }
.cl-prod__fits, .cl-prod__sku { margin-top: 8px; font: 400 14px/19.6px var(--site-font-body); color: #F2F2F2; }
.cl-prod__btn { width: 100%; margin-top: auto; }
.cl-prod:nth-child(n+5) { min-height: 610px; }

/* each band as tall as theirs, so the bands line up with their page */
.cl-veh { min-height: 1354px; }
.cl-bestsec { min-height: 1405px; }
.cl-partsec { min-height: 403px; }
.cl-faq { min-height: 519px; }
.cl-contact { min-height: 197px; }

/* ---------- shop by part ---------- */
.cl-parts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 24px; }
.cl-part { display: flex; flex-direction: column; height: 212px; padding: 9px; background: #1C1C1C; border: 1px solid var(--site-dark-line); }
.cl-part img { width: 100%; height: 123px; object-fit: contain; background: #FFFFFF; }
.cl-part span { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font: 700 16px/18.4px var(--site-font-heading); letter-spacing: .64px; text-transform: uppercase; }
.cl-part svg { flex: none; color: var(--site-red); }
.cl-part:hover { border-color: var(--site-red); }

/* ---------- before you order ---------- */
.cl-faq__grid { display: grid; grid-template-columns: 369px 1fr; gap: 64px; align-items: start; }
.cl-faq__aside { margin-top: 12px; font: 400 15px/21.75px var(--site-font-body); color: #F2F2F2; }
.cl-faq__aside a, .cl-faq__link { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.cl-faq__link { color: var(--site-red); font-weight: 700; }
.cl-faq__list { margin-top: 8px; border-top: 1px solid var(--site-dark-line); }
.cl-faq__item { border-bottom: 1px solid var(--site-dark-line); }
.cl-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; list-style: none; font: 600 17px/20.4px var(--site-font-body); }
.cl-faq__item summary::-webkit-details-marker { display: none; }
.cl-faq__item summary svg { flex: none; color: var(--site-red); transition: transform .2s; }
.cl-faq__item[open] summary svg { transform: rotate(180deg); }
.cl-faq__item p { font: 400 17px/26.35px var(--site-font-body); color: #F2F2F2; }
.cl-faq__item p:last-child { padding-bottom: 16px; }
.cl-faq__item p + p { margin-top: 8px; }
.cl-faq__item:first-child { min-height: 186px; }

/* ---------- the band to our inbox, where their sign-up sits ---------- */
.cl-contact__in { display: grid; grid-template-columns: 503px auto; gap: 64px; align-items: center; justify-content: start; }
.cl-contact__go { display: flex; gap: 8px; }
.cl-contact__mail { display: none; height: 48px; padding: 0 12px; background: var(--site-field-bg); border: 1px solid #B3B8BF; color: var(--site-fg); font: 400 16px/46px var(--site-font-body); }
.cl-contact__p { margin-top: 8px; font: 400 15px/21.75px var(--site-font-body); color: #F2F2F2; }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-sec { padding: 48px 0; }
  .cl-h2 { font-size: 24px; line-height: 28px; }
  .cl-hero::before { bottom: auto; height: 176px; background: linear-gradient(180deg, rgba(20, 20, 20, .4) 0%, rgba(20, 20, 20, .05) 35%, rgba(20, 20, 20, .2) 65%, rgba(20, 20, 20, .95) 100%); }
  .cl-part img { height: 117px; }
  .cl-hero { min-height: 797px; }
  .cl-veh { min-height: 1105px; }
  .cl-bestsec { min-height: 754px; }
  .cl-partsec { min-height: 789px; }
  .cl-faq { min-height: 647px; }
  .cl-contact { min-height: 295px; }
  .cl-prod:nth-child(n+5) { min-height: 582px; }
  .cl-machines__h { margin-top: 47px; font-size: 19px; line-height: 22px; }
  .cl-machines { margin-top: 8px; }
  .cl-machines .cl-card img { aspect-ratio: 1; }
  .cl-classes .cl-card__name { min-height: 51px; }
  .cl-classes .is-wide .cl-card__name { min-height: 68px; }
  .cl-faq__list { margin-top: 0; }
  .cl-parts { margin-top: 23px; }
  .cl-hero__img { position: static; height: 176px; }
  .cl-hero__in { padding-top: 0; padding-bottom: 24px; }
  .cl-hero__h { max-width: 320px; font-size: 32px; line-height: 32.6px; }
  .cl-hero__p { margin-top: 8px; font-size: 15px; line-height: 21.75px; }
  .cl-hero__finder { width: auto; min-height: 321px; margin-top: 16px; padding: 0 16px 16px; }
  .cl-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 16px; }
  .cl-hero__chips li { height: 52px; }
  .cl-classes { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cl-classes .is-wide { grid-column: 1 / -1; }
  .cl-classes .cl-card img { height: auto; aspect-ratio: 1; }
  .cl-classes .is-wide .cl-card img { aspect-ratio: 2; }
  .cl-classes .cl-card__name { padding: 0 8px; font-size: 14px; }
  .cl-machines { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--site-gutter)); margin-right: calc(-1 * var(--site-gutter)); padding: 0 var(--site-gutter); gap: 12px; }
  .cl-machines li { flex: 0 0 156px; scroll-snap-align: start; }
  .cl-machines .cl-card__name { min-height: 62px; padding: 6px 8px 6px 12px; font-size: 14px; line-height: 16px; }
  .cl-best, .cl-machines { scroll-padding: 0 var(--site-gutter); }
  .cl-best { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px calc(-1 * var(--site-gutter)) 0; padding: 0 var(--site-gutter); gap: 12px; }
  .cl-prod { flex: 0 0 223px; min-height: 582px; scroll-snap-align: start; }
  .cl-faq__grid, .cl-contact__in { grid-template-columns: 1fr; gap: 32px; }
  .cl-parts { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cl-part { height: 206px; }
  .cl-contact__in { gap: 7px; }
  .cl-contact__p { min-height: 44px; }
  .cl-faq__item:first-child { min-height: 239px; }
  .cl-contact__go { display: grid; gap: 8px; }
  .cl-contact__mail { display: block; }
  .cl-contact .cl-btn { width: 100%; }
}

/* the finder card on desktop as before kit 0.9.4 gave the band its three tabs (2026-10-30, as bakflip.ca 13ac5b5d):
   the tabs on the heading row and Year, Make, Model and Go on a row of their own across the card. On one row with
   the tabs the fields were 25px. Layout only, the phone keeps the kit's own stack. These name kit classes (doctor
   check 13) until the kit's band stacks itself in a narrow box. */
@media (min-width: 980px) {
  .cl-hero__finder .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .cl-hero__finder .kit-band__panels { flex-basis: 100%; }
}

}