.product-like-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #cbdde5;
  border-radius: 999px;
  background: #fffdf2;
  box-shadow: 0 2px 0 rgba(23, 67, 111, .1);
  color: #678196;
  font: 600 11px/1 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.product-like-button > span:first-child { color: #91a8b6; font-size: 14px; }
.product-like-button:hover { transform: translateY(-1px); border-color: #e99aa5; background: #fff7f7; }
.product-like-button[aria-pressed="true"] { border-color: #edabb2; background: #fff0f2; color: #c95167; }
.product-like-button[aria-pressed="true"] > span:first-child { color: #df657b; }
.product-like-button:focus-visible { outline: 3px solid #f0c365; outline-offset: 2px; }
.product-like-button:disabled { opacity: .65; cursor: wait; }

/* Keep the desk mug above the floor link without trapping it in the room layer. */
.floor .room { z-index: auto; }
.floor .room .desk { left: 14%; width: 39%; }
.floor .room .workstation { left: 12%; }
.floor-like-button {
  position: absolute;
  z-index: 12;
  right: calc(47% + 12px);
  bottom: 17%;
  width: clamp(24px, 4.5%, 40px);
  font-size: 9px;
}
:is(.floor-like-button, .detail-like-button) {
  flex-direction: column;
  gap: 1px;
  min-height: 38px;
  padding: 7px 3px 4px;
  border: 3px solid #245072;
  border-top-width: 4px;
  border-radius: 3px 3px 10px 10px;
  background: #fff2c5;
  box-shadow: inset 3px 0 0 #fffbea, 2px 3px 0 rgba(23, 67, 111, .2);
  color: #345675;
  transform: rotate(-3deg);
}
:is(.floor-like-button, .detail-like-button)::before {
  content: "";
  position: absolute;
  top: 5px;
  right: -12px;
  width: 12px;
  height: 19px;
  border: 3px solid #245072;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  box-shadow: 2px 2px 0 rgba(23, 67, 111, .12);
}
:is(.floor-like-button, .detail-like-button) > span:first-child { color: #b38b63; font-size: 14px; }
:is(.floor-like-button, .detail-like-button) > [data-like-count-value] { max-width: 100%; overflow-wrap: anywhere; }
.floor-like-button > [data-like-count-value] { font-size: 8px; }
:is(.floor-like-button, .detail-like-button):hover {
  border-color: #245072;
  background: #ffe5a0;
  transform: rotate(0) translateY(-2px);
}
:is(.floor-like-button, .detail-like-button)[aria-pressed="true"] {
  border-color: #245072;
  background: #ffd1b7;
  color: #8d4651;
}
:is(.floor-like-button, .detail-like-button)[aria-pressed="true"] > span:first-child { color: #cd5369; }
.detail-like-button {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  margin: 0 16px 7px 5px;
  padding: 6px 4px;
  gap: 3px;
  font-size: 11px;
  box-shadow: 2px 3px 0 rgba(23, 67, 111, .2);
}
.detail-like-button::before { top: 8px; right: -15px; width: 15px; height: 24px; }
.detail-like-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8px;
  right: -14px;
  bottom: -5px;
  height: 8px;
  border: 2px solid #245072;
  border-radius: 50%;
  background: #e2f1f4;
  box-shadow: 0 2px 0 rgba(23, 67, 111, .12);
}
.detail-like-button > span:first-child { font-size: 19px; }
.category-like-button { flex: none; }

@media (max-width: 720px) {
  .floor .room .desk { left: 12%; width: 41%; }
  .floor .room .workstation { left: 11%; }
  .floor-like-button { right: calc(47% + 9px); bottom: 29%; width: 24px; min-height: 31px; padding: 4px 2px 3px; border-width: 2px; border-top-width: 3px; }
  .floor-like-button::before { top: 4px; right: -9px; width: 9px; height: 15px; border-width: 2px; }
  .floor-like-button > span:first-child { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.floor-like-button, .detail-like-button) { transition: none; }
}