/* cl-home.css: Kooks's home (templates/home.html), dark from the hero to the footer, measured on their home at
   1440 and in the 390 phone stage. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home-page { background: var(--site-dark); }
.cl-home { color: var(--site-dark-fg); background: var(--site-dark); }
.cl-home img { width: 100%; }

/* ---------- the hero: their slider's photo, still, the box of the header over its top ---------- */
.cl-hero { position: relative; height: 846px; overflow: hidden; background: var(--site-dark); }
.cl-hero__img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.cl-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.cl-hero__in { position: relative; z-index: 1; max-width: var(--site-max); margin: 0 auto; padding: 295px 0 0; text-align: center; }
.cl-hero__h { font: 400 90px/100px var(--site-font-heading); letter-spacing: -0.9px; text-transform: uppercase; }
.cl-hero .cl-btn { margin-top: 20px; }

/* ---------- the kit's vehicle band, where their search box sits ---------- */
.cl-home__band { display: flex; flex-direction: column; justify-content: center; min-height: 170px; padding: 20px 40px; }
.cl-home__band > * { width: 100%; max-width: var(--site-max); margin: 0 auto; }

/* ---------- the category tiles ---------- */
.cl-tiles { padding: 52px 40px 175px; }
.cl-tiles__h { font: 400 75px/82px var(--site-font-heading); letter-spacing: -0.75px; text-transform: uppercase; text-align: center; }
.cl-tiles__list { display: grid; grid-template-columns: repeat(5, minmax(0, 256px)); justify-content: center; gap: 20px; margin-top: 50px; }
.cl-tile { display: block; height: 391px; padding: 15px; background: linear-gradient(#242424, #191919); text-align: center; }
.cl-tile__img { aspect-ratio: 1; object-fit: contain; transition: transform 0.25s ease; }
.cl-tile:hover .cl-tile__img { transform: scale(1.04); }
.cl-tile__name { margin-top: 9px; font: 400 28px/36px var(--site-font-heading); letter-spacing: -0.28px; text-transform: uppercase; }

/* ---------- popular parts, where their product carousel sits ---------- */
.cl-rail { padding: 80px 25px 154px; background: linear-gradient(var(--site-dark), #000000); }
.cl-rail__photo--phone { display: none; }
.cl-rail__head { display: flex; align-items: center; gap: 30px; max-width: var(--site-max); margin: 0 auto; }
.cl-rail__h { font: 400 56px/64px var(--site-font-heading); letter-spacing: -0.56px; text-transform: uppercase; }
.cl-rail__all { display: inline-flex; align-items: center; min-height: 46px; padding: 0 30px; border: 1px solid var(--site-dark-fg); font: 400 17px/25px var(--site-font-body); letter-spacing: -0.51px; }
.cl-rail__all:hover { background: var(--site-plate); color: var(--site-plate-fg); }
.cl-rail__list { display: flex; max-width: 1360px; margin: 30px auto 0; }
.cl-rail__slot { flex: 0 1 340px; min-width: 0; padding: 0 15px; }
.cl-rail__slot--photo .cl-rail__photo { height: 530px; object-fit: cover; }
.cl-card { display: flex; flex-direction: column; height: 530px; }
.cl-card__img { display: flex; align-items: center; justify-content: center; height: 312px; padding: 16px; background: var(--cs-photo); border: 1px solid #DCDADA; }
.cl-card__img img { height: 100%; object-fit: contain; }
.cl-card__title { margin-top: 20px; font: 400 18px/26px var(--site-font-body); letter-spacing: -0.34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-card__title a:hover { text-decoration: underline; }
.cl-card__sku { margin-top: 6px; font: 400 13px/18px var(--site-font-body); }
.cl-card__price { margin-top: 12px; font: 400 17px/24px var(--site-font-body); }
.cl-card__btn { margin-top: auto; width: 100%; font-size: 15px; }

/* ---------- the two photo cards ---------- */
.cl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: calc(var(--site-max) + 80px); margin: 0 auto; padding: 0 40px; background: var(--site-dark); }
.cl-cards__card { position: relative; display: block; height: 589px; overflow: hidden; background: #232323; }
.cl-cards__card img { height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cl-cards__card:hover img { transform: scale(1.03); }
.cl-cards__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 60px 30px 31px; background: linear-gradient(rgba(0, 0, 0, 0), #000000); }
.cl-cards__label { font: 400 34px/42px var(--site-font-heading); letter-spacing: -0.34px; text-transform: uppercase; }
.cl-cards__go { display: flex; align-items: center; justify-content: center; width: 48px; height: 46px; background: var(--site-accent); }

/* ---------- phones ---------- */
@media (max-width: 979.98px) {
  .cl-hero { height: 600px; }
  .cl-hero__in { padding: 110px 15px 0; }
  .cl-hero__h { font-size: 44px; line-height: 52px; letter-spacing: -0.44px; }
  .cl-hero .cl-btn { font-size: 16px; }
  .cl-home__band { min-height: 432px; padding: 20px 15px; }

  .cl-tiles { padding: 46px 0 66px; }
  .cl-tiles__h { font-size: 44px; line-height: 52px; letter-spacing: -0.44px; padding: 0 15px; }
  .cl-tiles__list { grid-template-columns: 1fr 1fr; gap: 6px 5px; margin-top: 30px; }
  .cl-tile { height: 340px; padding: 10px; }
  .cl-tile__name { margin-top: 10px; font-size: 24px; line-height: 27px; letter-spacing: -0.24px; }

  .cl-rail { padding: 0 0 76px; }
  .cl-rail__photo--phone { display: block; height: 319px; object-fit: cover; }
  .cl-rail__head { flex-direction: column; align-items: flex-start; gap: 5px; padding: 40px 15px 0; }
  .cl-rail__h { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  .cl-rail__all { font-size: 16px; }
  .cl-rail__list { margin-top: 30px; padding: 0 9px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-rail__slot { flex: 0 0 311px; padding: 0 6px; scroll-snap-align: start; }
  .cl-rail__slot--photo { display: none; }
  .cl-card { height: 508px; }
  .cl-card__img { height: 301px; }

  .cl-cards { grid-template-columns: 1fr; gap: 9px; padding: 0 15px; }
  .cl-cards__card { height: 314px; }
  .cl-cards__foot { padding: 40px 15px 15px; }
  .cl-cards__label { font-size: 24px; line-height: 27px; letter-spacing: -0.24px; }
  .cl-cards__go { width: 40px; height: 40px; }
}

}