/* Product dimensions: furniture-form illustration and readable measurement rulers. */
.wf-dimension-visual {
  isolation: isolate;
  width: min(100%, 430px);
  height: 292px;
  border: 1px solid #e0e4d9;
  border-radius: 6px;
  background: #fbfcf9;
  overflow: hidden;
}

.wf-dimension-visual::before {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 45px;
  left: 52px;
  z-index: 0;
  border-top: 1px solid #d8ddd2;
}

.wf-dimension-visual::after {
  content: "";
  position: absolute;
  right: 58px;
  bottom: 38px;
  left: 112px;
  z-index: 0;
  height: 12px;
  border-radius: 50%;
  background: rgba(50, 43, 34, .12);
  filter: blur(5px);
}

.wf-dimension-object {
  top: 54px;
  right: 67px;
  bottom: 61px;
  left: 98px;
  z-index: 2;
  filter: drop-shadow(7px 10px 7px rgba(54, 47, 38, .14));
}

.wf-dimension-object-front,
.wf-dimension-object-side,
.wf-dimension-object-top {
  border-color: #695b48;
  box-shadow: none;
}

.wf-dimension-object-front {
  top: 20px;
  right: 40px;
  background: #d9c096;
}

.wf-dimension-object-front::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(105, 82, 53, .38);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16);
}

.wf-dimension-object-front::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -7px;
  left: 14px;
  height: 6px;
  border-right: 11px solid #6a5944;
  border-left: 11px solid #6a5944;
}

.wf-dimension-object-side {
  bottom: 20px;
  width: 42px;
  background: #b89a6d;
  transform: skewY(-25deg);
}

.wf-dimension-object-side::before {
  content: "";
  position: absolute;
  inset: 10px 8px;
  border: 1px solid rgba(82, 64, 43, .3);
}

.wf-dimension-object-top {
  right: 40px;
  height: 22px;
  background: #ead9bc;
  transform: skewX(-63deg);
}

.wf-dimension-object-top::before {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 9px;
  border-top: 1px solid rgba(105, 82, 53, .3);
}

.wf-dimension-line {
  --wf-ruler: #465b31;
  z-index: 4;
  color: var(--wf-ruler);
  font-size: 12px;
  line-height: 1.15;
}

.wf-dimension-line b {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  background: var(--wf-ruler);
  box-shadow: 0 0 0 3px #fbfcf9;
  font-size: 11px;
}

.wf-dimension-line strong {
  position: relative;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid rgba(70, 91, 49, .28);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(45, 48, 39, .08);
  color: var(--wf-ruler);
  font-size: 13px;
  font-weight: 800;
}

.wf-dimension-line-height {
  --wf-ruler: #2f5c51;
  top: 57px;
  bottom: 59px;
  left: 14px;
  width: 72px;
  flex-direction: column;
  justify-content: center;
  transform: none;
}

.wf-dimension-line-height::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  border-left: 2px solid var(--wf-ruler);
}

.wf-dimension-line-height::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 11px;
  border-top: 2px solid var(--wf-ruler);
  border-bottom: 2px solid var(--wf-ruler);
}

.wf-dimension-line-width {
  --wf-ruler: #5f7024;
  right: 66px;
  bottom: 9px;
  left: 97px;
  height: 45px;
  justify-content: center;
  transform: none;
}

.wf-dimension-line-width::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  left: 0;
  border-top: 2px solid var(--wf-ruler);
}

.wf-dimension-line-width::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 11px;
  border-right: 2px solid var(--wf-ruler);
  border-left: 2px solid var(--wf-ruler);
}

.wf-dimension-line-depth {
  --wf-ruler: #875f2f;
  top: 16px;
  right: 11px;
  width: 132px;
  min-height: 48px;
  justify-content: flex-end;
}

.wf-dimension-line-depth::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 2px;
  width: 105px;
  border-top: 2px solid var(--wf-ruler);
  transform: rotate(-24deg);
  transform-origin: right center;
}

.wf-dimension-line-depth::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--wf-ruler);
  transform: rotate(24deg);
}

@media (max-width: 767px) {
  .wf-dimension-visual {
    height: 255px;
    margin-bottom: 24px;
  }

  .wf-dimension-visual::before {
    right: 18px;
    bottom: 42px;
    left: 38px;
  }

  .wf-dimension-object {
    top: 51px;
    right: 49px;
    bottom: 57px;
    left: 75px;
  }

  .wf-dimension-line-height {
    top: 54px;
    bottom: 55px;
    left: 6px;
    width: 64px;
  }

  .wf-dimension-line-width {
    right: 48px;
    bottom: 6px;
    left: 74px;
  }

  .wf-dimension-line-depth {
    top: 12px;
    right: 4px;
    width: 120px;
  }
}

@media (max-width: 400px) {
  .wf-dimension-visual {
    height: 244px;
  }

  .wf-dimension-object {
    right: 43px;
    bottom: 54px;
    left: 70px;
  }

  .wf-dimension-line strong {
    padding: 4px 5px;
    font-size: 12px;
  }

  .wf-dimension-line-width {
    right: 42px;
    left: 69px;
  }
}