/* RAMP Showroom — biblioteca vetorial clássica oficial. */
:root {
  --ramp-category-active: #dcecf8;
  --ramp-category-active-border: #78a7c7;
}

html body #showroomCategoryChips {
  justify-content: flex-start !important;
  scroll-padding-inline: 31px !important;
  padding-inline: 31px !important;
}

.categoryStripShell {
  position: relative !important;
  min-width: 0 !important;
}

.categoryScrollArrow {
  position: absolute !important;
  z-index: 8 !important;
  top: 50% !important;
  width: 27px !important;
  height: 34px !important;
  padding: 0 0 3px !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(226, 239, 230, .55)) !important;
  box-shadow: 0 5px 14px rgba(31, 49, 37, .14), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  color: rgba(33, 73, 47, .78) !important;
  font: 500 24px/1 system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

.categoryScrollArrowPrev { left: 1px !important; }
.categoryScrollArrowNext { right: 1px !important; }
.categoryScrollArrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.06) !important;
  box-shadow: 0 7px 18px rgba(31, 49, 37, .18), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}
.categoryScrollArrow:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}
.categoryStripShell:not(.has-overflow) .categoryScrollArrow { display: none !important; }

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon] {
  position: relative !important;
  display: flex !important;
  flex: 0 0 57px !important;
  min-width: 57px !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 27px 2px 1px !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid rgba(88, 103, 118, .22) !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(232, 241, 235, .48)) !important;
  box-shadow: 0 5px 14px rgba(31, 49, 37, .10), inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -5px 12px rgba(72, 105, 80, .06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.24) !important;
  backdrop-filter: blur(14px) saturate(1.24) !important;
  color: #1f2937 !important;
  font-size: 6.75px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow: hidden !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease !important;
  scroll-snap-align: start !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon]::before { display: none !important; }

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon] .categoryChipLabel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: center !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon]::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 50% !important;
  width: 25px !important;
  height: 25px !important;
  transform: translateX(-50%) !important;
  background: var(--category-icon-svg) center / contain no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button.hasCustomCategoryImage[data-ramp-category-icon]::after {
  background-image: var(--custom-category-image) !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(94, 132, 158, .52) !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon].active {
  border-color: var(--ramp-category-active-border) !important;
  background: var(--ramp-category-active) !important;
  color: #17384e !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips).categoryChips button[data-ramp-category-icon].active::after {
  background: var(--category-icon-svg) center / contain no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips).categoryChips button.hasCustomCategoryImage[data-ramp-category-icon].active::after {
  background-image: var(--custom-category-image) !important;
}

html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon]:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

body .categoryOverview .quickCatalogFilters {
  grid-template-columns: minmax(96px, .62fr) minmax(180px, 1.15fr) minmax(180px, 1.15fr) minmax(150px, .9fr) !important;
  align-items: center !important;
}

body label.hasVectorTaxonomyIcon:not(.hasCustomSubcategoryImage) {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body label.hasVectorTaxonomyIcon:not(.hasCustomSubcategoryImage)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 11px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 15px !important;
  height: 15px !important;
  background: var(--taxonomy-icon-svg) center / contain no-repeat !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
body label.hasVectorTaxonomyIcon:not(.hasCustomSubcategoryImage) select { padding-left: 34px !important; }

@media (max-width: 760px) {
  html body #showroomCategoryChips {
    scroll-padding-inline: 27px !important;
    padding-inline: 27px !important;
  }
  .categoryScrollArrow {
    width: 24px !important;
    height: 31px !important;
    font-size: 21px !important;
  }
  html body :is(#showroomCategoryChips, #brandCategoryChips) {
    gap: 5px !important;
    padding: 1px !important;
  }
  html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon] {
    flex-basis: 50px !important;
    min-width: 50px !important;
    min-height: 45px !important;
    height: 45px !important;
    padding: 23px 2px 1px !important;
    border-radius: 8px !important;
    font-size: 6.3px !important;
    line-height: 1 !important;
  }
  html body :is(#showroomCategoryChips, #brandCategoryChips) button[data-ramp-category-icon]::after {
    top: 1px !important;
    width: 20px !important;
    height: 20px !important;
  }
  body .categoryOverview .quickCatalogFilters {
    grid-template-columns: minmax(72px, .62fr) minmax(0, 1.38fr) !important;
    align-items: center !important;
  }
  body label.hasVectorTaxonomyIcon:not(.hasCustomSubcategoryImage)::before {
    left: 9px !important;
    width: 13px !important;
    height: 13px !important;
  }
  body label.hasVectorTaxonomyIcon:not(.hasCustomSubcategoryImage) select { padding-left: 29px !important; }
}