/*
 * Charoal layout v8 — 2026-08-20
 * Full tobacco-brand tile grid and larger product cards.
 * This layer intentionally loads after redesign/interactions v7.
 */

/* Tabáky: show every brand at once, with a complete readable name. */
html.charoal-redesign body.id-712 .charoal-subcategory-carousel {
  margin-bottom: clamp(42px, 5vw, 68px);
  overflow: visible;
}

html.charoal-redesign body.id-712 .charoal-subcategory-header {
  margin-bottom: 20px;
}

html.charoal-redesign body.id-712 .charoal-subcategory-controls {
  display: none !important;
}

html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail > li {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: none !important;
}

html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail > li > a {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 17px 15px !important;
}

html.charoal-redesign body.id-712 .charoal-subcategory-rail .image {
  flex: 0 0 112px !important;
  height: 112px !important;
  margin: 0 0 11px !important;
}

html.charoal-redesign body.id-712 .charoal-subcategory-rail .image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 150px !important;
  max-height: 112px !important;
  object-fit: contain !important;
}

html.charoal-redesign body.id-712 .charoal-subcategory-rail :is(.text, .name) {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--charoal-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Larger catalogue cards throughout the store. */
html.charoal-redesign .products-block {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
}

html.charoal-redesign .products-block .product > .p {
  min-height: 510px;
  padding: 18px;
}

html.charoal-redesign .products-block .product .image {
  height: clamp(255px, 23vw, 310px);
}

html.charoal-redesign .products-block .product .p-in {
  padding-top: 18px;
}

html.charoal-redesign .products-block .product .name {
  min-height: 48px;
  font-size: 17px;
  line-height: 1.35;
}

html.charoal-redesign .products-block .product :is(.price, .price-final) {
  font-size: 23px;
}

/* Smart-search results are product cards too. */
html.charoal-redesign .charoal-smart-results-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

html.charoal-redesign .charoal-smart-result-card > .p {
  min-height: 500px;
  padding: 17px;
}

html.charoal-redesign .charoal-smart-result-card .image {
  height: clamp(240px, 22vw, 295px);
}

html.charoal-redesign .charoal-smart-result-card .name {
  font-size: 17px;
}

@media (max-width: 1199px) {
  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html.charoal-redesign .products-block,
  html.charoal-redesign .charoal-smart-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.charoal-redesign .products-block .product .image {
    height: clamp(220px, 31vw, 285px);
  }
}

@media (max-width: 991px) {
  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }

  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail > li > a {
    min-height: 174px !important;
    padding: 14px 12px !important;
  }

  html.charoal-redesign body.id-712 .charoal-subcategory-rail .image {
    flex-basis: 98px !important;
    height: 98px !important;
  }
}

@media (max-width: 767px) {
  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail > li > a {
    min-height: 164px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }

  html.charoal-redesign body.id-712 .charoal-subcategory-rail .image {
    flex-basis: 88px !important;
    height: 88px !important;
    margin-bottom: 9px !important;
  }

  html.charoal-redesign body.id-712 .charoal-subcategory-rail :is(.text, .name) {
    min-height: 36px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html.charoal-redesign .products-block {
    gap: 11px !important;
  }

  html.charoal-redesign .products-block .product > .p {
    min-height: 375px;
    padding: 10px;
  }

  html.charoal-redesign .products-block .product .image {
    height: clamp(160px, 45vw, 205px);
  }

  html.charoal-redesign .products-block .product .name {
    min-height: 40px;
    font-size: 13px;
  }

  html.charoal-redesign .products-block .product :is(.price, .price-final) {
    font-size: 18px;
  }

  html.charoal-redesign .charoal-smart-results-grid {
    gap: 11px;
  }

  html.charoal-redesign .charoal-smart-result-card > .p {
    min-height: 390px;
    padding: 10px;
  }

  html.charoal-redesign .charoal-smart-result-card .image {
    height: clamp(160px, 43vw, 200px);
  }
}

@media (max-width: 374px) {
  html.charoal-redesign body.id-712 ul.subcategories.with-image.charoal-subcategory-rail > li > a {
    min-height: 154px !important;
  }

  html.charoal-redesign .products-block {
    gap: 8px !important;
  }

  html.charoal-redesign .products-block .product > .p {
    min-height: 360px;
    padding: 8px;
  }
}