/* cl-home.css: the home in kingshocks.com's look (templates/home.html), measured at 1440 and in their 390 phone
   stage: the hero photo, the King blue band with the big coilover, the slanted category tiles and the featured
   product cards on black.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- the vehicle band: as on every page from 980px, folded behind their black bar on phones ---------- */
.cl-pick__bar { display: none; }

/* ---------- hero: their video's backdrop, a static photo ---------- */
/* 554 = their 562 less the 8 the kit's vehicle band stands taller than theirs, so the bands below meet theirs */
.cl-hero { position: relative; z-index: 0; height: 554px; background: #333333; overflow: hidden; }
.cl-hero img { width: 100%; height: 100%; object-fit: cover; }
/* the dark wash their video plays under, so the coilover and the band below stand out */
.cl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .62)); }

/* ---------- the blue band: the coilover, "Off-Road Racing Shocks", the six tiles ---------- */
.cl-cats { position: relative; z-index: 1; background: linear-gradient(#005CB8 0, #002E5C 100%); color: #FFFFFF; }
.cl-cats__in { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px 0 130px; }
.cl-cats__shock { position: absolute; top: -71px; left: 41px; width: auto; height: 865px; max-width: none; transform: rotate(45deg); pointer-events: none; }
.cl-cats__h { position: relative; width: 708px; height: 164px; margin: 0 0 30px auto; font: italic 900 100px/100px var(--site-font-heading); text-transform: uppercase; }
.cl-cats__h span { display: block; margin-left: -26px; font-size: 64px; line-height: 64px; font-weight: 700; }
.cl-cats__grid { position: relative; display: grid; grid-template-columns: repeat(3, 233px); row-gap: 6px; width: 778px; margin-left: auto; }
.cl-cats__tile { padding: 0 5px; }
.cl-cats__tile:nth-child(n+4) { transform: translateX(-70px); }
.cl-cats__tile a { position: relative; display: block; height: 240px; overflow: hidden; background: #000000; transform: skewX(-13deg); }
.cl-cats__tile img { position: absolute; top: -24px; left: 50%; width: auto; height: 288px; max-width: none; transform: translateX(-50%) skewX(13deg); transition: filter .2s ease; }
.cl-cats__tile a:hover img { filter: brightness(1.15); }
.cl-cats__tile span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 22px; transform: skewX(13deg); font: 900 22px/22px var(--site-font-body); text-align: center; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }

/* ---------- a featured product: the slanted tab, the photo, the title ---------- */
.cl-feat { background: #111111; color: #FFFFFF; padding-top: 50px; overflow: hidden; }
.cl-feat__tab { position: relative; width: 434px; height: 66px; margin-left: -32px; padding-left: 58px; background: #333333; transform: skewX(-15deg); font: 900 28px/66px var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; }
.cl-feat__tab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 44px; margin-left: 6px; background: linear-gradient(90deg, #333333 0 14px, transparent 14px 26px, #333333 26px 40px, transparent 40px); }
.cl-feat__slide { display: grid; grid-template-columns: 680px 680px; justify-content: center; align-items: center; margin-top: 20px; padding: 100px 40px; }
.cl-feat__img img { width: 680px; height: auto; }
.cl-feat__text { align-self: start; padding-right: 50px; }
.cl-feat--right .cl-feat__img { order: 2; }
/* their slider stands as tall as its tallest slide: the space under a shorter first slide */
.cl-feat__title { position: relative; margin-bottom: 10px; padding-bottom: 8px; font: 900 36px/72px var(--site-font-heading); text-transform: uppercase; }
.cl-feat__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 8px; background: var(--site-accent); }
.cl-feat__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 46px; margin-top: 20px; padding: 0 20px; border: 2px solid var(--site-accent); color: #FFFFFF; font: 400 16px/32px var(--site-font-body); transition: background-color .2s ease; }
.cl-feat__btn:hover { background: var(--site-accent); }

/* ---------- phones: their stage of 390 ---------- */
@media (max-width: 979.98px) {
  .cl-js .cl-pick__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 7px 0 15px; background: #000000; color: #FFFFFF; }
  .cl-pick__label { max-width: 170px; font: 500 13px/15px var(--site-font-heading); letter-spacing: 2px; text-transform: uppercase; }
  .cl-pick__label strong { display: block; font-weight: 900; letter-spacing: .5px; }
  .cl-pick__btn { flex: none; min-width: 195px; min-height: 40px; padding: 0 16px; background: var(--site-accent); color: #FFFFFF; font: 700 15px/20px var(--site-font-heading); letter-spacing: .5px; text-transform: uppercase; }
  .cl-pick__btn:hover { background: var(--site-accent-strong); }
  .cl-js .cl-pick:not(.is-open) .cl-pick__fold { display: none; }

  .cl-hero { height: 136px; }
  .cl-hero::after { display: none; }

  .cl-cats { background: #111111; }
  .cl-cats__in { padding: 15px 10px; }
  .cl-cats__shock { display: none; }
  .cl-cats__h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cl-cats__grid { grid-template-columns: 1fr 1fr; row-gap: 10px; width: auto; }
  .cl-cats__tile:nth-child(n+4) { transform: none; }
  .cl-cats__tile a { height: 100px; transform: none; }
  .cl-cats__tile img { top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
  .cl-cats__tile span { transform: none; padding: 0 8px; }

  .cl-feat__tab { width: 290px; height: 82px; margin-left: -30px; padding: 5px 30px 5px 60px; font-size: 19px; line-height: 36px; }
  .cl-feat__slide { grid-template-columns: 1fr; margin-top: 20px; padding: 20px 30px 40px; }
  .cl-feat__img img { width: 100%; }
  .cl-feat--right .cl-feat__img { order: 0; }
  .cl-feat__text { padding-right: 0; }
  .cl-feat__title { font-size: 26px; line-height: 52px; }

}

}