.visualizer-material-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.visualizer-tile-filters {
  display: grid;
  grid-column: 1;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #dce2dc;
  border-radius: 11px;
  background: #f7f9f6;
}

.visualizer-tile-filters[hidden] {
  display: none;
}

.visualizer-tile-search {
  position: relative;
  display: block;
}

.visualizer-tile-search > span:not(.sr-only) {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #7c877f;
  font-size: 1.1rem;
  transform: translateY(-52%);
}

.visualizer-tile-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 38px;
  border: 1px solid #d7ded8;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: #233128;
  font: inherit;
  font-size: .78rem;
}

.visualizer-tile-search input:focus {
  border-color: #67917a;
  box-shadow: 0 0 0 3px rgba(41, 106, 70, .09);
}

.visualizer-filter-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.visualizer-filter-dropdown {
  position: relative;
  min-width: 0;
}

.visualizer-filter-dropdown summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid #d6ddd7;
  border-radius: 8px;
  background: #fff;
  color: #34473b;
  cursor: pointer;
  font-size: .69rem;
  font-weight: 850;
  list-style: none;
}

.visualizer-filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.visualizer-filter-dropdown summary::after {
  color: #758078;
  content: "⌄";
}

.visualizer-filter-dropdown summary span {
  min-width: 0;
  overflow: hidden;
  color: #647168;
  font-size: .63rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visualizer-filter-dropdown[open] summary {
  border-color: #397654;
  box-shadow: 0 0 0 2px rgba(40, 103, 67, .08);
}

.visualizer-filter-dropdown > div {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: 220px;
  max-height: 270px;
  gap: 3px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #d4ddd6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(25, 42, 32, .2);
}

.visualizer-filter-dropdown:last-child > div {
  right: 0;
  left: auto;
}

.visualizer-filter-chip,
.visualizer-filters-clear {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #d6ddd7;
  border-radius: 999px;
  background: #fff;
  color: #536159;
  cursor: pointer;
  font-size: .67rem;
  font-weight: 800;
}

.visualizer-filter-dropdown .visualizer-filter-chip {
  width: 100%;
  border-color: transparent;
  border-radius: 7px;
  text-align: left;
}

.visualizer-filter-chip:hover,
.visualizer-filter-chip:focus-visible,
.visualizer-filter-chip.is-active {
  border-color: #397654;
  color: #185636;
}

.visualizer-filter-chip.is-active {
  background: #e7f1ea;
}

.visualizer-filter-chip:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.visualizer-filter-chip.is-color::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1px solid rgba(25, 35, 29, .14);
  border-radius: 50%;
  background: var(--filter-colour, #ddd);
  content: "";
  vertical-align: -1px;
}

.visualizer-filters-clear {
  justify-self: start;
  border-color: transparent;
  background: transparent;
  color: #326b4c;
}

.visualizer-filters-clear:disabled {
  cursor: default;
  opacity: .42;
}

.visualizer-picker-empty {
  padding: 34px 12px;
  color: #778179;
  font-size: .78rem;
  text-align: center;
}

.visualizer-picker-load-more {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #b9cbbf;
  border-radius: 10px;
  background: #f3f8f4;
  color: #185636;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
}

.visualizer-picker-load-more:hover,
.visualizer-picker-load-more:focus-visible {
  border-color: #397654;
  background: #e7f1ea;
}

.visualizer-decoration-option img,
.visualizer-hanging-none {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(25, 35, 29, .1);
  border-radius: 7px;
  background: #ebece7;
  object-fit: contain;
}

.visualizer-hanging-none {
  color: #7b857e;
  font-size: .65rem;
  font-weight: 800;
}

.visualizer-decoration-option {
  grid-template-columns: 66px minmax(0, 1fr) 26px;
}

.visualizer-decoration-picker {
  grid-template-columns: minmax(0, 1fr);
}

.visualizer-paint-family {
  margin: 9px 2px 1px;
  color: #69736c;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.visualizer-paint-family:first-child {
  margin-top: 1px;
}
.visualizer-room canvas {
  cursor: pointer;
}

.visualizer-caption-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  text-align: right;
}

.visualizer-caption-actions button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #ced8d0;
  border-radius: 8px;
  background: #fff;
  color: #285f40;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.visualizer-caption-actions button:hover,
.visualizer-caption-actions button:focus-visible {
  border-color: #286743;
  background: #edf4ef;
}

.visualizer-room.is-custom-room {
  background: #252b27;
}

.visualizer-room.is-custom-room .visualizer-canvas-wrap {
  max-width: 100%;
}

.visualizer-custom-hint {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(19, 35, 26, .82);
  color: #fff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.visualizer-custom-hint[hidden],
.visualizer-custom-tools[hidden] {
  display: none;
}

.visualizer-custom-tools {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #dce2dc;
  border-radius: 10px;
  background: #f7f8f5;
}

.visualizer-custom-tools > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.visualizer-custom-tools button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid #d6ded8;
  border-radius: 7px;
  background: #fff;
  color: #53645a;
  cursor: pointer;
  font-size: .69rem;
  font-weight: 800;
}

.visualizer-custom-tools button:hover,
.visualizer-custom-tools button:focus-visible,
.visualizer-custom-tools button.is-active {
  border-color: #286743;
  color: #185636;
}

.visualizer-custom-tools button.is-active {
  background: #e9f2ec;
}

.visualizer-custom-tools p {
  margin: 8px 2px 0;
  color: #748078;
  font-size: .67rem;
  line-height: 1.4;
}

.visualizer-room.is-custom-editing canvas {
  cursor: grab;
  touch-action: none;
}

.visualizer-room.is-custom-dragging canvas {
  cursor: grabbing;
}

.visualizer-room.is-custom-protecting canvas {
  cursor: crosshair;
  touch-action: none;
}

@media (max-width: 520px) {
  .visualizer-caption-actions {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .visualizer-filter-dropdown summary {
    padding-inline: 7px;
  }
}