.tt-categories {
  background: #FFFFFF;
  padding: 24px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
}

/* Match slideshow width (1704) and break out of the bootstrap .container.
   Use min() so the block never exceeds viewport width on tablet/intermediate sizes. */
.tt-categories--breakout {
  position: relative;
  width: min(1704px, 100vw);
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.tt-categories *,
.tt-categories *::before,
.tt-categories *::after {
  box-sizing: border-box;
}

.tt-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 408px);
  grid-auto-rows: 208px;
  column-gap: 24px;
  row-gap: 16px;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}

.tt-categories__card {
  position: relative;
  display: block;
  width: 408px;
  height: 208px;
  border-radius: 24px;
  overflow: hidden;
  background-color: #4A3426;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #FFFFFF;
  isolation: isolate;
}

.tt-categories__card:hover,
.tt-categories__card:focus,
.tt-categories__card:active {
  text-decoration: none;
  color: #FFFFFF;
}

.tt-categories__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(33deg, rgba(0, 0, 0, 1) 0%, rgba(102, 102, 102, 0) 98%);
  pointer-events: none;
  z-index: 1;
}

.tt-categories__content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.tt-categories__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 120%;
  color: #FFFFFF;
  margin: 0;
  display: block;
}

.tt-categories__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #EAEAEA;
  margin: 8px 0 0 0;
  display: block;
  max-width: 210px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tt-categories__card--all {
  background-color: #4A3426;
  background-image: none;
}

.tt-categories__card--all .tt-categories__overlay {
  display: none;
}

.tt-categories__all-img {
  position: absolute;
  width: 600px;
  height: 600px;
  top: -94px;
  left: 89px;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* Below desktop hero width (1704 + side gutters): grow cards fluidly within container */
@media (max-width: 1720px) {
  .tt-categories {
    padding: 24px 16px;
  }
  .tt-categories__grid {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
  .tt-categories__card {
    width: 100%;
  }
}

/* Tablet (above mobile breakpoint): 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
  .tt-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Mobile (Figma frame 390 - main, node 744:49772) ---------- */
@media (max-width: 768px) {
  /* Break out to full viewport width to escape bootstrap container/col padding */
  .tt-categories--breakout {
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .tt-categories {
    padding: 16px 16px;
  }

  .tt-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 124px;
    column-gap: 14px;
    row-gap: 8px;
    width: auto;
    max-width: none;
  }

  .tt-categories__card {
    width: 100%;
    height: 124px;
    border-radius: 16px;
  }

  .tt-categories__overlay {
    background: linear-gradient(-57deg, rgba(0, 0, 0, 1) 5%, rgba(102, 102, 102, 0) 100%);
  }

  /* Аксесуари uses an inverted-direction gradient on mobile per Figma */
  .tt-categories__card[style*="accessories-173d89"] .tt-categories__overlay {
    background: linear-gradient(213deg, rgba(102, 102, 102, 0) 2%, rgba(0, 0, 0, 1) 100%);
  }

  /* Cards WITH subtitle: title 51px from top, subtitle bottom 8px from card bottom */
  .tt-categories__content {
    left: 16px;
    right: 16px;
    bottom: 8px;
  }

  /* Cards WITHOUT subtitle: title sits 16px from card bottom (Figma layout) */
  .tt-categories__card--no-subtitle .tt-categories__content {
    bottom: 16px;
  }

  .tt-categories__title {
    font-size: 16px;
    line-height: 140%;
  }

  .tt-categories__subtitle {
    font-family: 'Chivo', 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 150%;
    margin-top: 7px;
    max-width: 140px;
  }

  /* Mobile order: in Figma mobile Червоний sits before Зелений (slots 3-4 swap).
     Need explicit order on every card so the rest don't drift. */
  .tt-categories__card:nth-child(1) { order: 1; } /* Пуер */
  .tt-categories__card:nth-child(2) { order: 2; } /* Улун */
  .tt-categories__card:nth-child(3) { order: 4; } /* Зелений (slot 4) */
  .tt-categories__card:nth-child(4) { order: 3; } /* Червоний (slot 3) */
  .tt-categories__card:nth-child(5) { order: 5; } /* Білий */
  .tt-categories__card:nth-child(6) { order: 6; } /* Посуд */
  .tt-categories__card:nth-child(7) { order: 7; } /* Аксесуари */
  .tt-categories__card:nth-child(8) { order: 8; } /* Всі категорії */

  /* "Всі категорії" image on mobile: 200×200, top:-38, left:0 */
  .tt-categories__all-img {
    width: 200px;
    height: 200px;
    top: -38px;
    left: 0;
  }
}