/*
** HT Homepage Categories Design System
** Matching User Mockup Exactly
*/

:root {
  --ink: #141416;
  --soft: #65656b;
  --line: #1c1c1e;
  --ls: #d8d6d2;
  --paper: #ffffff;
  --sand: #f2f0ec;
  --red: #d81f30;
  --red2: #a5121f;
  --gap: 18px;
  color-scheme: light;
}

section.cats {
  padding: 56px 0 64px !important;
  border-top: 2px solid var(--line) !important;
  border-bottom: 2px solid var(--line) !important;
  background: var(--paper) !important;
  position: relative !important;
  width: 100% !important;
}

.cats .in {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.cats .hd {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}

.cats .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--red) !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .14em !important;
  margin-bottom: 10px !important;
}

html[dir=rtl] .cats .eyebrow,
[dir=rtl] .cats .eyebrow {
  letter-spacing: 0 !important;
}

.cats .eyebrow::before {
  content: '' !important;
  width: 34px !important;
  height: 3px !important;
  background: var(--red) !important;
  flex: none !important;
}

.cats h2 {
  margin: 0 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}

.cats .sub {
  margin: 10px 0 0 !important;
  color: var(--soft) !important;
  font-size: 14.5px !important;
  max-width: 520px !important;
  line-height: 1.7 !important;
}

.cats .ctrl {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cats .arr {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid var(--ink) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: .15s !important;
  padding: 0 !important;
  outline: none !important;
}

.cats .arr:hover:not(:disabled) {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #ffffff !important;
}

.cats .arr:disabled {
  opacity: .3 !important;
  cursor: default !important;
}

html[dir=rtl] .cats .arr svg,
[dir=rtl] .cats .arr svg {
  transform: scaleX(-1) !important;
}

.cats .track {
  display: flex !important;
  gap: var(--gap, 18px) !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 2px !important;
  padding-inline-start: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.cats .track::-webkit-scrollbar {
  display: none !important;
}

.cats .card {
  position: relative !important;
  flex: 0 0 calc((100% - 3 * var(--gap, 18px)) / 4) !important;
  height: 360px !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: var(--bg, #222) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: 2px solid var(--line) !important;
  box-sizing: border-box !important;
}

.cats .card .img {
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--img) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transition: transform .5s ease !important;
}

.cats .card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.78) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.cats .card .art {
  position: absolute !important;
  top: 22% !important;
  inset-inline: 0 !important;
  margin: auto !important;
  width: 46% !important;
  opacity: .16 !important;
  transition: transform .5s ease, opacity .3s !important;
  pointer-events: none !important;
}

.cats .card:hover .img,
.cats .card:hover .art {
  transform: scale(1.07) !important;
}

.cats .card:hover .art {
  opacity: .28 !important;
}

.cats .num {
  position: absolute !important;
  top: 16px !important;
  inset-inline-start: 18px !important;
  z-index: 2 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  font-family: 'Poppins', sans-serif !important;
  opacity: .85 !important;
  color: #ffffff !important;
}

.cats .txt {
  position: relative !important;
  z-index: 2 !important;
  padding: 22px 22px 24px !important;
}

.cats .txt h3 {
  margin: 0 0 14px !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  text-transform: capitalize !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

.cats .go {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  position: relative !important;
  padding-bottom: 6px !important;
  color: #ffffff !important;
}

html[dir=rtl] .cats .go,
[dir=rtl] .cats .go {
  letter-spacing: 0 !important;
  font-size: 14px !important;
}

.cats .go::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  inset-inline-start: 0 !important;
  width: 34px !important;
  height: 3px !important;
  background: var(--red) !important;
  transition: width .3s !important;
}

.cats .card:hover .go::after {
  width: 100% !important;
}

.cats .go svg {
  transition: transform .25s !important;
}

html[dir=rtl] .cats .go svg,
[dir=rtl] .cats .go svg {
  transform: scaleX(-1) !important;
}

.cats .card:hover .go svg {
  transform: translateX(5px) !important;
}

html[dir=rtl] .cats .card:hover .go svg,
[dir=rtl] .cats .card:hover .go svg {
  transform: scaleX(-1) translateX(5px) !important;
}

.cats .prog {
  height: 3px !important;
  background: var(--ls) !important;
  margin-top: 26px !important;
  position: relative !important;
}

.cats .prog i {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  background: var(--red) !important;
  width: 25% !important;
  transition: margin .1s linear !important;
}

@media (max-width: 1024px) {
  .cats .card {
    flex-basis: calc((100% - 2 * var(--gap, 18px)) / 3) !important;
  }
  .cats h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --gap: 12px;
  }
  section.cats {
    padding: 40px 0 46px !important;
  }
  .cats .in {
    padding: 0 14px !important;
  }
  .cats h2 {
    font-size: 26px !important;
  }
  .cats .sub {
    font-size: 13.5px !important;
  }
  .cats .hd {
    margin-bottom: 20px !important;
  }
  .cats .arr {
    width: 42px !important;
    height: 42px !important;
  }
  .cats .card {
    flex-basis: 78% !important;
    height: 300px !important;
  }
  .cats .txt h3 {
    font-size: 21px !important;
  }
}

@media (max-width: 420px) {
  .cats .card {
    flex-basis: 84% !important;
  }
}